GFX-301e · Module 2

Dark Mode Color Systems

3 min read

Our brand lives in dark mode — black backgrounds, light text, glowing accents. But "dark mode" is not a single state; it is a spectrum of darkness levels, and the color system must function at every level.

The dark mode color scale for our brand: Level 0 (#000000) — pure black, hero backgrounds, primary canvas. Level 1 (#0a0a0a) — near-black, card backgrounds, elevated surfaces. Level 2 (#141414) — dark gray, secondary surfaces, sidebar backgrounds. Level 3 (#1a1a1a) — medium-dark, hover states, interactive surfaces. Level 4 (#222222) — visible gray, borders, dividers. Each level has specific pairing rules with the accent colors — cyan glow renders differently on #000000 versus #1a1a1a because the contrast context changes.

For AI generation, the dark mode scale must be specified in the style specification, and the critic must verify that the correct darkness level is used for each element type. A generated hero image using #1a1a1a for the background instead of #000000 may look fine in isolation but will clash when deployed on the actual website where the surrounding context is pure black. The darkness level is not aesthetic preference — it is a structural specification.

Do This

  • Define a 5-level darkness scale and specify which level applies to which element type
  • Test accent color rendering at every darkness level — glow effects shift with background brightness
  • Specify the darkness level in the generation prompt — "pure black #000000 background, not dark gray"

Avoid This

  • Treat "dark mode" as a single state — it is a spectrum that affects color relationships
  • Let the model choose the darkness level — it defaults to dark gray, not pure black
  • Assume accent colors look the same on every darkness level — they do not