What are MiniMax's brand colors?

The brand anchor is near-black ink (#0a0a0a) on pure white canvas (#ffffff) — that pair carries every primary CTA, headline, and surface across roughly 90% of pages. The four product brand colors — coral #ff5530, magenta #ea5ec1, blue #1456f0, and purple #a855f7 — are reserved for product-identity moments only: vibrant gradient cards in the homepage Full-Stack Model Matrix, the NEW badge, and the orange promo CTA strip. Treating each model line as a distinct color identity is a brand assignment, not a free choice.

What typography does MiniMax use?

DM Sans across every surface, every role, at four weights — 400 (body), 500 (medium emphasis), 600 (headings and buttons), and 700 (strong inline). Fallbacks walk Inter, Helvetica Neue, Helvetica, Arial. The hero display sits at 80px / 600 with -2px letter-spacing and 1.10 leading for magazine-grade tightness; the scale steps down through display-lg (56px), heading-lg (40px), heading-md (32px), heading-sm (24px), card-title (20px), and so on down to a 12px micro label. There is no italic variant — emphasis comes from weight.

Does MiniMax's design system have a dark mode?

Not for the public marketing and platform surfaces captured here. Canvas stays at #ffffff with #f7f8fa as the lightest surface fill, hairlines at #e5e7eb, and text in #0a0a0a near-black. The footer is the only dark region — a dense black-canvas multi-column band at #0a0a0a with #ffffff text and #a8aab2 muted links. A formal dark-mode palette is listed in the Known Gaps section.

What's the shape language across the system?

Pill-shaped everything. Every button, every pill tab, every badge runs at 9999px radius; rectangular corners only appear inside data tables, dense docs, and code chips. The radius scale climbs xs (4px), sm (6px), md (8px), lg (12px), xl (16px), xxl (20px), xxxl (24px), to a 32px hero radius reserved for vibrant gradient product cards. The contrast between 32px gradient cards and 16px white documentation cards in the same viewport is the brand's visual signature.

How do I use this DESIGN.md in a React project?

Feed the file to Claude, Cursor, or GitHub Copilot — the AI reads the structured tokens and produces React components that match MiniMax's voice instead of a generic shadcn theme. Or reference the tokens directly: every color hex, type style, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or your own component library. The product-color encoding rule (coral M2.7, magenta Music, blue Hailuo, purple Speech) is the one decision worth porting carefully — it's what keeps the system from collapsing into monochrome.

What's missing from this DESIGN.md spec?

Four things, documented in the Known Gaps section: dark-mode token values (the brand has not shipped a published dark palette beyond the footer region), animation and transition timings (recommend 150–200ms ease for focus state transitions), form validation success state beyond defaults, and the code syntax highlighting palette inside documentation surfaces. The spec captures the visual language for the marketing homepage, model showcase pages, platform documentation, and pricing surfaces — about 95% of the public web experience.

MiniMax Design System

MiniMax's design system as a DESIGN.md file.

About MiniMax DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source minimaxi.com

AI & LLM Platforms
Developer Tools & IDEs

MiniMax is a Chinese AI infrastructure brand that runs on a deliberate duality. Marketing surfaces sit on stark white canvas (#ffffff) with near-black ink (#0a0a0a) and confident, editorial type — but each model release gets its own saturated identity card: M2.7 in volcanic coral (#ff5530), Music 2.6 in magenta-pink (#ea5ec1), Hailuo in deep blue (#1456f0), Speech 2.8 in royal purple (#a855f7). The product matrix on the homepage reads like a row of album covers, each tile declaring its own personality at 32px corner radius against quieter 16px white documentation cards in the same viewport. The radius contrast is the visual signature.

This page packages the brand into a single Google Labs DESIGN.md file. Inside: 33 color tokens (split across brand accent, surface, hairline, text, and semantic groups), 16 type styles drawn entirely from DM Sans at weights 400/500/600/700, 9 corner radii (from 4px chips to 32px hero cards to 9999px pills), a 12-step spacing scale anchored on 4px, and roughly 50 components — buttons, vibrant product cards, search pills, segmented tabs, badges, data tables, sidebar nav, the 80px hero band, and the dense black footer.

Feed the file to Claude, Cursor, GitHub Copilot, or any AI tool that reads structured tokens. The agent reproduces MiniMax's discipline — black-pill primaries, product-color identity cards reserved for model moments, DM Sans at -2px letter-spacing on the hero — instead of a generic SaaS theme. The system is worth studying for one move in particular: how a brand can run 90% monochrome and still feel saturated by reserving color for product identity only.

What makes it distinct

Product-color encodingcoral #ff5530 (M2.7), magenta #ea5ec1 (Music 2.6), blue #1456f0 (Hailuo), purple #a855f7 (Speech 2.8)
Pill-shaped everythingevery button, tab, and badge runs rounded-full; rectangular forms only inside data tables
Magazine-grade hero80px DM Sans display at -2px letter-spacing and 1.10 leading, scaling down to 12px micro labels
Radius contrast as signature32px gradient product cards beside 16px white documentation cards in the same viewport
Single typeface, no italicsDM Sans handles every role at four weights (400/500/600/700); emphasis comes from weight, not slope

Live at minimaxi.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

minimaxi.com

Explore MiniMax

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

MiniMax design system FAQ

Common questions about MiniMax's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

MiniMax homepage

The source site for this spec — homepage, model showcases, platform docs, and pricing surfaces.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use MiniMax in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→