Dark Mode / Dark UI websites

Interfaces that default to dark — when it reads as premium, and when it just hides the seams.

Dark design stopped being a toggle and became a default for a whole class of products — developer tools, AI apps, anything that wants to feel modern and a little serious. Done well, a dark page concentrates attention: glowing accents, product screenshots, and gradients all pop against near-black in a way they never could on white, and the eye goes exactly where you point it. The craft is mostly in the greys. Pure black on pure white is harsh in reverse, so the strong dark pages layer near-blacks and dark greys to build hierarchy — surface, card, border — instead of leaning on heavy lines. Text drops to a soft off-white rather than full #fff to cut glare, and a single accent color does the work of every call to action. Contrast still has to clear accessibility floors; "looks moody" is not an excuse for grey-on-grey body copy nobody can read. The failure mode is using dark to hide weak structure. Low contrast and a smear of gradient can make an underbaked layout look intentional — until someone tries to actually read it. Dark rewards discipline and punishes mud. Below: landing pages and homepages built dark on purpose — filter by page type to see how the approach changes job to job.

Examples

Apple — Homepage screenshot

Apple — Homepage

Dark, full-bleed product-tile homepage.

Dovetail — Homepage screenshot

Dovetail — Homepage

Black canvas, four numbered chapters, and an emoji dropped into the middle of every headline.

Figma — 404 Page screenshot

Figma — 404 Page

Figma’s missing-page message and recovery choices.

Fora screenshot

Fora

A branded community-platform homepage that earns its scroll.

Framer — 404 Page screenshot

Framer — 404 Page

Framer’s missing-page message and recovery choices.

Framer — Homepage screenshot

Framer — Homepage

A homepage that puts its OpenRouter ranking and weekly token count in the hero, next to the signup button.

Framer — Framer CMS Product Page screenshot

Framer — Framer CMS Product Page

Framer CMS: the product promise and supporting sections.

GitHub — GitHub Actions Product Page screenshot

GitHub — GitHub Actions Product Page

GitHub Actions: the product promise and supporting sections.

Instaplay Homepage screenshot

Instaplay Homepage

The homepage is a text box: type a game idea, pick solo or multiplayer, and the feed of other people's games sits underneath.

Linear — Homepage screenshot

Linear — Homepage

Dark, product-forward SaaS homepage.

Linear screenshot

Linear

A dark pricing page that makes the comparison the product.

Mochi Homepage screenshot

Mochi Homepage

No marketing page at all: the homepage is the streaming catalogue, opened on a featured original.

Motiff — Homepage screenshot

Motiff — Homepage

'The best UI generator' over an empty prompt box, under a red bar announcing the product's discontinuation — a marketing page and a wind-down notice sharing one screen

Netflix — Homepage screenshot

Netflix — Homepage

A streaming homepage that shows you a top-ten list you cannot open.

Notion — 404 Page screenshot

Notion — 404 Page

Notion’s missing-page message and recovery choices.

Page Flows — Homepage screenshot

Page Flows — Homepage

A long dark homepage that answers the archive's only real objection — why pay for screenshots — by showing the labour, and then quietly reprints the entire pricing page at the bottom.

Relume — Homepage screenshot

Relume — Homepage

An AI website builder selling speed on the opening work while promising the designer stays in control.

Spline screenshot

Spline

A 3D-tool homepage that demos the product by being made of it.

Spotify — Web Player Home screenshot

Spotify — Web Player Home

The player is the homepage

UX Tools — Homepage screenshot

UX Tools — Homepage

Newsletter-first media homepage.

Webflow — 404 Page screenshot

Webflow — 404 Page

Webflow’s missing-page message and recovery choices.

Webflow — Webflow CMS Product Page screenshot

Webflow — Webflow CMS Product Page

Webflow CMS: the product promise and supporting sections.

Building a dark mode / dark ui-style site?

Get a free UX Snapshot of your page — a quick read on what works and what to fix.

Get a free UX Snapshot →

Browse by page type

Other styles