Minimax

Overview

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:**

• Stark monochrome palette — black ({colors.primary}) and white ({colors.canvas}) — broken open by saturated brand-color gradient cards
• Distinct product-color encoding: each model line has its own vibrant brand color (coral M2.7, magenta Music 2.6, blue Hailuo, orange Speech 2.8)
• DM Sans across the entire system; Inter as fallback
• Pill-shaped buttons ({rounded.full}) and pill-shaped tabs everywhere; rectangular forms only inside data tables and dense docs
• Hero typography uses tight 1.10 line-height with -2px letter-spacing for impact
• Documentation surfaces use a 3-column layout: left sidebar nav, center prose body, right table-of-contents
• Black promo banners ({colors.primary}) above the nav for time-bound brand moments

Colors

> 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.

Brand & Accent

• **Brand Coral** ({colors.brand-coral}): Signature high-impact accent. Used on M2.7 product card, "Token Plan" hero band, promo CTA strips, and "NEW" badges. Carries the brand's most attention-grabbing energy.
• **Brand Magenta** ({colors.brand-magenta}): Secondary product-card identity (Music 2.6); used for music/audio product encoding.
• **Brand Blue** ({colors.brand-blue}): Hailuo video product identity; primary blue accent across the system.
• **Brand Blue Deep** ({colors.brand-blue-deep}): Form-control activation, link emphasis.
• **Brand Blue 700** ({colors.brand-blue-700}): Documentation tag and reference text color.
• **Brand Cyan** ({colors.brand-cyan}): Atmospheric blue for product gradients and decorative wash.
• **Brand Blue 200** ({colors.brand-blue-200}): Code badges, info-tag backgrounds.
• **Brand Purple** ({colors.brand-purple}): Speech 2.8 and minor purple-product identity; gradient mate for magenta cards.

Surface

• **Canvas White** ({colors.canvas}): Primary page background and card surface.
• **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest, sidebar-nav active state.
• **Surface Soft** ({colors.surface-soft}): Quieter section divisions.
• **Hairline** ({colors.hairline}): 1px input border and primary divider.
• **Hairline Soft** ({colors.hairline-soft}): Quieter table-row divider and secondary section break.

Text

• **Ink** ({colors.ink}): Primary headline and CTA text — the brand's near-black anchor.
• **Ink Strong** ({colors.ink-strong}): Pure black used in promo banners and hero displays for maximum contrast.
• **Charcoal** ({colors.charcoal}): Body text on light surfaces.
• **Slate** ({colors.slate}): Secondary text, metadata.
• **Steel** ({colors.steel}): Tertiary text, table headers, sidebar inactive items.
• **Stone** ({colors.stone}): Muted captions and tab inactive labels.
• **Muted** ({colors.muted}): Footer link text and de-emphasized labels.

Semantic

• **Success Background** ({colors.success-bg}): Pale-green wash for success badges and confirmations.
• **Success Text** ({colors.success-text}): Deep-green ink for success badge labels.
• Error tones derive from a `#d45656` red used in input border error states (not extracted as a top-level system token).

Typography

Font Family

**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.

Hierarchy

| 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 |

Principles

• **Tight hero leading** (1.10) and aggressive negative letter-spacing on display sizes create a magazine-quality typographic display unique to MiniMax.
• **Generous body leading** (1.50) keeps long-form documentation comfortable; captions push to 1.70 for scientific-paper-grade clarity.
• **Weight discipline:** 400 (body), 500 (medium emphasis), 600 (headings/buttons), 700 (strong inline emphasis). Heavier weights are not used.
• **Single typeface** strategy — never mix DM Sans with another sans-serif. Code samples (when shown) use a system monospace fallback, but no second typeface enters the brand canvas.

Layout

Spacing System

• **Base unit**: 4px (8px primary increment).
• **Tokens**: `{spacing.xxs}` (4px) · `{spacing.xs}` (8px) · `{spacing.sm}` (12px) · `{spacing.md}` (16px) · `{spacing.lg}` (20px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.xxxl}` (40px) · `{spacing.section-sm}` (48px) · `{spacing.section}` (64px) · `{spacing.section-lg}` (80px) · `{spacing.hero}` (96px).
• **Section rhythm**: Marketing pages separate at `{spacing.hero}` (96px) above-fold, then `{spacing.section-lg}` (80px) below; documentation tightens to `{spacing.section}` (64px); table rows compress to `{spacing.md}` (16px).
• **Card internal padding**: Vibrant product cards use `{spacing.xxl}` (32px); documentation cards use `{spacing.lg}–{spacing.xl}` (20–24px); promo strips expand to `{spacing.section}` (64px).

Grid & Container

• Marketing pages use a 1280px max-width with 32px gutters.
• Homepage product matrix renders as a 4-column row of 32px-rounded gradient cards, each ~280–320px wide.
• AI Product Matrix below uses a 4-column grid with 16px-rounded white cards.
• Documentation surfaces use a 3-column layout: left sidebar nav (~220px), center prose body (~720px max-width), right TOC (~180px). Sidebar persists on desktop; collapses to drawer below 1024px.
• Token Plan / pricing pages use 2-column tabs above a 3-column tier card grid.

Whitespace Philosophy

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.

Elevation & Depth

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 |

Decorative Depth

• The vibrant gradient product cards carry their own atmospheric depth via internal radial gradients and silhouette imagery — no shadow needed; the color does the work.
• Brand-tinted shadows (`rgba(44, 30, 116, 0.16) 0px 0px 15px`) appear under purple-themed cards for subtle ambient lift.
• Dotted/grain textures occasionally appear inside product cards as photographic-content decoration; these are not formalized as system tokens.

Shapes

Border Radius Scale

| 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 |

Photography Geometry

• Vibrant product cards use 32px corner softening — distinct from the 16px used on quiet white cards. The doubled radius is the visual signature of "this is a featured product moment."
• Product imagery inside cards is treated as photographic content (silhouettes, dark portrait studio lighting) without rounded internal frames.
• Avatar circles (rare, in testimonials) are `{rounded.full}` — perfect circles.

Components

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

Buttons

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

• Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`.
• Pressed state `button-primary-pressed` lifts to `{colors.charcoal}`.
• Disabled state `button-primary-disabled` uses `{colors.hairline}` background and `{colors.muted}` text.

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

• Background transparent, text `{colors.ink}`, border `1px solid {colors.ink}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`.

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

• Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`.

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

• Background transparent, text `{colors.ink}`, typography `{typography.body-sm-medium}`, padding `8px 0`. Underline appears on activation.

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

• Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.full}`.

Vibrant Product Cards

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

• Background `{colors.brand-coral}`, text `{colors.on-dark}`, rounded `{rounded.hero}` (32px), padding `{spacing.xxl}`.
• Hosts the M2.7 wordmark in massive `{typography.display-lg}` with white tagline.

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

• Background `{colors.brand-magenta}`, text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.

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

• Background `{colors.brand-blue}`, text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.

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

• Background `{colors.brand-purple}`, text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.

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

• Background `{colors.primary}` (black with overlaid product photo), text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.

Cards & Containers

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

• Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.

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

• Background `{colors.surface}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`.

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

• Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}`, border `1px solid {colors.hairline}`.

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

• Background `{colors.brand-coral}`, text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.section}`. Embedded button uses `button-tertiary` (white pill on coral) for the "Join Now" action.

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

• Background `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`. Carries an icon/illustration top, title `{typography.card-title}`, description `{typography.body-sm}`.

Inputs & Forms

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

• Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 40px.

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

• Border switches to `2px solid {colors.brand-blue-deep}`.

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

• Border switches to `1px solid #d45656`; error label below in matching red `{typography.body-sm}`.

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

• Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, height 36px, border `1px solid {colors.hairline}`.

Tabs

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

• Inactive: text `{colors.steel}`, transparent background, padding `{spacing.md} {spacing.lg}`. Active: text shifts to `{colors.ink}`, 2px bottom border in `{colors.ink}`.

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

• Inactive: background `{colors.canvas}`, text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
• Active: background `{colors.primary}`, text `{colors.on-primary}`, no border (or matching black border).

Badges & Status

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

• Background `{colors.success-bg}`, text `{colors.success-text}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

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

• Background `{colors.brand-coral}`, text `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

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

• Background `{colors.brand-blue-200}`, text `{colors.brand-blue-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

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

• Background `{colors.brand-blue-200}`, text `{colors.brand-blue-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 6px`.

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

• Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.lg}`. Carries one-line copy with optional inline link.

Data Tables

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

• Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.

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

• Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.caption-bold}`, padding `{spacing.sm} {spacing.md}`.

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

• Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, padding `{spacing.md}`, bottom border `1px solid {colors.hairline-soft}`.

Navigation

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

• Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline-soft}`.
• Left: MiniMax wordmark + horizontal link list (Models, Product, API, Company).
• Right: black-pill "Contact Us" + outlined-pill "Login".

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

• Background `{colors.canvas}`, height ~56px, with search-pill at center and "Documentation / Account / Subscribe" links + black-pill "Sign Up" right.

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

• Inactive: background transparent, text `{colors.charcoal}`, typography `{typography.body-sm}`, rounded `{rounded.sm}`, padding `{spacing.xs} {spacing.md}`.
• Active: background `{colors.surface}`, text `{colors.ink}`, typography `{typography.body-sm-medium}`.

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

• Background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xs} 0`. Active item color shifts to `{colors.ink}`.

Signature Components

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

• Layout: centered headline in `{typography.hero-display}` ({colors.ink}), centered subtitle in `{typography.subtitle}` ({colors.steel}), centered button row (`button-primary` + `button-secondary`).

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

• Each tile uses one of the `product-card-*` variants (coral, magenta, blue, purple, photo).
• Card title in `{typography.display-lg}` (M2.7 wordmark) or `{typography.heading-lg}` (Music 2.6).
• Below the wordmark: thin tagline in `{typography.body-sm}` 80% white opacity.
• Optional badge top-right: `badge-new`.
• Card heights are uniform (~360–400px); the row scrolls horizontally on mobile.

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

• Each tile is `ai-product-tile` chrome.
• Top: 100px-tall illustration zone (often line-art icon or 3D mark).
• Below: title in `{typography.card-title}`, description in `{typography.body-sm}` `{colors.steel}`.

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

• Max-width ~720px, centered. Body in `{typography.body-md}` `{colors.charcoal}` line-height 1.6.
• Inline code in `{typography.body-md}` monospace fallback with `{colors.surface}` background and `{rounded.xs}` corners.

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

• Uses `data-table` chrome. Each row carries a model name (linkified, in `{colors.ink}` body-sm-medium), a description column (`{colors.charcoal}`), and a features bullet list column.

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

• Horizontal row of 4 stat cells, each cell with a large number in `{typography.heading-lg}` `{colors.ink}` and a label below in `{typography.body-sm}` `{colors.steel}`.

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

• Background `{colors.footer-bg}`, padding `{spacing.section} {spacing.xxl}`.
• Top row: MiniMax wordmark ("intelligence with everyone" tagline) and social icons (X, Twitter, GitHub, etc.).
• Body: 4-column link grid (Research / Product / API / Company / News).
• Section headers in `{typography.body-sm-medium}` `{colors.on-dark}`.

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

• Background transparent, text `{colors.muted}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`. Active/visited states do not change color — only opacity shifts on activation.

Do's and Don'ts

Do

• Use `{colors.primary}` (black) as the dominant CTA — it's the brand's most recognizable interactive element.
• Reserve product brand colors (`{colors.brand-coral}`, `{colors.brand-magenta}`, `{colors.brand-blue}`, `{colors.brand-purple}`) ONLY for product-identity moments — never for general buttons or text.
• Pair `{rounded.hero}` (32px) gradient cards with `{rounded.xl}` (16px) white cards in the same viewport — the radius contrast is the visual signature.
• Apply `{rounded.full}` to every button, every pill tab, every badge.
• Use `{typography.hero-display}` (80px) with -2px letter-spacing for hero displays — never compromise the leading or letter-spacing.
• Treat each model/product line as a distinct color identity. M2.7 is coral, Music is magenta, Hailuo is blue. These are brand assignments, not free choices.

Don't

• Don't use brand-coral or brand-magenta on body text or large surfaces — they lose meaning when overused.
• Don't soften corners on buttons (anything less than `{rounded.full}`); the pill is a brand signature.
• Don't introduce a second display typeface; DM Sans handles every role.
• Don't reduce hero leading below 1.10 — the brand needs that breathing room on the 80px display.
• Don't apply heavy shadows on white cards; flat-with-borders is the documentation default.
• Don't put gradient backgrounds on standard buttons; gradients are reserved for product-card identity moments.

Responsive Behavior

Breakpoints

| 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. |

Touch Targets

• Pill buttons render at 38–40px effective height — bumps to 44px on mobile via padding override.
• Circular icon buttons: 36×36px desktop → 44×44px on mobile.
• Form inputs render at 40px height; bumps to 44px on mobile.
• Sidebar nav items render at ~32px tall — bumps to 44px on mobile drawers.

Collapsing Strategy

• **Promo banner** stays full-width; collapses to single line at < 480px with truncation.
• **Top nav** below 1024px collapses to hamburger; horizontal links move into drawer.
• **Documentation grid**: 3-column desktop → sidebar-drawer at < 1024px → single-column with collapsible sidebar at < 768px.
• **Product matrix**: 4-column desktop → horizontal-scroll at < 1024px (carousel-style with snap points).
• **AI Product Matrix**: 4-column → 2-column at tablet → 1-column at mobile.
• **Hero typography**: `{typography.hero-display}` (80px) → 56px at < 1024px → 40px at < 768px → 32px at < 480px.
• **Stats strip**: 4-column → 2×2 at < 768px → 1-column at < 480px.

Image Behavior

• Product card imagery uses photographic content with internal gradient overlays; lazy-loaded below the fold.
• AI product tile illustrations are SVG-based; remain crisp at all breakpoints.
• Avatar imagery in testimonials uses 1:1 aspect ratio with `{rounded.full}` masking.

Iteration Guide

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.

Known Gaps

• Specific dark-mode token values (canvas, surface, ink, hairline) are not surfaced on these pages; the brand has not yet shipped a published dark-mode palette.
• Animation/transition timings are not extracted; recommend 150–200ms ease for hover/focus state transitions.
• Form validation success state is not explicitly captured beyond defaults — implement following standard green-border + success badge patterns.
• Code syntax highlighting palette inside docs is not formalized; documentation samples appear with system-default monospace and minimal coloring.

개요

MiniMax는 정교한 이중 정체성을 지닌 중국 AI 인프라 브랜드로 자리매김하고 있습니다. 마케팅 표면과 플랫폼 페이지는 짙은 검정색 타이포그래피를 강조한 순백색 캔버스에 고정되어 있습니다. 브랜드 목소리는 자신감 있고 기술적이며 거의 편집적입니다. 그러나 각 모델 릴리스에는 화산 산호색의 M2.7, 마젠타 핑크의 Music 2.6, 진한 파란색의 Hailuo, 포화 주황색-보라색의 Speech 2.8 등 고유한 생생한 그라데이션 ID 카드가 있습니다. 이 생동감 넘치는 타일은 홈페이지에 배치된 앨범 표지처럼 읽혀지며 각 타일은 고유한 제품 개성을 선언합니다.

DM Sans는 대형 80px 히어로 디스플레이부터 12px 마이크로 라벨까지 모든 표면을 고정합니다. 얼굴의 기하학적이고 약간 인본주의적인 성격은 밀도가 높은 문서 표면(14px 본문 유형이 긴 형식의 산문에 대해 1.5 줄 높이를 전달함)과 영향력이 큰 마케팅 디스플레이(-2px 문자 간격이 80px 헤드라인을 좁히는 경우) 모두에 적합합니다. 버튼은 보편적으로 알약 모양('둥근 전체')으로 날카로운 2계층 시스템으로 되어 있습니다: 검은색 알약 기본(주요 CTA) 및 윤곽선 알약 보조. 카드는 선명한 그라데이션 제품 쇼케이스(32px 코너 소프트닝)와 조용한 흰색 문서 카드(16px 코너 소프트닝)의 두 가지 제품군으로 나뉩니다.

**주요 특징:**

• 뚜렷한 단색 팔레트 — 검정색({colors.primary}) 및 흰색({colors.canvas}) — 포화된 브랜드 색상 그라데이션 카드로 분리됨
• 고유한 제품 색상 인코딩: 각 모델 라인에는 고유한 생생한 브랜드 색상이 있습니다(산호 M2.7, 마젠타 뮤직 2.6, 파란색 Hailuo, 주황색 Speech 2.8).
• 전체 시스템에 걸쳐 DM Sans; 대체 수단으로 인터
• 알약 모양의 버튼({rounded.full})과 알약 모양의 탭이 곳곳에 있습니다. 데이터 테이블과 조밀한 문서 내부에만 직사각형 형태
• Hero 타이포그래피는 임팩트를 위해 1.10의 좁은 줄 높이와 -2px 문자 간격을 사용합니다.
• 문서 표면은 3열 레이아웃을 사용합니다: 왼쪽 사이드바 탐색, 중앙 본문, 오른쪽 목차
• 시간 제한이 있는 브랜드 순간을 위한 탐색 위의 검정색 프로모션 배너({colors.primary})

색상

> 소스 페이지: minimax.io/(홈페이지), /models/text/m27(제품 쇼케이스), platform.minimax.io/docs/guides/models-intro(문서), /subscribe/token-plan(가격). 토큰 적용 범위는 4개 페이지 모두에서 동일했습니다.

브랜드 및 액센트

• **브랜드 코랄** ({colors.brand-coral}): 강렬한 시그니처 액센트. M2.7 제품 카드, "토큰 계획" 영웅 밴드, 프로모션 CTA 스트립 및 "NEW" 배지에 사용됩니다. 브랜드의 가장 주목을 끄는 에너지를 전달합니다.
• **브랜드 마젠타** ({colors.brand-magenta}): 보조 제품 카드 ID(Music 2.6); 음악/오디오 제품 인코딩에 사용됩니다.
• **브랜드 블루** ({colors.brand-blue}): Hailuo 비디오 제품 아이덴티티; 시스템 전체의 기본 파란색 액센트입니다.
• **Brand Blue Deep** ({colors.brand-blue-deep}): 양식 제어 활성화, 링크 강조.
• **Brand Blue 700** ({colors.brand-blue-700}): 문서 태그 및 참조 텍스트 색상입니다.
• **브랜드 시안** ({colors.brand-시안}): 제품 그라데이션 및 장식 워싱을 위한 분위기 있는 파란색입니다.
• **Brand Blue 200** ({colors.brand-blue-200}): 코드 배지, 정보 태그 배경.
• **브랜드 퍼플** ({colors.brand-purple}): 스피치 2.8 및 마이너 퍼플-제품 아이덴티티; 마젠타 카드용 그래디언트 메이트.

표면

• **캔버스 화이트** ({colors.canvas}): 기본 페이지 배경 및 카드 표면.
• **Surface** ({colors.surface}): 미묘한 섹션 배경, 검색 알약 휴식, 사이드바 탐색 활성 상태.
• **Surface Soft** ({colors.surface-soft}): 더 조용한 섹션 분할.
• **헤어라인**({colors.hairline}): 1px 입력 테두리 및 기본 구분선.
• **Hairline Soft** ({colors.hairline-soft}): 더 조용한 표 행 구분선 및 보조 섹션 구분선입니다.

텍스트

• **잉크**({colors.ink}): 기본 헤드라인 및 CTA 텍스트 — 브랜드의 검정색에 가까운 기준점입니다.
• **Ink Strong** ({colors.ink-strong}): 최대 대비를 위해 프로모션 배너 및 히어로 디스플레이에 사용되는 순수 검정색입니다.
• **Charcoal** ({colors.charcoal}): 밝은 표면에 표시된 본문 텍스트입니다.
• **Slate** ({colors.slate}): 보조 텍스트, 메타데이터.
• **Steel** ({colors.steel}): 3차 텍스트, 표 헤더, 사이드바 비활성 항목.
• **Stone** ({colors.stone}): 음소거된 캡션 및 탭 비활성 라벨.
• **음소거** ({colors.muted}): 바닥글 링크 텍스트 및 강조되지 않은 라벨입니다.

의미론

• **성공 배경**({colors.success-bg}): 성공 배지 및 확인을 위한 연한 녹색 세척입니다.
• **성공 텍스트** ({colors.success-text}): 성공 배지 라벨용 진한 녹색 잉크입니다.
• 오류 톤은 입력 테두리 오류 상태에 사용되는 '#d45656' 빨간색에서 파생됩니다(최상위 시스템 토큰으로 추출되지 않음).

타이포그래피

글꼴 계열

**DM Sans** (기본): 기하학적 변수 sans-serif. 모든 표면, 모든 역할에서 사용됩니다. 폴백: Inter, Helvetica Neue, Helvetica, Arial.

DM Sans는 두 가지 유창함 때문에 선택되었습니다. 80px 히어로 디스플레이(-2px 문자 간격으로 인해 잡지 수준의 견고함)에서 12px 마이크로 라벨(약간

概要

MiniMax は、洗練された二重のアイデンティティを持つ中国の AI インフラストラクチャ ブランドとしての地位を確立しています。マーケティング面とプラットフォームのページは、真っ白なキャンバスに濃い黒のタイポグラフィーを強調して配置されています。ブランドの声は自信に満ち、技術的で、ほとんど編集的です。ただし、各モデルのリリースには、独自の鮮やかなグラデーション ID カードが付いています。M2.7 は火山のようなコーラルレッド、Music 2.6 はマゼンタピンク、Hailuo はディープブルー、Speech 2.8 は飽和したオレンジパープルです。これらの鮮やかなタイルを組み合わせると、ホームページにレイアウトされたアルバムのカバーのように見え、それぞれが独自の製品の個性を宣言します。

DM Sans は、特大の 80 ピクセルのヒーロー ディスプレイから 12 ピクセルのマイクロ ラベルまで、あらゆる表面を固定します。幾何学的でやや人間味のある顔の特徴は、密度の高いドキュメントの表面 (14 ピクセルのボディ タイプで長文の散文の行高が 1.5 行になる) と、インパクトのあるマーケティング ディスプレイ (-2 ピクセルの文字間隔で 80 ピクセルの見出しが狭まる) の両方に適しています。ボタンは一般的に錠剤の形 (「丸い」) で、シャープな 2 層システムになっています。黒色の錠剤のプライマリ (主要な CTA) と輪郭の錠剤のセカンダリです。カードは、鮮やかなグラデーションの製品ショーケース (32 ピクセルのコーナー ソフト化) と静かな白いドキュメント カード (16 ピクセルのコーナー ソフト化) の 2 つの異なるファミリーに分かれています。

**主な特徴:**

• 鮮明なモノクロ パレット — 黒 ({colors.primary}) と白 ({colors.canvas}) — 飽和したブランド カラーのグラデーション カードによってこじ開けられます
• 独特の製品カラーエンコーディング: 各モデルラインには、独自の鮮やかなブランドカラーがあります (コーラル M2.7、マゼンタ Music 2.6、ブルー Hailuo、オレンジ Speech 2.8)。
• システム全体にわたる DM Sans。代替としてのインテル
• 錠剤型のボタン ({rounded.full}) と錠剤型のタブがいたるところにあります。データテーブルおよび高密度ドキュメント内のみの長方形フォーム
• ヒーローのタイポグラフィでは、インパクトを与えるために 1.10 のタイトな行高と -2 ピクセルの文字間隔を使用しています
• ドキュメントの表面は 3 列のレイアウトを使用します: 左側のサイドバー ナビゲーション、中央の本文、右側の目次
• 期間限定のブランドモーメント用にナビゲーションの上にある黒いプロモーション バナー ({colors.primary})

色

> ソース ページ: minimax.io/ (ホームページ)、/models/text/m27 (製品ショーケース)、platform.minimax.io/docs/guides/models-intro (ドキュメント)、/subscribe/token-plan (価格設定)。トークンの適用範囲は 4 ページすべてで同一でした。

ブランドとアクセント

• **ブランドコーラル** ({colors.brand-coral}): 特徴的なインパクトのあるアクセント。 M2.7 製品カード、「トークン プラン」ヒーロー バンド、プロモーション CTA ストリップ、および「NEW」バッジで使用されます。ブランドの最も注目を集めるエネルギーを携えています。
• **ブランド マゼンタ** ({colors.brand-magenta}): 二次製品カード ID (音楽 2.6)。音楽/オーディオ製品のエンコードに使用されます。
• **ブランド ブルー** ({colors.brand-blue}): Hailuo ビデオ製品アイデンティティ。システム全体にプライマリーブルーのアクセントが施されています。
• **Brand Blue Deep** ({colors.brand-blue-deep}): フォーム コントロールのアクティブ化、リンクの強調。
• **ブランド ブルー 700** ({colors.brand-blue-700}): ドキュメント タグと参照テキストの色。
• **ブランド シアン** ({colors.brand-chan}): 製品のグラデーションと装飾ウォッシュ用の大気青。
• **Brand Blue 200** ({colors.brand-blue-200}): コード バッジ、情報タグの背景。
• **ブランド パープル** ({colors.brand-purple}): Speech 2.8 およびマイナーなパープル製品のアイデンティティ。マゼンタのカードのグラデーションメイト。

表面

• **キャンバス ホワイト** ({colors.canvas}): 主要なページの背景とカードの表面。
• **Surface** ({colors.surface}): 微妙なセクションの背景、検索ピルレスト、サイドバーナビゲーションのアクティブ状態。
• **Surface Soft** ({colors.surface-soft}): より静かなセクション分割。
• **ヘアライン** ({colors.hairline}): 1 ピクセルの入力境界線と主分割線。
• **ヘアライン ソフト** ({colors.hairline-soft}): テーブル行の分割線と 2 番目のセクション区切りがより静かになりました。

テキスト

• **インク** ({colors.ink}): 主要な見出しと CTA テキスト — ブランドのほぼ黒のアンカー。
• **インク ストロング** ({colors.ink-strong}): コントラストを最大限に高めるために、プロモーション バナーやヒーロー ディスプレイに使用される純粋な黒。
• **Charcoal** ({colors.charcoal}): 明るい表面上の本文テキスト。
• **スレート** ({colors.slate}): 二次テキスト、メタデータ。
• **スチール** ({colors.steel}): 三次テキスト、テーブルヘッダー、サイドバーの非アクティブな項目。
• **Stone** ({colors.stone}): ミュートされたキャプションとタブの非アクティブなラベル。
• **ミュート** ({colors.muted}): フッター リンク テキストと強調解除されたラベル。

セマンティック

• **成功の背景** ({colors.success-bg}): 成功バッジと確認用の淡い緑色のウォッシュ。
• **成功テキスト** ({colors.success-text}): 成功バッジ ラベル用の深緑色のインク。
• エラー トーンは、入力境界エラー状態で使用される `#d45656` 赤から派生します (トップレベル システム トークンとして抽出されません)。

タイポグラフィー

フォントファミリー

**DM Sans** (プライマリ): 幾何学的変数サンセリフ。あらゆる表面、あらゆる役割にわたって使用されます。フォールバック: Inter、Helvetica Neue、Helvetica、Arial。

DM Sans は、その二重の流暢さのために選ばれました。80 ピクセルのヒーロー ディスプレイ (-2 ピクセルの文字間隔が雑誌グレードの狭さを生み出す) から 12 ピクセルのマイクロ ラベル (わずかに