Dark
Mode
Minimal
Near-black backgrounds with precise typographic hierarchy and maximum restraint. No decoration — only information, rendered in the most legible, comfortable form possible.
−0.03em tracking
+0.08em tracking
1.8 line-height
The Quiet Interface
When every pixel serves a function, there is nothing left to remove. The interface disappears and leaves only the work.
Reducing Visual Noise
Dark mode is not merely an aesthetic preference — it is a physiological one. Lower luminance reduces eye strain over extended sessions.
The 8px Grid
Consistent spacing on an 8px base grid creates visual rhythm without any additional design work. The system does the heavy lifting.
Border as Language
1px borders in a dark system carry the entire weight of spatial organisation. Width, opacity, and colour define every relationship.
Weight over Colour
In a monochrome system, typographic hierarchy is achieved through weight and opacity — never through hue. Inter 300 to 600 is sufficient.
Dark Mode by Default
Designing dark-first changes the process: you work with subtraction, not addition. You add light rather than add shadow.
Overview
Request volume · 7d
Near-Black Surfaces
Pure black (#000) creates harsh contrast and visible OLED burn risk. #0A0A0A or #111111 softens edges and allows borders to read cleanly.
Three Text Levels
Primary (#E8E8E8) · Secondary (#A0A0A0) · Disabled (#666666). Never more. Colour is reserved for semantic states only — not decoration.
Borders, Not Fills
In a dark system, background fills compete with the content. 1px borders on #2A2A2A define space without adding visual weight or distraction.
Semantic Colour Only
Colour carries meaning, not mood. Blue = interactive. Green = success. Amber = caution. Red = error. Everything else is greyscale.