Get template
Dark interfaces that don’t feel heavy
Why near-black beats pure black, how lit edges carry depth, and the restraint rules behind Atalier's glass system.
Marie Dacosta
Senior Designer
Most dark interfaces fail in the same way. They are not too dark. They are too flat — a single black field with content floating on it, no sense of surfaces sitting at different depths, and every element competing at the same brightness. The result reads as heavy, which is odd, because darkness should feel like less. Here is the system we use, and the reasoning under each rule.
Pure black is a hole, not a background
#000000 has no light in it, so nothing can sit behind anything. Every surface you place on true black appears to hover at the same distance, because there is no darker value left to recede into. You have spent your deepest tone on the background and left yourself nowhere to go.
Near-black keeps that room. Atalier's base is #0A0A0A, which on most screens is indistinguishable from black in isolation and completely different in composition — because now #000000 is available as a shadow, and a card at #0C0C0B reads as raised rather than merely present.
Token | Value | Used for |
|---|---|---|
Base | #0A0A0A | Page background |
Surface | #0C0C0B | Cards, panels |
Surface hover | #100F0E | Raised state |
Hairline | rgba(255,255,255,0.12) | Dividers and borders |
Text primary | #F4F1EC | Heading, body |
Text quiet | #A3A009 | Meta, captions |
Accent | #FF5722 | One thing per screen |
Note how small the gaps are. Base to surface is two points of luminance. That is enough. Dark interfaces need far less separation than light ones, and most designers overshoot by a factor of three.
Depth comes from edges, not shadows
On a light background, a drop shadow does the lifting. On a dark background it barely registers — you are casting a dark shadow onto a dark field.
What works instead is the lit edge: a one-pixel highlight along the top of a surface, at very low opacity, as though a soft light source sits above and slightly in front. Pair it with a darker inset line along the bottom and the surface reads as a physical tile, catching light on its top bevel.
Four inset lines, none above 5% opacity. Look at it directly and you can barely see it. Remove it and the whole interface goes flat instantly.
Contrast is not the same as brightness
The common fix for "hard to read" is to make text brighter, which produces the glare that makes dark interfaces tiring. Pure white body text on near-black hits a contrast ratio around 19:1 — far past what is required, and past the point where it becomes uncomfortable at length.
Warm off-white at 16.8 is comfortably above the 7:1 threshold for enhanced accessibility while dropping the glare. Quiet grey at 8.1 still passes for body text, which is why it can safely carry meta lines. The failing grey exists in our system too, but only for decorative marks that carry no meaning.
The rule that follows: let the accent be the brightest thing on the screen, and use it once. If two things glow, neither is a signal.
Glass, used sparingly
Backdrop blur is the most overused effect in dark UI, and it is genuinely good when it earns its place. The test we apply: is there something meaningful behind this surface that the user benefits from sensing?
For a category tag sitting over a photograph, yes — the blur ties the label to the image underneath. For a card sitting on a flat background, no. There is nothing back there. You are paying a real rendering cost to blur a solid colour.
Image: an extreme close-up of a frosted glass panel edge over a dark surface, one thin warm orange light streak refracting through it, everything else deep near-black, macro product photography, very shallow depth of field.
The restraint list
Five rules, in the order they get broken:
One accent per view. Not one accent colour — one accent element. The primary button glows, or the active nav item does. Not both.
No pure white, no pure black. Both ends of the range are reserved: white for the rare highlight that must dominate, black for shadow.
Hairlines over borders. A 1px line at 12% white separates two surfaces. A 1px line at 40% draws a box around one of them. You almost always want the first.
Motion under 400ms, or over 800ms. The middle range reads as sluggish. Fast feels responsive; slow feels deliberate. Between them it just feels late.
Test at 30% brightness. Every dark interface looks good at full brightness in a dark room. Most are unusable on a phone outdoors, and that is where half your traffic is.