Ali

Designing in the dark

· 1 min read · design, css

Dark interfaces are easy to make and hard to make well. Pure black with pure white text vibrates; too many accent colors and it turns into a casino.

One accent, used sparingly

This site uses a single signal color — a hot vermillion borrowed from torii gates and hanko stamps — and lets everything else stay in grayscale. When red appears, it means something: a link, a status, the thing you should look at.

:root {
  --ink: #050505;
  --paper: #f2f0ea;
  --signal: #ff2a3d;
}

Texture over color

Instead of more hues, depth comes from texture:

  • a faint grid that suggests a city at night,
  • scanlines at a few percent opacity,
  • type set in two scripts, Latin and katakana, side by side.

Motion with intent

Glitches are fun once. Here they only fire on hover or on first paint, and they switch off entirely under prefers-reduced-motion.

The goal is a page that feels like a neon sign in the rain: mostly darkness, with one bright thing worth walking toward.