Design tokens
The atomic units of the Meridian visual language — colors, spacing, typography, and shadows encoded as reusable variables.
Why tokens
Tokens decouple design decisions from implementation. Change a single hex value and every component inherits the update. No find-and-replace, no drift between Figma and code.
Color scale
Meridian uses a three-pillar palette anchored on violet #8B5CF6, pink #F472B6, and a deep dark background #0A0612. Every interactive surface, border, and text variant derives from these primitives through opacity layering.
Spacing
A 4px base grid governs all padding, margin, and gap values. Tailwind spacing scale maps directly — no magic numbers.
Typography
System font stack with geometric fallback. Headings use tracking-tight; body copy defaults to 1.625 leading-relaxed. No custom web fonts imported — zero layout shift on load.
Next: see Component API for token consumption patterns.