---
title: "Dia Browser design system"
variant: extended
source: https://www.diabrowser.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/diabrowser-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Dia Browser · Design System

> A warm editorial canvas for a more focused workday

**Theme:** light · **Industry:** ai · **Source:** https://www.diabrowser.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Dia pairs a quiet, warm-neutral canvas with a vivid golden hero and an oversized serif product mark. Airy feature storytelling and restrained controls keep the browser product itself in focus.

## North star

Use a calm editorial canvas to frame the product, reserving saturated gold for the hero and letting real interface imagery carry the story.

## Overview

The page is built around a warm off-white canvas, with a concentrated golden hero that gives the first screen its energy without turning the rest of the page into a colourful interface. Large, elegant serif display lettering sets an editorial tone; lighter sans-serif headings and body copy keep the product story approachable. Small uppercase mono labels add a functional, technical counterpoint. The hero layers a browser-window demo over a softly blurred yellow field, while the curved pale foreground leads attention toward a pill-shaped black download CTA. Below, generous whitespace separates concise feature stories, split product demonstrations, and a privacy-controls section. Text is mostly near-black or muted charcoal, with pale neutral controls and fine hairlines reserved for navigation and separation. The visual strategy is spacious, product-led, and deliberately restrained outside the hero.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Cream | `#fbfaf6` | `--color-gallery-cream` | brand | Dominant page canvas and navigation background; the warm off-white field continues through feature sections and footer. |
| Soft Ink | `#242424` | `--color-soft-ink` | brand | Primary heading and body text, footer content, and dark interface details. |
| Warm Graphite | `#4b4b49` | `--color-warm-graphite` | neutral | Muted heading tone for supporting feature copy. |
| Quiet Hairline | `#e7e7e3` | `--color-quiet-hairline` | semantic | Subtle navigation border and fine separation between interface elements. |
| Sunlit Gold | `#ffcb30` | `--color-sunlit-gold` | accent | Large hero section field; a defining brand accent concentrated in the opening visual. |
| Slate Copy | `#646462` | `--color-slate-copy` | neutral | Secondary body text and supporting descriptions. |
| Pale Marigold | `#ffe48c` | `--color-pale-marigold` | surface | Soft yellow section surface and lighter accent tones around the golden hero treatment. |
| Cloud Gray | `#f0efee` | `--color-cloud-gray` | surface | Pale neutral control surface, including browser settings-style buttons. |
| Stone Label | `#91908e` | `--color-stone-label` | neutral | Low-emphasis navigation text and ancillary labels. |
| Pure White | `#ffffff` | `--color-pure-white` | surface | Small badges and occasional text contrast inside interface or hero imagery, not the page canvas. |
| Ash Detail | `#8a8987` | `--color-ash-detail` | neutral | Sparse low-emphasis text details and secondary interface copy. |
| True Black | `#000000` | `--color-true-black` | semantic | High-contrast navigation and control text, plus the hero download button. |
| Badge Gray | `#737373` | `--color-badge-gray` | neutral | Minor badge text; a small supporting interface color rather than a defining brand tone. |

### Semantic aliases

`--color-canvas` → `#fbfaf6` (Gallery Cream) · `--color-surface` → `#ffe48c` (Pale Marigold) · `--color-surface-2` → `#f0efee` (Cloud Gray) · `--color-text` → `#242424` (Soft Ink) · `--color-text-muted` → `#4b4b49` (Warm Graphite) · `--color-text-subtle` → `#646462` (Slate Copy) · `--color-border` → `#e7e7e3` (Quiet Hairline) · `--color-accent` → `#ffcb30` (Sunlit Gold) · `--color-accent-2` → `#ffe48c` (Pale Marigold)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#242424` | `#fbfaf6` | 14.86:1 | AAA |
| `#242424` | `#ffe48c` | 12.37:1 | AAA |
| `#242424` | `#f0efee` | 13.52:1 | AAA |
| `#4b4b49` | `#fbfaf6` | 8.37:1 | AAA |
| `#4b4b49` | `#ffe48c` | 6.96:1 | AA |
| `#4b4b49` | `#f0efee` | 7.61:1 | AAA |
| `#646462` | `#fbfaf6` | 5.68:1 | AA |
| `#646462` | `#ffe48c` | 4.72:1 | AA |
| `#646462` | `#f0efee` | 5.16:1 | AA |
| `#ffcb30` | `#fbfaf6` | 1.45:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Oracle | `--font-body` | webfont | 350, 400, 300 | Main sans-serif for body copy and the light, prominent hero heading. | Inter |
| ABC Oracle Triple | `--font-abc-oracle-triple` | webfont | 400 | Compact navigation labels, buttons, and small interface-oriented copy. | Inter |
| ABC Favorit Mono | `--font-mono` | webfont | 400 | Uppercase navigation and eyebrow labels. | Space Mono |
| Exposure VAR | `--font-display` | webfont | 500 | Serif display headings and editorial feature titles. | Instrument Serif |

- **ABC Oracle:** Use light weights for large statements and restrained negative tracking; keep sentence case.
- **ABC Oracle Triple:** Regular weight with neutral tracking; concise labels and functional text.
- **ABC Favorit Mono:** Mono face with visibly expanded tracking and uppercase treatment for short labels.
- **Exposure VAR:** Medium-weight serif with tight tracking; use for expressive, sentence-case headlines.

### Type scale — Major Third (ratio ≈ 1.282, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 300 | 1.11 | -0.04em | — | ABC Oracle | Hero statement and primary headline, set in light sans-serif. |
| h2 | 48px | 500 | 1.17 | -0.05em | — | Exposure VAR | Large editorial section headings in the display serif. |
| h3 | 39px | 500 | 1.1 | -0.04em | — | Exposure VAR | Feature-story headings in the display serif. |
| h4 | 24px | 500 | 1.25 | -0.03em | — | Exposure VAR | Smaller feature titles and subheads in the display serif. |
| body | 20px | 350 | 1.5 | -0.02em | — | ABC Oracle | Feature descriptions and supporting product narrative. |
| caption | 16px | 400 | 2.19 | 0 | — | ABC Oracle Triple | Compact interface labels and supporting captions. |
| button | 16px | 400 | 2.19 | 0 | — | ABC Oracle Triple | Download and browser-control button labels. |
| nav | 13px | 400 | 1.23 | 0.1em | uppercase | ABC Favorit Mono | Uppercase mono navigation labels. |
| eyebrow | 13px | 400 | 1.23 | 0.1em | uppercase | ABC Favorit Mono | Uppercase mono section markers and small labels. |
| code | 13px | 400 | 1.23 | 0.1em | uppercase | ABC Favorit Mono | Technical or product-context labels in uppercase mono. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 5, 10, 12, 14, 16, 20, 24, 30, 70 px.
- Section rhythm 152px · element gap 14px · card padding — · max content width 1180px.

Use a centered, spacious composition with a measured maximum content width of 1180px. The hero is a single centered column with full-bleed media; subsequent feature content alternates between compact editorial text and two-column product storytelling. Keep the page density low, with broad section pauses and clear separation between stories. Align section headings and supporting content deliberately rather than forcing every block to center. Navigation is compact and visually detached from the broad page canvas.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `12px` · badge `9999px` · nav `16px` · xs `12px` · sm `16px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 12px 28px -12px, rgba(0, 0, 0, 0.12) 0px 28px 56px -28px`
- Shadow `md` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 2px 8px 0px, rgba(0, 0, 0, 0.04) 0px 0px 2px 0px`
- Shadow `inset` (text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0) 0px 2px 4px 0px, rgba(0, 0, 0, 0) 0px 18px 40px -10px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most of the page is flat: warm canvas, open whitespace, and minimal visible borders. Use fine hairlines sparingly for navigation or separation. Product windows and floating navigation can gain quiet layered depth from restrained shadows; avoid heavy card outlines or dramatic elevation that competes with the hero.

## Imagery

Lead with a full-bleed, softly blurred golden video or image backdrop and an oversized Dia wordmark. Place a large browser-window product demo across the lower hero, with the pale curved foreground and black download control layered in front. Feature sections rely on browser screenshots and product clips rather than decorative illustration. Keep imagery softly framed, gently rounded, and legible as a real interface.

## Components

### Floating navigation

Compact rounded light navigation near the top of the hero, with small links and a soft shadow; uppercase mono treatment is used for the FOR WORK label.

### Golden hero

Full-bleed yellow media field with centered editorial headline, oversized Dia wordmark, and a browser demo layered across the lower half.

### Download CTA

Black pill-shaped primary action with white label and download arrow, placed over the pale curved hero foreground.

### Feature story

Short numbered feature entries pair restrained serif titles and compact copy with product imagery or video; keep the surrounding canvas open.

### Product showcase

Two-column feature storytelling combines display-serif headings and browser or settings interface demonstrations with clear, uncluttered framing.

### Privacy controls

A concise privacy section uses pale neutral pill controls and clear on/off states against the consistent warm canvas.

### Footer link groups

Quiet multi-column footer with compact uppercase group headings and straightforward product, resource, and company links.

### Measured component styles

- **Primary button** (“Block trackers On”): background #f0efee · text #000000 · radius 20px · padding 0px 16px · 400 16px ABC Oracle Triple
- **Card**: transparent background · text #000000 · radius 12px · padding 0px · 400 10px ABC Oracle · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“PROFILES”): background #ffffff · text #000000 · radius 20px · padding 0px 12px · 400 12px ABC Oracle · uppercase
- **Navigation item** (“FOR WORK”): transparent background · text #000000 · radius 0px · padding 0px · 400 13px ABC Favorit Mono · uppercase

## Do

- Keep the page canvas warm and consistently off-white.
- Concentrate saturated gold in the hero treatment.
- Pair expressive serif display headings with restrained sans-serif copy.
- Use expanded-tracking mono type for short uppercase labels.
- Let real browser UI demos lead product storytelling.
- Preserve broad whitespace between feature sections.
- Keep controls rounded, quiet, and easy to scan.

## Don't

- Do not spread the golden hero palette across every section.
- Do not replace the warm canvas with stark white.
- Do not turn product stories into dense dashboard grids.
- Do not use heavy borders or dramatic shadows on every card.
- Do not make navigation or labels oversized.
- Do not add decorative imagery that competes with the browser demo.

## Agent prompt

Build a new page in Dia Browser’s warm, editorial product style. Use Gallery Cream (#fbfaf6) as the main canvas, Soft Ink (#242424) for primary text, and Slate Copy (#646462) for supporting copy. Reserve Sunlit Gold (#ffcb30) and Pale Marigold (#ffe48c) for a prominent media-led hero rather than coloring every section. Set display headings in an elegant serif close to Instrument Serif; use a light sans close to Inter for body copy, with expanded-tracking Space Mono-style uppercase labels. Keep the composition spacious and centered within the measured 1180px content width. Layer a browser-window demonstration over the hero and use concise feature stories with product imagery below. Favor pill-shaped controls, subtle hairlines, restrained shadows, and a clear black primary CTA. Maintain generous whitespace and make the product interface the visual proof point.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and oversized wordmark over full-bleed media, with browser demo and CTA layered below. | prominent free download, product shown in context | golden media backdrop, oversized serif wordmark, black pill CTA |
| 2 | feature-grid | Single-column editorial feature sequence with numbered titles, short descriptions, and product media. | numbered feature progression, benefit-led descriptions | serif feature titles, compact body copy, product visuals |
| 3 | feature-split | Two-column feature stories pair editorial copy with browser interface imagery and video. | separate work contexts, show product capabilities | serif section headings, rounded interface media, small profile badge |
| 4 | other | Compact privacy-focused block with a heading, settings controls, and a supporting link. | visible privacy settings, toggle control states | pale pill controls, minimal settings interface, clear heading |
| 5 | footer | Multi-column link groups for product, resources, company, and social destinations. | grouped navigation links, clear destination categories | compact uppercase headings, quiet link styling, open footer layout |

## Source CSS custom properties (selected)

```css
--header-background: #dddddd77;
--primary: rgba(0,0,0,0.85);
--secondary: rgba(0,0,0,0.60);
--fill-primary: rgba(0,0,0,0.9);
--fill-secondary: rgba(0,0,0,0.08);
--fill-secondary-hover: rgba(0,0,0,0.12);
--primary-50: rgba(0,0,0,0.425);
--primary-10: rgba(0,0,0,0.085);
--background: #FBFAF6;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/diabrowser-com