Every design system I'd built before this one started from a light palette and got a dark theme grafted on afterward — usually a inverted grayscale pass and a prayer that nothing broke. For the Obsidian system I flipped the order: dark first, light theoretical.
Why the order matters
Contrast behaves differently on a near-black surface than it does on white. A border that reads as "subtle structure" at 8% opacity on #f5f5f5 disappears entirely on #0a0a0a — you need real luminance steps, not just alpha tricks. Designing dark-first forces you to solve that early instead of discovering it in QA.
The token layers that actually held up
- Background — four steps (primary, surface, elevated, card), not two. Two steps reads flat under real content density.
- Border — a hover state distinct from the resting state, or every card looks static.
- Accent — one hue, three intensities (solid, dim, glow), used sparingly enough that it still means something when it shows up.
The accent color's job is to mark the one thing on the screen that wants a click. If everything is lime, nothing is.
What I'd change next time
I under-invested in the category/discipline color set until late — five semantic hues (design, code, video, photo, experimental) that needed to read clearly against a near-black card without fighting the accent. Getting those relationships right earlier would have saved a full pass of pill-and-tag rework.