Why Dark First?
Most design systems start with a light theme and bolt on dark mode. This backward approach leads to washed-out darks, poor contrast, and colors that look muddy in dark contexts. Starting dark inverts the process.
Color Hierarchy in Dark Themes
Dark UI requires at least 5–6 surface levels to communicate depth without shadows:
--void: #06040f; / deepest background /
--deep: #0a071a; / section backgrounds /
--surface: #0f0b22; / cards, inputs /
--elevated: #16112e; / hover states /
--overlay: #1e1740; / modals, tooltips /
Each level is ~6% lighter in lightness. This creates perceived depth through subtle elevation.
The Problem with Dark-Adapted Light Modes
When you flip a dark-first system to light, you get a more thoughtful result. Forced to think about both extremes simultaneously, designers create color tokens that are truly semantic rather than purely decorative.
Typography on Dark
Type on dark backgrounds requires different tracking and weight adjustments. Thin weights (300) become ethereal. Heavy weights (700+) create strong anchors. Medium (400–500) is the workhorse.
Accent Colors
Vibrant accents on dark backgrounds need lower saturation than they would on light. A purple that screams at 100% saturation should sit around 65–75% on dark to feel premium, not garish.
Takeaway
Dark-mode-first isn't just an aesthetic trend — it's a discipline that produces more considered, more durable design systems.