Color Palette
Border & Shadow Colors
Light Gray (Border)
#E5E7EB
Dark Border
rgba(24,30,37,.38)
Purple Shadow
rgba(44,30,116,.16)
Purple Shadow 2
rgba(44,30,116,.11)
Dark Shadow
rgba(36,36,36,.08)
Typography
Primary Font · DM Sans
DM Sans
The quick brown fox jumps over the lazy dog. Empowering creativity through AI.
Regular · 400
Medium · 500
Semibold · 600
Display Font · Outfit
Outfit
Create. Generate. Imagine. The future of AI is now within reach.
Regular · 400
Medium · 500
Semibold · 600
Hero
Hero Display · 80px · Semibold · line-height: 88px
Generative AI for everyone
Display · 32px · Semibold · line-height: 48px
Create with MiniMax
Heading 5xl · 28px · Semibold · line-height: 46.5px
AI Video Generation
Heading 4xl · 24px · Semibold · line-height: 36px
Text to video, image to video
Heading 3xl · 20px · Medium · line-height: 30px
Generate stunning videos from text prompts. Transform your creative ideas into motion.
Body XL · 16px · Regular · line-height: 24px
Powered by state-of-the-art multimodal AI models trained on diverse creative content.
Body LG · 14px · Regular · line-height: 21px
VIDEO · AUDIO · IMAGE · TEXT
Label · 12px · Medium · uppercase · line-height: 18px
Letter Spacing
No tokens defined
Not extracted
MiniMax defines no letter-spacing tokens. All letter-spacing is handled via defaults or inline styles.
Spacing
Spacing Scale
21 tokens — 1px → 179.5px
Borders
Border Width
A single hairline border width used throughout the system. One of 16 border radius values — the widest variety of any extracted design system — ranging from 4px rectangles to fully pill-shaped elements.
Shadow / Elevation
Shadow Tokens
6 tokens — purple-tinted on light surfaces
sm — Subtle Drop
×16
Soft purple-tinted lift — cards, form elements
md — Ambient Glow
×6
Medium purple bloom — modals, floating panels
lg — Purple Glow
×6
Stronger purple elevation — brand-colored surfaces
xl — Deep Drop
×4
Deep directional shadow — floating menus, popovers
shadow-5 — Side Purple
×4
Offset directional glow — sidebars, side panels
shadow-6 — Strong Purple
×2
Maximum brand elevation — hero CTAs, modal dialogs
Z-Index
| Layer | Value | Usage |
|---|
| z-1 (Deep Behind) | -8 | Background decorative elements, deep canvas |
| z-2 (Mid Behind) | -6 | Secondary background layers |
| z-3 (Near Behind) | -3 | Behind main content, parallax layers |
| z-4 (Just Behind) | -1 | Elements just below base content |
| z-5 (Base) | 1 | Base content layer |
| z-6 (Slightly Raised) | 3 | Slightly elevated interactive elements |
| z-7 (Floating) | 5 | Floating badges, indicators |
| z-8 (Raised) | 6 | Raised cards, dropdowns |
| z-9 (Nav) | 8 | Navigation, toolbars |
| z-10 (Sticky) | 10 | Sticky headers, sidebars |
| z-11 (Popover) | 20 | Tooltips, popovers |
| z-12 (Overlay) | 30 | Overlays, drawers |
| z-13 (Maximum) | 100 | Modals, toasts, top-level UI |
Breakpoints
📱
--breakpoint-xs
768px
Mobile / tablet threshold — layouts adapt at 768px
🖥️
--breakpoint-sm
1024px
Desktop threshold — full layout and navigation at 1024px
Opacity
Opacity Tokens
3 tokens — 0.5 · 0.7 · 0.9
Three targeted stops: 70% is the most-used (×28) for hover/disabled states, 90% (×24) for near-opaque overlays, and 50% for dimmed content.
Accessibility
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Dark Gray (#18181B) | Black (#000000) | 1.19:1 | Fail |
| Dark Gray (#18181B) | Dark Navy (#181E25) | 1.06:1 | Fail |
| Dark Gray (#18181B) | White (#FFFFFF) | 17.72:1 | AAA |
| Dark Gray (#18181B) | Off White (#F2F3F5) | 15.96:1 | AAA |
| Dark Gray (#18181B) | Dark Gray 5 (#424242) | 1.76:1 | Fail |
| Dark Gray 3 (#292929) | White (#FFFFFF) | 14.55:1 | AAA |
| Dark Gray 3 (#292929) | Off White (#F2F3F5) | 13.1:1 | AAA |
| Mid Gray (#8E8E93) | Black (#000000) | 6.44:1 | AA |
| Mid Gray (#8E8E93) | Dark Navy (#181E25) | 5.15:1 | AA |
| Mid Gray (#8E8E93) | White (#FFFFFF) | 3.26:1 | AA Large |
| Mid Gray (#8E8E93) | Dark Gray 5 (#424242) | 3.08:1 | AA Large |
| Dark Blue (#45515E) | White (#FFFFFF) | 8.1:1 | AAA |
| Dark Blue (#45515E) | Off White (#F2F3F5) | 7.3:1 | AAA |
| Dark Blue (#45515E) | Black (#000000) | 2.59:1 | Fail |
| Dark Blue (#45515E) | Dark Navy (#181E25) | 2.07:1 | Fail |
CSS Variables Reference
Black--color-black#000000
Dark Navy--color-dark-gray-2#181E25
White--color-white#FFFFFF
Off White--color-white-2#F2F3F5
Dark Gray--color-dark-gray-5#424242
Red (Error)--color-red#D01316
Light Orange--color-light-orange#FFD388
Purple Core--color-light-blue-3#886CFF
Purple Mid--color-light-blue-4#A782FF
Purple Soft--color-light-blue-6#B8A8FF
Lavender--color-light-blue-2#ACAAFF
Lilac--color-light-blue#C7B0FE
Pale Lavender--color-light-blue-5#CAC9FF
Dark Gray (Text)--color-dark-gray#18181B
Dark Gray 3--color-dark-gray-3#292929
Mid Gray--color-mid-gray#8E8E93
Dark Blue--color-dark-blue#45515E
Blue Gray--color-blue#86909C
Light Blue Gray--color-blue-2#AAB1BA
Light Gray (Border)--color-light-gray#E5E7EB
Purple Shadow--color-dark-blue-2rgba(44,30,116,.16)
Purple Shadow 2--color-dark-blue-3rgba(44,30,116,.11)
Dark Shadow--color-dark-gray-7rgba(36,36,36,.08)
DM Sans (Primary)--font-family-baseDM Sans
Outfit (Display)--font-family-2Outfit
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
sm--font-size-sm12px
lg--font-size-lg14px
xl--font-size-xl16px
3xl--font-size-3xl20px
4xl--font-size-4xl24px
5xl--font-size-5xl28px
32px--font-size-32px32px
80px--font-size-80px80px
Letter spacing—None defined
Space 12 (MD)--space-1216px
Space 32 (LG)--space-3224px
Space 40 (XL)--space-4032px
Space 128--space-128111.93px
Space 160--space-160120px
Space 192 (Max)--space-192179.5px
Instant--duration-instant150ms · ×300
Fast--duration-fast200ms · ×53
Slow--duration-slow300ms · ×180
Ease Out--easing-ease-outease-out · ×17
Ease In-Out--easing-ease-in-outease-in-out · ×3
Dim 50%--opacity-500.5 · ×2
Muted 70%--opacity-700.7 · ×28
Near-full 90%--opacity-900.9 · ×24
Deep Behind--z-1-8
Near Behind--z-3-3
Base--z-51
Navigation--z-1010
Popover--z-1120
Overlay--z-1230
Maximum--z-13100
MiniMax Design System · Light Theme · Generated 15/04/2026 · 29 color tokens · 35 type tokens · 21 spacing steps · 16 border radii · 1 border width · 6 shadows · 5 durations · 2 easings · 13 z-index layers · 2 breakpoints · 3 opacity tokens