Primitives are the raw material. Every color, spacing value, type scale entry, and radius lives here as a literal value. Semantic and component tokens alias these — they never hold raw values themselves (except component dimension tokens like
button-height).
Primitive Rule
Primitive tokens are never referenced directly in component CSS. They always go through a Tier 2 semantic token first.
Color Palette
Figma collection: Primitives / Color — Mode: Default
Full color swatches for all hues used in the system. Naming convention: {hue}-{shade} where shade runs 50 → 950. Plus white and black.
| Token | Value | Description |
|---|---|---|
purple-50 | #faf5ff | Lightest purple tint |
purple-100 | #f3e8ff | |
purple-200 | #e9d5ff | |
purple-500 | #a855f7 | Mid purple |
purple-600 | #9333ea | Brand primary (light mode) |
purple-700 | #7e22ce | |
purple-900 | #581c87 | Darkest purple |
teal-400 | #2dd4bf | Brand-B primary |
teal-600 | #0d9488 | |
blue-500 | #3b82f6 | Info family base |
green-500 | #22c55e | Success family base |
amber-500 | #f59e0b | Warning family base |
red-500 | #ef4444 | Danger family base |
gray-100 | #f3f4f6 | Neutral light |
gray-900 | #111827 | Neutral dark |
white | #ffffff | Absolute white |
black | #000000 | Absolute black |
Spacing Scale
Figma collection: Primitives / Spacing — Mode: Default
Base unit: 4px. Token name = pixel value. All spacing in the system derives from this scale.
| Token | Value | Use cases |
|---|---|---|
spacing-1 | 1px | Hair-thin gaps, borders |
spacing-2 | 2px | Tight insets |
spacing-4 | 4px | Compact gaps, icon margins |
spacing-8 | 8px | Default small gap, button padding-y |
spacing-12 | 12px | Medium inset |
spacing-16 | 16px | Standard card padding, button padding-x |
spacing-20 | 20px | Section gap |
spacing-24 | 24px | Component vertical rhythm |
spacing-32 | 32px | Large gap |
spacing-40 | 40px | Section header gap |
spacing-48 | 48px | Page section spacing |
spacing-64 | 64px | Large section spacing |
Typography Scale
Figma collection: Primitives / Typography — Mode: Default
| Token | Value | Description |
|---|---|---|
font-family-base | Inter | Primary typeface |
font-size-xs | 12px | Captions, tiny labels |
font-size-sm | 14px | Body text, helper text |
font-size-md | 16px | Default body copy |
font-size-lg | 18px | Section subheadings |
font-size-xl | 20px | Headings |
font-size-2xl | 24px | Display headings |
font-size-3xl | 30px | Hero headings |
font-weight-regular | 400 | Body text |
font-weight-medium | 500 | Emphasis, UI labels |
font-weight-semibold | 600 | Headings, strong emphasis |
font-weight-bold | 700 | Heavy headings |
line-height-tight | 1.2 | Headings |
line-height-normal | 1.5 | Default |
line-height-relaxed | 1.75 | Long-form body text |
Border Radius
Figma collection: Primitives / Radius — Mode: Default
| Token | Value | Use cases |
|---|---|---|
radius-none | 0px | Sharp corners |
radius-sm | 2px | Subtle rounding, chips, tags |
radius-md | 4px | Buttons, inputs, cards (default) |
radius-lg | 8px | Panels, modals, larger cards |
radius-xl | 12px | Large cards, sheets |
radius-2xl | 16px | Prominent UI elements |
radius-full | 9999px | Pills, badges, circular avatars |
Primitives are stable. These values rarely change. When they do change, it's because the entire design language is being updated — not because of a brand or theme switch. That's why they have only one mode (Default).