🎉 Invite & Earn — Rewards for Both! Start Invite →

# Design System Inspiration of MiniMax

MiniMax stages itself as a Chinese AI infrastructure brand with a sophisticated dual identity: stark monochrome marketing canvas paired with vibrant gradient product cards (coral M2.7, magenta Music 2.6, blue Hailuo). DM Sans across every surface, oversized 80px hero displays with -2px letter-spacing.

## Color Palette

A monochrome anchor (black + white) broken open by saturated brand-color identities — each model line gets its own vibrant color encoding.

### Brand & Accent

Brand Coral
#ff5530
M2.7 / Token Plan accent
Brand Magenta
#ea5ec1
Music 2.6 product
Brand Blue
#1456f0
Hailuo Video
Brand Blue Deep
#1d4ed8
Form activation, links
Brand Blue 700
#17437d
Doc tags
Brand Cyan
#3daeff
Atmospheric blue
Brand Blue 200
#bfdbfe
Code badges
Brand Purple
#a855f7
Speech 2.8 product

### Surface

Canvas White
#ffffff
Page + card background
Surface
#f7f8fa
Section bg, sidebar active
Surface Soft
#f2f3f5
Quieter sections
Hairline
#e5e7eb
Borders, dividers
Hairline Soft
#eaecf0
Quiet table dividers

### Text

Ink
#0a0a0a
Headlines, CTAs
Charcoal
#222222
Body text
Slate
#45515e
Secondary text
Steel
#5f5f5f
Tertiary, table headers
Stone
#8e8e93
Muted captions
Muted
#a8aab2
Footer links

### Semantic

Success Background
#e8ffea
Success badge bg
Success Text
#1ba673
Success badge ink

## Typography Scale

DM Sans across every role from 80px hero displays to 12px micro labels. Aggressive negative letter-spacing on display sizes; generous body leading for documentation.

hero-display80px / 600 / 1.10 / -2px
Music 2.6
display-lg56px / 600 / 1.10 / -1.5px
Token Plan
heading-lg40px / 600 / 1.20 / -1px
Models Overview
heading-md32px / 600 / 1.25 / -0.5px
Full-Stack Model Matrix
heading-sm24px / 600 / 1.30
Recommended Reading
card-title20px / 600 / 1.40
MiniMax Agent
subtitle18px / 500 / 1.50
A subtitle for body lead
body-md16px / 400 / 1.50
Primary body text used across docs and prose blocks.
body-md-bold16px / 700 / 1.50
Body emphasis
body-sm14px / 400 / 1.50
Secondary body, table cells, navigation
body-sm-medium14px / 500 / 1.50
Sidebar nav active, button labels
caption13px / 400 / 1.70
Documentation captions and fine print, scientific-paper-grade leading
caption-bold13px / 600 / 1.50
BADGE LABEL / TABLE HEADER
micro12px / 400 / 1.50
Footer microcopy, chip labels
button-md14px / 600 / 1.40
PILL BUTTON LABEL

## Button Variants

Pill-shaped everywhere. Black-pill primary is the dominant CTA across all surfaces.

button-primaryBlack pill — dominant CTA
button-secondaryOutlined ink pill
button-tertiaryWhite-fill quieter pill
button-linkInline text link
button-icon-circular36×36 utility
button-primary-disabledDisabled state

## Badges & Status

Pill-shaped status indicators reuse the brand's full-radius geometry. Distinct semantic encoding for each badge type.

Available NEW BETA Code API
🎉 Invite & Earn — Rewards for Both! Start Invite →

promo-banner — full-width strip above the top nav

## Vibrant Product Cards

Each model release carries a distinct color identity. 32px corner softening signals "this is a featured product moment."

Now Live
M2.7
Model Self-Improvement
Music 2.6
Cover Reborn, Bass Redefined
2.3/2.3 Fast
Hailuo
Breathtaking Motion, Unique Emotion
Speech 2.8
Natural-Sound Tags, Vivid Voice
M2-her
Multi-Character Roleplay

## AI Product Matrix

White product tiles — quieter cousins of the vibrant cards. 24px rounded with thin hairline border.

🤖

#### MiniMax Agent

Simple commands, unlimited creativity. Multi-step planning and tool use.

🎬

#### Hailuo Video

Every idea is a blockbuster. Text-to-video and image-to-video generation.

🎵

#### MiniMax Audio

Ultra-realistic AI voice creation with multi-language support.

📹

#### Hailuo Live

Live video synthesis with character consistency and motion control.

## Cards & Containers

White documentation cards, surface-tinted feature panels, recommendation tiles, and the bright orange promo CTA strip.

BETA

#### Standard Doc Card

White canvas with thin hairline border and 16px corners. Used for documentation and quiet product callouts.

#### Feature Panel

Quieter section panel on light gray surface. Used for grouped content and supporting documentation.

##### Quick Start

Refer to the Quick Start Guide to explore and experience the model's capabilities.

### Promo CTA Card

#### Refunds of 10% for the Invitee + Discount of 10% for Invitees

Invite friends, earn benefits. Subscribe to a Token Plan to get 100% returns when this round gets a 10% return.

## Forms & Inputs

40px-tall inputs with 8px rounded corners. Focus shifts to a 2px Brand Blue Deep border.

Email
API key
Token amount Please enter a positive number
search-pill — 36px height, surface bg

## Tabs & Navigation

Underline-style segmented tabs for in-page navigation. Pill tabs for top-level pricing/category switching.

### Segmented Tabs (M2.7 page)

### Pill Tabs (Pricing page)

## Signature Components

Components unique to MiniMax — models comparison table, 3-column documentation layout, stats strip.

### Models Comparison Table

Models | Description | Features
--- | --- | ---
MiniMax M2.7 highlighted | Beginning the journey of recursive self-improvement. | • Top-tier world engineering • Professional office handling • Optimized for code interaction
MiniMax M2 | Same performance as M2.7. Significantly faster inference. | • Polyglot code mastery • Precision code refactoring • Low latency
MiniMax M1.5 | Same performance as M2. Optimized for code generation and refactoring. | • Peak Performance, Ultimate Value • Master the Complex

### Documentation Layout (3-column)

### Models Overview

Overview of MiniMax AI models and their capabilities. The MiniMax model family covers text, image, music, video, and speech generation. Helping developers efficiently build intelligent applications.

This documentation provides a complete reference for available models, their parameters, recommended usage patterns, and performance benchmarks.

### Stats Row

0+Countries & Regions Served
0M+Global Individual Users
214,000+Enterprise Clients & Developers
0+Enterprise Coverage

## Spacing Scale

4px base unit, 8px primary increment. Section rhythm runs from 48px to 96px.

4xxs
8xs
12sm
16md
20lg
24xl
32xxl
40xxxl
48section-sm
64section
80section-lg
96hero

## Border Radius Scale

Full-pill buttons (9999px), 32px hero cards, 16px standard. Buttons are NEVER squared.

4pxxs
6pxsm
8pxmd
12pxlg
16pxxl
20pxxxl
24pxxxxl
32pxhero
pillfull

## Elevation & Depth

Five layers — flat default through atmospheric glow to modal-grade depth.

Level 0 — Flatborder + hairline
Level 1 — Subtlergba(0,0,0,0.04) 0 1px 2px
Level 2 — Cardrgba(0,0,0,0.08) 0 4px 6px
Level 3 — Atmosphericrgba(0,0,0,0.08) 0 0 22px
Level 4 — Modalrgba(36,36,36,0.08) 0 12px 16px -4px

## Responsive Behavior

Mobile-first reflow: hero scales from 80px → 32px, product matrix becomes horizontal-scroll, docs collapse to single column.

Breakpoint | Width | Key Changes
--- | --- | ---
Mobile (small) | < 480px | Single column. Hero drops to 32px. Product matrix horizontal-scroll. Footer 1-column accordion.
Mobile (large) | 480 – 767px | AI matrix renders 2-up. Hero 40px.
Tablet | 768 – 1023px | Pill-tab nav returns. Documentation sidebar collapses to drawer. Hero 56px.
Desktop | 1024 – 1279px | Full 4-column product matrix; 3-column docs grid.
Wide Desktop | ≥ 1280px | Wider hero gutters; fixed 220px sidebar; hero 80px.

### Device Ladder

375px
480px
768px
1024px
1280+

### Touch Targets

- Pill buttons render at 38–40px height — bumps to 44px on mobile.
- Circular icon buttons: 36×36px desktop → 44×44px mobile.
- Form inputs render at 40px height; bumps to 44px mobile.
- Sidebar nav items render at ~32px tall — bump to 44px mobile drawers.

### Collapsing Strategy

- Promo banner stays full-width; truncates at < 480px.
- Top nav below 1024px collapses to hamburger.
- Documentation grid: 3-column → sidebar-drawer at < 1024px → single-column at < 768px.
- Product matrix: 4-column → horizontal-scroll at < 1024px.
- AI Product Matrix: 4-column → 2-column tablet → 1-column mobile.
- Hero typography: 80px → 56px tablet → 40px mobile-large → 32px mobile-small.