Most dark websites are light websites wearing an inverted costume. Flip the background to black, flip the text to white, ship it. The result is technically dark and visually wrong: harsh, flat, and hard to read for longer than a paragraph.
Our own studio site is dark-only, built dark from the first token, and it makes a useful worked example of what dark-first actually means. Everything below comes from tokens that are live on this page right now, which keeps us honest: if the advice were wrong, you would be squinting already.
Lift off pure black
The first move is refusing #000000. Pure black next to pure white produces the harshest contrast a screen can render; letterforms seem to glow and smear, and every element floats in a void with no depth cues. Our page background is #0a0a0e, a near-black with a cool undertone. It reads as confidently dark while giving the surfaces above it somewhere to go.
Surfaces are a ramp, not a background
On a light site, elevation is easy: cast a shadow. On a dark site, shadows are nearly invisible, because you cannot meaningfully darken what is already dark. Elevation has to come from the surfaces themselves getting lighter as they rise.
So dark-first design starts with a surface ramp. Ours runs five steps, from the #0a0a0e page background through #101117 section bands and #15161d cards up to #2a2b36 for the highest-raised elements, every step sharing the same cool blue undertone so the ramp feels like one material.
Borders do the rest of the depth work. A hairline of white at 8 percent opacity separates a card from its band; 16 percent marks a stronger edge. Our card recipe adds a subtle top highlight, a lighter line along the upper edge, the way light would catch a physical surface. The deep shadow is still there, but it supports; the lighter surface and the highlight do the lifting.
Text is a ramp too
White text on a dark site should almost never be white. Our primary text is #f5f5f7, just off pure. Below it sit three more tiers: #d2d2db for strong secondary text, #a6a6b4 for supporting copy, and #8a8a99 for captions, with the faintest tier still tuned to clear WCAG AA contrast on the surfaces it sits on.
Four tiers sounds fussy until you watch it work. Captions recede, body copy sits comfortably, and the headline owns the page, all without a single opacity value.
That last part is the trap to avoid. Dimming text with opacity feels like hierarchy until it composites over a photo or a tinted band and quietly fails contrast. Every tier in our ramp is an explicit color, checked against the real backgrounds it will ever sit on.
Color behaves differently in the dark
Saturated brand colors that look composed on white can vibrate on near-black. Accents on a dark site usually need to shift lighter: our electric blue is #5b8cff, and it ships with a brighter companion at #84a6ff for the moments that need more light, so emphasis can step up without switching hues.
And one warning from the current moment: the blue-into-violet gradient glowing on near-black has become the default costume of the AI era. Our signature gradient bends from off-white through blue and lands on teal instead, a deliberate step away from the cliche. Distinct beats fashionable, especially when the fashion is a signature of sameness.
Dark is also a choice, not a default. We go dark when it fits the brand's nature: an engineering studio, a technology product, an instrument-panel feel. A church gets ivory and warm serifs; a contractor gets an official brand-blue system on light surfaces. Committing to dark because it looks moody in a mockup is the same mistake as inverting at the end, just made earlier.
The dark-first checklist
- Background lifted off pure black, with a deliberate undertone.
- A surface ramp of at least four steps that gets lighter as elements rise.
- Hairline borders and top highlights doing the elevation work shadows cannot.
- A text ramp of explicit colors, every tier tuned for AA contrast, no opacity dimming.
- Accents re-tuned for dark surfaces, not inherited from the light palette.
Why inverted sites fail
Run the failure cases against that list and the pattern is obvious. Inverted sites keep their light-mode shadows and go flat. They keep pure white text and go harsh. They dim with opacity and go illegible. They keep light-mode accents and go muddy. Each failure is the same mistake: treating dark as a filter applied at the end instead of a material chosen at the start.
Dark done properly is a full design language: its own surfaces, its own depth model, its own text tuning, its own color logic. Commit to it from the first line of the design system and it rewards you with a site that feels engineered rather than themed. Flip a switch at the end, and everyone can tell.
