A 12-step dark mode token ramp
The neutral scale I use on every dark interface, with the contrast rules that make it safe to apply blind.
- Design Systems
- Color
Twelve steps, dark-first. Steps 1 to 7 are surfaces and borders, step 8 is large text only, and steps 9 to 12 are safe for text at any size.
The rule that makes it usable: if you're unsure which step to use for text, you may not use anything below 9. That single constraint removes most accessibility failures before they happen.