# Dovetailapp · Design system migration spec

> Source: https://dovetailapp.com  ·  Curated by OpenDesign  ·  en

> A strong example of a premium B2B dark-mode UI that balances technical authority with approachable, modern design.

## 1. Identity DNA

The design system for Dovetail is constructed as a modern, data-centric command center. Every visual decision serves the goal of turning complex customer signals into clear, actionable insights, mirroring the product's core function.

**One-liner:** Dovetail is a sleek, dark-themed B2B platform that uses AI to turn customer signals into actionable insights.
**Keywords:** customer insights · data platform · AI-powered · research · analytics
**Analogy:** A modern, data-centric command center for customer feedback.

## 2. Color

The palette is built on a foundation of high-contrast monochrome, using a deep near-black (#0A0A0A) base and crisp white text. A single electric blue (#0044FF) accent is reserved exclusively to denote primary actions, creating a strict visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0A0A0A` | main background |
| `--bg-soft` | `#141414` | card background |
| `--bg-quiet` | `#151515` | quiet area |
| `--ink` | `#FAFAFA` | body text |
| `--ink-soft` | `#A7A7A7` | secondary text |
| `--muted` | `#A7A7A7` | placeholder |
| `--accent` | `#0044FF` | single accent |
| `--line` | `rgba(255, 255, 255, 0.08)` | divider |

**Color principle:** High-contrast monochrome base with a single electric blue accent to denote primary actions.

This restraint ensures the accent color carries maximum semantic weight, guiding the user's focus without visual noise.

## 3. Typography

Typographic voice pairs a clean geometric sans for impactful headlines with a humanist sans for comfortable body reading. This combination establishes a modern technical feel while maintaining excellent readability for dense content.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 112px | 1.0 | 500 | -2px | Primary hero headlines |
| heading | 24px | 1.3 | 600 | -0.5px | Section titles |
| body | 20px | 1.6 | 400 | normal | Main paragraphs |
| caption | 14px | 1.3 | 500 | normal | Metadata and small labels |

**Type rules:**
- Use geometric sans for large, impactful headlines to establish a modern tech feel.
- Keep body text at a comfortable reading size with ample line height for readability.
- Monospace is reserved strictly for code snippets or technical data representations.
- PP Mondwest is used specifically for the 'vibes' decorative element in the hero.

## 4. Spacing

A generous vertical rhythm, defined by 124px padding between sections, creates clear separation and a measured, authoritative pace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 124 px
- **Rhythm:** Generous vertical rhythm with 124px padding creating clear section separation.

## 5. Surfaces

Depth is communicated through subtle, layered shadows and nearly transparent 1px borders on key surfaces like cards and inputs. The approach is minimal, using darkness and light rather than ornate decoration to define space.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 4px 12px rgba(0, 0, 0, 0.3)
  - 0px 8px 24px rgba(0, 0, 0, 0.4)
- **Borders:** Subtle 1px borders using rgba(255, 255, 255, 0.08) for cards and input fields.

## 6. Layout

The layout skeleton begins with a centered, single-column hero featuring massive typography, establishing a clear focal point. This transitions into wide, multi-column feature grids to present structured data and platform capabilities.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered, single-column hero followed by wide multi-column feature grids.

## 7. Motion & Interaction

Motion is subtle and purposeful, with all transitions adhering to a smooth 0.3s standard easing. The philosophy is to provide immediate but non-jarring feedback through opacity and color shifts on interactive elements.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth opacity and color transitions on hover states (0.2s-0.3s).
  - Subtle entrance animations for content blocks.
  - Interactive elements change color smoothly without jarring jumps.

- **Hover:** Subtle background color shifts and opacity changes on buttons and links.
- **Click:** Immediate visual feedback through color inversion or slight scaling.
- **Transition:** All transitions typically last 0.3s with standard easing.
- **Keyboard:** Visible focus rings using the primary accent blue for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and slightly irreverent, with bold headlines that emphasize data and clarity. It balances technical authority with approachable language, avoiding jargon that would alienate non-technical stakeholders.

- **Tone:** Professional, direct, and slightly irreverent ('Build with facts, not vibes').
- **Headline style:** Bold, declarative statements that emphasize data and clarity.
- **CTA style:** Action-oriented and clear ('Contact sales', 'Try Dovetail free').
- **Avoid:** Avoid overly technical jargon that alienates non-technical stakeholders. / Avoid excessive use of the blue accent color outside of primary actions. / Avoid dense text blocks without clear visual hierarchy. / Avoid playful illustrations that contradict the 'facts not vibes' positioning.

### Don'ts
- ❌ Don't use a white background — screenshot shows a deep near-black (#0A0A0A) base.
- ❌ Don't use rounded corners on all elements — screenshot shows sharp or subtly rounded edges.
- ❌ Don't use multiple accent colors — screenshot shows a strict monochrome palette with only one blue (#0044FF).
- ❌ Don't use decorative serif fonts for body text — screenshot shows clean sans-serif for readability.
- ❌ Don't use thin borders — screenshot shows either no borders or very subtle 0.08 opacity white borders.
- ❌ Don't use small, cramped spacing — screenshot shows generous padding and wide margins.

The system deliberately excludes playful illustrations, dense text blocks, and multiple accent colors to maintain its 'facts, not vibes' positioning.

## System Prompt (paste into AI tool)

```
Dovetailapp is a B2B SaaS platform focused on customer insights and research. The design DNA is defined by a dark mode aesthetic with a deep black background (#0A0A0A) and high-contrast white text (#FAFAFA). The primary accent color is a vibrant electric blue (#0044FF), used sparingly for key interactive elements. Typography is centered around a clean, modern geometric sans-serif for display text (112px hero) and a humanist sans for body copy, ensuring excellent readability. Critical design rules include: never use a white background; maintain a strict monochrome-plus-one-color palette; ensure generous spacing (124px padding between sections); and keep borders subtle using rgba(255, 255, 255, 0.08). The overall feel is premium, data-driven, and authoritative, yet accessible.
```