12 Dark Mode SaaS Websites, and What Actually Makes Them Work
Appwrite's dashboard matches its own dark marketing site. 1Password's doesn't. A real look at 12 dark SaaS websites — what keeps black from looking flat, and where the dark treatment quietly stops.
TL;DR
- "Dark hero, light body" is the dominant real pattern, not full-page dark mode — Deel, Notion and Typeform all go dark only above the fold, then revert to plain white as soon as you scroll
- A soft glow or gradient light source does most of the emotional work in the strongest examples — 1Password, Notion, Typeform and Krea all place a radial glow directly behind the headline instead of using flat black
- Most floating product screenshots are actually light-mode UI shown on a dark page, not dark-mode UI — true dark-native product screens (Appwrite, Mercury, Temporal) are rarer and read as more credible when they appear
- A single accent color used sparingly, not decoratively, recurs across the strongest examples — Twingate and Appwrite each restrict themselves to essentially one saturated hue against black
- Warm dark palettes exist too — Descript's maroon and Typeform's plum both break the cool navy-black default while staying legible
Every color, layout and UI detail below is from a real full-page screenshot captured in this catalog — not a general dark-mode style guide. See the full dark-mode design hub for more.
When the product and the marketing site actually agree
The rarest and most convincing pattern in this set is a dark marketing hero whose floating product screenshot is genuinely dark-mode UI, not a light dashboard pasted onto a dark background.
Appwrite's near-black hero uses a hot-pink accent (~#f02e65) for the highlighted headline word, the CTA button, and — critically — the actual product screenshot itself: a real Appwrite console dashboard shown natively in dark mode, with solid pink bar charts and a pink gradient-fill area chart on a near-black card. Mercury's hero is a cinematic photograph of a desk on a misty mountain at dusk rather than a flat dark fill, but further down the page it shifts into a genuinely dark charcoal-navy panel showing a real "Accounts" dashboard card — white text on dark gray, almost no color beyond a small periwinkle toggle dot — a deliberately quiet dark UI that reads as "serious about money" rather than decorative.
By contrast, 1Password's dark hero (a near-black-to-blue radial gradient behind "Secure access for every human and AI agent") floats a light-mode admin dashboard card on top of it, and Notion's "Meet the night shift" hero does the same with a light Notion workspace card. Both still work visually, but the product itself isn't shown the way it actually looks at night — a gap worth noticing if the goal is representing the real product.
Full-page dark is the exception, not the rule
Most "dark" sites in this catalog are dark only in the hero band. Fathom is a genuine exception: a true-black background with a scattered white starfield that persists through multiple sections, a cyan-to-blue gradient "GET STARTED — FREE FOREVER" pill, an orange-highlighted word inside the headline, and a cartoon astronaut plus illustrated planet carrying the space theme all the way down the page — even the customer logos (HubSpot, Adobe, Zapier) sit on solid dark-gray pill chips rather than switching to a light band.
Temporal stays dark for its hero — complete with a subtle white 3D wireframe grid and an actual syntax-highlighted Python code editor with real pink/green/purple color tokens — but then breaks into a full-bleed bright violet-purple (not dark) block immediately after, before returning to black. That light/dark alternation, rather than committing to one or the other, is its own real pattern.
One glow, or one restrained accent, does the heavy lifting
Twingate's hero is the most austere in this set: flat true black, no gradient, no glow, with a single chartreuse-yellow accent (matching its lightning-bolt logo) used only for the CTA pill and one highlighted headline word, "Pick Three." Lower on the page, a solid olive-green card — a flat color block, not a glow — holds a real dark-mode activity-log UI, an effective way to add color without a gradient at all.
Krea takes the opposite approach to the same problem: its near-black hero is built around a photographic desk scene with warm amber lighting glowing against the dark surroundings, rather than a flat fill or a UI-driven glow — moodier and more "photographed" than most. Immediately below, a horizontal carousel of vividly colorful AI-generated images (a graffiti-style figure, a woman's face) pops hard against a solid charcoal band, using the dark canvas specifically to make the colorful output the visual focus.
Dark doesn't have to mean cold, and it doesn't have to mean minimal
Descript breaks from the cool navy/near-black default entirely with a deep maroon/wine background (roughly #2a0a14), a cream serif headline, and a coral-red CTA — proof that "dark mode" doesn't have to mean cold blue-black. Typeform does something similar with a near-black plum background and a serif headline ("Your favorite forms. Now with AI automation."), paired with the most dramatic single light effect in the set: a vivid magenta glow washing diagonally across a frosted glass-morphism panel of blurred form-builder UI.
Sentry goes the opposite direction from Twingate's restraint: a deep violet-purple background with hot-pink and lime-green accents doing different jobs (pink for the headline word "breaks," lime for AI-reasoning text), a cartoon robot mascot holding a "bug ray gun," and neon-outlined terminal cards evoking a retro arcade look — the most maximalist, colorful dark treatment reviewed. Deel shows the hero-only pattern in its cleanest form: a genuinely two-tone split hero (violet-purple headline side, true-black autoplaying-video side), reverting to plain white the moment the logo wall starts.
What the range across these twelve actually shows
Dark mode in this catalog isn't one look — it's at least four different jobs a dark background can do: hiding a mismatch between marketing site and product (1Password, Notion), matching the product exactly (Appwrite, Mercury), showcasing colorful generated output (Krea, Sentry), or signaling restraint and confidence with a single accent (Twingate). See the full dark-mode hub for the rest of this catalog's real examples, or compare against light-mode designs to see the same companies' category peers make the opposite choice.
At a glance
| Site | Category | Stack |
|---|---|---|
| Appwrite | Developer Tools | Svelte, Tailwind CSS |
| Fathom | Productivity | Webflow |
| Sentry | Infrastructure | Astro, Tailwind CSS |
| Twingate | Security | Framer |
| Mercury | Finance | Next.js, Tailwind CSS |
| 1password | Security | Next.js, Tailwind CSS |
| Notion | Productivity | Next.js, Tailwind CSS |
| Krea | AI | Svelte, Tailwind CSS |
| Temporal | Infrastructure | Svelte, Tailwind CSS |
| Typeform | Marketing | Webflow |
| Descript | Design | Next.js, Tailwind CSS |
| Deel | HR | Next.js |
Frequently asked
- Does "dark mode" on a SaaS homepage mean the whole page is dark?
- Usually not. Deel, Notion and Typeform only apply dark styling to the hero section — scroll past the fold and the page reverts to plain white or light gray. Fully dark-throughout sites like Twingate, Sentry and Fathom are the exception, not the rule.
- If the product itself isn't dark, does a dark marketing hero still work?
- It can, but there's a visible mismatch in some real examples — 1Password and Notion both show light-mode product dashboards floating on a dark hero. Appwrite and Mercury are stronger cases, since their floating screenshots use the same dark, low-color palette as the real dashboard, so the marketing page and the product actually agree with each other.
- What actually keeps a black background from looking flat?
- Nearly every effective real example relies on a single soft light source rather than pure black: a radial glow behind the headline (1Password, Typeform, Appwrite), a warm photographic scene (Mercury, Krea), or a faint starfield or wireframe texture (Fathom, Sentry, Temporal). The sites that use genuinely flat black, like Twingate, compensate with one sharply restrained accent color instead.