MiniMax Design System

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

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.