Designing dark themes is still messy. Primer Prism wants to fix that.
Dark mode has moved from optional to expected, but building it still trips up a lot of teams. You can’t just invert a palette, and when you support multiple themes, the process only gets more tangled. The typical answer is stitching together several disconnected color tools, which is rarely pleasant.
GitHub has been through this twice. Its own dark mode landed in late 2020 from a design process that relied on manual iteration inside a Figma file with more than 370,000 layers. A few months later, the team started work on a dark high contrast theme and decided to build a better path instead. The result is Primer Prism, an experimental tool in the Primer ecosystem designed to build and maintain cohesive, accessible color palettes.
Primer Prism in action
Primer Prism is built around a three-step loop: define tones, choose colors, test colors.
Defining tones starts with lightness, not hue
The first pass ignores color entirely. Designers ask two questions: how light or dark should each background be, and what contrast ratio is needed between foreground and background? Every scale in Primer Prism starts with a lightness curve, and the tool continuously checks paired colors against the WCAG 2 contrast standard.
Dragging lightness sliders up and down to adjust the lightness curve of a scale
A key move is sharing that curve across all hue scales. Since all colors later inherit the same base lightness, adjusting one curve retunes the entire palette—a quick way to maintain tonal consistency without line-by-line edits.
Adjusting the lightness curve of all color scales at once
For perception—not just math—Primer Prism leans on the HSLuv color space. In HSLuv, colors with the same lightness value appear equally bright to the human eye, making uniformity across scales much easier to control.
Then hue and saturation get curated
Once tone is settled, the process moves to pick a hue character per scale. Designers establish each scale’s base hue, then compare all bases side by side to ensure consistency.
A side-by-side comparison of every color scale
Tints and shades still need manual care. Blue, for instance, tends to shift toward green in lighter hues and purple in darker ones. Graph-level fine-tuning is available via separate hue, saturation, and lightness curves for each scale.
The hue, saturation, and lightness curves of the blue color scale
Getting this right is an iterative, artistic exercise—expected for topics like macro-level color design and is covered in Color in UI Design: A (Practical) Framework by Erik D. Kennedy.
Testing happens in real code
Palettes aren’t kept in the tool forever. Primer Prism can export them as JSON objects into Primer Primitives, GitHub’s design tokens repository. From there, real GitHub pages get pre-release token packages for production-like review.
The dark color palette applied to GitHub.com
Where Primer Prism is headed
Several gaps remain between the current tool and a fully integrated design workflow. All are on the roadmap:
- Visual testing inside the tool. Currently color checks require jumping to Figma or production apps, where colors meet functional UI variables and real components. Primer Prism will try to visualize that mapping itself.
- Closer GitHub integration. Pulling and pushing to the Primer Primitives repository directly would eliminate copy-paste and version drift between palette edits and the token store.
- A Figma plugin. Designers explore heavily inside Figma; a plugin would bridge the explore space to Primer Prism without changing platforms.
Primer Prism is already used internally to ship dark high contrast, light high contrast, and colorblind themes for GitHub.
It’s open source and freely available at primer.style/prism. The project also acknowledges influences like ColorBox by Lyft, Huetone, Leonardo by Adobe, and Palettte. Expect rough edges and breaking changes—this is explicitly experimental tooling under active iteration.
