Minimax Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

11type steps

8radius steps

2pxspacing base

Minimax, in one page

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

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.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Minimax design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #0a0a0a
- on-primary: #ffffff
- primary-soft: #181e25
- brand-coral: #ff5530
- brand-magenta: #ea5ec1
- brand-blue: #1456f0
- brand-blue-mid: #3b82f6
- brand-blue-deep: #1d4ed8
- brand-blue-700: #17437d
- brand-cyan: #3daeff

Type:
- families: DM Sans
- scale: 12, 13, 14, 16, 18, 20, 24, 32, 40
- weights: 400, 500, 600, 700

Shape:
- radius: 4, 6, 8, 12, 16, 20, 24, 32

Spacing: 2, 4, 8, 11, 12, 16, 20, 24, 32, 40

Rules:
- 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 moment…
- 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.

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

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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

Type scaleRead the full spec

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.

Components and layoutRead the full spec

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

Responsive behaviourRead the full spec

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.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-minimax {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #0a0a0a;
  --heading-color: #0a0a0a;
  --link-color: #0a0a0a;
  --link-hover-color: #000000;
  --border-color: #d3d3d3;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(10,10,10,0.06);
  --card-hover-shadow: 0 6px 18px rgba(10,10,10,0.12);
  --header-bg: #0a0a0a;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #606060;
  --button-bg: #0a0a0a;
  --button-text-color: #ffffff;
  --button-hover-bg: #000000;
  --button-border: none;
  --button-border-radius: 16px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #0a0a0a;
  --button-secondary-hover-bg: #e2e2e2;
  --button-secondary-border: 1px solid #d3d3d3;
  --prompt-bg: #f3f3f3;
  --prompt-text-color: #0a0a0a;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 16px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

notion 82.3%
linear.app 78.6%
mongodb 77.7%
miro 76.6%
mintlify 76.6%

Where this came from

Source document: volt/design-md/minimax/DESIGN.md · 36.8 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.