Design Tokens
CSS Custom Properties — the foundation of every component.
Palette — Slate
--color-white
--color-slate-50
--color-slate-100
--color-slate-200
--color-slate-300
--color-slate-400
--color-slate-600
--color-slate-700
--color-slate-800
--color-slate-900
Palette — System
--color-green-50
--color-green-400
--color-green-600
--color-green-700
--color-green-950
--color-amber-50
--color-amber-300
--color-amber-600
--color-amber-700
--color-amber-950
--color-red-50
--color-red-300
--color-red-600
--color-red-700
--color-red-950
--color-blue-50
--color-blue-300
--color-blue-600
--color-blue-700
--color-blue-950
Surfaces
--fill-background
--fill-surface
--fill-subtle
--fill-muted
--fill-inverse
Text
--text-primary
--text-secondary
--text-muted
--text-disabled
--text-inverse
--text-interactive
Border
--border-base
--border-subtle
--border-strong
Interactive
--fill-interactive
--fill-interactive-hover
--fill-interactive-active
--fill-interactive-focus
--fill-interactive-disabled
--fill-interactive-subtle
--text-on-interactive
--text-on-interactive-disabled
Success
--fill-success
--fill-success-subtle
--text-success
Warning
--fill-warning
--fill-warning-subtle
--text-warning
Danger
--fill-danger
--fill-danger-subtle
--text-danger
Info
--fill-info
--fill-info-subtle
--text-info
Spacing
--space-0
0px
--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px
--space-12
48px
--space-16
64px
--space-20
80px
Border radius
--border-radius-none
0
--border-radius-xs
2px
--border-radius-sm
4px
--border-radius-md
6px
--border-radius-lg
8px
--border-radius-xl
12px
--border-radius-2xl
16px
--border-radius-full
9999px
Shadows
--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
Z-index
100
--z-index-dropdown
100
200
--z-index-sticky
200
300
--z-index-fixed
300
400
--z-index-backdrop
400
500
--z-index-modal
500
600
--z-index-tooltip
600