# MiniMax Design System

> High-precision engineering meets fluid intelligence through a monochrome foundation punctuated by high-saturation product gradients.

**Source:** [https://minimaxi.com](https://minimaxi.com) | **Captured:** 2026-06-17 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
MiniMax utilizes a high-contrast "Ink and Paper" foundation, where a pure white canvas (`#ffffff`) is anchored by deep obsidian elements (`#181e25`). The system is characterized by extreme geometric versatility, moving from sharp 0px corners in structural layouts to ultra-soft 9999px pill shapes for interactive cards and primary CTAs. Typography is dominated by **Outfit** for technical display and **MiSans** for high-legibility body content, creating a bridge between global engineering standards and local optimization. While the UI remains strictly achromatic, the brand injects "voltage" through vibrant, complex gradients within product-specific hero cards, signaling the transition from the platform's shell to its AI capabilities.

## Signature DNA
1. **The Infinite Pill** (9999px radius used not just for buttons, but for large-scale feature cards and content containers, creating a "soft-tech" aesthetic. Observed on Homepage and About pages.)
2. **Achromatic Shell, Chromatic Core** (The navigation, footers, and pricing tables are strictly monochrome `#181e25` / `#ffffff`, while the product models themselves are represented by high-saturation red and purple gradients.)
3. **Dual-Type Engineering** (Pairing the geometric, wide-tracking **Outfit** for display headers with the neutral, high-density **MiSans** for technical prose.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.obsidian}` | `#181e25` | Primary text, primary button background, footer background | 50 | 1.0 | `--brand-1`, `--fill-bg-black` |
| `{color.white}` | `#ffffff` | Page background, button text, card surface | 36 | 1.0 | `--col-bg13`, `--col-bg09` |
| `{color.ink}` | `#000000` | Display text, mask overlays | 24 | 1.0 | `--col-accent04` |
| `{color.ash}` | `#f4f4f4` | Secondary surface background, subtle sectioning | 7 | 1.0 | `--fill-3`, `--col-bg03` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.steel}` | `#86909c` | Muted labels, secondary text | 14 | 1.0 | `--text-3`, `--line-4` |
| `{color.slate}` | `#45515e` | Tertiary body text | 3 | 1.0 | `--text-4` |
| `{color.silver}` | `#e5e7eb` | Borders, divider lines | 5 | 1.0 | `--line-2` |

### Semantic
| Token | Hex | Role | Source |
|------|-----|------|--------|
| `{color.success-bg}` | `#e8ffea` | Success state background | `--success-bg` |
| `{color.warning-bg}` | `#fff7e8` | Warning state background | `--warning-bg` |
| `{color.error-bg}` | `#ffece8` | Error state background | `--error-bg` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| **Outfit** | 400, 500, 600 | Display, Hero titles | Outfit (Google Fonts) | OFL |
| **MiSans** | 400, 500 | Body, Technical prose | Noto Sans SC | Proprietary |
| **Inter** | 400, 500, 600, 700 | Navigation, UI labels | Inter (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 80px | 88px | normal | 500 | Homepage Hero | `div.text-brand-1.outfit-title` |
| `{text.h1}` | 32px | 28px | normal | 600 | Section Titles | `div.font-roboto.text-[28px]` |
| `{text.h2}` | 28px | 48px | normal | 500 | Sub-section headings | `h2.outfit-title.text-[20px]` |
| `{text.h3}` | 20px | 30px | normal | 500 | Card titles | `p.text-[16px].md:text-[20px]` |
| `{text.body-lg}` | 18px | 32px | normal | 400 | Intro paragraphs | `div.text-col-text-01.text-[18px]` |
| `{text.body}` | 16px | 24px | normal | 400 | Default running text | `section.relative.h-[630px]` |
| `{text.body-sm}` | 14px | 21px | normal | 400 | Secondary metadata | `p.text-[14px].text-black/50` |
| `{text.caption}` | 12px | 16px | normal | 400 | Tooltips, small labels | `div.mint-text-xs.mint-text-gray-500` |

### Principles
1. **Display Tracking:** Outfit is used with "normal" tracking but benefits from its natural geometric width; do not compress.
2. **Weight Contrast:** Use 600 weight for structural headings to anchor the page against the lighter 400 weight body text.
3. **Bilingual Balance:** MiSans and Inter are paired to ensure Latin and CJK characters maintain optical alignment in technical docs.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 26 |
| `{space.sm}` | 12px | 19 |
| `{space.md}` | 16px | 6 |
| `{space.lg}` | 24px | 25 |
| `{space.xl}` | 36px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Page sections, global containers | 159 occurrences |
| `{radius.md}` | 12px | Control surfaces, pricing cards | Pricing page cards |
| `{radius.lg}` | 24px | Feature cards | About page cards |
| `{radius.pill}` | 9999px | Buttons, interactive model cards | Homepage model cards |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.08) 0px 0px 22.576px 0px` | Floating feature cards | Homepage hero cards |
| `{shadow.border}` | `rgba(159, 159, 159, 0.3) 0px 0px 0px 1px` | Subtle card definition | Pricing page |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "API & Token Plan")
**Pages observed:** Homepage, About
**Spec:** Background: `#181e25` | Text: `#ffffff` | Radius: `60px` | Padding: `8px 24px` | Typography: `16px / 400`
**States observed:** Default: Captured | Hover: Not captured

#### Secondary Button
**Role:** Ghost/Outline actions
**Pages observed:** Homepage
**Spec:** Background: `transparent` | Text: `#181e25` | Border: `1px solid #181e25` | Radius: `60px` | Padding: `8px 24px`

### Tier 2: Patterns

#### Model Feature Card
**Role:** Highlighting specific AI models (M3, Hailuo)
**Pages observed:** Homepage
**Spec:** Background: `Gradient` | Radius: `9999px` (Pill) | Padding: `24px` | Shadow: `0px 0px 22.576px rgba(0,0,0,0.08)`
**Notes:** These cards break the monochrome rule using product-specific gradients.

#### Pricing Tier Card
**Role:** Displaying API costs and plans
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Border: `1px solid #e5e7eb` | Radius: `12px` | Padding: `24px`

### Tier 3: Surface-specific

#### Research Article Card
**Role:** Blog and research feed items
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Border: `1px solid #e8e8e8` | Radius: `24px` | Padding: `11px 11px 24px`

#### Navigation Bar
**Role:** Global header
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#181e25` | Height: `64px` | Typography: `Inter 16px`

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1440px |
| Section Padding (Vertical) | 80px - 120px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero text reduces to 48px; Feature cards stack vertically. |
| Desktop | 1440px | 12-column grid; Horizontal card layouts. |

## Imagery & decoration
- **Gradients:** Used exclusively for product model identity (Red/Orange for M3, Purple/Blue for Speech).
- **Icons:** Simple 2px stroke weight icons contained within circular or square containers.
- **Avoidance:** No photography of humans; no illustrative "mascot" characters.

## Do's
- Use `#181e25` for all primary text to ensure 21:1 contrast.
- Apply `9999px` radius to interactive product cards to signal "intelligence" and "fluidity."
- Use **Outfit** for any text larger than 24px.
- Maintain a minimum of `24px` padding inside all card components.
- Use `#f4f4f4` for background sectioning to create visual rhythm without using borders.

## Don'ts
- **Don't** use product gradients for UI controls like buttons or navigation links.
- **Don't** mix border radii on the same page; if using pill-shaped cards, secondary elements should follow the soft radius scale.
- **Wrong:** Using `#3b82f6` (token `--color-primary`) for the main site background. **Right:** Use `#ffffff`. **Reason:** The primary blue is a functional token for specific sub-brand signals, not a parent brand surface color.
- **Don't** use weights below 400 for body text; legibility is prioritized over "editorial" thinness.

## Similar brands
- OpenAI (achromatic structure)
- Anthropic (technical typography focus)
- Scale AI (high-contrast engineering aesthetic)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-obsidian: #181e25;
  --color-white: #ffffff;
  --color-ash: #f4f4f4;
  --color-steel: #86909c;
  --font-display: 'Outfit', sans-serif;
  --font-body: 'MiSans', 'Inter', sans-serif;
  --radius-pill: 9999px;
  --radius-card: 24px;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "brand": {
      "primary": { "value": "#181e25" },
      "secondary": { "value": "#ffffff" }
    },
    "neutral": {
      "surface": { "value": "#f4f4f4" },
      "text-muted": { "value": "#86909c" }
    }
  },
  "size": {
    "radius": {
      "pill": { "value": "9999px" },
      "card": { "value": "24px" }
    }
  }
}
```

## Agent prompt examples
- "Generate a primary CTA button using obsidian #181e25 background, white text, and a 60px border radius."
- "Create a feature card container with a 9999px border radius, white background, and a subtle 22px blur shadow at 8% opacity."
- "Set a heading style using the Outfit font family at 32px size with a 600 weight."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific menu transition animations were not sampled.
- Dark mode tokens exist in the CSS variables (`--frame-placeholder-background-color-dark`) but no dark mode pages were analyzed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | [https://minimaxi.com](https://minimaxi.com) | 1440x900 | 2026-06-17T13:05 |
| Pricing | [https://minimaxi.com/pricing](https://minimaxi.com/pricing) | 1440x900 | 2026-06-17T13:06 |
| About | [https://minimaxi.com/about](https://minimaxi.com/about) | 1440x900 | 2026-06-17T13:07 |