Design Tokens
All tokens use the --antumo-* prefix and auto-switch between light and dark. Never hardcode colors, spacing, typography, or effects — always reference a token.
// WRONG
color: #3a3a66;
padding: 16px;
// CORRECT
color: var(--antumo-navy-500);
padding: var(--antumo-spacing-3xl);Semantic colors
Prefer semantic tokens over raw scales — they carry intent and adapt per theme.
| Variable | Light | Dark | Usage |
|---|---|---|---|
--antumo-text-primary | gray-900 | gray-50 | Headings, key content |
--antumo-text-secondary | gray-700 | gray-300 | Labels, subheadings |
--antumo-text-tertiary | gray-400 | gray-400 | Supporting text |
--antumo-bg-primary | white | gray-950 | Main background |
--antumo-bg-secondary | gray-50 | gray-900 | Alternate background |
--antumo-border-primary | gray-300 | gray-700 | High-contrast borders |
--antumo-border-secondary | gray-200 | gray-800 | Default borders |
--antumo-bg-brand-solid | navy-500 | navy shift | Primary actions |
Color scales
Each scale has shades 25–950 (lower = lighter). Navy and gray shift per theme; blue/green/yellow/red are invariant.
| Scale | Pattern | Usage |
|---|---|---|
| Navy | --antumo-navy-{25..950} | Brand, primary actions |
| Gray | --antumo-gray-{25..950} | Neutrals, text, borders |
| Blue | --antumo-blue-{25..950} | Info |
| Green | --antumo-green-{25..950} | Success |
| Yellow | --antumo-yellow-{25..950} | Warning |
| Red | --antumo-red-{25..950} | Error, destructive |
Key values: --antumo-navy-500 (#3A3A66, brand) and the unified focus ring #5B6EF2.
Spacing
4px-based scale for padding, margin, gap.
| Variable | Value | Variable | Value | |
|---|---|---|---|---|
--antumo-spacing-xxs | 2px | --antumo-spacing-3xl | 16px | |
--antumo-spacing-xs | 4px | --antumo-spacing-4xl | 20px | |
--antumo-spacing-sm | 6px | --antumo-spacing-6xl | 24px | |
--antumo-spacing-md | 8px | --antumo-spacing-7xl | 32px | |
--antumo-spacing-lg | 10px | --antumo-spacing-8xl | 40px | |
--antumo-spacing-xl | 12px |
Border radius
| Variable | Value | Variable | Value | |
|---|---|---|---|---|
--antumo-radius-xs | 4px | --antumo-radius-xl | 12px | |
--antumo-radius-sm | 6px | --antumo-radius-2xl | 16px | |
--antumo-radius-md | 8px | --antumo-radius-full | 999px | |
--antumo-radius-lg | 10px |
Typography
| Variable | Value | Usage |
|---|---|---|
--antumo-font-heading | CircularXX | Headings, buttons |
--antumo-font-body | Circular LL | Body text, labels |
Font sizes are available as utility classes: .heading-2xl (32px), .heading-xl (28px), .heading-lg (24px), .heading-md (20px), .body-lg (16px), .body-md (14px), .body-sm (12px).
Effects
| Variable | Usage |
|---|---|
--antumo-shadow-xs | Cards |
--antumo-shadow-sm | Buttons |
--antumo-shadow-md | Dropdowns, popovers |
--antumo-shadow-lg | Modals, overlays |
--antumo-focus-ring | Focus indicator (4px #5b6ef2 + 2px white) |
Source of truth
Tokens are defined in JSON (tokens/*.json) and compiled to CSS variables via npm run build:tokens. Never edit the generated _tokens.scss — change the JSON and rebuild.
.my-custom-card {
background: var(--antumo-bg-primary);
border: 1px solid var(--antumo-border-secondary);
border-radius: var(--antumo-radius-xl);
padding: var(--antumo-spacing-6xl);
box-shadow: var(--antumo-shadow-sm);
color: var(--antumo-text-primary);
}