Skip to content

Design Tokens

TokenDescription
--bgPrimary background
--bg-altAlternate/subtle background
--borderBorder color
TokenDescription
--fgPrimary text
--fg-mutedSecondary text
--fg-subtleTertiary text
--fg-faintFaint/disabled text
TokenDescription
--accentPrimary accent color
--accent-fgText on accent background
TokenDescription
--success / --success-fgSuccess state
--error / --error-fgError state
--warning / --warning-fgWarning state
--info / --info-fgInfo state
TokenValue
--fontSystem sans-serif stack
--font-monoSystem monospace stack
--font-semibold600
--text-xs0.75rem
--text-sm0.875rem
--text-base1rem
--text-lg1.125rem
--text-xl1.25rem
--text-2xl1.5rem
--text-3xl1.875rem
--text-4xl2.25rem
TokenValue
--space-xs0.25rem
--space-sm0.35rem
--space-md0.75rem
--space-lg1.5rem
--space-xl2.5rem
TokenValue
--radius0.25rem
--radius-lg0.5rem
--shadowSubtle shadow
--shadow-lgLarger shadow
--transition150ms ease