diabrowser.com

Dia | A browser you won't dread openingsaved 26d ago · captured 26d ago

Nine details, seven pinned.

View as Markdown ↗

Colors8 colors · ground #030305

ground#030305·86.88%#301d15·3.33%#602f1a·1.98%#fdfdfd·1.49%#d1d1ce·1.48%#978c64·1.31%#b2af98·1.09%#525148·0.91%

Sized by coverage · click to copy.

Typography3 families · 5 styles · Exposure Variable, Exposure VAR, ABC Oracle

Dia Dia

Exposure Variable · 112/95 · 300 · -3.36px

Dia reads between the tabs

Exposure VAR · 48/56 · 650 · -2.4px

Ask Dia for a deck and your scattered context becomes real slides — headers, lay

ABC Oracle · 18/27 · 400 · -0.36px

Body

Includes 14 day free trial of Better Days

ABC Oracle · 12/12 · 350 · normal

Small

Includes 14 day free trial of Better Days

ABC Oracle · 12/12 · 350 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsDownload1 style

Download

primary · fill #ffffff · label #000000 · radius 14px · border 0px · padding 0px 0px · height 56px · type 20px / 500

Shape5 radii · 31 uses

12px13 uses · 42%

20px7 uses · 23%

16px4 uses · 13%

9999px4 uses · 13%

24px3 uses · 10%

AnalysisDia's homepage opens like a film poster and settles into a magazine.

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.

Style recipeBuild a light-first product site with a cinematic dark opening.

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.

Details9 worth noting

diabrowser.com — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Scheme inversion at the fold
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.
2Wordmark as the headline
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.
3Floating pill nav
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.
4Full-bleed human face hero
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.
5Fine print under the CTA
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.
6Sticky-scroll feature index
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.
7Per-feature pastel product windows
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.
8Chat mock as tool-call timeline
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.
9Three-tier radii vocabulary
Radii vocabulary: 12px for cards and controls, 20–24px for windows, 9999px for every button and the nav.

saas · landing · mixed · editorial, minimal · human, confident, calm, playful, elegant

diabrowser.com

More like this