Monochrome
A color scheme using a single hue across multiple lightness and saturation values.
A monochrome palette uses one hue (a single point on the color wheel) and varies it across lightness and saturation to create the full UI palette. Black-and-white grayscale is the strictest case; warm-gray, cool-gray, sepia, and single-hue tints all qualify.
Monochrome forces hierarchy through contrast and weight rather than color, which is why it's favored by editorial design, technical documentation, and any brand wanting a serious, timeless feel.
- Editorial and reference content
- Brands prioritizing typography over color
- Design tools where UI shouldn't compete with user content
- Categorization-heavy UIs (no color = no semantic shortcut)
- Children's products, entertainment, anywhere energy matters
- +Use 5–7 luminance steps for adequate hierarchy
- +Pick a single accent for state (one color CTA, one error)
- −Don't go pure black on pure white — soften with near-black and warm white
Textbook examples in the directory
No chromatic color at all. Five steps of grey on a paper-white canvas, generous 16px radii, oversized whitespace, one humanist sans for everything. The discipline is the brand.
Endless whitespace. Bold Inter headlines at -3% tracking. A single black accent. Soft 6px corners. Nothing else.
Pure black on white. Hard borders, monospace everywhere, zero compromise.
People also ask
What is a monochrome design system?
A system that uses a single hue (or no hue at all) across the entire surface — variation comes from luminance, not color shift.
When does monochrome work best?
Editorial sites, premium brands, dashboards where data is the color, and any product where typographic and spatial hierarchy should carry the design.
How do I add visual interest without color?
Lean on typography contrast, spacing, asymmetry, motion, and texture. Vary surface luminance in small steps (3–8% lift) to build depth.
Is true black-and-white still considered monochrome?
Yes — and it's the strictest form. Most modern monochrome systems pull a hint of warm or cool from one accent, but the page still reads as single-hue.