Spacing tokens
An 8-point-rooted scale. Semantic spacing keeps vertical rhythm consistent across every section.
Primitives
| Token | Value | Scale |
|---|---|---|
--space-1 | 4px | |
--space-2 | 8px | |
--space-3 | 12px | |
--space-4 | 16px | |
--space-5 | 24px | |
--space-6 | 32px | |
--space-7 | 48px | |
--space-8 | 64px | |
--space-9 | 96px |
Semantics
| Token | Value | Use |
|---|---|---|
--space-section | clamp(84px, 9vw, 136px) | Vertical padding between page sections |
--space-card | 36px | Inner padding of cards & forms |
--space-gap | 24px | Grid & flex gaps |
--radius | 0px | Sharp corners — a signature of the luxury theme |
--maxw | 1180px | Content container width |
Motion & hairlines
| Token | Value | Use |
|---|---|---|
--ease | cubic-bezier(.22,.61,.36,1) | Default easing for hovers & transitions |
--ease-out | cubic-bezier(.16,1,.3,1) | Entrances — scroll reveals, lifts |
--dur-1 / --dur-2 / --dur-3 | .2s / .35s / .9s | Micro → hover → reveal durations |
--lift | 0 26px 54px -30px rgba(9,21,37,.38) | Hover elevation for cards |
--hairline-gold(-soft) | rgba(194,161,90,.30 / .16) | Champagne keylines on dark surfaces |
Motion is always gated by
prefers-reduced-motion: reveals and sheens disappear, content stays fully visible. Defined in src/styles/ds/brand.css.