Tokens reference
Quick reference for Rizzo CSS custom properties: spacing, typography, semantic colors, radius, and transition.
This page lists the main design tokens (CSS custom properties) used across the design system. Use these variables in your CSS for consistency. For full context see Design System and Colors.
Spacing
Spacing scale (rem-based). Use var(--spacing-n) for margins, padding, and gaps.
| Variable | Value |
|---|---|
--spacing-0 | 0 |
--spacing-1 | 0.25rem (4px) |
--spacing-2 | 0.5rem (8px) |
--spacing-3 | 0.75rem (12px) |
--spacing-4 | 1rem (16px) |
--spacing-5 | 1.25rem (20px) |
--spacing-6 | 1.5rem (24px) |
--spacing-8 | 2rem (32px) |
--spacing-10 | 2.5rem (40px) |
--spacing-12 | 3rem (48px) |
--spacing-16 | 4rem (64px) |
--spacing-20 | 5rem (80px) |
--spacing-24 | 6rem (96px) |
Additional tokens: --spacing-0-125, --spacing-0-375, --spacing-0-625, --spacing-0-875, --spacing-14 through --spacing-96, --content-padding-x, --content-padding-y, --section-spacing, --page-header-margin-bottom.
Typography
Font sizes
Scaled by --font-size-scale (default 1). Base scale:
| Variable | Base value |
|---|---|
--font-size-xs | 0.75rem |
--font-size-sm | 0.875rem |
--font-size-base | 1rem |
--font-size-lg | 1.125rem |
--font-size-xl | 1.25rem |
--font-size-2xl | 1.5rem |
--font-size-3xl | 1.875rem |
--font-size-4xl | 2.25rem |
--text-lg | 1.125rem (heading utility) |
Font weights
--font-weight-light (300), --font-weight-normal (400), --font-weight-medium (500), --font-weight-semibold (600), --font-weight-bold (700), --font-weight-extrabold (800).
Line height & letter spacing
--line-height-tight (1.25), --line-height-snug (1.375), --line-height-normal (1.5), --line-height-relaxed (1.625), --line-height-loose (2). Letter spacing: --letter-spacing-tighter through --letter-spacing-widest.
Font families
--font-family (body), --font-family-sans, --font-family-mono, --font-family-serif. Pair-specific: --font-family-geist-sans, --font-family-geist-mono, --font-family-inter, --font-family-jetbrains-mono, etc.
Semantic colors
Theme-aware; use these instead of raw colors. See Colors for scales and usage.
| Variable | Purpose |
|---|---|
--background | Main background |
--background-alt | Cards, panels |
--text | Primary text |
--text-dim | Secondary text |
--border | Borders |
--accent | Primary accent (buttons, fills) |
--accent-fg | Links, outline buttons, focus |
--icon | Icon color |
--icon-dim | Dimmed icons |
--success, --success-text | Success state |
--warning, --warning-text | Warning state |
--error, --error-text | Error state |
--info, --info-text | Info state |
Radius & transition
Border radius
--radius-none (0), --radius-sm (0.125rem), --radius (0.25rem), --radius-md, --radius-lg, --radius-xl, --radius-2xl, --radius-3xl, --radius-full (9999px), --radius-circle (50%).
Transition
--transition-fast (150ms), --transition-base (200ms), --transition-slow (300ms), --transition-slower, --transition-slowest, --transition-ease-out, --transition-ease-in, --theme-transition-duration.
Z-index
--z-base, --z-dropdown (10), --z-sticky (50), --z-fixed (100), --z-modal (2000), --z-tooltip (3000), --z-toast (4000), --z-navbar (5000), --z-settings (10000), --z-skip-link (10001).
Containers & layout
--container-default (1200px), --container-sm through --container-2xl, --max-width-content (65ch), --bp-sm through --bp-xl (breakpoints), --touch-target-min (3rem).