Acme Design System
Design Token Reference
Every design token in the system — colors, spacing, radius, typography, and shadows — with usage guidance.
ℹ
Always use tokens. Never hardcode hex values or pixel values in component code. If a token doesn't exist for what you need, propose one.
Usage Pattern
- In CSS:
var(--color-brand-primary)
- In Figma: tokens are bound to components via the Variables panel
- Naming:
category / sub-category / variant
- Semantic tokens override primitive tokens — always prefer semantic
Brand Colors
| Token | Value | Usage |
|---|
| --color-brand-primary |
#1955A6 |
Primary buttons, active links, focus rings, selected states |
| --color-brand-dark |
#0B2F5C |
Hover state on primary buttons, dark navbar background |
| --color-brand-bg |
#E7EFF7 |
Tab hover bg, brand-tinted backgrounds |
| --color-brand-light |
#A8C4E4 |
Focus ring color on buttons |
Neutral Colors
| Token | Value | Usage |
|---|
| --color-neutral-0 |
#FFFFFF |
Card bg, modal bg, input bg |
| --color-neutral-50 |
#F7F7F7 |
Page background, zebra rows |
| --color-neutral-100 |
#F0F0F0 |
Hover backgrounds, disabled fills |
| --color-neutral-200 |
#E0E0E0 |
Borders, dividers, skeleton loaders |
| --color-neutral-400 |
#B0B0B0 |
Disabled text, placeholder icons |
| --color-neutral-500 |
#909090 |
Helper text, secondary labels, captions |
| --color-neutral-700 |
#505050 |
Body text secondary, icon default color |
| --color-neutral-800 |
#383838 |
Primary body text |
| --color-neutral-900 |
#252525 |
Headings, high-emphasis text |
Semantic Colors
| Token | Value | Usage |
|---|
| --color-error-main |
#FF4242 |
Error borders, danger buttons, error icons |
| --color-error-dark |
#C62828 |
Error text, error badge dark shade |
| --color-error-bg |
#FDECEA |
Error alert background |
| --color-success-main |
#529604 |
Success borders, success icons, success badges |
| --color-success-bg |
#EDF7E0 |
Success alert background |
| --color-warning-main |
#FF8505 |
Warning borders, warning icons |
| --color-warning-bg |
#FFF3E0 |
Warning alert background |
| --color-info-main |
#1FA4B6 |
Info alert borders, info icons |
| --color-info-bg |
#E0F5F8 |
Info alert background |
Spacing Scale
| Token | Value | Usage |
|---|
| --space-xs |
4px |
Icon-to-text gap, tight internal padding |
| --space-sm |
8px |
Button padding-y (MD), badge padding |
| --space-md |
12px |
Tab padding-x, input padding-y |
| --space-lg |
16px |
Button padding-x (MD), card gap, form field gap |
| --space-xl |
20px |
Navbar padding-x, section header gap |
| --space-2xl |
24px |
Card padding, modal padding, page section gap |
| --space-3xl |
32px |
Large section spacing |
| --space-4xl |
48px |
Page-level section separators |
Border Radius
| Token | Value | Usage |
|---|
| --radius-sm |
4px |
Buttons, badges, inputs |
| --radius-md |
6px |
Buttons (LG), dropdowns |
| --radius-lg |
12px |
Cards, modals, panels |
| --radius-full |
9999px |
Avatars, pill tabs, count badges, toggle |
Typography
| Token | Value | Usage |
|---|
| --font-brand |
Mulish |
All UI text — headings, body, labels, buttons |
| --text-h1 |
28px / 800 |
Page titles, modal titles |
| --text-h2 |
16px / 700 |
Section headings, card titles |
| --text-body |
14px / 400 |
Body text, input values, dropdown items |
| --text-body-bold |
14px / 700 |
Button labels, active tab labels |
| --text-sm |
12px / 400 |
Helper text, captions, badge labels |
| --text-label |
11px / 800 |
Field labels, section labels, count badges |
Shadows
| Token | Value | Usage |
|---|
| --shadow-sm |
0 1px 3px rgba(0,0,0,0.08) |
Cards, dropdowns, active pill tab |
| --shadow-md |
0 4px 12px rgba(0,0,0,0.10) |
Modals, popovers, tooltips |
| --shadow-lg |
0 8px 24px rgba(0,0,0,0.12) |
Card hover state |