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 헤드라인을 좁히는 경우) 모두에 적합합니다. 버튼은 보편적으로 알약 모양(`rounded-full`)으로 날카로운 2계층 시스템, 즉 검은색 알약 기본(주요 CTA)과 윤곽선 알약 보조입니다. 카드는 생생한 그라데이션 제품 쇼케이스(32px 코너 소프트닝)와 조용한 흰색 문서 카드(16px 코너 소프트닝)의 두 가지 제품군으로 나뉩니다.
**주요 특성:**
- 완벽한 단색 팔레트 — 검정색({colors.primary}) 및 흰색({colors.canvas}) — 포화 브랜드 색상 그라데이션 카드로 분리됨
- 고유한 제품 색상 인코딩: 각 모델 라인에는 고유한 생생한 브랜드 색상이 있습니다(산호 M2.7, 마젠타 Music 2.6, 파란색 Hailuo, 주황색 Speech 2.8)
- DM은 전체 시스템에 걸쳐 존재합니다. 대체 수단으로 인터
- 알약 모양의 버튼({rounded.full})과 알약 모양의 탭이 곳곳에 있습니다. 데이터 테이블과 조밀한 문서 내부에서만 직사각형 형태
- 영웅 타이포그래피는 충격을 주기 위해 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(음악 2.6); 음악/오디오 제품 인코딩에 사용됩니다.
- **브랜드 블루**({colors.brand-blue}): Hailuo 비디오 제품 아이덴티티; 시스템 전체에 걸쳐 기본 파란색 액센트를 줍니다.
- **브랜드 블루 딥**({colors.brand-blue-deep}): 양식 제어 활성화, 링크 강조.
- **브랜드 블루 700**({colors.brand-blue-700}): 문서 태그 및 참조 텍스트 색상.
- **브랜드 청록색**({colors.brand-cyan}): 제품 그라데이션 및 장식 워싱을 위한 분위기 있는 파란색.
- **브랜드 블루 200**({colors.brand-blue-200}): 코드 배지, 정보 태그 배경.
- **브랜드 퍼플**({colors.brand-purple}): 음성 2.8 및 마이너 퍼플 제품 아이덴티티; 마젠타 카드용 그래디언트 메이트.
표면
- **캔버스 화이트**({colors.canvas}): 기본 페이지 배경 및 카드 표면.
- **표면**({colors.surface}): 미묘한 섹션 배경, 검색 알약 나머지, 사이드바 탐색 활성 상태.
- **부드러운 표면**({colors.surface-soft}): 더 조용한 섹션 분할.
- **가는 선** ({colors.hairline}): 1px 입력 테두리 및 기본 구분선.
- **가는 선 소프트**({colors.hairline-soft}): 더 조용한 표 행 구분선 및 보조 섹션 나누기.
텍스트
- **잉크** ({colors.ink}): 기본 헤드라인 및 CTA 텍스트 — 브랜드의 검정색에 가까운 기준입니다.
- **잉크 강함**({colors.ink-strong}): 최대 대비를 위해 프로모션 배너 및 히어로 디스플레이에 사용되는 순수 검정색입니다.
- **차콜**({colors.charcoal}): 밝은 표면의 본문 텍스트.
- **슬레이트** ({colors.slate}): 보조 텍스트, 메타데이터.
- **스틸**({colors.steel}): 3차 텍스트, 표 헤더, 사이드바 비활성 항목.
- **스톤** ({colors.stone}): 음소거된 캡션 및 탭 비활성 라벨.
- **음소거**({colors.muted}): 바닥글 링크 텍스트 및 강조되지 않은 라벨.
의미
- **성공 배경**({colors.success-bg}): 성공 배지 및 확인을 위한 연한 녹색 워싱.
- **성공 텍스트**({colors.success-text}): 성공 배지 라벨용 진한 녹색 잉크.
- 오류 신호음은 입력 테두리 오류 상태에 사용되는 `` 빨간색에서 파생됩니다(최상위 시스템 토큰으로 추출되지 않음).
타이포그래피
글꼴군
**DM Sans**(기본): 기하학적 변수 sans-serif. 모든 표면, 모든 역할에서 사용됩니다. 폴백: Inter, Helvetica Neue, Helvetica, Arial.
DM Sans는 이중 유창함을 위해 선택되었습니다. 80px 히어로 디스플레이(-2px 문자 간격으로 잡지 수준의 견고함 제공)에서 12px 마이크로 라벨(약간 휴머니스트적인 카운터가 가독성을 유지하는 경우)까지 깔끔하게 확장됩니다. 문자반에는 브랜드 배치에 이탤릭체 변형이 없습니다. 대신 무게(500/600/700)를 강조합니다.
계층
| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |
사용
|---|---|---|---|---|---|
| _`` | 80px | 600 | 1.10 | -2px | 홈페이지 히어로("MiniMax Music 2.6") |
| _`` | 56px | 600 | 1.10 | -1.5px | 섹션 오프너, 주요 페이지 영웅 |
| _`` | 40px | 600 | 1.20 | -1픽셀 | 하위 페이지 헤드라인("토큰 계획", "모델 개요") |
| _`` | 32px | 600 | 1.25 | -0.5px | 하위 섹션 헤더("풀 스택 모델 매트릭스") |
| _`` | 24px | 600 | 1.30 | 0 | 카드 제목, 기능 헤더 |
| _`` | 20픽셀 | 600 | 1.40 | 0 | 제품 카드 제목, 기능 타일 헤더 |
| _`` | 18px | 500 | 1.50 | 0 | 섹션 자막, 본문 |
| _`` | 16px | 400 | 1.50 | 0 | 기본 본문 텍스트 |
| _`` | 16px | 700 | 1.50 | 0 | 본문 강조 |
| _`` | 14px | 400 | 1.50 | 0 | 보조 본문, 표 셀, 탐색 |
| _`` | 14px | 500 | 1.50 | 0 | 활성 사이드바 탐색, 버튼 라벨 |
| _`` | 13px | 400 | 1.70 | 0 | 문서 캡션, 작은 글씨 |
| _`` | 13px | 600 | 1.50 | 0 | 배지 라벨, 표 헤더 텍스트 |
| _`` | 12px | 400 | 1.50 | 0 | 바닥글 마이크로카피, 칩 라벨 |
| _`` | 14px | 600 | 1.40 | 0 | 알약 버튼 라벨 |
원칙
- **단단한 영웅 행간**(1.10)과 디스플레이 크기의 공격적인 음수 문자 간격은 MiniMax 고유의 잡지 품질 인쇄 디스플레이를 만듭니다.
- **관대한 본문 선도**(1.50)는 긴 형식의 문서를 편안하게 유지합니다. 과학 논문 수준의 명확성을 위해 캡션을 1.70으로 높였습니다.
- **가중치 규칙:** 400(본문), 500(중간 강조), 600(제목/버튼), 700(강한 인라인 강조). 더 무거운 무게는 사용되지 않습니다.
- **단일 서체** 전략 — DM Sans를 다른 산세리프체와 혼합하지 마십시오. 코드 샘플(표시된 경우)은 시스템 고정 폭 대체를 사용하지만 두 번째 서체는 브랜드 캔버스에 입력되지 않습니다.
레이아웃
간격 시스템
- **기본 단위**: 4px(8px 기본 증분).
- **토큰**: ``(4px) · ``(8px) · ``(12px) · ``(16px) · ``(20px) · `` (24px) · ``(32px) · ``(40px) · ``(48px) · ``(64px) · ``(80px) · `` (96px).
- **섹션 리듬**: 마케팅 페이지는 접힌 부분 위의 ``(96px)과 아래의 ``(80px)으로 구분됩니다. 문서는 ``(64px)로 강화되었습니다. 테이블 행은 ``(16px)으로 압축됩니다.
- **카드 내부 패딩**: 생생한 제품 카드는 ``(32px)을 사용합니다. 문서 카드는 `–`(20-24px)을 사용합니다. 프로모션 스트립은 ``(64px)으로 확장됩니다.
그리드 및 컨테이너
- 마케팅 페이지는 32px 여백과 함께 1280px 최대 너비를 사용합니다.
- 홈페이지 제품 매트릭스는 각각 너비가 ~280~320px인 32픽셀 둥근 그래디언트 카드의 4열 행으로 렌더링됩니다.
- 아래 AI 제품 매트릭스는 16픽셀의 둥근 흰색 카드가 있는 4열 그리드를 사용합니다.
- 문서 표면은 3열 레이아웃을 사용합니다: 왼쪽 사이드바 탐색(~220px), 중앙 문장 본문(~720px 최대 너비), 오른쪽 TOC(~180px). 사이드바는 데스크탑에서 유지됩니다. 1024px 미만의 서랍으로 축소됩니다.
- 토큰 계획/가격 페이지는 3열 계층 카드 그리드 위에 2열 탭을 사용합니다.
공백 철학
마케팅 페이지는 제품 사진과 컬러 카드에 넉넉한 호흡 공간을 제공합니다. — ``(96px)은 스크롤 없이 볼 수 있는 부분에 80px 히어로 디스플레이를 위한 시각적 산소를 생성합니다. 문서 내부에서 공백이 극적으로 좁아졌습니다. 섹션 간격은 ``(32px)로 줄어들고, 테이블 행은 ``(16px)로 압축되며, 사이드바 탐색은 ``(8px) 수직 리듬을 사용합니다.
고도 및 깊이
시스템은 대부분 플랫하게 실행됩니다. 고도는 고정 패널, 드롭다운 및 보기 드문 플로팅 CTA용으로 예약되어 있습니다.
| 레벨 | 치료 | |
사용
|---|---|---|
| 0(플랫) | 그림자가 없습니다. _`` 테두리 | 기본 카드, 테이블 행, 양식 입력 |
| 1(미묘함) | _`rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | 카드 추천, 마우스 오버 타일 |
| 2 (카드) | _`rgba(0, 0, 0, 0.08) 0px 4px 6px 0px` | 표준 기능 카드, 드롭다운 |
| 3(대기) | _`rgba(0, 0, 0, 0.08) 0px 0px 22px 0px` | 추천 제품 카드의 확산 광선 |
| 4(모달) | _`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | 모달, 확인 대화상자, 고정 패널 |
장식적 깊이
- 생동감 넘치는 그라데이션 제품 카드는 내부 방사형 그라데이션과 실루엣 이미지를 통해 고유한 분위기의 깊이를 전달합니다. 그림자가 필요하지 않습니다. 색상이 효과를 발휘합니다.
- 브랜드 색조 그림자(`rgba(44, 30, 116, 0.16) 0px 0px 15px`)가 보라색 테마 카드 아래에 나타나 미묘한 분위기를 연출합니다.
- 점선/결 텍스처가 사진 콘텐츠 장식으로 제품 카드 내부에 나타나는 경우가 있습니다. 이는 시스템 토큰으로 공식화되지 않습니다.
도형
테두리 반경 배율
| 토큰 | 가치 | |
사용
|---|---|---|
| _`` | 4픽셀 | 코드 칩, 마이크로컨트롤 |
| _`` | 6픽셀 | 컴팩트 컨트롤, 표 셀 |
| _`` | 8픽셀 | 입력, 보조 버튼, 검색 알약 |
| _`` | 12px | 문서 카드, 추천 타일 |
| _`` | 16px | 표준 기능 카드, AI 제품 타일 |
| _`` | 20픽셀 | 더 큰 기능 패널 |
| _`` | 24px | AI 제품 타일 기능 변형 |
| _`` | 32px | 생동감 넘치는 그라데이션 제품 카드, 프로모션 CTA 스트립 |
| _`` | 9999px | 모든 버튼, 모든 알약 탭, 배지 |
사진 기하학
- _활기찬 제품 카드는 조용한 흰색 카드에 사용되는 16픽셀과 달리 32픽셀 모서리 부드럽게 처리를 사용합니다. 두 배로 늘어난 반경은 "이것이 바로 제품 특집 순간입니다"라는 시각적 상징입니다.
- 카드 내부의 제품 이미지는 둥근 내부 프레임이 없는 사진 콘텐츠(실루엣, 어두운 인물 사진 스튜디오 조명)로 처리됩니다.
- 아바타 서클(드물게 회원 평가에서)은 `` — 완벽한 서클입니다.
구성요소
> 마우스 오버 금지 정책에 따라 마우스 오버 상태는 문서화되지 않습니다. 기본 및 누름/활성 상태만 해당됩니다.
버튼
**`button-primary`** — 검은 알약 기본 CTA, 모든 표면에서 지배적인 작업입니다.
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `11px 24px`, 반올림 ``.
- 누른 상태 `button-primary-pressed` 리프트를 ``.
- 비활성화 상태 `button-primary-disabled`는 `` 배경과 `` 텍스트를 사용합니다.
**`button-secondary`** — 이중 CTA 영웅 패턴의 기본 동작과 쌍을 이루는 윤곽이 있는 알약 보조 동작입니다.
- 배경 투명, 텍스트 ``, 테두리 `1px solid `, 타이포그래피 ``, 패딩 `11px 24px`, 둥근 ``.
**`button-tertiary`** — 3차 탐색 및 정보 CTA에 사용되는 흰색 채우기의 조용한 알약입니다.
- 배경 ``, 텍스트 ``, 테두리 `1px solid `, 타이포그래피 ``, 패딩 `11px 24px`, 반올림 ``.
**`button-link`** — 미묘한 버튼 스타일의 인라인 텍스트 링크.
- 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 `8px 0`. 활성화 시 밑줄이 나타납니다.
**`button-icon-circular`** — 36×36px 원형 유틸리티 버튼(회전식 화살표, 공유, 복사).
- 배경 ``, 텍스트 ``, 테두리 `1px solid `, 반올림 ``.
활기찬 제품 카드
**`product-card-coral`** — M2.7 / 토큰 계획 서명 카드.
- 배경 ``, 텍스트 ``, 반올림 ``(32px), 패딩 ``.
- 흰색 태그라인이 포함된 대규모 `` M2.7 워드마크를 호스팅합니다.
**`product-card-magenta`** — 뮤직 2.6 제품 쇼케이스.
- 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.
**`product-card-blue`** — Hailuo 비디오 제품 쇼케이스.
- 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.
**`product-card-purple`** — 음성 2.8 / 변형 제품 쇼케이스.
- 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.
**`product-card-photo`** — 어두운 세로 제품 카드(홈페이지 S2 배치, 비디오 감성 제품).
- 배경 ``(검은색 및 오버레이된 제품 사진), 텍스트 ``, 둥근 ``, 패딩 ``.
카드 및 용기
**`card-base`** — 표준 문서/기능 카드.
- 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.
**`card-feature`** — 밝은 회색의 조용한 기능 패널.
**`card-recommendation`** — 문서 바닥글의 "권장 읽기" 타일.
- 배경 ``, 반올림 ``, 패딩 ``, 테두리 `1px solid `.
_**`promo-cta-card`** — CTA 알약이 포함된 밝은 주황색 "10% 환불..." 프로모션 스트립.
- 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``. 삽입된 버튼은 "지금 가입" 작업에 `button-tertiary`(산호에 흰색 알약)을 사용합니다.
**`ai-product-tile`** — AI 제품 매트릭스 그리드의 흰색 카드(에이전트, Hailuo 비디오, MiniMax 오디오).
- 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `. 아이콘/그림 상단, 제목 ``, 설명 ``.
을 운반합니다.
입력 및 양식
**`text-input`** — 표준 텍스트 필드.
- 배경 ``, 텍스트 ``, 테두리 `1px solid `, 반올림 ``, 패딩 ` `, 높이 40px.
**`text-input-focused`** — 활성화된 상태.
- 경계가 `2px solid `.
(으)로 전환됩니다.
**`text-input-error`** — 유효성 검사 오류 상태.
- 경계가 `1px solid `로 전환됩니다. 빨간색과 일치하는 아래 오류 라벨 ``.
**`search-pill`** — 문서 상단 표시줄 검색 필드.
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 높이 36px, 테두리 `1px solid `.
탭
**`segmented-tab`** + **`segmented-tab-active`** — 밑줄 스타일 탭 탐색(M2.7 페이지의 벤치마크/자체 평가/다중 에이전트 공동 작업).
- 비활성: 텍스트 ``, 투명한 배경, 패딩 ` `. 활성: 텍스트가 ``, ``.
의 2px 하단 테두리로 이동합니다.
**`pill-tab`** + **`pill-tab-active`** — 가격 페이지 탭 탐색(토큰 플랜/오디오 구독/비디오 패키지).
- 비활성: 배경 ``, 텍스트 ``, 테두리 `1px solid `, 패딩 ` `, 반올림 ``.
- 활성: 배경 ``, 텍스트 ``, 테두리 없음(또는 일치하는 검은색 테두리).
배지 및 상태
**`badge-success`** — 연한 녹색 확인 배지("사용 가능", "활성").
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.
**`badge-new`** — 최신 출시를 위한 산호 "NEW" / "라이브" 알약.
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.
**`badge-beta`** — 연한 파란색 "베타"/정보 알약.
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.
**`badge-code`** — 인라인 코드 스타일 칩("코드", "API").
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 6px`.
**`promo-banner`** — 상단 탐색 메뉴 위의 끈적끈적한 검정색 프로모션 스트립("초대 및 적립 — 둘 다에 대한 보상!").
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 ` `. 선택적 인라인 링크가 포함된 한 줄 사본을 전달합니다.
데이터 테이블
**`data-table`** — 문서 모델 비교 테이블.
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 테두리 `1px solid `.
**`data-table-header`** — 데이터 테이블의 상단 헤더 행.
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 ` `.
**`data-table-row`** — 본문 행.
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 ``, 하단 테두리 `1px solid `.
탐색
**상단 탐색(마케팅)** — 로고, 링크 목록 및 오른쪽 CTA가 포함된 고정 흰색 막대.
- 배경 ``, 높이 ~64px, 하단 테두리 `1px solid `.
- 왼쪽: MiniMax 워드마크 + 가로 링크 목록(모델, 제품, API, 회사).
- 오른쪽: 검은색 알약 "연락처" + 윤곽선 알약 "로그인".
**상단 탐색(문서/플랫폼)** — 중앙 검색 알약과 오른쪽 계정/업그레이드 CTA가 포함된 압축 탐색.
- 배경 ``, 높이 ~56px, 중앙에 검색 알약 및 "문서/계정/구독" 링크 + 검은 알약 "가입" 오른쪽이 있습니다.
**`sidebar-nav-item`** + **`sidebar-nav-item-active`** — 문서 왼쪽 레일 링크 항목.
- 비활성: 배경 투명, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 ` `.
- 활성: 배경 ``, 텍스트 ``, 타이포그래피 ``.
**`doc-toc-item`** — 오른쪽 목차 링크.
- 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ` 0`. 활성 항목 색상이 ``.
로 변경됩니다.
서명 구성요소
**`hero-band-marketing`** — 대규모 80px 디스플레이와 듀얼 CTA 쌍을 갖춘 중앙 영웅.
- 레이아웃: ``({colors.ink})의 중앙 정렬 헤드라인, ``({colors.steel})의 중앙 정렬 자막, 중앙 정렬 버튼 행(`button-primary` + `button-secondary`).
**`product-matrix-grid`** — 생생한 그라데이션 제품 카드의 4열 가로 스크롤(홈페이지 "풀 스택 모델 매트릭스").
- 각 타일은 `product-card-*` 변형(산호색, 자홍색, 파란색, 보라색, 사진) 중 하나를 사용합니다.
- ``(M2.7 워드마크) 또는 ``(음악 2.6)의 카드 제목.
- 워드마크 아래: `` 80% 흰색 불투명도의 얇은 태그라인.
- 오른쪽 상단 옵션 배지: `badge-new`.
- 카드 높이는 균일합니다(~360~400px). 모바일에서는 행이 가로로 스크롤됩니다.
**`ai-product-matrix`** — 생생한 매트릭스(에이전트/Hailuo 비디오/오디오/비디오) 아래 흰색 제품 타일의 4열 그리드입니다.
- 각 타일은 `ai-product-tile` 크롬입니다.
- 상단: 100px 높이의 일러스트레이션 영역(종종 라인아트 아이콘 또는 3D 마크).
- 아래: ``의 제목, `` ``.
의 설명
**`docs-prose-block`** — 문서 기본 콘텐츠 영역.
- 최대 너비 ~720픽셀, 중앙. `` `` 줄 높이 1.6.
의 본문
- `` 배경 및 `` 모서리가 있는 `` 고정 폭 대체의 인라인 코드.
**`models-comparison-table`** — 모델 크기와 기능을 비교하는 문서 표입니다.
- `data-table` 크롬을 사용합니다. 각 행에는 모델 이름(`` body-sm-medium에 링크됨), 설명 열(``) 및 기능 글머리 기호 목록 열이 포함됩니다.
**`testimonial-stat-row`** — 통계 스트립("214,000개 이상의 기업 클라이언트 및 개발자", "0개 이상의 국가 제공").
- 4개 통계 셀의 가로 행, 각 셀은 `` ``에 큰 숫자가 있고 `` ``에 아래 레이블이 있습니다.
**`footer-region`** — 조밀한 검정색 캔버스 다중 열 바닥글.
- 배경 ``, 패딩 ` `.
- 윗줄: MiniMax 워드마크("모두와 함께하는 지능" 태그라인) 및 소셜 아이콘(X, Twitter, GitHub 등).
- 본문: 4열 링크 그리드(연구/제품/API/회사/뉴스).
- `` ``.
의 섹션 헤더
**`footer-link`** — 바닥글 열 내부의 개별 링크 항목.
- 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ` 0`. 활성/방문 상태는 색상을 변경하지 않으며 활성화 시 불투명도만 변경됩니다.
해야 할 일과 하지 말아야 할 일
하라
- ``(검은색)을 주요 CTA로 사용하세요. 이는 브랜드에서 가장 눈에 띄는 대화형 요소입니다.
- 제품 브랜드 색상(``, ``, ``, ``)은 제품을 식별하는 순간에만 예약하세요. 일반 버튼이나 텍스트에는 예약하지 마세요.
- 동일한 뷰포트에서 ``(32px) 그라디언트 카드를 ``(16px) 흰색 카드와 쌍으로 만듭니다. 반경 대비가 시각적 특징입니다.
- 모든 버튼, 모든 알약 탭, 모든 배지에 ``을 적용합니다.
- 히어로 디스플레이에는 문자 간격이 -2px인 ``(80px)을 사용하세요. 행간이나 문자 간격을 절대로 타협하지 마세요.
- 각 모델/제품 라인을 고유한 색상 정체성으로 취급하십시오. M2.7은 산호, 음악은 마젠타, Hailuo는 파란색입니다. 이는 자유로운 선택이 아닌 브랜드 할당입니다.
하지 마세요
- 본문 텍스트나 넓은 표면에 브랜드 산호색 또는 브랜드-마젠타색을 사용하지 마십시오. 과도하게 사용하면 의미가 사라집니다.
- 버튼의 모서리를 부드럽게 하지 마십시오(`` 미만). 알약은 브랜드 시그니처입니다.
- 두 번째 디스플레이 서체를 도입하지 마세요. DM Sans가 모든 역할을 처리합니다.
- 영웅을 1.10 이하로 줄이지 마십시오. 브랜드는 80px 디스플레이에 여유 공간이 필요합니다.
- 흰색 카드에 무거운 그림자를 적용하지 마세요. flat-with-borders는 문서 기본값입니다.
- 표준 버튼에 그라데이션 배경을 넣지 마세요. 그라데이션은 제품 카드 식별 순간을 위해 예약되어 있습니다.
반응적 행동
중단점
| 이름 | 폭 | 주요 변경 사항 |
|---|---|---|
| 모바일(소형) | _< 480px | Single column. Hero drops to 40px. Pill nav collapses to hamburger. Product matrix horizontal-scroll. Footer 1-column accordion. |
| 모바일(대형) | 480 – 767px | 소규모와 동일하지만 AI 제품 매트릭스가 2-up을 렌더링합니다. |
| 태블릿 | 768 – 1023px | 2열 AI 제품 매트릭스. 알약 탭 탐색이 반환됩니다. 문서 사이드바가 서랍으로 축소됩니다. |
| 데스크탑 | 1024 – 1279px | 전체 4열 제품 매트릭스; 3열 문서 그리드(사이드바/본문/목차). |
| 와이드 데스크탑 | ≥ 1280px | 더 넓은 영웅 홈통, 더 큰 제품 사진, 220px 사이드바 고정. |
터치 대상
- 알약 버튼은 38~40픽셀의 유효 높이로 렌더링됩니다. 모바일에서는 패딩 재정의를 통해 44픽셀로 늘어납니다.
- 원형 아이콘 버튼: 데스크톱 36×36픽셀 → 모바일 44×44픽셀.
- _양식 입력은 40px 높이로 렌더링됩니다. 모바일에서는 44px로 늘어납니다.
- 사이드바 탐색 항목은 높이가 ~32px로 렌더링되며 모바일 서랍에서는 44px로 늘어납니다.
축소 전략
- **프로모션 배너**는 전체 너비로 유지됩니다. < 480px with truncation.
에서 한 줄로 축소됩니다.
- **1024px 미만의 상단 탐색**은 햄버거로 축소됩니다. 수평 링크가 서랍으로 이동됩니다.
- **문서 그리드**: 3열 데스크톱 → 사이드바 서랍(< 1024px → single-column with collapsible sidebar at < 768px.
)
- **제품 매트릭스**: 4열 데스크톱 → < 1024px (carousel-style with snap points).
에서 가로 스크롤
- **AI 제품 매트릭스**: 4열 → 태블릿의 2열 → 모바일의 1열.
- **히어로 타이포그래피**: ``(80px) → < 1024px → 40px at < 768px → 32px at < 480px.
에서 56px
- **통계 스트립**: 4열 → < 768px → 1-column at < 480px.
의 2×2
이미지 동작
- 제품 카드 이미지는 내부 그라데이션 오버레이가 있는 사진 콘텐츠를 사용합니다. 스크롤 없이 볼 수 있는 부분 아래에 지연 로드됨
- AI 제품 타일 일러스트레이션은 SVG 기반입니다. 모든 중단점에서 선명한 상태를 유지합니다.
- 평가의 아바타 이미지는 `` 마스킹과 함께 1:1 가로세로 비율을 사용합니다.
반복 가이드
1. 한 번에 하나의 구성 요소에만 집중하세요. 시스템의 내부 일관성이 높습니다.
2. 구성요소 이름 및 토큰을 직접 참조하십시오(``, `-pressed`, ``). 다른 말로 표현하지 마세요.
3. 깨진 참조 및 대비 문제를 파악하려면 편집 후 _`npx @google/design.md lint DESIGN.md`을 실행하세요.
4. 새 변형을 별도의 `components:` 항목(`-pressed`, `-disabled`, `-active`)으로 추가합니다.
5. 기본값은 본문의 경우 ``이고 강조의 경우 ``입니다. 헤드라인이 `hero-display → display-lg → heading-lg → heading-md → heading-sm`.
감소했습니다.
6. 브랜드 색상(산호색, 자홍색, 파란색, 보라색)을 제품 카드 아이덴티티에만 국한하세요. 브랜드 색상이 표준 버튼이나 일반 표면에 나타나는 경우 해당 표면을 획득했는지 물어보세요.
7. 알약 모양의 버튼(``)은 항상; 사각형 버튼은 이 언어에서 '타사 위젯'을 나타냅니다.
알려진 격차
- 특정 다크 모드 토큰 값(캔버스, 표면, 잉크, 가는선)은 이 페이지에 표시되지 않습니다. 해당 브랜드는 아직 게시된 다크 모드 팔레트를 출시하지 않았습니다.
- 애니메이션/전환 타이밍은 추출되지 않습니다. 호버/포커스 상태 전환에는 150~200ms의 용이성을 권장합니다.
- 양식 유효성 검사 성공 상태는 기본값 이상으로 명시적으로 캡처되지 않습니다. 표준 녹색 테두리 + 성공 배지 패턴을 구현합니다.
- 문서 내부의 코드 구문 강조 팔레트가 형식화되지 않았습니다. 문서 샘플은 시스템 기본 고정폭 및 최소한의 색상으로 표시됩니다.
概要
MiniMax は、洗練された二重のアイデンティティを持つ中国の AI インフラストラクチャ ブランドとしての地位を確立しています。マーケティング面とプラットフォームのページは、真っ白なキャンバスに濃い黒のタイポグラフィーを強調して配置されています。ブランドの声は自信に満ち、技術的で、ほとんど編集的です。ただし、各モデルのリリースには、独自の鮮やかなグラデーション ID カードが付いています。M2.7 は火山のようなコーラルレッド、Music 2.6 はマゼンタピンク、Hailuo はディープブルー、Speech 2.8 は飽和したオレンジパープルです。これらの鮮やかなタイルを組み合わせると、ホームページにレイアウトされたアルバムのカバーのように見えます。それぞれが独自の製品の個性を宣言しています。
DM Sans は、特大の 80 ピクセルのヒーロー ディスプレイから 12 ピクセルのマイクロ ラベルまで、あらゆるサーフェスを固定します。幾何学的でやや人間味のある顔の特徴は、密度の高いドキュメントの表面 (14 ピクセルのボディ タイプで長文の散文の行高が 1.5 行になる) と、インパクトのあるマーケティング ディスプレイ (-2 ピクセルの文字間隔で 80 ピクセルの見出しが狭まる) の両方に適しています。ボタンは一般的に錠剤の形 (`rounded-full`) で、黒の錠剤のプライマリ (主要な CTA) と輪郭の錠剤のセカンダリというシャープな 2 層システムを備えています。カードは、鮮やかなグラデーションの製品ショーケース (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)。音楽/オーディオ製品のエンコードに使用されます。
- **Brand Blue** ({colors.brand-blue}): Hailuo ビデオ製品アイデンティティ。システム全体にメインのブルーのアクセント。
- **Brand Blue Deep** ({colors.brand-blue-deep}): フォーム コントロールのアクティブ化、リンクの強調。
- **ブランド ブルー 700** ({colors.brand-blue-700}): ドキュメント タグと参照テキストの色。
- **ブランド シアン** ({colors.brand-cyan}): 製品のグラデーションと装飾ウォッシュ用の大気青。
- **ブランド ブルー 200** ({colors.brand-blue-200}): コード バッジ、情報タグの背景。
- **ブランド パープル** ({colors.brand-purple}): Speech 2.8 およびマイナーなパープル製品アイデンティティ。マゼンタ カードのグラデーション メイト。
表面
- **キャンバス ホワイト** ({colors.canvas}): 主要なページの背景とカードの表面。
- **表面** ({colors.surface}): 微妙なセクションの背景、検索ピルレスト、サイドバーナビゲーションのアクティブ状態。
- **Surface Soft** ({colors.surface-soft}): より静かなセクション分割。
- **ヘアライン** ({colors.hairline}): 1 ピクセルの入力境界線と主分割線。
- **ヘアライン ソフト** ({colors.hairline-soft}): より静かな表行分割線と 2 番目のセクション区切り。
テキスト
- **インク** ({colors.ink}): 主要な見出しと CTA テキスト — ブランドのほぼ黒のアンカー。
- **インクが強い** ({colors.ink-strong}): コントラストを最大限に高めるためにプロモーション バナーやヒーロー ディスプレイに使用される純粋な黒。
- **チャコール** ({colors.charcoal}): 明るい表面上の本文テキスト。
- **スレート** ({colors.slate}): 二次テキスト、メタデータ。
- **スチール** ({colors.steel}): 三次テキスト、表ヘッダー、サイドバーの非アクティブな項目。
- **ストーン** ({colors.stone}): ミュートされたキャプションとタブの非アクティブなラベル。
- **ミュート** ({colors.muted}): フッター リンク テキストと強調解除されたラベル。
セマンティック
- **成功の背景** ({colors.success-bg}): 成功バッジと確認用の淡い緑色のウォッシュ。
- **成功テキスト** ({colors.success-text}): 成功バッジ ラベル用の深緑色のインク。
- エラー トーンは、入力境界エラー状態で使用される `` 赤から派生します (トップレベル システム トークンとして抽出されません)。
タイポグラフィ
フォント ファミリー
**DM Sans** (プライマリ): 幾何学的変数サンセリフ。あらゆる表面、あらゆる役割にわたって使用されます。フォールバック: Inter、Helvetica Neue、Helvetica、Arial。
DM Sans は、その二重の流暢さによって選ばれました。80 ピクセルのヒーロー ディスプレイ (-2 ピクセルの文字間隔が雑誌グレードの狭さを生み出す) から 12 ピクセルのマイクロ ラベル (わずかに人間味のあるカウンターが読みやすさを維持する) まで、きれいにスケールアップされます。 ブランドの展開では文字盤にイタリック体はありません。代わりに重量 (500/600/700) が強調されています。
階層_
|トークン |サイズ |重量 |行の高さ |文字間隔 | |
を使用します
|---|---|---|---|---|---|
| `` | 80ピクセル | 600 | 1.10 | -2ピクセル |ホームページのヒーロー (「MiniMax Music 2.6」) |
| `` | 56ピクセル | 600 | 1.10 | -1.5ピクセル |セクション オープナー、主要ページのヒーロー |
| `` | 40ピクセル | 600 | 1.20 | -1ピクセル |サブページの見出し (「トークン プラン」、「モデルの概要」) |
| `` | 32ピクセル | 600 | 1.25 | -0.5ピクセル |サブセクションのヘッダー (「フルスタック モデル マトリックス」) |
| `` | 24ピクセル | 600 | 1.30 | 0 |カード タイトル、機能ヘッダー |
| `` | 20ピクセル | 600 | 1.40 | 0 |製品カードのタイトル、機能タイルのヘッダー |
| `` | 18ピクセル | 500 | 1.50 | 0 |セクションのサブタイトル、リード本文 |
| `` | 16ピクセル | 400 | 1.50 | 0 |主要な本文テキスト |
| `` | 16ピクセル | 700 | 1.50 | 0 |体の強調 |
| `` | 14ピクセル | 400 | 1.50 | 0 |二次本文、表のセル、ナビゲーション |
| `` | 14ピクセル | 500 | 1.50 | 0 |アクティブなサイドバー ナビゲーション、ボタン ラベル |
| `` | 13ピクセル | 400 | 1.70 | 0 |ドキュメントのキャプション、細字 |
| `` | 13ピクセル | 600 | 1.50 | 0 |バッジ ラベル、テーブル ヘッダー テキスト |
| `` | 12ピクセル | 400 | 1.50 | 0 |フッターのマイクロコピー、チップのラベル |
| `` | 14ピクセル | 600 | 1.40 | 0 |ピル ボタンのラベル |
原則_
- **タイトなヒーロー リーディング** (1.10) と表示サイズでの積極的な負の文字間隔により、MiniMax に特有の雑誌品質のタイポグラフィック表示が作成されます。
- **豊富な本文先頭** (1.50) は、長い形式のドキュメントを快適に保ちます。キャプションは科学論文レベルの明瞭さのために 1.70 にプッシュされました。
- _**重みの規律:** 400 (本文)、500 (中程度の強調)、600 (見出し/ボタン)、700 (強いインライン強調)。より重いウェイトは使用されません。
- **単一書体** 戦略 — DM Sans と別の Sans Serif を決して混合しないでください。 コード サンプル (表示されている場合) はシステム等幅フォールバックを使用していますが、2 番目の書体はブランド キャンバスに入りません。
レイアウト
間隔システム
- **基本単位**: 4 ピクセル (主増分 8 ピクセル)。
- **トークン**: `` (4px) · `` (8px) · `` (12px) · `` (16px) · `` (20px) · `` (24px) · `` (32px) · `` (40px) · `` (48px) · `` (64px) · `` (80px) · `` (96px).
- **セクションのリズム**: マーケティング ページは、スクロールせずに見える部分の上の `` (96 ピクセル)、次に下の `` (80 ピクセル) で区切られます。ドキュメントは `` (64px) に制限されます。テーブルの行は__CODEBCK_963___ (16px).
に圧縮されます。
- **カード内部パディング**: 鮮やかな製品カードは `` (32 ピクセル) を使用します。ドキュメント カードは `–` (20 ～ 24 ピクセル) を使用します。プロモーション ストリップは `` (64 ピクセル).
まで展開されます。
グリッドとコンテナ
- マーケティング ページでは、最大幅 1280 ピクセルと 32 ピクセルの余白が使用されます。
- ホームページの商品マトリックスは、幅が約 280 ～ 320 ピクセルの 32 ピクセルの丸みを帯びたグラデーション カードの 4 列行としてレンダリングされます。
- 以下の AI 製品マトリックスでは、16 ピクセルの角丸の白いカードを含む 4 列のグリッドが使用されています。
- ドキュメントの表面は 3 列レイアウトを使用します: 左側のサイドバー ナビゲーション (~220 ピクセル)、中央の散文本文 (最大幅 ~720 ピクセル)、右側の目次 (~180 ピクセル)。サイドバーはデスクトップ上に残ります。 1024px 未満の引き出しに折りたたまれます。
- トークン プラン/価格ページでは、3 列の層カード グリッドの上に 2 列のタブが使用されます。
ホワイトスペースの哲学
マーケティング ページには、製品の写真とカラー カードに十分なスペースが与えられます。_`` (96 ピクセル) のスクロールせずに見える範囲が、80 ピクセルのヒーロー ディスプレイに視覚的な酸素を生み出します。ドキュメント内の空白は劇的に減少します。セクションのギャップは `` (32 ピクセル) に減少し、表の行は `` (16 ピクセル) に詰め込まれ、サイドバーのナビゲーションは `` (8 ピクセル) の垂直リズムを使用します。
標高と深さ
システムはほぼフラットに動作します。 エレベーションは、スティッキー パネル、ドロップダウン、およびまれに使用されるフローティング CTA 用に予約されています。
|レベル |治療 | |
を使用します
|---|---|---|
| 0 (フラット) |影はありません。 `` 境界線 |デフォルトのカード、テーブル行、フォーム入力 |
| 1 (微妙) | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` |カードの推奨、ホバー表示タイル |
| 2 (カード) | `rgba(0, 0, 0, 0.08) 0px 4px 6px 0px` |標準機能カード、ドロップダウン |
| 3 (大気) | `rgba(0, 0, 0, 0.08) 0px 0px 22px 0px` |注目の商品カードの拡散光 |
| 4 (モーダル) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` |モーダル、確認ダイアログ、スティッキー パネル |
装飾の深さ
- _鮮やかなグラデーションのプロダクト カードは、内部の放射状グラデーションとシルエット画像によって独自の雰囲気の深さを伝えます。影は必要ありません。色が機能します。
- ブランドの色合いの影 (`rgba(44, 30, 116, 0.16) 0px 0px 15px`) が紫をテーマにしたカードの下に表示され、微妙な雰囲気を高めます。
- 点線/粒状のテクスチャが写真コンテンツの装飾として製品カード内に表示されることがあります。これらはシステム トークンとして形式化されていません。
図形
境界線の半径スケール
|トークン |値 | |
を使用します
|---|---|---|
| `` | 4ピクセル |コードチップ、マイクロコントロール |
| `` | 6ピクセル |コンパクトなコントロール、表のセル |
| `` | 8ピクセル |入力、二次ボタン、検索ピル |
| `` | 12ピクセル |ドキュメント カード、推奨タイル |
| `` | 16ピクセル |標準機能カード、AI 製品タイル |
| `` | 20ピクセル |大きな機能パネル |
| `` | 24ピクセル | AI 製品タイル機能のバリエーション |
| `` | 32ピクセル |鮮やかなグラデーションの商品カード、プロモーション CTA ストリップ |
| `` | 9999ピクセル |すべてのボタン、すべての薬タブ、バッジ |
写真の幾何学
- 鮮やかな製品カードは 32 ピクセルのコーナー ソフトニングを使用します。これは、静かな白いカードで使用される 16 ピクセルとは異なります。 2 倍の半径は、「これが注目の製品の瞬間です」という視覚的な特徴です。
- カード内の商品画像は、丸い内部フレームなしで写真コンテンツ (シルエット、スタジオの暗いポートレート照明) として扱われます。
- アバターの円 (紹介文ではまれに) は `` — 完全な円です。
コンポーネント
> ホバー禁止ポリシーに従って、ホバー状態は文書化されません。 デフォルトおよび押下/アクティブ状態のみ。
ボタン
**`button-primary`** — 黒丸薬のプライマリ CTA、すべてのサーフェイスにわたる主要なアクション。
- 背景__CODEBCK_988___、テキスト__CODEBCK_989___、タイポグラフィ__CODEBCK_990___、パディング__CODEBCK_991___、丸め__CODEBCK_992___.
- 押された状態__CODEBCK_993___は__CODEBCK_994___に上昇します。
- 無効状態__CODEBCK_995___は__CODEBCK_996___背景と__CODEBCK_997___テキストを使用します。
**`button-secondary`** — デュアル CTA ヒーロー パターンのプライマリ アクションとペアになったピルのセカンダリ アクションの概要を示します。
- 背景透明、テキスト__CODEBCK_999___、境界線__CODEBCK_1000___、タイポグラフィ__CODEBCK_1001___、パディング__CODEBCK_1002___、丸め__CODEBCK_1003___.
_**`button-tertiary`** — 白色の塗りつぶしの静かな錠剤。第 3 のナビゲーションおよび情報 CTA に使用されます。
- 背景__CODEBCK_1005___、テキスト__CODEBCK_1006___、境界線__CODEBCK_1007___、タイポグラフィ__CODEBCK_1008___、パディング__CODEBCK_1009___、丸め__CODEBCK_1010___.
**`button-link`** — 微妙なボタンとしてスタイル設定されたインライン テキスト リンク。
- 背景透明、テキスト__CODEBCK_1012___、タイポグラフィ__CODEBCK_1013___、パディング__CODEBCK_1014___。 アクティブ化すると下線が表示されます。
**`button-icon-circular`** — 36×36 ピクセルの円形ユーティリティ ボタン (カルーセル矢印、共有、コピー)。
- 背景__CODEBCK_1016___、テキスト__CODEBCK_1017___、境界線__CODEBCK_1018___、角丸__CODEBCK_1019___.
鮮やかな商品カード
**`product-card-coral`** — M2.7 / トークン プラン署名カード。
- 背景__CODEBCK_1021___、テキスト__CODEBCK_1022___、丸め__CODEBCK_1023___ (32ピクセル)、パディング__CODEBCK_1024___.
- M2.7 ワードマークを大規模な `` に白いキャッチフレーズでホストします。
**`product-card-magenta`** — Music 2.6 製品ショーケース。
- 背景__CODEBCK_1027___、テキスト__CODEBCK_1028___、丸め__CODEBCK_1029___、パディング__CODEBCK_1030___.
**`product-card-blue`** — Hailuo ビデオ製品ショーケース。
- 背景__CODEBCK_1032___、テキスト__CODEBCK_1033___、丸め__CODEBCK_1034___、パディング__CODEBCK_1035___.
**`product-card-purple`** — Speech 2.8 / バリアント製品ショーケース。
- 背景__CODEBCK_1037___、テキスト__CODEBCK_1038___、丸め__CODEBCK_1039___、パディング__CODEBCK_1040___.
**`product-card-photo`** — ダークポートレートの製品カード (ホームページ S2 プレースメント、ビデオ感情製品)。
- 背景__CODEBCK_1042___ (黒に製品写真が重ねられています)、テキスト__CODEBCK_1043___、角丸__CODEBCK_1044___、パディング__CODEBCK_1045___.
カードとコンテナ
**`card-base`** — 標準ドキュメント/機能カード。
- 背景__CODEBCK_1047___、角丸__CODEBCK_1048___、パディング__CODEBCK_1049___、境界線__CODEBCK_1050___.
**`card-feature`** — ライトグレーの静かな機能パネル。
- 背景__CODEBCK_1052___、丸め__CODEBCK_1053___、パディング__CODEBCK_1054___.
**`card-recommendation`** — ドキュメント フッターの「推奨読書」タイル。
- 背景__CODEBCK_1056___、角丸__CODEBCK_1057___、パディング__CODEBCK_1058___、境界線__CODEBCK_1059___.
_**`promo-cta-card`** — CTA ピルが埋め込まれた明るいオレンジ色の「10% 返金...」プロモーション ストリップ。
- 背景__CODEBCK_1061___、テキスト__CODEBCK_1062___、丸め__CODEBCK_1063___、パディング__CODEBCK_1064___。埋め込みボタンは、「今すぐ参加」アクションに `button-tertiary` (サンゴ上の白い錠剤) を使用します。
**`ai-product-tile`** — AI 製品マトリックス グリッドの白いカード (エージェント、Hailuo ビデオ、MiniMax オーディオ)。
- 背景__CODEBCK_1067___、角丸__CODEBCK_1068___、パディング__CODEBCK_1069___、境界線__CODEBCK_1070___。 アイコン/イラストのトップ、タイトル ``、説明 ``.
が表示されます。
入力とフォーム
**`text-input`** — 標準のテキスト フィールド。
- 背景__CODEBCK_1074___、テキスト__CODEBCK_1075___、境界線__CODEBCK_1076___、角丸__CODEBCK_1077___、パディング__CODEBCK_1078___、高さ40ピクセル
**`text-input-focused`** — アクティブ化された状態。
- 境界線が__CODEBCK_1080___に切り替わります。
**`text-input-error`** — 検証エラー状態。
- 境界線が__CODEBCK_1082___に切り替わります。以下の一致する赤色のエラー ラベル ``.
**`search-pill`** — ドキュメントの上部バーの検索フィールド。
- 背景__CODEBCK_1085___、テキスト__CODEBCK_1086___、タイポグラフィ__CODEBCK_1087___、角丸__CODEBCK_1088___、高さ36ピクセル、境界線__CODEBCK_1089___.
タブ
**`segmented-tab`** + **`segmented-tab-active`** — 下線スタイルのタブ ナビゲーション (M2.7 ページのベンチマーク / 自己評価 / マルチエージェント コラボレーション)。
- 非アクティブ: テキスト__CODEBCK_1092___、透明な背景、パディング__CODEBCK_1093___。アクティブ: テキストが `` に移動し、__CODEBCK_1095___ の下の境界線が 2 ピクセルになります。
_**`pill-tab`** + **`pill-tab-active`** — 価格ページのタブ ナビゲーション (トークン プラン / オーディオ サブスクリプション / ビデオ パッケージ)。
- 非アクティブ: 背景__CODEBCK_1098___、テキスト__CODEBCK_1099___、境界線__CODEBCK_1100___、パディング__CODEBCK_1101___、丸め__CODEBCK_1102___.
- アクティブ: 背景__CODEBCK_1103___、テキスト__CODEBCK_1104___、枠線なし(またはそれに対応する黒枠)。
バッジとステータス
**`badge-success`** — 淡い緑色の確認バッジ (「利用可能」、「アクティブ」)。
- 背景__CODEBCK_1106___、テキスト__CODEBCK_1107___、タイポグラフィ__CODEBCK_1108___、角丸__CODEBCK_1109___、パディング__CODEBCK_1110___.
**`badge-new`** — 新規リリース用の Coral の「新規」/「ライブ」錠剤。
- 背景__CODEBCK_1112___、テキスト__CODEBCK_1113___、タイポグラフィ__CODEBCK_1114___、角丸__CODEBCK_1115___、パディング__CODEBCK_1116___.
**`badge-beta`** — 淡い青色の「ベータ」/情報薬。
- 背景__CODEBCK_1118___、テキスト__CODEBCK_1119___、タイポグラフィ__CODEBCK_1120___、角丸__CODEBCK_1121___、パディング__CODEBCK_1122___.
**`badge-code`** — インライン コード スタイル チップ (「コード」、「API」)。
- 背景__CODEBCK_1124___、テキスト__CODEBCK_1125___、タイポグラフィ__CODEBCK_1126___、角丸__CODEBCK_1127___、パディング__CODEBCK_1128___.
**`promo-banner`** — 上部ナビゲーションの上にある粘着性のある黒いプロモーション ストリップ (「招待して獲得 — 両方に報酬を獲得!」)。
- 背景__CODEBCK_1130___、テキスト__CODEBCK_1131___、タイポグラフィ__CODEBCK_1132___、パディング__CODEBCK_1133___。 オプションのインライン リンクを使用して 1 行のコピーを送信します。
データ テーブル
**`data-table`** — ドキュメント モデルの比較表。
- 背景__CODEBCK_1135___、テキスト__CODEBCK_1136___、タイポグラフィ__CODEBCK_1137___、角丸__CODEBCK_1138___、境界線__CODEBCK_1139___.
**`data-table-header`** — データ テーブルの一番上のヘッダー行。
- 背景__CODEBCK_1141___、テキスト__CODEBCK_1142___、タイポグラフィ__CODEBCK_1143___、パディング__CODEBCK_1144___.
**`data-table-row`** — 本文行。
- 背景__CODEBCK_1146___、テキスト__CODEBCK_1147___、タイポグラフィ__CODEBCK_1148___、パディング__CODEBCK_1149___、下枠__CODEBCK_1150___.
ナビゲーション
**トップ ナビゲーション (マーケティング)** — ロゴ、リンク リスト、右側の CTA を含む白いバー。
- 背景__CODEBCK_1151___、高さ~64ピクセル、下枠__CODEBCK_1152___.
- 左: MiniMax ワードマーク + 水平リンク リスト (モデル、製品、API、会社)。
- 右: 黒丸の「お問い合わせ」+白抜き丸の「ログイン」。
**トップ ナビゲーション (ドキュメント/プラットフォーム)** — 中央の検索ピルと右側のアカウント/アップグレード CTA を備えた圧縮ナビゲーション。
- 背景__CODEBCK_1153___、高さ約56ピクセル、中央に検索ピル、右側に「ドキュメント/アカウント/購読」リンクと黒いピル「サインアップ」があります。
**`sidebar-nav-item`** + **`sidebar-nav-item-active`** — ドキュメントの左側のレール リンク エントリ。
- 非アクティブ: 背景透明、テキスト__CODEBCK_1156___、タイポグラフィ__CODEBCK_1157___、角丸__CODEBCK_1158___、パディング__CODEBCK_1159___.
- アクティブ: 背景__CODEBCK_1160___、テキスト__CODEBCK_1161___、タイポグラフィ__CODEBCK_1162___.
**`doc-toc-item`** — 右レールの目次リンク。
- 背景透明、テキスト__CODEBCK_1164___、タイポグラフィ__CODEBCK_1165___、パディング__CODEBCK_1166___。 アクティブなアイテムの色は ``.
に変化します
署名コンポーネント
**`hero-band-marketing`** — 巨大な 80 ピクセルのディスプレイ + デュアル CTA ペアを備えた中央のヒーロー。
- レイアウト: 見出しは__CODEBCK_1169___ ({colors.ink})の中央に、サブタイトルは__CODEBCK_1170___ ({colors.steel})、ボタンの行は中央に配置されます(`button-primary` + `button-secondary`)。
_**`product-matrix-grid`** — 鮮やかなグラデーションの製品カードの 4 列水平スクロール (ホームページ「フルスタック モデル マトリックス」)。
- 各タイルは、__CODEBCK_1174___ バリアント (コーラル、マゼンタ、ブルー、パープル、写真) の 1 つを使用します。
- __CODEBCK_1175___ (M2.7 ワードマーク) または `` (音楽 2.6) のカード タイトル。
- ワードマークの下: `` 80% の白い不透明度の薄いキャッチフレーズ。
- 右上のオプションのバッジ: `badge-new`.
- カードの高さは均一です (~360 ～ 400px)。モバイルでは行が水平方向にスクロールします。
_**`ai-product-matrix`** — 鮮やかなマトリックス (エージェント / Hailuo ビデオ / オーディオ / ビデオ) の下にある白い製品タイルの 4 列グリッド。
- 各タイルは__CODEBCK_1180___ クロムです。
- 上部: 高さ 100 ピクセルのイラスト ゾーン (多くの場合、線画アイコンまたは 3D マーク)。
- 以下: タイトルは__CODEBCK_1181___、説明は__CODEBCK_1182___ ``.
**`docs-prose-block`** — ドキュメントのメイン コンテンツ領域。
- 最大幅 ~720 ピクセル、中央揃え。 `` `` 行の高さ 1.6.
の本文
- __CODEBCK_1188___ 背景と__CODEBCK_1189___ コーナーを備えた_`` 等幅フォールバックのインライン コード。
**`models-comparison-table`** — モデルのサイズと機能を比較したドキュメント表。
- __CODEBCK_1191___ クロムを使用します。各行には、モデル名 (__CODEBCK_1192___ body-sm-medium にリンクされています)、説明列 (``)、および機能の箇条書きリスト列が含まれています。
_**`testimonial-stat-row`** — 統計ストリップ (「214,000+ エンタープライズ クライアントと開発者」、「0+ サービス対象国」)。
- 4 つの統計セルの水平行。各セルには `` `` に大きな数字があり、その下のラベルが `` ``.
**`footer-region`** — 高密度の黒キャンバスの複数列フッター。
- 背景__CODEBCK_1200___、パディング__CODEBCK_1201___.
- 上の行: MiniMax ワードマーク (「インテリジェンスをみんなに」というキャッチフレーズ) とソーシャル アイコン (X、Twitter、GitHub など)。
- 本文: 4 列のリンク グリッド (リサーチ / 製品 / API / 会社 / ニュース)。
- __CODEBCK_1202___ のセクション ヘッダー ``.
**`footer-link`** — フッター列内の個別のリンク エントリ。
- 背景透明、テキスト__CODEBCK_1205___、タイポグラフィ__CODEBCK_1206___、パディング__CODEBCK_1207___。 アクティブ/訪問済みの状態は色を変更しません。アクティブ化すると不透明度のみが変化します。
推奨事項と禁止事項
実行
- __CODEBCK_1208___ (黒) を主要な CTA として使用します。これは、ブランドで最も認識されやすいインタラクティブな要素です。
- 製品のブランド カラー (``、__CODEBCK_1210___、__CODEBCK_1211___、__CODEBCK_1212___) は、製品のアイデンティティを示す瞬間にのみ予約してください。一般的なボタンやテキストには決して使用しないでください。
- 同じビューポート内で `` (32 ピクセル) のグラデーション カードと `` (16 ピクセル) の白いカードをペアにします。半径のコントラストが視覚的な特徴です。
- __CODEBCK_1215___ をすべてのボタン、すべての錠剤タブ、すべてのバッジに適用します。
- ヒーロー表示には `` (80px) を -2px の文字間隔で使用します。先頭や文字間隔を決して妥協しないでください。
- 各モデル/製品ラインを個別の色のアイデンティティとして扱います。 M2.7はサンゴ、音楽はマゼンタ、海洛は青です。これらはブランドの割り当てであり、自由な選択ではありません。
しないでください
- 本文テキストや大きな表面にはブランド コーラルまたはブランド マゼンタを使用しないでください。使いすぎると意味が失われます。
- ボタンの角をソフトにしないでください (_`` 未満のもの)。この錠剤はブランドの特徴です。
- 2 番目の表示書体を導入しないでください。 DM Sans はあらゆる役割を担当します。
- ヒーロー リードを 1.10 未満にしないでください。ブランドには、80 ピクセルのディスプレイに余裕が必要です。
- 白いカードには濃い影を適用しないでください。 flat-with-borders はドキュメントのデフォルトです。
- 標準ボタンにグラデーションの背景を付けないでください。グラデーションは、製品カードのアイデンティティの瞬間のために予約されています。
応答動作
ブレークポイント
|名前 |幅 |主な変更点 |
|---|---|---|
|モバイル（小） | < 480px | Single column. Hero drops to 40px. Pill nav collapses to hamburger. Product matrix horizontal-scroll. Footer 1-column accordion. |
|モバイル（大） | 480 – 767ピクセル |小さいものと同じですが、AI 製品マトリックスは 2 アップでレンダリングされます。 |
|タブレット | 768 – 1023ピクセル | 2 列の AI 製品マトリックス。ピルタブナビが戻ります。ドキュメントのサイドバーは引き出しに折りたたまれます。 |
|デスクトップ | 1024 – 1279ピクセル |完全な 4 列の製品マトリックス。 3 列のドキュメント グリッド (サイドバー / 本文 / 目次)。 |
|ワイドデスクトップ | ≥ 1280 ピクセル |より広いヒーローガター、より大きな製品写真、220ピクセルの固定サイドバー。 |
タッチターゲット
- ピル ボタンは 38 ～ 40 ピクセルの有効高さでレンダリングされます。モバイルではパディング オーバーライドにより 44 ピクセルに増加します。
- 円形アイコン ボタン: デスクトップでは 36×36 ピクセル → モバイルでは 44×44 ピクセル。
- フォーム入力は 40 ピクセルの高さでレンダリングされます。モバイルでは 44 ピクセルに増加します。
- サイドバーのナビゲーション項目は高さ約 32 ピクセルで表示されますが、モバイル ドロワーでは最大 44 ピクセルになります。
戦略の崩壊
- **プロモーション バナー** は全幅のままです。 < 480px with truncation.
で単一行に折りたたまれます
- **1024 ピクセル未満のトップ ナビゲーション** はハンバーガーに折りたたまれます。水平リンクがドロワーに移動します。
- **ドキュメント グリッド**: 3 列デスクトップ → < 1024px → single-column with collapsible sidebar at < 768px.
のサイドバードロワー
- **製品マトリックス**: 4 列デスクトップ → < 1024px (carousel-style with snap points).
で水平スクロール
- **AI 製品マトリックス**: 4 列 → タブレットで 2 列 → モバイルで 1 列。
- **ヒーロー タイポグラフィ**: `` (80 ピクセル) → < 1024px → 40px at < 768px → 32px at < 480px.
で 56 ピクセル
- **統計ストリップ**: 4 列 → < 768px → 1-column at < 480px.
で 2×2
画像の動作
- _商品カードの画像では、内部グラデーション オーバーレイを備えた写真コンテンツが使用されています。
スクロールしないと見えない部分の下に遅延読み込みされます。
- AI 製品タイルのイラストは SVG ベースです。すべてのブレークポイントで鮮明なままになります。
- お客様の声のアバター画像は、__CODEBCK_1219___ マスキングを使用して 1:1 のアスペクト比を使用しています。
反復ガイド
1.一度に 1 つのコンポーネントに焦点を当てます。システムには高い内部一貫性があります。
2.コンポーネント名とトークンを直接参照します (``、__CODEBCK_1221___、__CODEBCK_1222___) - 言い換えはしないでください。
3.編集後に__CODEBCK_1223___を実行して、破損した参照とコントラストの問題を検出します。
4.新しいバリアントを個別の `components:` エントリ (`-pressed`、__CODEBCK_1226___、__CODEBCK_1227___) として追加します。
5.デフォルトは本文の場合は__CODEBCK_1228___、強調の場合は__CODEBCK_1229___です。見出しが下がります `hero-display → display-lg → heading-lg → heading-md → heading-sm`.
6.ブランドカラー (コーラル、マゼンタ、ブルー、パープル) を製品カードのアイデンティティに限定してください。ブランドカラーが標準ボタンまたは一般的な表面に表示されている場合は、その表面を獲得したかどうかを尋ねてください。
7。錠剤型ボタン (``) は常に;四角いボタンは、この言語では「サードパーティ ウィジェット」であることを示します。
既知のギャップ
- 特定のダークモード トークン値 (キャンバス、サーフェス、インク、ヘアライン) は、これらのページには表示されません。このブランドはまだ公開されたダークモード パレットを出荷していません。
- _アニメーション/遷移のタイミングは抽出されません。ホバー/フォーカス状態遷移には 150 ～ 200 ミリ秒の容易さを推奨します。
- フォーム検証の成功状態は、デフォルトを超えると明示的に取得されません。次の標準的な緑色の枠線と成功バッジのパターンを実装します。
- _ドキュメント内のコード構文強調表示パレットは形式化されていません。ドキュメントのサンプルは、システムのデフォルトの等幅と最小限の色付けで表示されます。