A two-act AI browser brand that is far less uniformly soft than its Arc lineage suggests. The page opens as cinema — a stark near-black #020204 stage carrying a full-bleed autoplaying video and the word Dia set 112px in a light variable SERIF at weight 300 with -3.36px tracking — then resolves into a bright #f8f8f8 body of soft rounded panels. Its most transferable idea is that ink is ALPHA-BLACK rather than a set of grey hexes: rgba(0,0,0,.85) steps down through .6, .424 and .2, so every text tier reads as the same colour at different presence, with rgba(255,255,255,.85) over the stage. The same variable serif swings to a heavy 650 at 48/56 for section heads, while ABC Oracle carries 18-24px body and nav, a wider ABC Oracle Triple handles control labels and ABC Favorit Mono covers technical text. Chrome is heavily rounded — 20px panels and chips, 9999px pills — filled with translucent rgba(235,235,235,.7) rather than solid grey, bordered by barely-there rgba(0,0,0,.06) hairlines, and carries effectively ZERO shadows: depth comes from backdrop blur(24px) and blur(12px). Colour is rationed to two highlighter tones, lime #f2fcb3 and yellow #ffdc5c. The signature effect is an animated CHROMA SWEEP gradient (orchid, red-orange, amber) driven across text and borders, alongside marquee strips, and breakpoints step every 100px from 1000 to 2000 for continuous scaling.
Browse Dia in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: diabrowser.com (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked. No named brand tokens in :root (the only custom property is a--currenthelper), so §2 is read from computed fills/text. Note the ink is alpha-based (rgba(0,0,0,.85)etc.) rather than hex — recorded as alpha because that is what the site ships. Reality check: the hint was half right and misleading. The queue said "soft, playful Arc successor". The playful part survives — lime #f2fcb3 and yellow #ffdc5c accent chips, 20px/9999px rounded chrome — but the page is NOT soft overall: it opens on a stark near-black #020204 cinematic video hero with a 112px Exposure serif wordmark, then drops into a light #f8f8f8 body. It is also far more typographically serious than Arc: five faces across a variable serif, a triple-width sans and a mono.
Two acts. The page opens as cinema — a near-black stage, a full-bleed autoplaying video, and the word "Dia" set 112px in a light variable serif — then resolves into a bright, soft, rounded product site on near-white. Ink is alpha-black rather than a flat hex, which keeps every text tier feeling like the same colour at different presence. Chrome is heavily rounded (20px panels, 9999px pills) and almost borderless, separated by barely-there rgba(0,0,0,.06) hairlines and translucent grey fills. Colour is rationed to two soft highlighter tones — a lime and a yellow — used as chips and marks. Feels: cinematic-then-friendly, soft, rounded, quietly editorial.
| Token | Hex / value | Role / usage |
|---|---|---|
| stage | #020204 | cinematic hero section, dark bands |
| black | #000000 | true black in gradients / video mask |
| canvas | #f8f8f8 | page background (near-white) |
| white | #ffffff | cards, panels, primary pill fill |
| grey-fill | #efefef | secondary chip fill |
| translucent-grey | rgba(235,235,235,.7) | THE dominant control fill (51 uses) |
| tint | rgba(0,0,0,.04) | section wash |
| ink | rgba(0,0,0,.85) | primary text (623 uses) |
| ink-60 | rgba(0,0,0,.6) | secondary text |
| ink-42 | rgba(0,0,0,.424) | tertiary text |
| ink-45 | rgba(0,0,0,.45) | muted |
| ink-20 | rgba(0,0,0,.2) | faint |
| on-dark | rgba(255,255,255,.85) | body text over the stage |
| hairline | rgba(0,0,0,.06) | borders (12 uses) |
| hairline-2 | rgba(0,0,0,.08) | stronger border |
| lime | #f2fcb3 | highlighter accent chip |
| yellow | #ffdc5c | highlighter accent chip |
Rule: text is alpha-black on near-white, never a separate grey hex — keep the ladder .85 / .6 / .424 / .2. The two accents behave like highlighter marks, not brand fills.
Five faces, each with a job. Exposure Variable (a variable serif) is the display voice — 112px at weight 300 with -3.36px tracking for the wordmark, and 48px at a much heavier 650 with -2.4px for section heads, so the same family swings from delicate to assertive. ABC Oracle is the workhorse sans (body, nav, buttons); ABC Oracle Triple is a wider companion used on control labels; ABC Favorit Mono handles technical/eyebrow text.
Specimen substitution: previews load Newsreader (variable serif) for
Exposure, Inter for ABC Oracle, and IBM Plex Mono for ABC Favorit Mono
— one bundled Google Fonts link. The site ships the licensed originals.
| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Wordmark / display | Exposure Variable | 112/95.2 | 300 | -3.36px |
| Section (h2) | Exposure VAR | 48/56 | 650 | -2.4px |
| Hero body | ABC Oracle | 24/32 | 400 | normal |
| Sub / lead (h3) | ABC Oracle | 18/27 | 400 | -0.36px |
| Nav | ABC Oracle | 16/20 | 400 | normal |
| Control label | ABC Oracle Triple | 16 | 400 | normal |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.