Foundations
Space, shape and motion
One spacing scale, two shape languages, short purposeful motion.
Spacing scale
--space-14px--space-28px--space-312px--space-416px--space-524px--space-632px--space-740px--space-848px--space-948 to 64px, fluid--space-1056 to 80px, fluid--space-1164 to 96px, fluid
Shape
Art Deco
Tag
Sunrise
Tag
Durations
| Token | Value | Use |
|---|---|---|
| --dur-micro | 120ms | Hover and press feedback |
| --dur-enter | 240ms | Things appearing, theme change |
| --dur-hold | 280ms | Disclosures opening |
| --dur-exit | 180ms | Things leaving |
Shape by direction
| Property | Art Deco | Sunrise |
|---|---|---|
| Corners | 3 px radius, chamfered buttons, cards and photo frames | 20 px radius, 24 px on images |
| Frames | Inset second rule | Soft shadow, scalloped image mask |
| Border | 1 px | 1 px |
- Art Deco corners are chamfered, not rounded or pilled: buttons, band cards and photo frames clip to an octagonal cut via --chamfer (16 px) and --chamfer-sm (9 px), with an inset second rule on cards and photos for an engraved-frame look.
- .panel stays square-cornered rather than chamfered. Its title tab and corner notch render outside its own box, and clip-path clips a box to its own bounds, so chamfering it would cut them off.
Motion rules
- Motion explains a change, or marks a small moment of delight (below). It never covers content.
- Transitions are 120 to 280 ms. Nothing loops except the slow drifting shadow on Sunrise's cream bands.
- prefers-reduced-motion freezes every animation sitewide.
- Nothing flashes more than three times per second.
Delight
A few warm moments per page, drawn in each direction's own shapes. All are visual; none use sound.
| Moment | Sunrise | Art Deco |
|---|---|---|
| The gradient wakes up | The glow gathers from the bottom-left corner over 1.4 s, then holds. | The same, from the bottom-right corner. |
| Buttons feel alive | Lift 2 px on hover with a plum shadow; press down on click. | The same lift with an orange drop-shadow that follows the cut corners. |
| Cards lift | A soft plum shadow and a rose border on hover. | An Orange Glaze rule and glow on hover. |
| Tags | Outline tags carry a wash of Warm Rose. | Ticket-notched tags, unchanged. |
| Thank you | Three arcs (plum, rose, marigold) draw out from the button, then a confirmation line. | A sunburst of Glaze and Celery rays, then a confirmation line. |
| Headline swash | One word per page title gets a rounded plum underline that draws in. | One word gets a double Celery rule. |
| Carousel cards | Cards settle in with a small overshoot the first time the row is seen. | The same. |
| Time of day | The cream ground shifts a hair warmer in the morning and softer in the evening. | The dark ground shifts a hair lighter in the morning and deeper in the evening. |
- Keep to about three moments per page so it stays warm, not childish.
- Under reduced motion each one shows its final state and nothing moves.
- The thank-you burst fades after two and a half seconds so it never sits over text, and the confirmation line is announced to screen readers.
- Nothing covers signing hands or faces in photographs.