Dia Browser

The reference for a near-monochrome white canvas (#f8f8f8) where a single pink-to-blue spectrum gradient is the only colour, paired with hairline ABC Oracle weight-300 display type at 72px.

Consumer Brand flagship

Design tokens

background

surface

text

textMuted

accent

border

tone1

display: ABC Oracle
body: ABC Oracle Triple
mono: ABC Favorit Mono

Do / Don't

Reference it for

Achromatic stage: #f8f8f8 canvas, #ffffff frosted cards at ~90% opacity with backdrop-blur, no hard shadows (single soft glow rgba(0,0,0,0.08) 0 0 8px)
Ultra-thin display type: ABC Oracle weight 300 at 72px / 54px with tight -0.04em tracking for airy, etched-in-glass authority
One-colour discipline: a lone spectrum gradient linear-gradient(90deg, #c679c4 0%, #fa3d1d 25%, #ffb005 50%, #e1e1fe 75%, #0358f7 100%) used as ambient background bloom plus a thin accent strip, the whole rest of the system grey
Deliberately muted controls: #d9d9d9 pebble surfaces and grey nav so type carries the hierarchy, with a single solid black pill CTA for the one real action
Centred hero with a two-line eyebrow-then-statement split: small grey lead line over a huge thin headline (here 'A new AI browser...' above 'with your tabs')
Pill geometry everywhere: 9999px buttons and nav-item radius 16px, card radius 30px, container radius 40px
Floating frosted announcement bar pill centred in the nav with an inline underlined link and a dismiss x
Product-mock framing: faint outlined browser-window wireframes behind a real frosted command/search card to demo the app in situ

Do not copy

The Dia wordmark and the filled half-moon/bean logo glyph
The exact five-stop spectrum gradient as a recognisable Dia signature
ABC Oracle specifically (licensed display face, swap for a different thin grotesque/serif to fit the brand)
The 'A new AI browser from the makers of Arc' positioning line
The 'Download Dia' / 'with Dia reports' product copy
The Students / Security nav taxonomy lifted verbatim