monochromatic-ui

Monochromatic UI

"Elegance through constraint. A single hue, explored through all its tints, tones, and shades."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Single Hue: Choose one base color (e.g., deep blue). The entire UI is built using lighter (tints) and darker (shades) versions of that exact hue.
2. High Contrast for Legibility: The darkest shade and the lightest tint must have enough contrast to pass accessibility standards when placed together.
3. Texture over Color: Since color is restricted, use subtle textures, patterns, or varying opacities to differentiate sections.

Visual DNA

• Colors: Monochromatic Brown or pick one dominant hue from Earth-Grounded Elegance and extrapolate it.
• Typography: Clean and unobtrusive. The layout relies heavily on font weights to establish hierarchy since color cannot.
• Shadows: Shadows must be tinted with the base hue, never pure black.

Web Implementation

• Use HSL (Hue, Saturation, Lightness) heavily in CSS to make building the palette easy.
• CSS Example:

:root {
  /* Base Hue: Deep Blue (210) */
  --mono-900: hsl(210, 80%, 10%); /* Very dark */
  --mono-700: hsl(210, 70%, 30%); /* Dark */
  --mono-500: hsl(