# Dovetail Design System

> A dark, high-contrast canvas where sharp neo-grotesque typography meets 8-bit retro-digital nostalgia.

**Source:** https://dovetail.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Dovetail operates on a stark, dark-mode-first monochrome foundation (`#0a0a0a` and `#141414`) punctuated by a single vibrant blue accent (`#0044ff`). The visual tension relies entirely on typography: the clean, utilitarian geometry of Inter clashes deliberately with massive, pixelated display cuts of PP Mondwest. Depth is achieved not through shadows, but through translucent white borders (`rgba(255, 255, 255, 0.08)`) and subtle surface lightness variations. The system is flat, sharp, and heavily structural.

## Signature DNA
1. **Pixel-Art Typography** (PP Mondwest used at massive scales up to 130px with -2px tracking, injecting retro-digital texture into an otherwise austere SaaS interface. Observed on homepage heroes).
2. **Translucent Glass Borders** (Cards and panels on dark backgrounds use `rgba(255, 255, 255, 0.08)` to `rgba(255, 255, 255, 0.24)` borders to define edges without relying on shadows, maintaining a perfectly flat z-axis).
3. **Monospace Micro-copy** (JetBrains Mono at 12-14px with +1px letter spacing is used for technical labels and captions, reinforcing the developer-adjacent, structural feel).

## Family Map
Not captured in source (no sub-brands exist in this topology).

## Inheritance
Not captured in source (parent brand).

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-foundation-white` | `#ffffff` | text, surface_bg, border | 552 | 1.0 | computed_style |
| `color-foundation-gray-dark` | `#212121` | text, surface_bg | 50 | 0.8 | computed_style |
| `color-foundation-gray-muted` | `#a7a7a7` | text, button_text | 23 | 0.8 | computed_style |
| `color-foundation-black-base` | `#0a0a0a` | surface_bg, text | 22 | 0.8 | computed_style |
| `color-foundation-black-elevated` | `#141414` | surface_bg | 18 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-accent-blue` | `#0044ff` | text, surface_bg | 7 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 400, 500, 600 | heading, body, display | Inter | SIL Open Font License |
| PP Mondwest | 400 | display, heading | VT323 | Commercial |
| JetBrains Mono | 400 | mono, body-sm, caption | JetBrains Mono | SIL Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `type-display-mega` | 130px | 80px | -2px | 400 (PP Mondwest) | Hero display | `span.css-fzobt4.e2ibucd20` |
| `type-display-xl` | 112px | 80px | -2px | 600 (Inter) | Primary H1 | `h1.css-1vqdudj.e2ibucd25` |
| `type-display-lg` | 84px | 96px | -1px | 400 (PP Mondwest) | Secondary display | `span.css-1sqdo3d.erehubs5` |
| `type-display-md` | 64px | 68px | -2px | 600 (Inter) | Section headers | `p.css-e3yfba.e59ucxh6` |
| `type-heading-lg` | 37px | 32px | -1px | 400 (PP Mondwest) | Subsection headers | `span.css-16ciylh.e16916d18` |
| `type-heading-md` | 24px | 32px | -0.5px | 500 (Inter) | Card titles | `p.css-1xc81l0.e16916d16` |
| `type-body-lg` | 20px | 24px | -0.25px | 500 (Inter) | Lead body | `p.css-5q5lf4.erehubs1` |
| `type-body-base` | 16px | 24px | normal | 400 (Inter) | Default body | `p.css-dp5l71.erehubs3` |
| `type-body-mono` | 14px | 19.6px | 1px | 400 (JetBrains Mono) | Technical labels | `div.css-120eeeo.e1zv2x01` |
| `type-caption` | 12px | 12px | 1px | 400 (JetBrains Mono) | Small captions | `p.css-c50mbx.e190viau1` |

### Principles
1. **Aggressive negative tracking on display:** Both Inter and PP Mondwest are pulled tight (-1px to -2px) at sizes above 36px to create dense, solid typographic blocks.
2. **Monospace for metadata:** JetBrains Mono is strictly used with wide tracking (+1px) to contrast against the tightly packed display serif/sans.
3. **Pixel-font as illustration:** PP Mondwest isn't just for reading; it acts as a graphical element, replacing traditional vector illustrations in hero sections.

## Spacing
**Base unit:** 8px

| Token | Value | Occurrences |
|---|---|---|
| `space-0.5` | 4px | 5 |
| `space-1` | 8px | 34 |
| `space-1.5` | 12px | 7 |
| `space-2` | 16px | 64 |
| `space-4` | 32px | 10 |
| `space-8` | 64px | 7 |
| `space-12` | 96px | 3 |
| `space-15` | 120px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Surfaces, full-bleed panels | 473 occurrences |
| `radius-sm` | 4px | Small inputs, inner elements | 8 occurrences |
| `radius-md` | 8px | Standard cards, controls | 43 occurrences |
| `radius-pill` | 50px | Badges, rounded panels | 6 occurrences |

## Elevation
Not captured in source. The system relies entirely on 1px borders and background color shifts (e.g., `#0a0a0a` to `#141414`) to establish hierarchy.

## Components

### Tier 1: Foundational

#### Light Card
**Role:** High-contrast content container on light backgrounds.
**Pages observed:** `https://dovetail.com`, `https://dovetail.com/pricing`
**Spec:** Background `#ffffff` / Text `#0a0a0a` / Border `rgba(0, 0, 0, 0)` (1px) / Radius `8px` / Padding `10px 16px` / Typography `14px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Glass Dark Card
**Role:** Elevated container on dark canvas.
**Pages observed:** `https://dovetail.com`, `https://dovetail.com/pricing`
**Spec:** Background `rgba(255, 255, 255, 0.08)` / Text `#ffffff` / Border `rgba(255, 255, 255, 0.24)` (1px) / Radius `8px` / Padding `10px 16px` / Typography `14px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 2: Patterns

#### Solid Dark Card
**Role:** Secondary content grouping on dark canvas.
**Pages observed:** `https://dovetail.com`
**Spec:** Background `#141414` / Text `#ffffff` / Border `rgba(255, 255, 255, 0.08)` (1px) / Radius `8px` / Padding `0px` / Typography `20px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Transparent Outlined Surface
**Role:** Demarcated structural sections.
**Pages observed:** `https://dovetail.com`
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#ffffff` / Border `rgba(255, 255, 255, 0.16)` (1px) / Radius `0px` / Padding `64px 0px 0px` / Typography `20px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 3: Surface-specific

#### Deep Canvas Surface
**Role:** Primary page background band.
**Pages observed:** `https://dovetail.com`
**Spec:** Background `#0a0a0a` / Text `#ffffff` / Border `#ffffff` (0px) / Radius `0px` / Padding `120px 0px` / Typography `20px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Mid-Dark Surface
**Role:** Alternating section background for pricing/tables.
**Pages observed:** `https://dovetail.com/pricing`
**Spec:** Background `#212121` / Text `#ffffff` / Border `#ffffff` (0px) / Radius `0px` / Padding `16px 0px` / Typography `20px` / Shadow `none`
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

## Layout
| Property | Value |
|---|---|
| Section padding | 120px |
| Component padding | 10px 16px |

## Responsive
Not captured in source.

## Imagery & decoration
The brand heavily utilizes 8-bit, pixelated graphics (emojis, cursors, abstract shapes) floating alongside high-fidelity product UI screenshots. This creates a deliberate juxtaposition between "retro internet" and "modern enterprise software." Saturated colors are strictly reserved for these small graphical moments and the `#0044ff` accent.

## Do's
* Do use PP Mondwest at large sizes (>64px) for expressive, brand-defining moments.
* Do rely on translucent white borders (`rgba(255, 255, 255, 0.08)`) to separate dark cards from dark backgrounds.
* Do apply negative tracking (-1px to -2px) to Inter display typography to create dense, authoritative headlines.
* Do use JetBrains Mono for small, technical metadata to contrast with the primary sans/serif fonts.
* Do maintain a flat z-axis; avoid drop shadows entirely.

## Don'ts
* **Wrong:** Using a drop shadow to elevate a card.
  **Right:** Using a 1px `rgba(255, 255, 255, 0.24)` border to define the card edge.
  **Reason:** The system is strictly flat and relies on borders and background lightness for hierarchy.
* **Wrong:** Setting display text in Inter with default or positive letter spacing.
  **Right:** Setting display text in Inter with -2px letter spacing.
  **Reason:** The brand's typographic authority comes from tightly packed, dense headlines.
* **Wrong:** Using `#0044ff` as a background color for large sections.
  **Right:** Using `#0a0a0a` or `#141414` for sections and `#0044ff` only for small accents or text.
  **Reason:** The brand is fundamentally monochrome; the accent color loses its power if overused.

## Similar brands
* Vercel (dark mode, high contrast, sans + mono typography)
* Linear (flat dark UI, translucent borders, zero shadows)
* Raycast (developer-centric, sharp radii, monochrome foundation)

## Quick start

**CSS Variables:**
```css
:root {
  --color-foundation-white: #ffffff;
  --color-foundation-gray-dark: #212121;
  --color-foundation-gray-muted: #a7a7a7;
  --color-foundation-black-base: #0a0a0a;
  --color-foundation-black-elevated: #141414;
  --color-accent-blue: #0044ff;

  --font-sans: 'Inter', sans-serif;
  --font-display-pixel: 'PP Mondwest', monospace;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 50px;
}
```

## Agent prompt examples
1. "Create a dark mode feature card. Background is `rgba(255, 255, 255, 0.08)`, border is 1px solid `rgba(255, 255, 255, 0.24)`, radius is 8px. The title should be Inter 24px, weight 500, with -0.5px letter spacing."
2. "Build a hero section with a base background of `#0a0a0a`. The main headline should use PP Mondwest at 130px with -2px letter spacing. Include a technical caption above it using JetBrains Mono at 14px with 1px letter spacing."
3. "Generate a pricing table row. The background is `#212121` with 16px vertical padding. Text is `#ffffff` set in Inter 20px."

## Known gaps
* **Shadows:** No shadows were captured in the evidence, suggesting a strictly flat design, but hover states might contain uncaptured elevation changes.
* **Interactive States:** Hover, focus, and active states for buttons and cards were not captured.
* **Responsive Breakpoints:** Mobile and tablet layout shifts were not captured in the token data.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://dovetail.com | Desktop | 2026-06-06T05:01:38.160Z |
| Pricing | https://dovetail.com/pricing | Desktop | 2026-06-06T05:01:38.160Z |