12-Lexicon — Design Tokens
The vocabulary of your design system: colors, spacing, typography, and more.
Color Tokens
Semantic and primitive color tokens.
Primary
Secondary
Success
Warning
Danger
Info
Spacing Scale
Consistent spacing tokens based on a modular scale.
--ss-space-1
8px
--ss-space-2
16px
--ss-space-3
24px
--ss-space-4
32px
--ss-space-5
40px
--ss-space-6
48px
--ss-space-7
56px
--ss-space-8
64px
Typography Scale
Modular type scale for consistent sizing.
--ss-font-size-xs (0.75rem)
--ss-font-size-sm (0.875rem)
--ss-font-size-base (1rem)
--ss-font-size-lg (1.125rem)
--ss-font-size-xl (1.25rem)
--ss-font-size-2xl (1.5rem)
--ss-font-size-3xl (1.875rem)
Border Radius
Shadow Scale
sm
md
lg
xl
Motion Tokens
Consistent animation timing and easing.
| Token | Value | Use Case |
|---|---|---|
--ss-duration-fast |
150ms | Micro-interactions |
--ss-duration-normal |
300ms | Standard transitions |
--ss-duration-slow |
500ms | Page transitions |
--ss-ease-default |
cubic-bezier(0.4, 0, 0.2, 1) | General purpose |