Color system design
Building a cohesive palette that scales from brand to UI to semantic tokens.
1. Brand primitives
Start with two hues that define identity. Meridian uses violet #8B5CF6 and pink #F472B6. Everything else derives from these.
2. Neutral scale
A dark base (#0A0612) with stepped grays for surfaces, borders, and text. Keep neutrals cool to harmonize with violet undertones.
3. Semantic tokens
Map primitives to purpose: success (emerald), warning (amber), error (rose), info (sky). Each gets a foreground, background, and border variant.
4. Contrast ratios
Body text on dark surface must hit 4.5:1 minimum. Violet on dark fails at small sizes — reserve it for headings and decorative elements. Use white or light gray for body copy.
5. Tailwind config
Extend colors in tailwind.config.ts with brand, surface, and semantic scales. Use CSS variables for runtime theming if you plan a light mode.
Pro tip: Never use raw hex values in components. Reference design tokens so a palette change updates the entire app in one place.