Design system
Typography
16px, weight-700, lightness 100% 16px, weight-700, lightness 100% (base) 14px, weight-400, lightness 100% (base) 14px, weight-400, lightness 70% 12px, weight-400, lightness 70%
Spacing
0.5rem, vertical padding (buttons) 1rem, horizontal padding and gap (buttons) 2rem-1.5rem, padding (cards) 0.5rem, group siblings (title and subtitle) 1rem, group neighbors (body) 1.5rem, separate groups (header, body, call to action buttons in a card)
Color Token
60-30-10% rule
Design Tokens
- background -> 60%, base color
- foreground -> 30%, text color
- card
- accent -> focus color, highlights, derived from primary usually darker
- muted -> for deemphasized text, for borders, for separators
- primary -> 10%, cta, action buttons
- secondary -> 10% neutral buttons