Design Tokens
All design decisions are captured as CSS custom properties — easy to override per project.
Border Radius
--ds-radius-xs
4px
--ds-radius-sm
6px
--ds-radius-md
8px
--ds-radius-lg
12px
--ds-radius-xl
16px
--ds-radius-2xl
20px
Shadows
| Token | Value |
|---|---|
--ds-shadow-sm | 0 1px 2px 0 rgb(0 0 0 / 5%) |
--ds-shadow-md | 0 4px 6px -1px ... |
--ds-shadow-lg | 0 10px 15px -3px ... |
--ds-shadow-xl | 0 20px 25px -5px ... |
Durations
| Token | Value |
|---|---|
--ds-duration-fast | 100ms |
--ds-duration-base | 150ms |
--ds-duration-slow | 200ms |
--ds-duration-slower | 300ms |
Easing
| Token | Value |
|---|---|
--ds-ease-smooth | cubic-bezier(0.4, 0, 0.2, 1) |
--ds-ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) |
--ds-ease-in | cubic-bezier(0.4, 0, 1, 1) |
--ds-ease-out | cubic-bezier(0, 0, 0.2, 1) |