MiniMax Design System

---

version: alpha

name: MiniMax-design-analysis

description: MiniMax presents itself as a premium AI infrastructure brand through a striking duality — bold black-pill CTAs and stark white canvas for marketing, paired with vibrant gradient product cards (orange-red, magenta-pink, purple, blue) that turn each model release into a distinctive visual identity. The system uses DM Sans across all surfaces, employs an oversized 80px hero display, anchors major actions in deep near-black pills, and layers content density via a 3-column documentation grid with sidebar nav, prose body, and TOC. Coverage spans the marketing homepage, model showcase pages, developer documentation, and platform pricing surfaces.

colors:

primary: "#0a0a0a"

on-primary: "#ffffff"

primary-soft: "#181e25"

brand-coral: "#ff5530"

brand-magenta: "#ea5ec1"

brand-blue: "#1456f0"

brand-blue-mid: "#3b82f6"

brand-blue-deep: "#1d4ed8"

brand-blue-700: "#17437d"

brand-cyan: "#3daeff"

brand-blue-200: "#bfdbfe"

brand-purple: "#a855f7"

canvas: "#ffffff"

surface: "#f7f8fa"

surface-soft: "#f2f3f5"

hairline: "#e5e7eb"

hairline-soft: "#eaecf0"

ink: "#0a0a0a"

ink-strong: "#000000"

charcoal: "#222222"

slate: "#45515e"

steel: "#5f5f5f"

stone: "#8e8e93"

muted: "#a8aab2"

success-bg: "#e8ffea"

success-text: "#1ba673"

on-dark: "#ffffff"

footer-bg: "#0a0a0a"

typography:

hero-display:

fontFamily: DM Sans

fontSize: 80px

fontWeight: 600

lineHeight: 1.10

letterSpacing: -2px

display-lg:

fontFamily: DM Sans

fontSize: 56px

fontWeight: 600

lineHeight: 1.10

letterSpacing: -1.5px

heading-lg:

fontFamily: DM Sans

fontSize: 40px

fontWeight: 600

lineHeight: 1.20

letterSpacing: -1px

heading-md:

fontFamily: DM Sans

fontSize: 32px

fontWeight: 600

lineHeight: 1.25

letterSpacing: -0.5px

heading-sm:

fontFamily: DM Sans

fontSize: 24px

fontWeight: 600

lineHeight: 1.30

card-title:

fontFamily: DM Sans

fontSize: 20px

fontWeight: 600

lineHeight: 1.40

subtitle:

fontFamily: DM Sans

fontSize: 18px

fontWeight: 500

lineHeight: 1.50

body-md:

fontFamily: DM Sans

fontSize: 16px

fontWeight: 400

lineHeight: 1.50

body-md-bold:

fontFamily: DM Sans

fontSize: 16px

fontWeight: 700

lineHeight: 1.50

body-sm:

fontFamily: DM Sans

fontSize: 14px

fontWeight: 400

lineHeight: 1.50

body-sm-medium:

fontFamily: DM Sans

fontSize: 14px

fontWeight: 500

lineHeight: 1.50

caption:

fontFamily: DM Sans

fontSize: 13px

fontWeight: 400

lineHeight: 1.70

caption-bold:

fontFamily: DM Sans

fontSize: 13px

fontWeight: 600

lineHeight: 1.50

micro:

fontFamily: DM Sans

fontSize: 12px

fontWeight: 400

lineHeight: 1.50

button-md:

fontFamily: DM Sans

fontSize: 14px

fontWeight: 600

lineHeight: 1.40

rounded:

xs: 4px

sm: 6px

md: 8px

lg: 12px

xl: 16px

xxl: 20px

xxxl: 24px

hero: 32px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 20px

xl: 24px

xxl: 32px

xxxl: 40px

section-sm: 48px

section: 64px

section-lg: 80px

hero: 96px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "11px 24px"

button-primary-pressed:

backgroundColor: "{colors.charcoal}"

textColor: "{colors.on-primary}"

button-primary-disabled:

backgroundColor: "{colors.hairline}"

textColor: "{colors.muted}"

button-secondary:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "11px 24px"

border: "1px solid {colors.ink}"

button-tertiary:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "11px 24px"

border: "1px solid {colors.hairline}"

button-link:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.body-sm-medium}"

padding: "8px 0"

button-icon-circular:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.full}"

size: 36px

border: "1px solid {colors.hairline}"

product-card-coral:

backgroundColor: "{colors.brand-coral}"

textColor: "{colors.on-dark}"

rounded: "{rounded.hero}"

padding: "{spacing.xxl}"

product-card-magenta:

backgroundColor: "{colors.brand-magenta}"

textColor: "{colors.on-dark}"

rounded: "{rounded.hero}"

padding: "{spacing.xxl}"

product-card-blue:

backgroundColor: "{colors.brand-blue}"

textColor: "{colors.on-dark}"

rounded: "{rounded.hero}"

padding: "{spacing.xxl}"

product-card-purple:

backgroundColor: "{colors.brand-purple}"

textColor: "{colors.on-dark}"

rounded: "{rounded.hero}"

padding: "{spacing.xxl}"

product-card-photo:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-dark}"

rounded: "{rounded.hero}"

padding: "{spacing.xxl}"

card-base:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xl}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline}"

card-feature:

backgroundColor: "{colors.surface}"

rounded: "{rounded.xl}"

padding: "{spacing.xxl}"

card-recommendation:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.lg}"

border: "1px solid {colors.hairline}"

promo-cta-card:

backgroundColor: "{colors.brand-coral}"

textColor: "{colors.on-dark}"

rounded: "{rounded.hero}"

padding: "{spacing.section}"

text-input:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: "{spacing.sm} {spacing.md}"

border: "1px solid {colors.hairline}"

height: 40px

text-input-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

border: "2px solid {colors.brand-blue-deep}"

text-input-error:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

border: "1px solid #d45656"

search-pill:

backgroundColor: "{colors.surface}"

textColor: "{colors.steel}"

typography: "{typography.body-sm}"

rounded: "{rounded.md}"

padding: "{spacing.xs} {spacing.md}"

height: 36px

border: "1px solid {colors.hairline}"

segmented-tab:

backgroundColor: "transparent"

textColor: "{colors.steel}"

typography: "{typography.button-md}"

rounded: "0"

padding: "{spacing.md} {spacing.lg}"

border: "0 0 2px transparent solid"

segmented-tab-active:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

border: "0 0 2px {colors.ink} solid"

pill-tab:

backgroundColor: "{colors.canvas}"

textColor: "{colors.steel}"

typography: "{typography.body-sm-medium}"

rounded: "{rounded.full}"

padding: "{spacing.xs} {spacing.md}"

border: "1px solid {colors.hairline}"

pill-tab-active:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

rounded: "{rounded.full}"

border: "1px solid {colors.primary}"

badge-success:

backgroundColor: "{colors.success-bg}"

textColor: "{colors.success-text}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-new:

backgroundColor: "{colors.brand-coral}"

textColor: "{colors.on-dark}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-beta:

backgroundColor: "{colors.brand-blue-200}"

textColor: "{colors.brand-blue-deep}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-code:

backgroundColor: "{colors.brand-blue-200}"

textColor: "{colors.brand-blue-deep}"

typography: "{typography.caption-bold}"

rounded: "{rounded.sm}"

padding: "2px 6px"

promo-banner:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.body-sm-medium}"

padding: "{spacing.sm} {spacing.lg}"

data-table:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.md}"

border: "1px solid {colors.hairline}"

data-table-header:

backgroundColor: "{colors.surface}"

textColor: "{colors.steel}"

typography: "{typography.caption-bold}"

padding: "{spacing.sm} {spacing.md}"

data-table-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

padding: "{spacing.md}"

border: "0 0 1px {colors.hairline-soft} solid"

sidebar-nav-item:

backgroundColor: "transparent"

textColor: "{colors.charcoal}"

typography: "{typography.body-sm}"

rounded: "{rounded.sm}"

padding: "{spacing.xs} {spacing.md}"

sidebar-nav-item-active:

backgroundColor: "{colors.surface}"

textColor: "{colors.ink}"

typography: "{typography.body-sm-medium}"

doc-toc-item:

backgroundColor: "transparent"

textColor: "{colors.steel}"

typography: "{typography.body-sm}"

padding: "{spacing.xs} 0"

ai-product-tile:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xxxl}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline}"

footer-region:

backgroundColor: "{colors.footer-bg}"

textColor: "{colors.on-dark}"

typography: "{typography.body-sm}"

padding: "{spacing.section} {spacing.xxl}"

footer-link:

backgroundColor: "transparent"

textColor: "{colors.muted}"

typography: "{typography.body-sm}"

padding: "{spacing.xxs} 0"

hero-band-marketing:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.hero-display}"

rounded: "{rounded.lg}"

padding: "{spacing.hero}"

product-matrix-grid:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.hero}"

padding: "{spacing.xxl}"

ai-product-matrix:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xxxl}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline}"

docs-prose-block:

backgroundColor: "{colors.canvas}"

textColor: "{colors.charcoal}"

typography: "{typography.body-md}"

padding: "{spacing.xxl}"

models-comparison-table:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.md}"

border: "1px solid {colors.hairline}"

testimonial-stat-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.heading-lg}"

padding: "{spacing.xl}"

---

MiniMax stages itself as a Chinese AI infrastructure brand with a sophisticated dual identity. Marketing surfaces and platform pages anchor in stark white canvas with deep-black typographic emphasis — the brand voice is confident, technical, almost editorial. But each model release gets its own vibrant gradient identity card: M2.7 in volcanic coral-red, Music 2.6 in magenta-pink, Hailuo in deep blue, Speech 2.8 in saturated orange-purple. Together these vibrant tiles read like album covers laid out on the homepage — each one declaring its own product personality.

DM Sans anchors every surface from oversized 80px hero displays down to 12px micro labels. The geometric, slightly humanist character of the face suits both the dense documentation surfaces (where 14px body type carries 1.5 line-height for long-form prose) and the high-impact marketing displays (where -2px letter-spacing tightens 80px headlines). Buttons are universally pill-shaped (`rounded-full`) with a sharp two-tier system: black-pill primary (the dominant CTA) and outline-pill secondary. Cards split into two distinct families: vibrant gradient product showcases (32px corner softening) and quiet white documentation cards (16px corner softening).

**Key Characteristics:**

> Source pages: minimax.io/ (homepage), /models/text/m27 (product showcase), platform.minimax.io/docs/guides/models-intro (documentation), /subscribe/token-plan (pricing). Token coverage was identical across all four pages.

**DM Sans** (primary): Geometric variable sans-serif. Used across every surface, every role. Fallbacks: Inter, Helvetica Neue, Helvetica, Arial.

DM Sans was chosen for its dual fluency: it scales cleanly from 80px hero displays (where -2px letter-spacing creates magazine-grade tightness) down to 12px micro labels (where the slightly humanist counters maintain legibility). The face has no italic variant in the brand's deployment — emphasis comes from weight (500/600/700) instead.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.hero-display}` | 80px | 600 | 1.10 | -2px | Homepage hero ("MiniMax Music 2.6") |

| `{typography.display-lg}` | 56px | 600 | 1.10 | -1.5px | Section openers, major page heroes |

| `{typography.heading-lg}` | 40px | 600 | 1.20 | -1px | Sub-page headlines ("Token Plan", "Models Overview") |

| `{typography.heading-md}` | 32px | 600 | 1.25 | -0.5px | Subsection headers ("Full-Stack Model Matrix") |

| `{typography.heading-sm}` | 24px | 600 | 1.30 | 0 | Card titles, feature headers |

| `{typography.card-title}` | 20px | 600 | 1.40 | 0 | Product-card titles, feature-tile headers |

| `{typography.subtitle}` | 18px | 500 | 1.50 | 0 | Section subtitles, lead body |

| `{typography.body-md}` | 16px | 400 | 1.50 | 0 | Primary body text |

| `{typography.body-md-bold}` | 16px | 700 | 1.50 | 0 | Body emphasis |

| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells, navigation |

| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar nav, button labels |

| `{typography.caption}` | 13px | 400 | 1.70 | 0 | Documentation captions, fine print |

| `{typography.caption-bold}` | 13px | 600 | 1.50 | 0 | Badge labels, table-header text |

| `{typography.micro}` | 12px | 400 | 1.50 | 0 | Footer microcopy, chip labels |

| `{typography.button-md}` | 14px | 600 | 1.40 | 0 | Pill button labels |

Marketing pages give product photography and color cards generous breathing room — `{spacing.hero}` (96px) above-the-fold creates visual oxygen for the 80px hero display. Inside documentation, whitespace tightens dramatically: section gaps drop to `{spacing.xxl}` (32px), table rows pack down to `{spacing.md}` (16px), and the sidebar nav uses `{spacing.xs}` (8px) vertical rhythm.

The system runs predominantly flat. Elevation is reserved for sticky panels, dropdowns, and the rare floating CTA.

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow; `{colors.hairline}` border | Default cards, table rows, form inputs |

| 1 (subtle) | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | Card-recommendation, hover-elevated tiles |

| 2 (card) | `rgba(0, 0, 0, 0.08) 0px 4px 6px 0px` | Standard feature cards, dropdowns |

| 3 (atmospheric) | `rgba(0, 0, 0, 0.08) 0px 0px 22px 0px` | Diffuse glow on featured product cards |

| 4 (modal) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | Modals, confirmation dialogs, sticky panels |

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Code chips, micro-controls |

| `{rounded.sm}` | 6px | Compact controls, table cells |

| `{rounded.md}` | 8px | Inputs, secondary buttons, search pill |

| `{rounded.lg}` | 12px | Documentation cards, recommendation tiles |

| `{rounded.xl}` | 16px | Standard feature cards, AI product tiles |

| `{rounded.xxl}` | 20px | Larger feature panels |

| `{rounded.xxxl}` | 24px | AI product tile feature variants |

| `{rounded.hero}` | 32px | Vibrant gradient product cards, promo CTA strip |

| `{rounded.full}` | 9999px | All buttons, all pill tabs, badges |

> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.

**`button-primary`** — Black pill primary CTA, the dominant action across all surfaces.

**`button-secondary`** — Outlined pill secondary action, paired with primary in dual-CTA hero patterns.

**`button-tertiary`** — White-fill quieter pill, used for tertiary nav and informational CTAs.

**`button-link`** — Inline text link styled as a subtle button.

**`button-icon-circular`** — 36×36px circular utility button (carousel arrows, share, copy).

**`product-card-coral`** — M2.7 / Token Plan signature card.

**`product-card-magenta`** — Music 2.6 product showcase.

**`product-card-blue`** — Hailuo Video product showcase.

**`product-card-purple`** — Speech 2.8 / variant product showcase.

**`product-card-photo`** — Dark portrait product card (homepage S2 placement, video-emotion product).

**`card-base`** — Standard documentation/feature card.

**`card-feature`** — Quieter feature panel on light gray.

**`card-recommendation`** — "Recommended Reading" tile in documentation footer.

**`promo-cta-card`** — Bright orange "Refunds of 10%..." promo strip with embedded CTA pill.

**`ai-product-tile`** — White card in the AI Product Matrix grid (Agent, Hailuo Video, MiniMax Audio).

**`text-input`** — Standard text field.

**`text-input-focused`** — Activated state.

**`text-input-error`** — Validation error state.

**`search-pill`** — Documentation top-bar search field.

**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation (Benchmark / Self-Evaluation / Multi-Agent Collaboration on the M2.7 page).

**`pill-tab`** + **`pill-tab-active`** — Pricing-page tab nav (Token Plan / Audio Subscription / Video Package).

**`badge-success`** — Pale-green confirmation badge ("Available", "Active").

**`badge-new`** — Coral "NEW" / "Live" pill for fresh releases.

**`badge-beta`** — Pale-blue "BETA" / informational pill.

**`badge-code`** — Inline code-style chip ("Code", "API").

**`promo-banner`** — Sticky black promotional strip ABOVE the top nav ("Invite & Earn — Rewards for Both!").

**`data-table`** — Documentation models comparison table.

**`data-table-header`** — Top header row of the data table.

**`data-table-row`** — Body rows.

**Top Navigation (Marketing)** — Sticky white bar with logo, link list, and right-side CTAs.

**Top Navigation (Documentation/Platform)** — Compressed nav with center search-pill and right-side account/upgrade CTAs.

**`sidebar-nav-item`** + **`sidebar-nav-item-active`** — Documentation left rail link entries.

**`doc-toc-item`** — Right-rail table-of-contents links.

**`hero-band-marketing`** — Centered hero with massive 80px display + dual-CTA pair.

**`product-matrix-grid`** — 4-column horizontal scroll of vibrant gradient product cards (homepage "Full-Stack Model Matrix").

**`ai-product-matrix`** — 4-column grid of white product tiles below the vibrant matrix (Agent / Hailuo Video / Audio / Video).

**`docs-prose-block`** — Documentation main content area.

**`models-comparison-table`** — Documentation table comparing model sizes and features.

**`testimonial-stat-row`** — Stats strip ("214,000+ Enterprise Clients & Developers", "0+ Countries Served").

**`footer-region`** — Dense black-canvas multi-column footer.

**`footer-link`** — Individual link entry inside the footer column.

| Name | Width | Key Changes |

|---|---|---|

| Mobile (small) | < 480px | Single column. Hero drops to 40px. Pill nav collapses to hamburger. Product matrix horizontal-scroll. Footer 1-column accordion. |

| Mobile (large) | 480 – 767px | Same as small but AI product matrix renders 2-up. |

| Tablet | 768 – 1023px | 2-column AI product matrix. Pill-tab nav returns. Documentation sidebar collapses to drawer. |

| Desktop | 1024 – 1279px | Full 4-column product matrix; 3-column docs grid (sidebar / body / TOC). |

| Wide Desktop | ≥ 1280px | Wider hero gutters, larger product photography, fixed 220px sidebar. |

1. Focus on ONE component at a time. The system has high internal consistency.

2. Reference component names and tokens directly (`{colors.primary}`, `{component-name}-pressed`, `{rounded.full}`) — do not paraphrase.

3. Run `npx @google/design.md lint DESIGN.md` after edits to catch broken refs and contrast issues.

4. Add new variants as separate `components:` entries (`-pressed`, `-disabled`, `-active`).

5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis. Headlines step down `hero-display → display-lg → heading-lg → heading-md → heading-sm`.

6. Keep brand colors (coral, magenta, blue, purple) confined to product-card identity. If a brand color appears on a standard button or generic surface, ask whether it earned that surface.

7. Pill-shaped buttons (`{rounded.full}`) always; squared buttons signal "third-party widget" in this language.