01 · Foundations
Colors
Two neutral palettes drive the demos — zinc for Casual, stone for Brilliance. Accent colors (sale, new) come from a small red/green set, with amber reserved for ratings.
Semantic — varies with the active demo
02 · Foundations
Typography
Casual is a single‑face Inter system. Brilliance pairs Fraunces (display, with optical‑size axis for premium serifs at large sizes) with Urbanist (body).
Heading scale
Body scale
Weights
03 · Foundations
Radius
Two demos take very different stances on cornering — Casual rounds (16px card / full pill buttons), Brilliance squares everything (0px cards, only buttons stay pill).
04 · Foundations
Spacing
A 4‑point grid that matches Tailwind's scale 1‑to‑1. Same primitive on both demos; semantic mappings (gap, padding) diverge per demo.
05 · Foundations
Shadows
A small set of shadows used on dark elements only (buttons, indicators). Brilliance avoids elevation cues entirely — its surfaces are flat.
06 · Components
Live components
Everything below ships in the catalog prototype — hop over to see them in context.