# Dia (The Browser Company) — Marketing site Design Spec > 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 > `--current` helper), 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. ## 1. Visual Theme & Atmosphere 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. ## 2. Color Palette & Roles | 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. ## 3. Typography Rules 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 | ## 4. Component Stylings Two rounding families: **20px** for panels and chips (62 uses) and **9999px** for pills (55 uses), plus 12px/14px/16px on media frames. The hero CTA is a large white pill; over video, controls become a translucent `rgba(0,0,0,.65)` pill with a blur. Toggle/settings chips are the translucent-grey `rgba(235,235,235,.7)` at 35px with 20px radius. Borders are rare and barely visible (`rgba(0,0,0,.06)`); real shadows are effectively absent. | Component | Rest | Hover | Focus | Active | Disabled | |---|---|---|---|---|---| | Primary pill | #ffffff fill, dark text, 9999px, 56px | 0.2s colour transition | no custom ring found | — | not observed | | Video-overlay pill | rgba(0,0,0,.65), #fff, 9999px, 50px, blur | 0.2s colour transition | as above | — | — | | Chip / toggle | rgba(235,235,235,.7), ink .85, 20px, 35px | 0.2s colour transition | as above | — | — | | Secondary chip | #efefef, ink .85, 20px, 35px | 0.2s colour transition | as above | — | — | Focus note: **no custom focus ring was found** in the stylesheets. Treat as an accessibility gap and supply one (e.g. `0 0 0 3px rgba(0,0,0,.85)` on light, white on the stage) rather than copying the omission. ## 5. Layout Principles A floating rounded pill nav sits centred over the hero rather than spanning a bar. The hero is centred: serif wordmark, two-line sub, one white pill CTA, then a full-bleed video that bleeds to the section edge with a legibility gradient over its top. Below, the canvas flips to #f8f8f8 and content stacks as centred rounded panels and cards with generous radii. A `` (1512x532, 2d) drives one full-width visual band. ## 6. Depth & Elevation Radius scale: **20px** (dominant — panels, chips), **9999px** (pills), 12px, `12px 12px 0 0` (stacked tops), 14px, 16px, 24px, 30px. Shadows are effectively **none** — the only box-shadow found is a fully transparent ring placeholder. Borders are 1px `rgba(0,0,0,.06)` / `.08`. Depth comes from translucent fills and two `backdrop-filter` blurs (**24px** and **12px**) on floating chrome. ## 7. Motion | Property | Duration | Easing | Applies to | |---|---|---|---| | color, background, border, fill, stroke | 0.2s | cubic-bezier(0.4, 0, 0.2, 1) | all chrome (dominant, 121x) | | all | 0.3s | cubic-bezier(0.4, 0, 0.2, 1) | larger surfaces | | opacity | 0.2s | cubic-bezier(0.4, 0, 0.2, 1) | fades | | box-shadow | 0.3s | cubic-bezier(0.4, 0, 0.2, 1) | lifted chrome | | background-color | 0.2s | ease-in-out | simple fills | House transition: **0.2s cubic-bezier(.4,0,.2,1)**. A deep easing library is declared — including `cubic-bezier(0.76,0,0.24,1)`, `(0.87,0,0.13,1)` and `(0.215,0.61,0.355,1)`. 13 `@keyframes` split into two groups: **marquees** (`marqueeL/R/U/D`, `diaMarqueeL/R`) for scrolling strips, and a **chroma family** (`chroma-sweep`, `chroma-expand-bidirectional`, `chroma-sweep-repeat`, `border-gradient-sweep`, `fade-to-black-sweep`) that animates the rainbow gradient across text and borders — the site's signature effect. Plus `pulse` and `pulse-scale`. 3 videos. **No `prefers-reduced-motion` block** (`reducedMotionBlocks:0`) — add one when rebuilding. ## 8. Backgrounds, Effects & WebGL Two meaningful gradients. A legibility scrim over the hero video: `linear-gradient(rgba(2,2,4,.7) 0, rgba(2,2,4,.3) 45%, rgba(0,0,0,0))`. And the signature **chroma sweep** — a 90deg ramp running black → black 33% → orchid #c679c4 → red-orange #fa3d1d → amber #ffb005 → onward, animated across text and borders by the `chroma-*` keyframes. Two backdrop blurs (24px, 12px), one 2d `` at 1512x532, and 3 videos. No raster background layers, no grain, no WebGL. ## 9. Do's and Don'ts ### Do - Open on a near-black #020204 cinematic video stage, then resolve to a #f8f8f8 body. - Use alpha-black ink (.85 / .6 / .424 / .2), not separate grey hexes. - Round heavily: 20px panels and chips, 9999px pills. - Fill controls with translucent `rgba(235,235,235,.7)` rather than solid grey. - Swing the variable serif from 300 at display size to 650 at section size. - Ration colour to the lime #f2fcb3 and yellow #ffdc5c highlighter chips. - Use backdrop blur and translucency for depth instead of shadows. ### Don't - Don't add drop shadows — the system has none. - Don't use heavy visible borders; hairlines are rgba(0,0,0,.06). - Don't turn the lime/yellow into brand fills — they are highlighter marks. - Don't set body text in the serif; the serif is display-only. - Don't ship without a focus ring or a reduced-motion block; the site omits both. ## 10. Responsive Behavior An unusually dense, evenly-spaced **100px-step** ladder — every breakpoint from 1000 to 2000 is present, which is a deliberate fluid-scaling strategy rather than device tiers: | Breakpoint | What changes | |---|---| | 400 / 600 / 700px | phone tiers | | 768 / 800 / 900px | tablet | | 1000 → 2000px (every 100px) | continuous desktop scaling of type and panel widths | No dark-scheme blocks (`darkSchemeBlocks:0`) — the dark hero is a section, not a theme. No container queries. No reduced-motion block. ## 11. Agent Prompt Guide - Stage `#020204` · Canvas `#f8f8f8` · Surface `#ffffff` · Ink `rgba(0,0,0,.85)` · Control fill `rgba(235,235,235,.7)` · Border `rgba(0,0,0,.06)` · Accents `#f2fcb3` / `#ffdc5c` - Font: Exposure Variable serif display (Newsreader stand-in) + ABC Oracle sans (Inter) + ABC Favorit Mono (IBM Plex Mono) · Body: 18–24/400 · Radius: 20px panels / 9999px pills · Control height: 35px chip / 50–56px pill - Focus: none defined — add `0 0 0 3px rgba(0,0,0,.85)` · Hover: 0.2s cubic-bezier(.4,0,.2,1) · Depth: backdrop blur 24px/12px, no shadows Two-act AI-browser brand: a near-black #020204 cinematic video stage carrying a 112px Exposure Variable SERIF wordmark at weight 300 and -3.36px tracking, which then resolves into a bright #f8f8f8 body of soft rounded panels. Ink is ALPHA-BLACK, not grey hexes — rgba(0,0,0,.85) primary stepping to .6 / .424 / .2, with rgba(255,255,255,.85) over the stage. The same variable serif swings to weight 650 at 48/56 for section heads; ABC Oracle (stand-in Inter) is the workhorse sans for 18-24px body, nav and buttons, with a wider ABC Oracle Triple on control labels and ABC Favorit Mono for technical text. Chrome is heavily rounded — 20px panels and chips, 9999px pills — and filled with translucent rgba(235,235,235,.7) rather than solid grey; borders are barely-there rgba(0,0,0,.06) and there are effectively ZERO shadows, with depth coming from backdrop blur(24px)/blur(12px). Colour is rationed to two highlighter tones, lime #f2fcb3 and yellow #ffdc5c, used as chips and marks. Motion is 0.2s cubic-bezier(.4,0,.2,1) plus a signature animated CHROMA SWEEP gradient (black → orchid #c679c4 → red-orange #fa3d1d → amber #ffb005) driven across text and borders, and marquee strips. Breakpoints step every 100px from 1000-2000 for continuous scaling. Feels: cinematic-then-friendly, soft, rounded, editorial. Avoid: drop shadows, heavy borders, treating the lime/yellow as brand fills, serif body copy, shipping without a focus ring or reduced-motion block.