返回列表
行业: AI 与大语言模型平台Website

MiniMax

MiniMax 通过黑色胶囊按钮、纯白营销画布和鲜艳渐变产品界面建立高端 AI 基础设施形象，在克制的品牌框架中突出多模态产品的活力。

Light UIGradientDeveloper-focusedLuxuryDesign System
MiniMax 网站预览
设计系统
品牌色彩 · 28

primary

#0A0A0A

--color-primary

on primary

#FFFFFF

--color-on-primary

primary soft

#181E25

--color-primary-soft

brand coral

#FF5530

--color-brand-coral

brand magenta

#EA5EC1

--color-brand-magenta

brand blue

#1456F0

--color-brand-blue

brand blue mid

#3B82F6

--color-brand-blue-mid

brand blue deep

#1D4ED8

--color-brand-blue-deep

brand blue 700

#17437D

--color-brand-blue-700

brand cyan

#3DAEFF

--color-brand-cyan

brand blue 200

#BFDBFE

--color-brand-blue-200

brand purple

#A855F7

--color-brand-purple

canvas

#FFFFFF

--color-canvas

surface

#F7F8FA

--color-surface

surface soft

#F2F3F5

--color-surface-soft

hairline

#E5E7EB

--color-hairline

hairline soft

#EAECF0

--color-hairline-soft

ink

#0A0A0A

--color-ink

ink strong

#000000

--color-ink-strong

charcoal

#222222

--color-charcoal

slate

#45515E

--color-slate

steel

#5F5F5F

--color-steel

stone

#8E8E93

--color-stone

muted

#A8AAB2

--color-muted

success bg

#E8FFEA

--color-success-bg

success text

#1BA673

--color-success-text

on dark

#FFFFFF

--color-on-dark

footer bg

#0A0A0A

--color-footer-bg

字体系统

字体家族

DM Sans

字重

600500400700

备注

1 个字体家族，完整字阶、行高和字距见 DESIGN.md

标签
Light UIGradientDeveloper-focusedLuxuryDesign System
设计文档

品牌设计系统的完整 Markdown 文档

MiniMax — Style Reference

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

**Theme:** light

**Source website:** [https://www.minimax.io/](https://www.minimax.io/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

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

| primary | `#0a0a0a` | `--color-primary` | primary role extracted from the source design |

| on primary | `#ffffff` | `--color-on-primary` | on primary role extracted from the source design |

| primary soft | `#181e25` | `--color-primary-soft` | primary soft role extracted from the source design |

| brand coral | `#ff5530` | `--color-brand-coral` | brand coral role extracted from the source design |

| brand magenta | `#ea5ec1` | `--color-brand-magenta` | brand magenta role extracted from the source design |

| brand blue | `#1456f0` | `--color-brand-blue` | brand blue role extracted from the source design |

| brand blue mid | `#3b82f6` | `--color-brand-blue-mid` | brand blue mid role extracted from the source design |

| brand blue deep | `#1d4ed8` | `--color-brand-blue-deep` | brand blue deep role extracted from the source design |

| brand blue 700 | `#17437d` | `--color-brand-blue-700` | brand blue 700 role extracted from the source design |

| brand cyan | `#3daeff` | `--color-brand-cyan` | brand cyan role extracted from the source design |

| brand blue 200 | `#bfdbfe` | `--color-brand-blue-200` | brand blue 200 role extracted from the source design |

| brand purple | `#a855f7` | `--color-brand-purple` | brand purple role extracted from the source design |

| canvas | `#ffffff` | `--color-canvas` | canvas role extracted from the source design |

| surface | `#f7f8fa` | `--color-surface` | surface role extracted from the source design |

| surface soft | `#f2f3f5` | `--color-surface-soft` | surface soft role extracted from the source design |

| hairline | `#e5e7eb` | `--color-hairline` | hairline role extracted from the source design |

| hairline soft | `#eaecf0` | `--color-hairline-soft` | hairline soft role extracted from the source design |

| ink | `#0a0a0a` | `--color-ink` | ink role extracted from the source design |

| ink strong | `#000000` | `--color-ink-strong` | ink strong role extracted from the source design |

| charcoal | `#222222` | `--color-charcoal` | charcoal role extracted from the source design |

| slate | `#45515e` | `--color-slate` | slate role extracted from the source design |

| steel | `#5f5f5f` | `--color-steel` | steel role extracted from the source design |

| stone | `#8e8e93` | `--color-stone` | stone role extracted from the source design |

| muted | `#a8aab2` | `--color-muted` | muted role extracted from the source design |

| success bg | `#e8ffea` | `--color-success-bg` | success bg role extracted from the source design |

| success text | `#1ba673` | `--color-success-text` | success text role extracted from the source design |

| on dark | `#ffffff` | `--color-on-dark` | on dark role extracted from the source design |

| footer bg | `#0a0a0a` | `--color-footer-bg` | footer bg role extracted from the source design |

Tokens — Typography

DM Sans · `--font-primary`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 600, 500, 400, 700
  • **Sizes:** 80px, 56px, 40px, 32px, 24px, 20px, 18px, 16px, 14px, 13px, 12px
  • **Line height:** 1.1, 1.2, 1.25, 1.3, 1.4, 1.5, 1.7
  • **Letter spacing:** -2px, -1.5px, -1px, -0.5px, 0
  • **Role:** Brand typography family observed across the documented type scale.

    • Type Scale

    | Role | Size | Line Height | Letter Spacing | Token |

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

    | hero-display | 80px | 1.1 | -2px | `--text-hero-display` |

    | display-lg | 56px | 1.1 | -1.5px | `--text-display-lg` |

    | heading-lg | 40px | 1.2 | -1px | `--text-heading-lg` |

    | heading-md | 32px | 1.25 | -0.5px | `--text-heading-md` |

    | heading-sm | 24px | 1.3 | 0 | `--text-heading-sm` |

    | card-title | 20px | 1.4 | 0 | `--text-card-title` |

    | subtitle | 18px | 1.5 | 0 | `--text-subtitle` |

    | body-md | 16px | 1.5 | 0 | `--text-body-md` |

    | body-md-bold | 16px | 1.5 | 0 | `--text-body-md-bold` |

    | body-sm | 14px | 1.5 | 0 | `--text-body-sm` |

    | body-sm-medium | 14px | 1.5 | 0 | `--text-body-sm-medium` |

    | caption | 13px | 1.7 | 0 | `--text-caption` |

    | caption-bold | 13px | 1.5 | 0 | `--text-caption-bold` |

    | micro | 12px | 1.5 | 0 | `--text-micro` |

    | button-md | 14px | 1.4 | 0 | `--text-button-md` |

    Tokens — Spacing & Shapes

    **Density:** comfortable

    Spacing Scale

    | Name | Value | Token |

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

    | xxs | 4px | `--spacing-xxs` |

    | xs | 8px | `--spacing-xs` |

    | sm | 12px | `--spacing-sm` |

    | md | 16px | `--spacing-md` |

    | lg | 20px | `--spacing-lg` |

    | xl | 24px | `--spacing-xl` |

    | xxl | 32px | `--spacing-xxl` |

    | xxxl | 40px | `--spacing-xxxl` |

    | section-sm | 48px | `--spacing-section-sm` |

    | section | 64px | `--spacing-section` |

    | section-lg | 80px | `--spacing-section-lg` |

    | hero | 96px | `--spacing-hero` |

    Border Radius

    | Name | Value | Token |

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

    | xs | 4px | `--radius-xs` |

    | sm | 6px | `--radius-sm` |

    | md | 8px | `--radius-md` |

    | lg | 12px | `--radius-lg` |

    | xl | 16px | `--radius-xl` |

    | xxl | 20px | `--radius-xxl` |

    | xxxl | 24px | `--radius-xxxl` |

    | hero | 32px | `--radius-hero` |

    | full | 9999px | `--radius-full` |

    Layout

  • **Section gap:** 64px
  • **Card padding:** 20px
  • **Element gap:** 16px
  • **Max content width:** 1200px

    • Components

    button primary

    **Role:** button primary component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.full}`
  • **padding:** `11px 24px`

    • button primary pressed

    **Role:** button primary pressed component

  • **backgroundColor:** `{colors.charcoal}`
  • **textColor:** `{colors.on-primary}`

    • button primary disabled

    **Role:** button primary disabled component

  • **backgroundColor:** `{colors.hairline}`
  • **textColor:** `{colors.muted}`

    • button secondary

    **Role:** button secondary component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.full}`
  • **padding:** `11px 24px`
  • **border:** `1px solid {colors.ink}`

    • button tertiary

    **Role:** button tertiary component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.full}`
  • **padding:** `11px 24px`
  • **border:** `1px solid {colors.hairline}`

    • button link

    **Role:** button link component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm-medium}`
  • **padding:** `8px 0`

    • button icon circular

    **Role:** button icon circular component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **rounded:** `{rounded.full}`
  • **size:** `36px`
  • **border:** `1px solid {colors.hairline}`

    • product card coral

    **Role:** product card coral component

  • **backgroundColor:** `{colors.brand-coral}`
  • **textColor:** `{colors.on-dark}`
  • **rounded:** `{rounded.hero}`
  • **padding:** `{spacing.xxl}`

    • product card magenta

    **Role:** product card magenta component

  • **backgroundColor:** `{colors.brand-magenta}`
  • **textColor:** `{colors.on-dark}`
  • **rounded:** `{rounded.hero}`
  • **padding:** `{spacing.xxl}`

    • product card blue

    **Role:** product card blue component

  • **backgroundColor:** `{colors.brand-blue}`
  • **textColor:** `{colors.on-dark}`
  • **rounded:** `{rounded.hero}`
  • **padding:** `{spacing.xxl}`

    • product card purple

    **Role:** product card purple component

  • **backgroundColor:** `{colors.brand-purple}`
  • **textColor:** `{colors.on-dark}`
  • **rounded:** `{rounded.hero}`
  • **padding:** `{spacing.xxl}`

    • product card photo

    **Role:** product card photo component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-dark}`
  • **rounded:** `{rounded.hero}`
  • **padding:** `{spacing.xxl}`

    • card base

    **Role:** card base component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.xl}`
  • **padding:** `{spacing.xl}`
  • **border:** `1px solid {colors.hairline}`

    • card feature

    **Role:** card feature component

  • **backgroundColor:** `{colors.surface}`
  • **rounded:** `{rounded.xl}`
  • **padding:** `{spacing.xxl}`

    • card recommendation

    **Role:** card recommendation component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.lg}`
  • **border:** `1px solid {colors.hairline}`

    • promo cta card

    **Role:** promo cta card component

  • **backgroundColor:** `{colors.brand-coral}`
  • **textColor:** `{colors.on-dark}`
  • **rounded:** `{rounded.hero}`
  • **padding:** `{spacing.section}`

    • text input

    **Role:** text input component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `{spacing.sm} {spacing.md}`
  • **border:** `1px solid {colors.hairline}`
  • **height:** `40px`

    • text input focused

    **Role:** text input focused component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **border:** `2px solid {colors.brand-blue-deep}`

    • text input error

    **Role:** text input error component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **border:** `1px solid #d45656`

    • search pill

    **Role:** search pill component

  • **backgroundColor:** `{colors.surface}`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.body-sm}`
  • **rounded:** `{rounded.md}`
  • **padding:** `{spacing.xs} {spacing.md}`
  • **height:** `36px`
  • **border:** `1px solid {colors.hairline}`

    • segmented tab

    **Role:** segmented tab component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `0`
  • **padding:** `{spacing.md} {spacing.lg}`
  • **border:** `0 0 2px transparent solid`

    • segmented tab active

    **Role:** segmented tab active component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **border:** `0 0 2px {colors.ink} solid`

    • pill tab

    **Role:** pill tab component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.body-sm-medium}`
  • **rounded:** `{rounded.full}`
  • **padding:** `{spacing.xs} {spacing.md}`
  • **border:** `1px solid {colors.hairline}`

    • pill tab active

    **Role:** pill tab active component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **rounded:** `{rounded.full}`
  • **border:** `1px solid {colors.primary}`

    • badge success

    **Role:** badge success component

  • **backgroundColor:** `{colors.success-bg}`
  • **textColor:** `{colors.success-text}`
  • **typography:** `{typography.caption-bold}`
  • **rounded:** `{rounded.full}`
  • **padding:** `4px 10px`

    • badge new

    **Role:** badge new component

  • **backgroundColor:** `{colors.brand-coral}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.caption-bold}`
  • **rounded:** `{rounded.full}`
  • **padding:** `4px 10px`

    • badge beta

    **Role:** badge beta component

  • **backgroundColor:** `{colors.brand-blue-200}`
  • **textColor:** `{colors.brand-blue-deep}`
  • **typography:** `{typography.caption-bold}`
  • **rounded:** `{rounded.full}`
  • **padding:** `4px 10px`

    • badge code

    **Role:** badge code component

  • **backgroundColor:** `{colors.brand-blue-200}`
  • **textColor:** `{colors.brand-blue-deep}`
  • **typography:** `{typography.caption-bold}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `2px 6px`

    • promo banner

    **Role:** promo banner component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.body-sm-medium}`
  • **padding:** `{spacing.sm} {spacing.lg}`

    • data table

    **Role:** data table component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm}`
  • **rounded:** `{rounded.md}`
  • **border:** `1px solid {colors.hairline}`

    • data table header

    **Role:** data table header component

  • **backgroundColor:** `{colors.surface}`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.caption-bold}`
  • **padding:** `{spacing.sm} {spacing.md}`

    • data table row

    **Role:** data table row component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm}`
  • **padding:** `{spacing.md}`
  • **border:** `0 0 1px {colors.hairline-soft} solid`

    • sidebar nav item

    **Role:** sidebar nav item component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.charcoal}`
  • **typography:** `{typography.body-sm}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.xs} {spacing.md}`

    • sidebar nav item active

    **Role:** sidebar nav item active component

  • **backgroundColor:** `{colors.surface}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm-medium}`

    • doc toc item

    **Role:** doc toc item component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.body-sm}`
  • **padding:** `{spacing.xs} 0`

    • ai product tile

    **Role:** ai product tile component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.xxxl}`
  • **padding:** `{spacing.xl}`
  • **border:** `1px solid {colors.hairline}`

    • footer region

    **Role:** footer region component

  • **backgroundColor:** `{colors.footer-bg}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.body-sm}`
  • **padding:** `{spacing.section} {spacing.xxl}`

    • footer link

    **Role:** footer link component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.muted}`
  • **typography:** `{typography.body-sm}`
  • **padding:** `{spacing.xxs} 0`

    • hero band marketing

    **Role:** hero band marketing component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.hero-display}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.hero}`

    • product matrix grid

    **Role:** product matrix grid component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.hero}`
  • **padding:** `{spacing.xxl}`

    • ai product matrix

    **Role:** ai product matrix component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.xxxl}`
  • **padding:** `{spacing.xl}`
  • **border:** `1px solid {colors.hairline}`

    • docs prose block

    **Role:** docs prose block component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.charcoal}`
  • **typography:** `{typography.body-md}`
  • **padding:** `{spacing.xxl}`

    • models comparison table

    **Role:** models comparison table component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm}`
  • **rounded:** `{rounded.md}`
  • **border:** `1px solid {colors.hairline}`

    • testimonial stat row

    **Role:** testimonial stat row component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.heading-lg}`
  • **padding:** `{spacing.xl}`

    • Do's and Don'ts

    Do

  • Use `--color-primary` for the brand's primary interaction treatment.
  • Keep page surfaces anchored to `--color-canvas`.
  • Preserve every typography style's documented size, line height, and letter spacing.
  • Compare major implementation decisions against [the live MiniMax website](https://www.minimax.io/).

    • Don't

  • Do not introduce colors outside the documented color token set.
  • Do not replace `--color-ink` with an arbitrary neutral.
  • Do not flatten documented component states or spacing relationships.
  • Do not treat this extracted snapshot as newer than the live source website.

    • Layout

    Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://www.minimax.io/).

    同类品牌推荐

    Claude

    Light UI · Editorial

    Cohere

    Light UI · Editorial

    ElevenLabs

    Light UI · Editorial

    MiniMax 设计系统 | 品牌模板 · ViboDesign