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(210, 60%, 50%); /* Base */
  --mono-300: hsl(210, 50%, 80%); /* Light */
  --mono-100: hsl(210, 40%, 95%); /* Very light background */
}

body {
  background-color: var(--mono-100);
  color: var(--mono-900);
  font-family: 'Inter', sans-serif;
}

.mono-card {
  background-color: #ffffff; /* Or mono-100 */
  border: 1px solid var(--mono-300);