Monochromatic UI

Monochromatic UI is a design-style child skill ('elegance through constraint - a single hue, explored through all its tints, tones, and shades'), part of the design-it family and not meant to be triggered directly. Three core principles: Single Hue (one base color, like deep blue, with the entire UI built from lighter tints and darker shades of that exact hue), High Contrast for Legibility (the darkest shade and lightest tint must have enough contrast to pass accessibility standards together), and Texture over Color (since color choice is restricted, subtle textures, patterns, or varying opacities differentiate sections instead).

Use it when the user's request matches this restrained, single-color-family aesthetic - premium brand sites, editorial features, or any product wanting cohesive elegance from constraint rather than a multi-color palette. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA draws from Monochromatic Brown or one dominant hue pulled from Earth-Grounded Elegance and extrapolated across the full tint/shade range, clean unobtrusive typography that leans entirely on font weight for hierarchy since color can't do that job here, and shadows that must be tinted with the base hue rather than pure black. The web implementation builds the palette in HSL specifically because it makes generating consistent tints and shades easy - a five-step scale (--mono-900 through --mono-100) varies only lightness (and slightly saturation) while holding hue constant at, say, 210 degrees for deep blue, and even the card shadow uses hsla(210, 80%, 10%, 0.05) rather than a generic black shadow.

:root {
  --mono-900: hsl(210, 80%, 10%);
  --mono-500: hsl(210, 60%, 50%);
  --mono-100: hsl(210, 40%, 95%);
}
.mono-card { box-shadow: 0 10px 25px hsla(210, 80%, 10%, 0.05); }

SwiftUI reproduces the exact same five-step scale using its own 0.0-1.0 hue range (210/360 = 0.58), constructing each step with Color(hue: 0.58, saturation:, brightness:) and varying only saturation and brightness per step - the identical HSL-scale logic as the web CSS variables, just expressed in SwiftUI's native hue/saturation/brightness color initializer instead of CSS hsl().

Designers and developers building a premium brand site, editorial feature, or product that wants cohesive, restrained elegance from a single color family instead of a multi-hue palette - relying on typography weight and texture to carry hierarchy that color normally would.