SayUI

Dark Mode

Dark surfaces and layered elevation instead of big white canvases.

What it feels like

Like a night cockpit — the base is dark, data is bright, quiet but always online.

Why it works

Lower luminance cuts fatigue; surface layers replace white-page sections; one accent is enough navigation at high density.

How to tell AI

Dark tech UI: layered dark grays (#121212–#1e1e1e), desaturated accent, secondary text in gray steps, fine borders and soft shadows for depth—not pure black piled with neon.

Signals

  • · Layered dark gray / near-black surfaces
  • · Desaturated accents
  • · Secondary text in gray steps
  • · Avoid large pure #000 glare edges

Don't confuse with

Cyberpunk is neon narrative; minimal can be light; dark mode is a luminance system.

Style brief

Paste into your coding agent

Visual style: Dark Mode.

Dark surfaces and layered elevation instead of big white canvases.

Defining signals:
- Layered dark gray / near-black surfaces
- Desaturated accents
- Secondary text in gray steps
- Avoid large pure #000 glare edges

Do not confuse with: cyberpunk, minimalism.
Cyberpunk is neon narrative; minimal can be light; dark mode is a luminance system.

Implementation brief:
Use dark mode UI: layered dark surfaces (#121212–#1e1e1e), desaturated accents, secondary text in gray, elevating surfaces with subtle borders/shadows. Not pure black void with neon unless asked.

Keep scope to visual language and components styling; do not redesign product information architecture unless asked.

Related patterns