Field note Design

Designing for dark mode first

Dark isn't just a color swap. It's a hierarchy — and our 12KB stylesheet proves you don't need a framework to get it right.

Machine Made WorldsSep 03, 2026 · 1 min read

Contrast, not brightness

We use --text: #ececf1 on --bg: #0b0b10 — off-white on deep navy-black. Pure white on pure black fatigues eyes.

Cards sit on --bg-raised with a subtle --border. In dark mode, shadows disappear; borders do the work.

--accent: #7c5cfb for brand, --accent-2: #00d9ff for links. Never both at once.

See the source: /styles.css is ~8KB, mobile-first, no JS required.