# MiniMax — Design System
> Building AGI with multi-modal models and AI-native products.
- **Canonical:** https://uiuxskills.com/library/minimax
- **Source:** https://minimax.io
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:13.570Z

---

---
version: alpha
name: MiniMax
description: >-
  A world-leading general AI technology company building multimodal foundation models and AI-native
  products.
tone: Modern, professional, innovative, and tech-forward.
color-scheme: light
colors:
  primary: "#181E25"
  surface: "#FFFFFF"
  surface-container: "#F9FAFB"
  on-primary: "#FFFFFF"
  on-surface: "#181E25"
  outline: "#E5E7EB"
  error: "#D01316"
  accent-gold: "#FFD388"
  accent-blue: "#CAC9FF"
  focus-ring: "#181E25"
typography:
  display-lg:
    fontFamily: Outfit
    fontSize: 48px
  display-md:
    fontFamily: Outfit
    fontSize: 36px
  headline-lg:
    fontFamily: Outfit
    fontSize: 28px
  headline-md:
    fontFamily: Outfit
    fontSize: 24px
  headline-sm:
    fontFamily: Outfit
    fontSize: 20px
  body-md:
    fontFamily: DM Sans
    fontSize: 16px
  label-sm:
    fontFamily: DM Sans
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#292929"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
    width: auto
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#000000"
  badge:
    backgroundColor: "{colors.accent-blue}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  card-container:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-on-surface:
    backgroundColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-accent-gold:
    backgroundColor: "{colors.accent-gold}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.12)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

MiniMax presents a clean, modern, and highly professional aesthetic typical of high-end AI research labs. The visual identity relies on a stark monochromatic palette punctuated by high-contrast UI elements, conveying a sense of precision, technical capability, and global scale.

## Colors

The color strategy is built on a high-contrast foundation that prioritizes readability and technical clarity. The palette uses a neutral base to allow AI-driven content to take center stage.

*   Primary (#181E25): The core brand color used for primary buttons, text, and navigation elements.
*   Surface (#FFFFFF): The primary background color for the site.
*   Surface-container (inferred) (#F9FAFB): Used for section backgrounds and card containers to provide subtle depth.
*   On-primary (#FFFFFF): Text color for primary buttons.
*   On-surface (#181E25): Default text color for headings and body content.
*   Outline (inferred) (#E5E7EB): Border color for secondary buttons and dividers.
*   Error (#D01316): Semantic color for errors and alerts.
*   Accent-gold (#FFD388): Accent color used for visual highlights and decorative elements.
*   Accent-blue (#CAC9FF): Secondary accent color for subtle UI highlights.
*   Focus-ring (inferred) (#181E25): Focus state ring color for accessibility.

## Typography

Typography is clean and geometric, utilizing the Outfit family for authoritative headers and DM Sans for highly readable, functional body text.

*   Display-lg (inferred) (Outfit): Used for hero headlines.
*   Display-md (inferred) (Outfit): Used for section titles.
*   Headline-lg (Outfit): Used for sub-headlines.
*   Headline-md (inferred) (Outfit): Used for card titles.
*   Headline-sm (inferred) (Outfit): Used for smaller section headers.
*   Body-md (DM Sans): Standard body text.
*   Label-sm (DM Sans): Used for metadata and small labels.

## Layout

The site utilizes a centered container layout with a strict max-width constraint to maintain readability across large displays. The system follows an 8px base unit for all spacing, ensuring consistent rhythm between sections. The page pattern typically follows a nav, hero, product-matrix, and footer structure. The hero section is characterized by a centered headline and subhead, a row of primary and secondary CTAs, and a prominent product visual. The design is mobile-first, with navigation collapsing into a hamburger menu on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to define interactive elements, relying on subtle single-layer shadows to provide depth without clutter. The values are inferred to support the brand's minimal aesthetic.

*   Elevation.sm: Used for subtle card lift.
*   Elevation.md: Used for dropdowns and interactive popovers.
*   Elevation.lg: Used for modal or drawer overlays.

## Shapes

The brand employs a intentional mix of sharp and rounded corners to balance technical precision with approachability. Buttons are fully rounded using `{rounded.full}` to create a pill-shaped aesthetic. 

Cards and containers utilize a medium-to-large radius (`{rounded.lg}` or `{rounded.md}`) to soften the edges of technical content blocks, ensuring the interface feels modern and cohesive.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Buttons
Primary buttons use `{colors.primary}` with `{rounded.full}` for a high-impact, pill-shaped look. Secondary buttons use a `{colors.surface}` background with `{colors.outline}` borders to maintain a clean, minimalist hierarchy.

### Cards
Cards use `{colors.surface}` with `{rounded.lg}` to house content. Elevated cards utilize the same structure but incorporate `{elevation.md}` to separate them from the `{colors.surface-container}` background.

### Input Fields
Inputs are defined by a `{colors.surface}` background, `{rounded.md}` corners, and `{colors.outline}` borders. On focus, the border transitions to `{colors.focus-ring}` to provide clear visual feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Use `{colors.accent-gold}` for primary text. |
| Apply `{typography.headline-lg}` for main section titles. | Use `{typography.body-md}` for headers. |
| Maintain consistent `{spacing.md}` between card elements. | Apply `{elevation.lg}` to flat content sections. |
| Use `{rounded.full}` for all primary and secondary buttons. | Mix `{rounded.sm}` with `{rounded.full}` on the same component. |
| Ensure `{colors.on-primary}` for text on `{colors.primary}`. | Use `{colors.error}` for non-critical UI elements. |
| Use `{colors.outline}` for subtle dividers. | Use low-contrast text on `{colors.surface-container}`. |
| Apply `{rounded.md}` to all input fields. | Use sharp corners on primary buttons. |
| Use `{input-field-focus}` for active input states. | Use standard borders for active input states. |

## Content Style

CTA labels should be concise, using imperative verbs in sentence case (e.g., "Access API Now"). This keeps the interface action-oriented and efficient for professional users.

Headings should be direct, benefit-oriented, and professional. Avoid marketing fluff; focus on the technical capability or the specific value proposition of the model or product being described.

Copy density should be kept low. Use short, scannable paragraphs and clear headings to break up technical information. Utilize whitespace generously to ensure the "enterprise" feel remains uncluttered.

## Imagery & Icons

The brand uses a mixed imagery style, combining high-quality product screenshots, abstract 3D shapes, and clean, modern iconography. Illustrations and icons should maintain a minimal, tech-forward aesthetic that complements the monochromatic UI. Avoid overly complex or decorative imagery; all visual assets must serve to clarify the product's function or the technical nature of the AI models.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for MiniMax, a minimal enterprise AI technology brand with a precise, tech-forward tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.lg}` — never hardcode hex values, pixel sizes, or font names directly.
2. Use only the component variants defined under `components:`. Do not invent states, sizes, or variants the spec does not list.
3. Apply `{rounded.full}` to all buttons (primary and secondary). Use `{rounded.lg}` for cards, `{rounded.md}` for inputs and card-containers. Never mix radius scales on the same component.
4. When a component has a defined state (hover, focus, disabled), always render that state. Transitions should use `{motion.duration-short}` and `{motion.easing-standard}`.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict explicitly before proceeding.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, typography, elevation, and motion value.
- Include hover, focus, and disabled states for all interactive components when the spec defines them.
- Apply `{spacing.md}` between card elements and follow the 8px base spacing rhythm throughout.
- Write CTAs as concise imperative phrases in sentence case (e.g., "Access API now") per the Content Style section.
- Use `{colors.on-primary}` for text on `{colors.primary}` surfaces; use `{colors.on-surface}` for text on `{colors.surface}` or `{colors.surface-container}`.

**Must NOT:**
- Invent colors, font families, radii, or elevation values absent from the spec.
- Use generic utility defaults when a brand token exists.
- Add emoji, decorative filler, or marketing copy.
- Reference any specific framework or tooling.
- Rewrite page copy, button labels, headings, or navigation items — only visual tokens are in scope.
- Alter page structure, routes, or information architecture as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- For background surfaces, default to `{colors.surface-container}`; for text on those surfaces, use `{colors.on-surface}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values take precedence.
- For unspecified breakpoints, apply mobile-first layout with a single breakpoint at 768px, consistent with the Layout narrative.