Dark Mode Design

"Not just inverted colors. A carefully constructed hierarchy of light on dark."

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. Choose Surface Colors: Black and dark grey are both valid. OLED artifacts depend on the display; comfort depends on the user and lighting. Offer theme choice and test contrast.
2. Elevation via Lightness: Lighter surfaces and borders can clarify layers when shadows are subtle. Shadows are not universally invisible in dark mode.
3. Test Accents: Choose accent saturation for readable text and clear state indicators; avoid universal claims about discomfort.

Visual DNA

• Colors: Midnight Luxury or Minimalist Slate (inverted). Background #121212. Elevated cards #1E1E1E, #252525. Primary text #E1E1E1 (not #FFFFFF).
• Typography: Standard highly readable sans-serifs, but often dropped down one font weight compared to light mode, as light text on dark backgrounds appears optically thicker.
• Shadows: Pure black shadows, but with much lower opacity, mostly to separate slightly different shades of grey.