---
version: alpha
name: Dia
description: A warm off-white reading room where a transitional ABC Oracle display sets the tone, ink stays near-black, and a single soft chartreuse-lime glows through the pill toggles — The Browser Company's calmer, AI-native browser that looks like a well-set page, not a control panel.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f8f8f8"           # warm off-white section bands, the dominant reading canvas
  surface-muted: "#ebebeb"     # was rgba(235,235,235,0.7) — Google format requires hex; chip + pill fills
  surface-control: "#efefef"   # resting control / secondary button fill

  # Ink / text
  primary: "#1a1a1a"           # the primary CTA fill is near-black ink, not the lime accent
  ink: "#1a1a1a"               # near-black headings and body — was rgba(0,0,0,0.85)
  ink-soft: "#3d3d3d"          # secondary copy
  ink-muted: "#737373"         # captions, metadata, mono labels
  on-dark: "#ffffff"           # text on the rare dark surface

  # Brand accent — the singular soft chartreuse-lime
  accent: "#f2fcb3"            # the signature lime wash on toggles, highlights, the chroma-sweep
  accent-strong: "#ffdc5c"     # warm gold companion — secondary toggle / highlight state
  accent-ink: "#3d4d00"        # readable text/icon color on the pale lime
  on-accent: "#1a1a1a"         # near-black text on lime fills

  # Borders
  border: "#e6e6e6"            # hairline dividers, card edges
  border-strong: "#d4d4d4"     # control + input outlines

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.06) — Google format requires hex
  shadow-ambient: "#000000"    # was rgba(0,0,0,0.1) — Google format requires hex
  shadow-highlight: "#ffffff"  # was rgba(255,255,255,0.6) inset — Google format requires hex

typography:
  display-hero:
    fontFamily: "ABC Oracle, Exposure Variable, Georgia, Helvetica, serif"
    fontSize: 96px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -3.84px
  display:
    fontFamily: "ABC Oracle, Exposure Variable, Georgia, Helvetica, serif"
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1.17
    letterSpacing: -2.88px
  heading:
    fontFamily: "ABC Oracle, Georgia, Helvetica, serif"
    fontSize: 54px
    fontWeight: 300
    lineHeight: 1.11
    letterSpacing: -2.16px
  heading-sub:
    fontFamily: "ABC Oracle, Georgia, Helvetica, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.96px
  lead:
    fontFamily: "ABC Oracle, Helvetica, sans-serif"
    fontSize: 22px
    fontWeight: 350
    lineHeight: 1.5
    letterSpacing: -0.4px
  body-large:
    fontFamily: "ABC Oracle, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.56
    letterSpacing: -0.18px
  body:
    fontFamily: "ABC Oracle, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "ABC Oracle, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  caption:
    fontFamily: "ABC Oracle, Helvetica, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.31
    letterSpacing: 0px
  eyebrow-mono:
    fontFamily: "ABC Favorit Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.23
    letterSpacing: 1.3px

spacing:
  xs: 6px
  sm: 8px
  md: 10px
  lg: 20px
  xl: 30px
  2xl: 40px
  3xl: 50px
  4xl: 70px
  5xl: 120px

rounded:
  sm: 6px
  md: 12px
  lg: 14px
  xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 10px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink-soft}"
    textColor: "{colors.on-dark}"

  button-secondary:
    backgroundColor: "{colors.surface-control}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 10px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"

  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-ink}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 10px 24px
  button-accent-hover:
    backgroundColor: "{colors.accent-strong}"
    textColor: "{colors.on-accent}"

  toggle-pill:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  toggle-pill-on:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-ink}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 30px
  card-feature:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 20px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 20px 30px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px

  eyebrow:
    textColor: "{colors.ink-muted}"
    typography: "{typography.eyebrow-mono}"
    padding: 0px

  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-ink}"
    typography: "{typography.eyebrow-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Dia Design System

## Overview

Dia is what happens when the team behind Arc decides their next browser should feel less like a cockpit and more like a quiet, well-set page. The dominant canvas is a warm off-white (`{colors.surface}`) rather than pure clinical white — a paper tone that signals reading and calm instead of dashboards and chrome. There is no gradient sludge, no neon, no glassmorphism. The page is mostly type and air, and the single most distinctive move is the typeface: a transitional, slightly literary display face (ABC Oracle, with Exposure Variable as a companion) that gives headlines like "Privacy first" and "with you in control" a bookish, almost editorial weight. Set thin (`{typography.display-hero}` at weight 300) and tracked hard negative (-3.84px at 96px), the big type reads as confident understatement, not shouting.

The signature color is a soft chartreuse-lime (`{colors.accent}`) — a pale, almost highlighter-pen green that never fills a whole surface. It lives in the small pill toggles ("On"/"Off" switches for tracking, ad-blocking, content data), in inline highlights, and in the animated "chroma-sweep" that washes across the brand mark. The restraint is the point: against the warm off-white and near-black ink, one barely-saturated lime does all the brand signaling without ever becoming loud. A warm gold (`{colors.accent-strong}`) plays a supporting second-state role. The result is a palette that feels organic and friendly rather than techy — closer to a stationery brand than a software company.

Geometry reinforces the softness. Dia leans hard on two radii: a generous 20px (`{rounded.xl}`) on buttons and cards, and a full pill (`{rounded.pill}`) on its many toggle controls — the most-counted radius values in the entire extraction. Nothing is sharp; everything is rounded and approachable. Shadows are whisper-soft and frequently paired with a 1px white inset highlight, giving controls a subtle physical lift like keys on a clean keyboard. Combined with the off-white ground and the literary type, Dia's system says: this is a browser that respects your attention.

**Key Characteristics:**
- Warm off-white canvas (`{colors.surface}`) as the dominant ground — paper, not clinical white
- Transitional, literary display face (ABC Oracle / Exposure) set thin (300) with heavy negative tracking (`{typography.display-hero}` at -3.84px)
- A single soft chartreuse-lime accent (`{colors.accent}`) used only in small doses — pills, highlights, the brand sweep
- Warm gold (`{colors.accent-strong}`) as the supporting second accent / toggle state
- Near-black ink (`{colors.ink}`), never pure black — derived from rgba(0,0,0,0.85)
- Pill toggles (`{rounded.pill}`) are a core UI motif — the privacy "On/Off" switches
- Generous 20px radius (`{rounded.xl}`) on buttons and cards — soft, rounded, approachable
- ABC Favorit Mono for eyebrows and labels (`{typography.eyebrow-mono}`) — uppercased, 1.3px tracking
- Whisper-soft shadows with a 1px white inset highlight — controls lift gently, never harshly
- Centered, generously spaced editorial layout — type and whitespace do the work

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): Pure white for cards and the rare crisp surface.
- **Warm Off-White** (`{colors.surface}`): The dominant canvas — a paper tone that sets the calm, reading-room mood.
- **Muted Gray** (`{colors.surface-muted}`): Resting pill and chip fills (flattened from a translucent gray).
- **Control Gray** (`{colors.surface-control}`): Secondary button fill, slightly cooler than the muted gray.

### Ink / Text
- **Near-Black** (`{colors.ink}`): Headings and body. Softened from pure black (rgba 0.85) so it reads warm against off-white.
- **Soft Ink** (`{colors.ink-soft}`): Secondary copy and primary-button hover.
- **Muted Ink** (`{colors.ink-muted}`): Captions, metadata, and mono eyebrow labels.

### Brand Accent
- **Dia Lime** (`{colors.accent}`): The singular brand color — a pale chartreuse highlighter green. Toggles, inline highlights, the chroma-sweep. Never a full-surface fill.
- **Warm Gold** (`{colors.accent-strong}`): The supporting second accent and active toggle state.
- **Accent Ink** (`{colors.accent-ink}`): Deep olive for readable text/icons on the pale lime.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`) / **Strong Border** (`{colors.border-strong}`): Dividers, card edges, and control outlines — the primary structural device alongside whitespace.
- **Shadow / Highlight tints** (`{colors.shadow-soft}`, `{colors.shadow-ambient}`, `{colors.shadow-highlight}`): Opaque stand-ins for the soft drop shadows and the 1px white inset that gives controls their gentle lift (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display & body**: `ABC Oracle` — a transitional, slightly literary face that carries both headlines and running text, with `Exposure Variable` as a companion display. Fallbacks lean to Georgia/Helvetica. This dual-purpose face is the brand's voice.
- **Monospace**: `ABC Favorit Mono` — reserved for eyebrows and labels, uppercased with 1.3px tracking.
- **Tracking behavior**: aggressive negative tracking on large display (-3.84px at 96px); near-zero on body. The thin weights (300/350) at huge sizes are the editorial signature.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 96px / 300 / -3.84px — the marquee editorial headline |
| `display` | 72px / 300 / -2.88px — large section headlines |
| `heading` | 54px / 300 / -2.16px — feature headings |
| `heading-sub` | 24px / 400 — sub-section headings |
| `lead` | 22px / 350 — lead paragraphs, intro copy |
| `body-large` | 18px / 500 — emphasized body |
| `body` | 16px / 400 — standard body and inputs |
| `button` | 16px / 400 — button labels |
| `caption` | 13px / 500 — pill labels, metadata |
| `eyebrow-mono` | 13px / 400 / uppercase / 1.3px — **ABC Favorit Mono** eyebrows |

### Principles
- **Thin and big**: display sizes run light (300) and enormous, leaning on a literary face for gravitas instead of bold weight.
- **One face, two jobs**: ABC Oracle handles both the editorial headline and the running body — coherence over contrast.
- **Mono for markers only**: ABC Favorit Mono is reserved for eyebrows and small labels, uppercased and tracked.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit trends to a 10px rhythm (the most-counted small values are 10px and 20px), scaling to generous 120px (`{spacing.5xl}`) gaps between major sections. Component internals stay compact (`{spacing.md}`–`{spacing.lg}`).

### Grid & Container
- Centered, single-column editorial layout — copy is often center-aligned
- Max content width sits in a comfortable reading measure; large vertical air between sections
- Privacy controls render as a horizontal row of pill toggles beneath the headline

### Whitespace Philosophy
- **Air is the design**: whitespace and the off-white ground carry the calm, not heavy chrome
- **Centered and literary**: headlines and intro copy center on the page like a title spread
- **Controls cluster, content breathes**: pill toggles group tightly while surrounding copy gets generous margins

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Off-white section bands, most page content |
| Lifted control (Level 1) | `0 1px 0` white inset (`{colors.shadow-highlight}`) + `0 2px 8px` soft (`{colors.shadow-soft}`) | Pills, toggles, small chips |
| Card (Level 2) | `0 8px 22px` (`{colors.shadow-ambient}`) + 1px white inset highlight | Floating feature cards |
| Elevated (Level 3) | `0 11px 33px` ambient (`{colors.shadow-ambient}`) + 1px inset ring | The most-lifted product surface |

**Shadow Philosophy**: Dia's shadows are soft, low, and almost always paired with a 1px white inset highlight along the top edge. That highlight is the signature — it makes pills and cards read like clean physical keys catching light from above, reinforcing the calm, tactile mood. Elevation is gentle throughout; nothing slams off the page.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 6px | Small inline elements, images |
| `md` | 12px | Inputs, feature cards |
| `lg` | 14px | Mid containers |
| `xl` | 20px | Buttons and primary cards — the default interactive radius |
| `pill` | 9999px | Toggles, switches, badges — a core Dia motif |

The system is decisively round: a generous 20px on buttons and cards, and full pills on the many toggle controls. There are no sharp corners anywhere — softness signals friendliness and calm.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Near-black (`{colors.ink}`) fill, white text, 20px radius. The main CTA ("Download Dia"). Hover softens to `{colors.ink-soft}`.
- **`button-secondary`** — Control-gray (`{colors.surface-control}`) fill, near-black text, 20px radius. The "Learn more" pattern. Hover deepens to `{colors.surface-muted}`.
- **`button-accent`** — Dia lime (`{colors.accent}`) fill, deep-olive text — used sparingly for emphasis. Hover shifts to warm gold (`{colors.accent-strong}`).

### Toggles
- **`toggle-pill`** / **`toggle-pill-on`** — The privacy switches. Resting pills are muted gray; the "On" state fills with Dia lime (`{colors.accent}`) and olive text. The defining interactive element of the product page.

### Cards
- **`card`** / **`card-feature`** — White or off-white surface, hairline edge, 20px / 12px radius, soft shadow with white inset highlight.

### Inputs
- **`input`** — White fill, `{colors.border-strong}` outline, 12px radius. **`input-focus`** keeps the calm — a subtle border darken, no loud ring.

### Navigation
- **`nav-bar`** — Off-white, hairline bottom border, ABC Oracle UI labels. Quiet and flush.

### Accent & Markers
- **`link`** — Near-black text, underline appears on hover (no chromatic link color).
- **`eyebrow`** — Muted-ink ABC Favorit Mono, uppercased, 1.3px tracking — the section-marker signature.
- **`badge`** — Dia-lime fill, olive text, pill radius.

## Do's and Don'ts

### Do
- Use the warm off-white (`{colors.surface}`) as the dominant ground — paper, not clinical white
- Set large display in the literary ABC Oracle face, thin (300) and tracked hard negative (-3.84px at hero size)
- Reserve Dia lime (`{colors.accent}`) for small accents: pill toggles, highlights, the brand sweep — never a full-surface fill
- Make pill toggles (`{rounded.pill}`) a first-class control — they are the product's signature interaction
- Keep the primary CTA near-black (`{colors.ink}`) with a generous 20px radius (`{rounded.xl}`)
- Pair soft shadows with a 1px white inset highlight (`{colors.shadow-highlight}`) for that gentle, tactile lift
- Center headlines and intro copy for the editorial, title-spread feel
- Use ABC Favorit Mono uppercased for eyebrows and labels (`{typography.eyebrow-mono}`)

### Don't
- Don't reach for pure clinical white as the main ground — the warmth of the off-white is the mood
- Don't make the lime loud or large — it's a highlighter touch, not a hero fill
- Don't use bold, heavy display weights — Dia's big type is thin and literary
- Don't introduce gradients, neon, or glassmorphism — the calm is the brand
- Don't square the corners — everything is rounded; pills and 20px radii are the language
- Don't add chromatic link colors — links are near-black with hover underline
- Don't slam shadows — elevation stays soft and low, always with the white inset highlight

---

## Responsive Behavior

### Breakpoints
*(Dembrandt surfaced many breakpoint values; the table below maps to the standard stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single centered column; hero display scales 96px → ~44px; pill toggles wrap to multiple rows; CTAs stack full-width |
| Tablet | 640–1023px | Wider reading measure; toggle row stays horizontal; generous side margins |
| Desktop | 1024–1279px | Full centered editorial layout; copy centered with large vertical air |
| Large | ≥1280px | Comfortable max measure, centered; section gaps open to `{spacing.5xl}` (120px) |

### Touch Targets
- Buttons run ~40px tall with `10px 24px` padding — easy thumb targets
- Pill toggles carry generous horizontal padding; spacing keeps adjacent switches tappable

### Collapsing Strategy
- **Navigation**: full horizontal nav collapses to a menu on mobile; the "Download Dia" CTA persists
- **Hero**: centered headline and toggle row reflow; toggles wrap rather than truncate
- **Type**: display drops from 96px toward ~44px while keeping proportional negative tracking
- **Spacing**: section gaps compress from 120px toward ~50px

### Image Behavior
- Product screenshots (notebook/sidebar UI) render in rounded 12–20px frames with top-rounded corners (`12px 12px 0 0`) when docked to a section edge; they reflow as flex/grid children

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Warm Off-White (`{colors.surface}`) — dominant ground
- Text: Near-Black (`{colors.ink}`)
- Brand accent: Dia Lime (`{colors.accent}`) — small doses only
- Secondary accent: Warm Gold (`{colors.accent-strong}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Near-Black (`{colors.ink}`), 20px radius

### Example Component Prompts

- "Create a centered hero on warm off-white (`{colors.surface}`) with a 96px near-black (`{colors.ink}`) headline in a thin (300) literary serif (ABC Oracle), letter-spacing -3.84px, a muted-ink (`{colors.ink-muted}`) ABC Favorit Mono uppercased eyebrow above it, and a near-black primary button (`{colors.ink}` fill, white text, `{rounded.xl}` radius)"
- "Build a privacy toggle row: pill switches (`{rounded.pill}`) with a muted-gray (`{colors.surface-muted}`) resting state and a Dia-lime (`{colors.accent}`) 'On' state with deep-olive (`{colors.accent-ink}`) text, 6px 14px padding"
- "Render an accent button used sparingly: Dia lime (`{colors.accent}`) fill, deep-olive (`{colors.accent-ink}`) text, `{rounded.xl}` radius; hover shifts to warm gold (`{colors.accent-strong}`)"
- "Create a feature card: off-white (`{colors.surface}`) surface, hairline (`{colors.border}`) edge, `{rounded.md}` radius, a soft `0 8px 22px` shadow plus a 1px white inset highlight (`{colors.shadow-highlight}`) along the top edge"
- "Design an input: white fill, `{colors.border-strong}` outline, `{rounded.md}` radius; on focus darken the border subtly — no loud chromatic ring, keep it calm"

### Iteration Guide

1. Start on warm off-white (`{colors.surface}`). If you reached for clinical pure white as the main ground, warm it up — the paper tone is the mood.
2. The lime (`{colors.accent}`) is a highlighter touch. If it's filling a hero or a full surface, pull it back to pills and small highlights only.
3. Big type must be thin and literary — verify weight 300 and heavy negative tracking (-3.84px at hero size) in a serif-ish face, not a bold geometric sans.
4. Make at least one pill toggle (`{rounded.pill}`) — it's the product's signature control.
5. Round everything: `{rounded.xl}` (20px) on buttons and cards, full pills on toggles. No sharp corners.
6. Pair every soft shadow with a 1px white inset highlight (`{colors.shadow-highlight}`) for the gentle tactile lift.
7. Center the headline and intro copy. Keep generous vertical air — air is the design.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Dia. Brand names and trademarks belong to their respective owners.