6.1 Brand Palette
Figma collection: Brand Palette — Modes: Brand-A, Brand-B, …
The Brand Palette is the first translation layer. It maps raw primitive colors to brand-specific names. Switching the mode changes which primitive colors the brand tokens point to, instantly re-theming the entire system.
| Token | Mode: Brand-A | Mode: Brand-B | Description |
|---|---|---|---|
brand-base | {purple-600} | {teal-400} | Primary brand color |
brand-light | {purple-400} | {teal-300} | Lighter variant (dark mode use) |
brand-dark | {purple-800} | {teal-700} | Darker variant |
brand-container-base | {purple-100} | {teal-100} | Soft tinted background |
info-base | {blue-600} | {blue-500} | Info family base |
success-base | {green-600} | {green-500} | Success family base |
warning-base | {amber-500} | {amber-400} | Warning family base |
danger-base | {red-600} | {red-500} | Danger family base |
neutral-dark | {gray-700} | {slate-700} | Neutral dark variant (brand-specific gray temp) |
neutral-light | {gray-200} | {slate-200} | Neutral light variant |
6.2 Semantic Color
Figma collection: Semantic / Color — Modes: Light, Dark
This is where the 42 semantic color tokens live: 7 color families × 6 roles each, plus global structural colors. All tokens reference Brand Palette tokens — never primitives directly.
| Token | Mode: Light | Mode: Dark | Role |
|---|---|---|---|
brand-color | {brand-base} → purple | {brand-light} → lighter purple | Brand primary accent |
brand-on-color | {white} | {brand-dark} | Content on brand-color |
brand-container | {brand-container-base} | {brand-dark} | Subtle brand background |
brand-on-container | {brand-dark} | {brand-light} | Content on container |
brand-outline | {brand-base} | {brand-light} | Brand border/stroke |
brand-focus | {brand-base}@40% | {brand-light}@40% | Focus ring (alpha) |
danger-color | {danger-base} → red | {danger-light} | Danger primary accent |
| …same 6-role pattern for: info, success, warning, neutral, contrast… | |||
surface-default | {white} | {gray-900} | Default background surface |
on-surface | {gray-900} | {gray-50} | Default text color |
on-surface-muted | {gray-500} | {gray-400} | Secondary/muted text |
border-default | {gray-200} | {gray-700} | Default border |
disabled-surface | {gray-100} | {gray-800} | Disabled element bg |
disabled-on-surface | {gray-400} | {gray-600} | Text on disabled |
disabled-border | {gray-300} | {gray-700} | Disabled border |
6.3 Semantic Typography
Figma collection: Semantic / Typography — Mode: Default (or per-brand if needed)
Typography tokens define the design system's type scale — what font sizes, weights, and line heights are available for use. These are what Figma text styles bind to.
| Token | Maps To | Figma Style |
|---|---|---|
text-xs (font-size) | {font-size-xs} = 12px | Typography / text-xs-regular |
text-sm (font-size) | {font-size-sm} = 14px | Typography / text-sm-medium |
text-md (font-size) | {font-size-md} = 16px | Typography / text-md-regular |
text-lg (font-size) | {font-size-lg} = 18px | Typography / text-lg-medium |
display-sm (font-size) | {font-size-xl} = 20px | Typography / display-sm-semibold |
display-md (font-size) | {font-size-2xl} = 24px | Typography / display-md-semibold |
6.4 Semantic Spacing & Radius
In most cases, Tier 1 spacing and radius tokens are aliased directly at the semantic level to give them meaningful names that describe usage context:
| Semantic Token | Primitive Reference | Intended Use |
|---|---|---|
space-component-gap-sm | {spacing-4} = 4px | Tight gaps inside compact components |
space-component-gap-md | {spacing-8} = 8px | Default gap between component children |
space-component-padding-sm | {spacing-8} = 8px | Small component padding |
space-component-padding-md | {spacing-16} = 16px | Default component padding |
radius-component-sm | {radius-md} = 4px | Default small component radius |
radius-component-md | {radius-lg} = 8px | Default medium component radius |
radius-component-full | {radius-full} = 9999px | Pill-shaped components |