Design Tokens
Default palette targets WCAG 2.2 AAA (7:1) for text on surfaces. Use data-velin-contrast="aa" on <html> for lighter AA text. Run npm run test:contrast — see generated color reference and Accessibility.
Colors (OKLCH)
--velin-color-primary
--velin-color-secondary
--velin-color-success
--velin-color-warning
--velin-color-danger
--velin-color-info
--velin-color-surface
--velin-color-surface-dim
--velin-color-text
--velin-color-border
Typography Scale (1.25x Major Third)
text-5xl (3.815rem)
text-4xl (3.052rem)
text-3xl (2.441rem)
text-2xl (1.953rem)
text-xl (1.563rem)
text-lg (1.25rem)
text-base (1rem)
text-sm (0.8rem)
text-xs (0.64rem)
Spacing
1
2
3
4
5
6
8
10
12
16
Border Radius
none
xs
sm
md
lg
xl
full
Shadows
xs
sm
md
lg
xl
2xl
Aspect Ratio
| Token | Value | Preview |
|---|---|---|
--velin-aspect-square | 1 / 1 | |
--velin-aspect-video | 16 / 9 | |
--velin-aspect-photo | 4 / 3 | |
--velin-aspect-portrait | 3 / 4 | |
--velin-aspect-wide | 21 / 9 | |
--velin-aspect-golden | 1.618 / 1 |
Z-Index Scale
Prevents z-index wars by providing a predefined layer hierarchy.
| Token | Value | Usage |
|---|---|---|
--velin-z-hide | -1 | Hidden elements |
--velin-z-base | 0 | Default layer |
--velin-z-raised | 1 | Slightly elevated |
--velin-z-dropdown | 100 | Dropdown menus |
--velin-z-sticky | 200 | Sticky headers |
--velin-z-navbar | 300 | Navigation bars |
--velin-z-overlay | 400 | Overlay backgrounds |
--velin-z-modal | 500 | Modals, drawers |
--velin-z-toast | 600 | Toast notifications |
--velin-z-tooltip | 700 | Tooltips |
--velin-z-max | 9999 | Topmost layer |
Motion / Transitions
Duration and easing tokens for consistent animation behavior.
Durations
| Token | Value |
|---|---|
--velin-duration-instant | 50ms |
--velin-duration-fast | 100ms |
--velin-duration-normal | 200ms |
--velin-duration-slow | 300ms |
--velin-duration-slower | 500ms |
Easing Curves
| Token | Value |
|---|---|
--velin-ease-default | cubic-bezier(0.4, 0, 0.2, 1) |
--velin-ease-in | cubic-bezier(0.4, 0, 1, 1) |
--velin-ease-out | cubic-bezier(0, 0, 0.2, 1) |
--velin-ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) |
--velin-ease-bounce | cubic-bezier(0.34, 1.56, 0.64, 1) |
Transition Presets
| Token | Properties |
|---|---|
--velin-transition-colors | color, background-color, border-color |
--velin-transition-opacity | opacity |
--velin-transition-transform | transform |
--velin-transition-shadow | box-shadow |
--velin-transition-all | all properties |