# Chromatic Atlas: Build and test light and dark UI themes

An offline color and typography workbench for designing light and dark UI themes, checking contrast on real component pairs, and exporting reusable CSS and JSON tokens.

- Published: 2026-11-07
- Tags: Design tokens, Color contrast, UI themes
- Web page: https://beenmoss.com/notes/chromatic-atlas-light-dark-ui-themes

A palette looks different once it has to carry a real interface. Chromatic Atlas lets you try 12 color families and six typography directions on dashboards, shopping screens, reading layouts, and a mobile planner. Start with a light or dark recipe, then tune semantic roles such as surface, text, primary, and on-primary independently in each mode.

Check the pairs people actually see: body text on the canvas, labels on buttons, and focus indicators against neighboring surfaces. The live audit measures 66 relationships per theme and suggests color adjustments. It measures opaque colors; the final interface still needs checks for keyboard focus, zoom, and assistive technology.

Once a theme works across the previews, save a browser preset or export CSS custom properties and JSON tokens. The standalone playground includes its fonts and runs offline. Export presets before moving to a different browser or site address, because browser storage is local to that origin.

## Try the offline theme workbench

Download Chromatic Atlas from GitHub and open color-theme-playground.html in your browser. The repository also includes the editable FigCraft atlas, theme token files, contrast data, and instructions for running it on a stable local address. Source: https://github.com/habiburrahmantalha/chromatic-atlas