# Design System
Inspired by MiniMax

A clean, approachable design language that bridges consumer-friendly appeal with technical credibility through white-space-driven layouts and colorful product accents.

## 1. Color Palette

MiniMax uses a white-dominant foundation with a blue brand spectrum and colorful product card accents. Purple-tinted shadows create subtle brand-colored depth.

### Brand Primary

Brand Blue
#1456f0
Primary brand identity
Sky Blue
#3daeff
Lighter brand accent
Brand Pink
#ea5ec1
Secondary brand accent

### Blue Scale (Primary)

Primary 200
#bfdbfe
Light blue backgrounds
Primary Light
#60a5fa
Active states, highlights
Primary 500
#3b82f6
Standard blue actions
Primary 600
#2563eb
Hover states
Primary 700
#1d4ed8
Pressed/active states
Brand Deep
#17437d
Deep blue emphasis

### Text Colors

Near Black
#222222
Primary text
Dark
#18181b
Button text, headings
Charcoal
#181e25
Dark surfaces, footer
Dark Gray
#45515e
Secondary text
Mid Gray
#8e8e93
Tertiary text, muted
Light Gray
#5f5f5f
Helper text

### Surface & Background

Pure White
#ffffff
Primary background
Light Gray
#f0f0f0
Secondary backgrounds
Border Light
#f2f3f5
Subtle section dividers
Border Gray
#e5e7eb
Component borders

### Semantic

Success Background
#e8ffea
Positive state backgrounds

## 2. Typography Scale

Multi-font system: DM Sans for UI, Outfit for display headings, Poppins for mid-tier, and Roboto for data/technical contexts. Weight 500 as default emphasis.

Display Hero
DM Sans / Outfit -- 80px -- 500 -- 1.10
Hero Headline
Section Heading
Outfit -- 31px -- 600 -- 1.50
Section Heading
Section Heading Alt
Roboto / DM Sans -- 32px -- 600 -- 0.88
Compact Header
Card Title
Outfit -- 28px -- 600 -- 1.71
Card Title
Sub-heading
Poppins -- 24px -- 500 -- 1.50
Sub-heading Text
Feature Label
Poppins -- 18px -- 500 -- 1.50
Feature Label Text
Body Large
DM Sans -- 20px -- 500 -- 1.50
Emphasized body text for important passages
Body
DM Sans -- 16px -- 400 -- 1.50
Standard body text for general content and descriptions across the interface.
Body Bold
DM Sans -- 16px -- 700 -- 1.50
Strong emphasis for important content
Nav / Link
DM Sans -- 14px -- 500 -- 1.50
Navigation links and secondary text
Button Small
DM Sans -- 13px -- 600 -- 1.50
Compact Button Label
Caption
DM Sans / Poppins -- 13px -- 400 -- 1.70
Metadata and caption text
Small Label
DM Sans -- 12px -- 600 -- 1.50
TAGS AND BADGES
Micro
DM Sans / Outfit -- 10px -- 500 -- 1.80
Tiny annotations and micro text

## 3. Button Variants

Pill buttons (9999px radius) for navigation and toggles, standard radius (8px) for CTA buttons. Weight 500 for default emphasis.

Pill Primary Dark
Pill Nav
Pill White
Secondary Light
Button Small
Pill Blue

## 4. Card Examples

Product cards use vibrant gradients as visual anchors against white canvas. Generous 20-24px border radius with purple-tinted brand shadows for featured elements.

★

### AI Chat

Conversational AI powered by advanced language models for natural dialogue and creative content generation.

◈

### Video Generation

Transform text descriptions into high-quality video content with state-of-the-art generative models.

♬

### Music Studio

Create original music compositions with AI-driven arrangement and production tools.

## 5. Form Elements

Clean form elements with 8px border radius, subtle borders, and blue focus rings. DM Sans at 16px for inputs, 14px for labels.

Full Name
Email Address We'll never share your email.
Focused Input
Error State This field is required.
Message

## 6. Spacing Scale

Base unit 8px. Scale provides a consistent rhythm for layout and component spacing across the design system.

2px
4px
6px
8px
10px
11px
14px
16px
24px
32px
40px
50px
64px
80px

## 7. Border Radius Scale

From minimal 4px tags to full 9999px pill shapes. Generous rounding (20-24px) defines the product card aesthetic.

Minimal 4px
Standard 8px
Comfortable 13px
Generous 20px
Large 24px
Pill 32px
Full 9999px

## 8. Elevation / Depth

MiniMax uses distinctive purple-tinted shadows for featured elements, connecting the shadow system to the blue brand identity. Neutral shadows at low opacity keep everything light and airy.

Level 0 Flat No shadow. White backgrounds, text blocks.
Level 1 Subtle Standard cards, containers.
Level 2 Ambient Soft glow around elements.
Level 3 Brand Glow Featured product cards with purple tint.
Level 4 Elevated Lifted cards, hover states.