# diabrowser.com

Source: https://www.diabrowser.com/
Captured: 2026-09-13
Tags: saas, landing, mixed, both, editorial, minimal, human, confident, calm, playful, elegant
Colors: #030305, #301d15, #602f1a, #fdfdfd, #d1d1ce, #978c64, #b2af98, #525148
Type (h1): Exposure Variable · 112px/95.2px · 300 · tracking -3.36px — "Dia Dia"
Type (h2): Exposure VAR · 48px/56px · 650 · tracking -2.4px — "Dia reads between the tabs"
Type (h3): ABC Oracle · 18px/27px · 400 · tracking -0.36px — "Ask Dia for a deck and your scattered context becomes real slides — headers, lay"
Type (body): ABC Oracle · 12px/12px · 350 — "Includes 14 day free trial of Better Days"
Type (small): ABC Oracle · 12px/12px · 350 — "Includes 14 day free trial of Better Days"
Type (button): ABC Oracle · 10px/15px · 400 — "Download"
Button (primary): "Download" — fill #ffffff, text #000000, radius 14px, border 0px, padding 0px 0px, height 56px, type 20px/500
Radii: 12px (13), 20px (7), 16px (4), 9999px (4), 24px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/diabrowser-com/hero.webp?v=238cf333
- Page crop (mid-1): https://media.lvly.design/library/diabrowser-com/mid-1.webp?v=83e72af4
- Page crop (mid-2): https://media.lvly.design/library/diabrowser-com/mid-2.webp?v=1f35f034
- Hero (mobile): https://media.lvly.design/library/diabrowser-com/mobile-hero.webp?v=00275493
- Full page (desktop): https://media.lvly.design/library/diabrowser-com/full.jpg?v=d41937e0
- Full page (mobile): https://media.lvly.design/library/diabrowser-com/mobile-full.jpg?v=dc3f04c2
- Clip preview (mp4): https://media.lvly.design/library/diabrowser-com/video-viq6y3.preview.mp4?v=ab9097cc

Dia's homepage opens like a film poster and settles into a magazine. The hero is a pure black ground (`#030305` is 87% of the palette) with a floating pill nav in pale gray, a 112px light-weight serif wordmark in Exposure Variable (weight 300, −3.36px tracking, line-height 0.85) over a two-line sans subtitle, a white pill "Download" button, and — the joke that carries the brand — a full-bleed video still of a woman screaming, captioned by a black "Watch the scream" pill (`#000000` / `#ffffff`, 50px tall, 9999px radius). Below the fold the page flips to a near-white `#f8f8f8` ground and becomes a sticky two-column feature walkthrough: on the left a numbered index (`01`, `02`, `03` in a tiny mono eyebrow) of serif headings in the same Exposure face where the active step is black with a 1px vertical rule and its body copy, and the inactive ones fade to gray; on the right, large browser-window mocks tinted in pastel washes (mint, blush pink) with 20–24px radii and soft shadows, each showing the product doing something specific. The type pairing is the whole system — an expressive, slightly condensed serif for every headline and a compact 12px ABC Oracle body at weight 350 — and the palette is monochrome plus whatever pastel the product screenshot brings with it.

## Steal-worthy details

- **Scheme inversion at the fold**: a black cinematic hero followed by a `#f8f8f8` product body, so the page has a first act and a second act rather than one mood.
- The wordmark *is* the headline — 112px Exposure Variable at weight 300 with −3.36px tracking, sitting above a 30px sans subtitle in muted gray; no headline copy competes with it.
- A floating pill nav (`#f8f8f8`-ish on black, 9999px radius, the app icon as the only logo) that persists into the light sections, gaining a matching "Download Dia" pill at the right edge on scroll.
- A full-bleed human face as the hero image for a browser — with a self-aware caption button ("Watch the scream") instead of a product screenshot.
- Trial fine print at 12px directly under the CTA, with the product name as an underlined link — tiny, honest, and typographically distinct from the pill.
- Sticky-scroll feature index: numbered mono eyebrows (`01`, `02`, `03`), serif headings, and a 1px vertical rule that marks the active item while the others drop to ~40% gray.
- Product windows tinted per feature (mint for reports, blush for chat) at 20–24px radius — the pastel wash comes from the window itself, not from a section background.
- The chat mock uses the pastel as a speech bubble tint and shows tool-call steps (Slack, email, Notion) as a muted timeline — the UI demonstrates the feature at reading size.
- Radii vocabulary: 12px for cards and controls, 20–24px for windows, 9999px for every button and the nav.

## Style recipe

Build a light-first product site with a cinematic dark opening. Ground `#f8f8f8` for the body; the hero and any "act one" section sit on `#030305`. Text on light: primary `#111`, secondary `#525148`, tertiary `#978c64`-gray at ~40% for inactive items; text on dark: `#fdfdfd` and `#d1d1ce`. Use a light-weight expressive serif (Exposure Variable, or a similar contemporary serif) at weight 300 for every headline — display 96–112px with line-height 0.85 and `letter-spacing: -0.03em`, section headings 28–32px with `-0.01em` — paired with a compact grotesque (ABC Oracle, or Inter/Helvetica) at 12–16px, weight 350–400, for body and UI. Buttons are pills: primary `#000000` fill with `#ffffff` text (or inverted on dark), 50px tall, `padding: 10px 20px`, 16px at weight 500, `border-radius: 9999px`; put an icon after the label with 8px gap. The nav is a floating pill in `#f8f8f8` with a soft shadow, centered, with the icon as the only mark. Structure long feature sections as a sticky two-column layout: a numbered index on the left (mono eyebrow `01`, serif heading, short body) where the active item is full-contrast with a 1px vertical rule and the rest are greyed; the right column shows one large product window per step at 20–24px radius with a subtle shadow, each tinted with a single pastel wash (mint, blush, lavender) drawn from that step's content. Keep the marketing palette monochrome and let pastels arrive only inside product imagery. Radii: 12px controls and cards, 20–24px windows, 9999px pills. Use one human photograph or video still in the hero rather than a screenshot, full-bleed under the headline, and caption it with a pill button.