Agnostic Design System Tokens

Lists framework-agnostic semantic design tokens for color, typography, spacing, and border radius.
Published: 7/20/2026

Semantic design tokens map abstract values to visual meaning. Using semantic tokens (e.g. brand-accent or surface-muted) instead of literal styling properties ensures consistent theme swaps and visual harmony across platforms.

  • Colors: brand-accent, brand-hover, surface-base, surface-muted, surface-overlay, border-base, border-accent, text-base, text-muted, text-contrast.
  • Radius: radius-none, radius-sm (4px), radius-md (8px), radius-lg (12px), radius-full (9999px).
  • Spacing Scale: spacing-xs (4px), spacing-sm (8px), spacing-md (16px), spacing-lg (24px), spacing-xl (32px).
  • No Hardcoded Hexes: Never hardcode hexadecimal or raw color values in styles or JSX. Map all variables through these tokens first.
SEO Title: Agnostic Design System Tokens
SEO Description: A vocabulary of semantic design tokens for layout spacing, colors, border radius, and typography.
Index Alternates:semantic tokensstyling variablestheme palette