Why value contrast is primary
The visual system evolved to detect edges, and edges are defined by luminance differences, not hue differences. Two surfaces can differ dramatically in hue but look identical in value — and the edge between them will be weak or invisible to many viewers, including those with color vision deficiencies. A hue pair like red and green that reads as high-contrast to typical viewers may have nearly identical luminance, producing a visual vibration effect with zero spatial clarity. Designing primarily from value ensures that hierarchy works for all viewers, in all lighting conditions, at all sizes.
The grayscale test in practice
Converting a design to grayscale before applying color is a technique borrowed from print production, where designers had to ensure layouts would work in black-and-white before adding color as a second layer. The modern version is simpler: desaturate the palette and check whether text is legible, call-to-actions are prominent, and background/foreground relationships read clearly. If the design works in grayscale, color will enhance it. If the design only works with color, the value architecture needs rebuilding. The Monochrome Studio collection is built explicitly for this approach — all contrast comes from lightness, making it a reliable foundation for any hue overlay.
Building a value-first palette
A practical value-first palette identifies five or six lightness steps that correspond to semantic roles: near-white surface, light background, mid-tone support, mid-dark accent, dark text support, near-black text. Once these lightness levels are established, hue choices become much easier — they are overlaid onto a value structure that already works, rather than being asked to do double duty as both the hierarchy signal and the aesthetic character. The Dark Mode UI Kit demonstrates this approach across both light and dark themes: each theme shares the same five-step value structure, with hue shifted between the two. The design does not change — only the lighting.
