# DS-01: Figma Variables & Token Production Specs

## Figma Setup

### File Structure
```
RP Learning Portal — Figma
└── 🎨 Design System/
    └── DS-01 Tokens
```

### Variable Collections

#### Collection 1: `RP Colors`
Modes: `Light`, `Dark`

**Light Mode Values:**

| Variable Path | Value | Description |
|--------------|-------|-------------|
| `color/primary` | #0B3A66 | Deep Academic Blue |
| `color/secondary` | #1E5FA8 | Royal Blue |
| `color/accent` | #D4A017 | Academic Gold |
| `color/background` | #F5F7FA | Page background |
| `color/surface` | #FFFFFF | Card/surface background |
| `color/surface-elevated` | #FFFFFF | Elevated surfaces (modals, dropdowns) |
| `color/header-text` | #0F172A | H1–H6 headings |
| `color/body-text` | #1E293B | Body copy |
| `color/muted-text` | #64748B | Secondary text, labels |
| `color/inverse-text` | #FFFFFF | Text on dark backgrounds |
| `color/success` | #22C55E | Positive states |
| `color/warning` | #F59E0B | Caution states |
| `color/danger` | #DC2626 | Error/negative states |
| `color/info` | #3B82F6 | Informational states |
| `color/border` | #E2E8F0 | Default borders |
| `color/border-strong` | #CBD5E1 | Emphasized borders |
| `color/divider` | #F1F5F9 | Section dividers |
| `color/white` | #FFFFFF | White |
| `color/black` | #000000 | Black |
| `color/disabled-bg` | #F1F5F9 | Disabled surface |
| `color/disabled-text` | #94A3B8 | Disabled text |
| `color/overlay` | rgba(0,0,0,0.5) | Modal backdrop |

**Dark Mode Values:**

| Variable Path | Value |
|--------------|-------|
| `color/primary` | #0B3A66 (same) |
| `color/secondary` | #1E5FA8 (same) |
| `color/accent` | #D4A017 (same) |
| `color/background` | #0F172A |
| `color/surface` | #1E293B |
| `color/surface-elevated` | #1E293B |
| `color/header-text` | #F8FAFC |
| `color/body-text` | #E2E8F0 |
| `color/muted-text` | #94A3B8 |
| `color/inverse-text` | #0F172A |
| `color/success` | #4ADE80 |
| `color/warning` | #FBBF24 |
| `color/danger` | #F87171 |
| `color/info` | #60A5FA |
| `color/border` | #334155 |
| `color/border-strong` | #475569 |
| `color/divider` | #1E293B |
| `color/white` | #FFFFFF |
| `color/black` | #000000 |
| `color/disabled-bg` | #1E293B |
| `color/disabled-text` | #64748B |
| `color/overlay` | rgba(0,0,0,0.7) |

#### Collection 2: `RP Gamification`
Modes: `Light`, `Dark`

| Variable Path | Light | Dark |
|--------------|-------|------|
| `gamification/bronze` | #CD7F32 | #CD7F32 |
| `gamification/bronze-bg` | rgba(205,127,50,0.08) | rgba(205,127,50,0.15) |
| `gamification/silver` | #8A8A8A | #8A8A8A |
| `gamification/silver-bg` | rgba(138,138,138,0.08) | rgba(138,138,138,0.15) |
| `gamification/gold` | #D4A017 | #D4A017 |
| `gamification/gold-bg` | rgba(212,160,23,0.08) | rgba(212,160,23,0.15) |
| `gamification/platinum` | #9E9E9E | #9E9E9E |
| `gamification/platinum-bg` | rgba(158,158,158,0.08) | rgba(158,158,158,0.15) |
| `gamification/diamond` | #67C8FF | #67C8FF |
| `gamification/diamond-bg` | rgba(103,200,255,0.08) | rgba(103,200,255,0.15) |
| `gamification/flame` | #F97316 | #FB923C |
| `gamification/ring-green` | #22C55E | #4ADE80 |
| `gamification/ring-amber` | #F59E0B | #FBBF24 |
| `gamification/ring-red` | #DC2626 | #F87171 |
| `gamification/ring-bg` | #E2E8F0 | #334155 |
| `gamification/heatmap-present` | #22C55E | #4ADE80 |
| `gamification/heatmap-late` | #F59E0B | #FBBF24 |
| `gamification/heatmap-absent` | #DC2626 | #F87171 |
| `gamification/heatmap-noclass` | #E2E8F0 | #334155 |
| `gamification/heatmap-noclass-text` | #94A3B8 | #64748B |

#### Collection 3: `RP Spacing`
Mode: `Default` (single mode)

| Variable Path | Value |
|--------------|-------|
| `spacing/0` | 0px |
| `spacing/1` | 4px |
| `spacing/2` | 8px |
| `spacing/3` | 12px |
| `spacing/4` | 16px |
| `spacing/5` | 20px |
| `spacing/6` | 24px |
| `spacing/8` | 32px |
| `spacing/10` | 40px |
| `spacing/12` | 48px |
| `spacing/16` | 64px |
| `spacing/20` | 80px |

#### Collection 4: `RP Typography`
Mode: `Default`

| Variable Path | Value |
|--------------|-------|
| `typography/font-family` | Inter |
| `typography/font-family-mono` | JetBrains Mono |
| `typography/font-size/xs` | 12px |
| `typography/font-size/sm` | 14px |
| `typography/font-size/base` | 16px |
| `typography/font-size/lg` | 18px |
| `typography/font-size/xl` | 20px |
| `typography/font-size/2xl` | 24px |
| `typography/font-size/3xl` | 30px |
| `typography/font-size/4xl` | 36px |
| `typography/font-weight/regular` | 400 |
| `typography/font-weight/medium` | 500 |
| `typography/font-weight/semibold` | 600 |
| `typography/font-weight/bold` | 700 |
| `typography/line-height/tight` | 1.25 |
| `typography/line-height/normal` | 1.5 |
| `typography/line-height/relaxed` | 1.75 |

#### Collection 5: `RP Radius`
Mode: `Default`

| Variable Path | Value |
|--------------|-------|
| `radius/sm` | 4px |
| `radius/md` | 8px |
| `radius/lg` | 12px |
| `radius/xl` | 16px |
| `radius/2xl` | 24px |
| `radius/full` | 9999px |

#### Collection 6: `RP Shadows`
Mode: `Default`

| Variable Path | Value |
|--------------|-------|
| `shadow/xs` | 0 1px 2px rgba(0,0,0,0.05) |
| `shadow/sm` | 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) |
| `shadow/md` | 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06) |
| `shadow/lg` | 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05) |
| `shadow/xl` | 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04) |

---

## Typography Styles

### Text Styles (Figma Text Styles → `RP/Text`)

| Style Name | Font | Size | Weight | Line Height | Letter Spacing | Use |
|-----------|------|------|--------|-------------|----------------|-----|
| `Display/H1` | Inter | 36px | Bold (700) | 45px (1.25) | -0.02em | Page titles |
| `Display/H2` | Inter | 30px | Bold (700) | 38px (1.25) | -0.01em | Section headers |
| `Display/H3` | Inter | 24px | Semibold (600) | 32px (1.33) | 0 | Card titles |
| `Display/H4` | Inter | 20px | Semibold (600) | 28px (1.4) | 0 | Subsection headers |
| `Display/H5` | Inter | 18px | Medium (500) | 28px (1.55) | 0 | Widget titles |
| `Display/H6` | Inter | 16px | Medium (500) | 24px (1.5) | 0 | Small headers |
| `Body/LG` | Inter | 18px | Regular (400) | 28px (1.55) | 0 | Large body text |
| `Body/Base` | Inter | 16px | Regular (400) | 24px (1.5) | 0 | Default body |
| `Body/SM` | Inter | 14px | Regular (400) | 20px (1.43) | 0 | Small body, labels |
| `Body/XS` | Inter | 12px | Regular (400) | 16px (1.33) | 0.01em | Captions, helpers |
| `Label/Base` | Inter | 14px | Medium (500) | 20px (1.43) | 0.01em | Form labels |
| `Label/SM` | Inter | 12px | Medium (500) | 16px (1.33) | 0.02em | Compact labels |
| `Button/LG` | Inter | 18px | Semibold (600) | 28px (1.55) | 0.01em | Large buttons |
| `Button/Base` | Inter | 16px | Semibold (600) | 24px (1.5) | 0.01em | Default buttons |
| `Button/SM` | Inter | 14px | Semibold (600) | 20px (1.43) | 0.02em | Small buttons |
| `Caption/Base` | Inter | 12px | Regular (400) | 16px (1.33) | 0.02em | Helper text |
| `Mono/Base` | JetBrains Mono | 14px | Medium (500) | 20px (1.43) | 0 | IDs, codes |
| `Mono/LG` | JetBrains Mono | 18px | Bold (700) | 28px (1.55) | 0 | Featured IDs |
| `KPI/Value` | Inter | 30px | Bold (700) | 36px (1.2) | -0.02em | KPI numbers |
| `KPI/Label` | Inter | 14px | Medium (500) | 20px (1.43) | 0.02em | KPI labels |

---

## Auto-Layout Defaults

| Name | Direction | Gap | Padding | Sizing |
|------|-----------|-----|---------|--------|
| Stack/Vertical/ Tight | Vertical | 4px | 0 | Hug |
| Stack/Vertical/ Default | Vertical | 8px | 0 | Hug |
| Stack/Vertical/ Relaxed | Vertical | 12px | 0 | Hug |
| Stack/Vertical/ Spacious | Vertical | 16px | 0 | Hug |
| Stack/Vertical/ Loose | Vertical | 24px | 0 | Hug |
| Stack/Horizontal/ Tight | Horizontal | 4px | 0 | Hug |
| Stack/Horizontal/ Default | Horizontal | 8px | 0 | Hug |
| Stack/Horizontal/ Relaxed | Horizontal | 12px | 0 | Hug |
| Stack/Horizontal/ Spacious | Horizontal | 16px | 0 | Hug |
| Container/Padding/SM | Vertical | 0 | 8px | Fill |
| Container/Padding/Default | Vertical | 0 | 16px | Fill |
| Container/Padding/LG | Vertical | 0 | 24px | Fill |
| Container/Padding/XL | Vertical | 0 | 32px | Fill |