Design tokens are reusable CSS custom properties that define colors, typography, spacing, shadows, and other visual primitives. Use tokens instead of hardcoded values to maintain consistency and enable theming.
All colors are defined as CSS custom properties in colors_and_type.css.
--vs-orange
Primary action color for buttons, links, and highlights.
--vs-navy
Secondary brand color for headings and accents.
--color-success
Success messages and positive states.
--color-warning
Warning messages and caution states.
--color-error
Error messages and destructive actions.
Typography tokens define font families, sizes, weights, and line heights.
| Token | Usage | Size |
|---|---|---|
--font-heading |
Headings and display text | Outfit |
--font-body |
Body text and labels | Inter |
--text-heading-1 |
Page heading (h1) | clamp(2.4rem, 4.2vw, 3.6rem) |
--text-body-base |
Standard body text | 1rem (16px) |
Consistent spacing ensures visual rhythm and alignment.
| Token | Value |
|---|---|
--space-xs |
4px |
--space-sm |
8px |
--space-md |
16px |
--space-lg |
24px |
--space-xl |
32px |
Rounded corners for a softer, modern appearance.
| Token | Value |
|---|---|
--radius-sm |
4px |
--radius-md |
8px |
--radius-card |
12px |
--radius-pill |
9999px (fully rounded) |
Elevation and depth through shadows.
| Token | Usage |
|---|---|
--shadow-sm |
Cards and subtle elevation |
--shadow-md |
Modals and overlays |
--shadow-lg |
Floating elements and popovers |
Reference tokens with the CSS var() function:
.button {
background: var(--vs-orange);
color: var(--brand-black);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-size: var(--text-body-sm);
box-shadow: var(--shadow-sm);
}