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

# Dovetail · Design System

> A dark canvas for sharp customer intelligence.

**Theme:** dark · **Industry:** ai · **Source:** https://dovetail.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._

Dovetail pairs a near-black canvas and restrained blue calls to action with oversized, expressive typography and product-interface imagery. Long, spacious sections make the homepage feel editorial while keeping the software and customer evidence in focus.

## North star

Keep the page nearly black and spacious, using expressive type and product evidence for impact while reserving vivid blue for decisive actions and proof.

## Overview

The page is built on a nearly uniform #0a0a0a canvas, with off-white typography and muted gray supporting text. Saturated blue is reserved for the main demo action and vivid customer quote panels, so it punctuates rather than overwhelms the dark presentation. Inter supplies most of the interface and headings; large, tightly tracked display lines are occasionally disrupted by a pixelated or serif-like word treatment. JetBrains Mono marks small uppercase announcements and eyebrow labels, while PP Mondwest gives select headings a distinctive editorial contrast. A centered, constrained content area supports left-aligned text, product UI panels, and alternating feature compositions. Sections have generous vertical breathing room, with denser grids used for trust details and customer stories. Product screenshots and interface mockups sit directly against dark surfaces; vivid blue testimonial cards provide the clearest color break. Fine borders and subtle surface changes define cards without relying on shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#0a0a0a` | `--color-midnight-canvas` | brand | Dominant page canvas and the base for the dark navigation, hero, content sections, and footer. |
| Soft Chalk | `#fafafa` | `--color-soft-chalk` | neutral | Primary heading, body, navigation, and button text against dark backgrounds. |
| Quiet Hairline | `#1d1d1d` | `--color-quiet-hairline` | neutral | Thin card, link, and footer borders that separate content without strong contrast. |
| Muted Silver | `#a7a7a7` | `--color-muted-silver` | neutral | Secondary copy and subdued interface text on the dark canvas. |
| Signal Blue | `#0044ff` | `--color-signal-blue` | accent | Primary Book a demo button and prominent blue testimonial panels. |
| Graphite Surface | `#121212` | `--color-graphite-surface` | surface | Subtle raised background for product cards and dark interface panels. |
| Deep Cobalt | `#0238ce` | `--color-deep-cobalt` | accent | Blue surfaces and link treatments, including customer-story panels. |
| Coal Surface | `#191919` | `--color-coal-surface` | surface | Secondary dark card background, including a product conversation mockup. |

### Semantic aliases

`--color-canvas` → `#0a0a0a` (Midnight Canvas) · `--color-surface` → `#121212` (Graphite Surface) · `--color-surface-2` → `#191919` (Coal Surface) · `--color-text` → `#fafafa` (Soft Chalk) · `--color-text-muted` → `#a7a7a7` (Muted Silver) · `--color-border` → `#1d1d1d` (Quiet Hairline) · `--color-accent` → `#0044ff` (Signal Blue) · `--color-accent-2` → `#0238ce` (Deep Cobalt) · `--color-on-accent` → `#fafafa` (Soft Chalk)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fafafa` | `#0a0a0a` | 18.97:1 | AAA |
| `#fafafa` | `#121212` | 17.95:1 | AAA |
| `#fafafa` | `#191919` | 16.84:1 | AAA |
| `#a7a7a7` | `#0a0a0a` | 8.23:1 | AAA |
| `#a7a7a7` | `#121212` | 7.79:1 | AAA |
| `#a7a7a7` | `#191919` | 7.31:1 | AAA |
| `#0044ff` | `#0a0a0a` | 3.08:1 | AA-large |
| `#0044ff` | `#121212` | 2.92:1 | fail |
| `#0044ff` | `#191919` | 2.74:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 400, 600 | Primary display, headings, body copy, navigation, buttons, and interface text. | Inter |
| JetBrains Mono | `--font-mono` | webfont | 400 | Small uppercase announcement, eyebrow, and code-like labels. | IBM Plex Mono |
| PP Mondwest | `--font-pp-mondwest` | webfont | 400 | Occasional serif-like display word treatments and select expressive headings. | DM Mono |

- **Inter:** Mostly weights 400–600; headings use tight negative tracking, while button labels are compact and semibold.
- **JetBrains Mono:** Regular weight with widely tracked uppercase microcopy.
- **PP Mondwest:** Regular weight; used sparingly to contrast with the clean Inter-led typography.

### Type scale — Augmented Fourth (ratio ≈ 1.411, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 112px | 600 | 0.8 | -0.019em | — | Inter | Oversized hero statement and expressive campaign-style headlines. |
| h1 | 64px | 600 | 1.06 | -0.031em | — | Inter | Primary hero and major section headings. |
| h2 | 56px | 600 | 1.07 | -0.036em | — | Inter | Large feature, trust, and closing call-to-action headings. |
| h3 | 25px | 400 | 1.12 | -0.01em | — | PP Mondwest | Occasional editorial display phrase within mixed-style headings. |
| h4 | 24px | 500 | 1.33 | -0.021em | — | Inter | Secondary feature titles and card headings. |
| body | 20px | 500 | 1.4 | -0.012em | — | Inter | Introductory and feature explanation copy. |
| caption | 16px | 500 | 1.5 | 0 | — | Inter | Supporting labels, card descriptions, and customer-story details. |
| button | 14px | 600 | 1.29 | 0 | — | Inter | Compact demo and navigation action labels. |
| eyebrow | 12px | 400 | 1 | 0.083em | uppercase | JetBrains Mono | Uppercase announcement and small section labels. |
| code | 12px | 400 | 1 | 0.083em | uppercase | JetBrains Mono | Monospaced uppercase interface-style microcopy. |

OpenType features in use: `"liga"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 12, 15, 16, 24, 32, 48, 96, 124 px.
- Section rhythm 120px · element gap 4px · card padding — · max content width 1192px.

A centered content frame reaches a measured maximum width of 1192px, with most section content left-aligned. The homepage is a long sequence of generously separated blocks rather than a compressed dashboard: feature splits, product UI presentations, trust details, testimonials, and a dense multi-column footer. Measured spacing follows an 8px base-unit system with a 120px section gap. Use two- to four-column arrangements for feature and trust content, then wider grids for story cards and footer links; retain large open areas around headline and hero media.

## Shape & elevation

- Radius: button `8px` · card `8px` · media `4px` · badge `8px` · link `8px` · xs `4px` · sm `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-out` on interactive elements.

The design is mostly flat, with no measured shadows. Dark surface shifts distinguish cards from the canvas, while thin #1d1d1d borders quietly outline testimonials and panels. Product UI is layered within its own screenshots; use those contained interface details for depth rather than adding prominent page-level effects.

## Imagery

The visual evidence is primarily software: dark product screenshots, conversation panels, dashboards, and feature mockups. Customer-story cards use photographic portraits and video-like stills with subdued dark treatment. Select headlines pair typography with small illustrative or rendered accents, but these are decorative exceptions, not the defining brand palette. Keep media framed in dark surroundings and avoid bright stock-photo styling.

## Components

### Primary demo button

Use a #0044ff fill, #fafafa label, 8px radius, and measured 14px semibold Inter styling; the larger hero action uses 18px text.

### Announcement strip

A narrow top-of-page message uses small, uppercase, widely tracked JetBrains Mono text against the dark canvas.

### Product interface panel

Present dashboards and AI conversation mockups on #121212 or #191919 surfaces with minimal borders and surrounding dark space.

### Customer quote card

Use a bold blue panel with off-white quote text, attribution, and a customer logo; pair with adjacent dark metric cards where appropriate.

### Feature selector

Stack feature names alongside a product panel; emphasize the active option in off-white and mute inactive options.

### Story gallery card

Use a wide photographic or video still with darkened framing, customer branding, and a concise story caption.

### Footer link columns

Arrange small uppercase category labels above compact link lists, using muted text and understated dividers.

### Measured component styles

- **Primary button** (“Book a demo”): background #0044ff · text #fafafa · radius 8px · padding 12px 16px · 600 14px Inter
- **Secondary button** (“ASK. NEVER GUESS. INTRODUCING DIGITAL TW”): transparent background · text #ffffff · border 1px solid · radius 0px · padding 0px · 400 20px Inter
- **Link** (““For us, the value of Dovetail is effici”): transparent background · text #ffffff · radius 0px · padding 0px · 400 20px Inter
- **Card** (““For us, the value of Dovetail is effici”): transparent background · text #ffffff · border 1px solid #1d1d1d · radius 8px · padding 0px · 400 20px Inter
- **Badge** (“Stop”): background #b1b1b1 · text #0a0a0a · radius 7.5443px · padding 3.8px · 500 11.3165px Inter
- **Navigation item** (“Product Solutions Resources Enterprise C”): transparent background · text #ffffff · radius 0px · padding 0px · 400 20px Inter

## Do

- Keep the main canvas at #0a0a0a.
- Use #fafafa for primary text and #a7a7a7 for supporting copy.
- Reserve #0044ff for primary actions and selected proof panels.
- Use oversized, tightly tracked Inter headlines with occasional editorial contrast.
- Give sections generous vertical breathing room.
- Show product UI as concrete evidence rather than generic decoration.

## Don't

- Do not add gradients or prominent shadows.
- Do not turn every card or link blue.
- Do not introduce bright section backgrounds.
- Do not make body copy compete with the headline.
- Do not use decorative photography in place of product interface evidence.
- Do not flatten the page into a dense dashboard grid.

## Agent prompt

Build a new Dovetail-style SaaS page on a #0a0a0a Midnight Canvas. Use #fafafa Soft Chalk for strong Inter headlines and primary copy, and #a7a7a7 Muted Silver for secondary text. Keep #0044ff Signal Blue for the main CTA and selected customer proof; use #121212 Graphite Surface and #191919 Coal Surface for restrained product panels, with #1d1d1d Quiet Hairline borders. Compose a centered, spacious page with large left-aligned editorial headings, feature splits, dark product-interface mockups, and occasional vivid quote cards. Use JetBrains Mono for small uppercase announcement labels and sparse PP Mondwest-like contrast for expressive words. Favor generous section separation, compact semibold buttons with rounded corners, and a quiet multi-column footer. Avoid gradients, strong shadows, and bright decorative imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark full-bleed opening with top announcement and navigation, introductory copy, demo action, oversized headline, and product proof. | announcement bar, primary demo CTA, trust-rating cues | near-black canvas, oversized mixed-style typography, dark product interface |
| 2 | feature-split | Feature introduction and selector sit alongside product mockups, with quote and metric cards further down. | feature selector, learn-more link, customer proof | dark UI mockups, blue testimonial card, paired metric panel |
| 3 | feature-grid | Trust heading above a two-column composition of compliance details, explanatory copy, and testimonial. | security proof, demo CTA, customer quote | dark compliance cards, small feature labels, blue quote panel |
| 4 | feature-grid | Large heading and introduction lead into feature navigation, interface panels, capability cards, and proof. | feature selector, learn-more link, customer outcome | product screenshots, dark feature grid, blue testimonial and metric |
| 5 | testimonials | A left-aligned heading and stories action sit above a horizontally arranged set of customer media cards. | view all stories, story-card browsing | darkened customer imagery, overlaid logos, compact captions |
| 6 | cta | A compact closing call to action with expressive oversized headline and demo button. | single primary CTA | large headline, blue demo button, dark canvas |
| 7 | footer | Dense multi-column navigation followed by a narrow legal, preference, and social-links row. | category-based navigation, social links, legal links | uppercase micro-labels, compact link lists, subtle separators |

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