Dovetail Pricing

---
version: alpha
name: Dovetail
description: Build with facts, not vibes.
colors:
  primary: "#ffffff"
  secondary: "#848484"
  neutral: "#0a0a0a"
  border: "#454545"
  brand-brushed-metal: "#c8c8c8"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.06
    letterSpacing: -0.031em
  headline-md:
    fontFamily: Inter
    fontSize: 54px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.019em
  headline-sm:
    fontFamily: Inter
    fontSize: 45px
    fontWeight: 600
    lineHeight: 1.2
  headline-xs:
    fontFamily: Inter
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.21
  body-md:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.008em
rounded:
  sm: 8px
spacing:
  xs: 6px
  sm: 16px
  md: 24px
  lg: 48px
  xl: 120px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
    height: 38px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
    height: 38px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 32px
---

# Dovetail: Dark Grid Pricing with One White CTA

## Overview

Dovetail's interface is a dark, monochrome system aimed at product, research, and enterprise buyers. The tone is confident and technical: spacious hero moments followed by dense, checklist-style detail. When a token isn't defined, prefer tonal hierarchy (white, brushed-metal, slate) over introducing color. Copy is concise and functional; layouts are organized in two- and three-up grids with generous section breathing room.

## Colors

- Primary (#ffffff): Default foreground for headlines, body text, icons, and primary button fills.
- Secondary (#848484): Muted helper text, fine print, and low-priority UI labels.
- Neutral (#0a0a0a): Page background and base canvas for dark mode.
- Border (#454545): Dividers, card outlines, table rules, and accordion separators.
- Brand-brushed-metal (#c8c8c8): Secondary display color for large subheads and subtle accents.
- Surface (#0a0a0a): Alias of the neutral background for panels and cards.
- On-surface (#ffffff): Foreground color when rendering on any surface.

## Typography

- Family: Inter is the sole brand typeface across display and body. It is a Google font (freely loadable). Use: headline-lg 64px/600/-0.031em for primary hero lines; headline-md 54px/600 (-0.019em) for secondary hero lines; headline-sm 45px/600 and headline-xs 38px/600 for section leads and card titles.
- Body: body-md 32px/500/1.5 (-0.008em) for narrative paragraphs, pricing qualifiers, and FAQs.
- Substitution: If Inter is unavailable, use Roboto (Google) first. As a system fallback, use the default UI sans stack (system-ui/SF Pro/Segoe UI/Arial). Keep weights near 500–600 to preserve tone.

## Layout

- Spacing scale: xs 6px for micro gaps; sm 16px for controls and small clusters; md 24px for intra-card stacks; lg 48px for block spacing and grid gutters; xl 120px for section paddings and hero margins.
- Grid: prefer two-up and three-up card patterns on desktop with 48px gutters. Stack to single-column on small screens while preserving 24px internal spacing.
- Copy flow: lead with a display line (64/54/45/38), then a concise paragraph in body-md, followed by lists set with 24px vertical rhythm.

## Elevation & Depth

The system is largely flat. Hierarchy is signaled by tone, borders (#454545), and whitespace. A single soft shadow (rgba(9, 14, 21, 0.16) 0px 5px 40px) can be used sparingly to lift focus elements like emphasized cards or dialogs; other shadow sizes are none.

## Shapes

Corners default to 8px (rounded.sm) on buttons, cards, and inputs, signaling interactivity and modernity. Text links and link-style buttons remain square-edged (0px) to read as inline actions rather than controls.

## Components

### Button — Primary
- Fill #ffffff, text #0a0a0a, height 38px, 10px×16px padding, 8px radius. Use for the main CTA (e.g., Contact sales / Try free).

### Button — Secondary
- Text #ffffff on transparent background, height 38px, 10px×16px padding, 8px radius. Use beside the primary when two actions appear.

### Button — Link
- Text #ffffff, no radius, no container fill. Use inline or at the end of paragraphs.

### Card
- Background #0a0a0a, text #ffffff, 8px radius, 32px internal padding. Outline with a 1px #454545 border when separation is needed.

### Pricing Hero
- Canvas: #0a0a0a. Title: headline-lg 64px/600 in #ffffff. Secondary line: headline-md 54px/600 in #c8c8c8. Keep vertical gap at 48px. Optional grid art may sit behind content; keep contrast subtle.

### Plan Tier Card (Free / Enterprise)
- Two-up layout with 48px gap. Title uses headline-xs 38px/600. Price/label sits in body-md. Feature bullets stack on 24px rhythm. Primary button (38px) anchors the card footer. Add #454545 border.

### Feature Checklist Grid
- Multi-column list of short items. Group by topic; each column uses a 24px row gap and a 48px column gap. Section lead in headline-sm 45px/600 with copy in body-md.

### Plan Comparison Matrix
- Two columns labeled "Free" and "Enterprise." Use #c8c8c8 for column heads, #454545 row dividers at 1px, and body-md cells. Keep cell padding at 16–24px.

### FAQ Accordion
- Question row in body-md with 1px #454545 borders between items. Answers render in body-md with 24px top padding; icons align to a 48px hit area.

### Footer Mega-nav
- Four-plus columns of links grouped under small heads (use headline-xs or body-md bold). Column gaps 48px; section padding 120px.

## Do's and Don'ts

- Do keep the palette monochrome; use #c8c8c8 for secondary emphasis and #454545 for structure.
- Do use Inter at 600 for display lines (64/54/45/38) and body-md for paragraphs.
- Do space major sections with 120px top/bottom and 48px between blocks within a section.
- Don't introduce brand accent colors for buttons; the primary CTA is white on black.
- Don't add heavy shadows; rely on borders and tone. Only use the provided sm shadow when lift is essential.
- Don't exceed the 8px radius or mix radii within a component.

## Agent Prompt Guide

Quick color reference — Text: #ffffff, Background: #0a0a0a, Border: #454545, Accent: #c8c8c8.

1) Build a dark pricing hero
- Canvas #0a0a0a. Set container max-width 1200px with 120px top/bottom padding.
- Add H1 in Inter 600, 64px, letter-spacing -0.031em, color #ffffff reading "Start free".
- Add H2 directly below in Inter 600, 54px, letter-spacing -0.019em, color #c8c8c8 reading "Upgrade to scale".
- Place two buttons under the copy: primary (38px tall, 10px×16px, 8px radius, fill #ffffff, text #0a0a0a) and secondary (text #ffffff, transparent, 8px radius).

2) Create two pricing tier cards
- Grid: 2 columns with 48px gap on desktop; stack on mobile. Each card: background #0a0a0a, 1px border #454545, radius 8px, padding 32px.
- Card title in Inter 600, 38px. Price/label in Inter 500, 32px, color #c8c8c8 for qualifiers.
- Feature list set on a 24px vertical rhythm. CTA at bottom uses the primary button spec (38px, 10px×16px, #ffffff on #0a0a0a).

3) Build a feature checklist section
- Section lead: Inter 600, 45px in #ffffff; supporting sentence in Inter 500, 32px in #c8c8c8.
- Create a 3-column grid with 48px column gaps; each bullet row spaced 24px with 1px #454545 dividers optional.

4) Implement an FAQ accordion
- Each item: question row in Inter 500, 32px, color #ffffff with a 48px hit area; 1px bottom border #454545.
- Answer panel uses Inter 500, 32px, line-height 1.5, color #c8c8c8, with 24px top padding.

## Similar Brands

- Linear — similarly monochrome, Inter-driven typography and restrained accents; Linear leans more into motion and purple hints, while Dovetail stays strictly grayscale.
- Vercel — black canvas, graphite rules, and white CTAs; Vercel feels sparser with more developer framing.
- Stripe — rigorous typographic hierarchy and clear pricing communication; Stripe uses color accents and gradients where Dovetail remains neutral.
- Anthropic — dark, quiet palette with heavyweight type; Anthropic is more editorial, while Dovetail is more checklist- and feature-oriented.

:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #848484;
  --color-neutral: #0a0a0a;
  --color-border: #454545;
  --color-brand-brushed-metal: #c8c8c8;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 600;
  --text-headline-lg-leading: 1.06;
  --text-headline-lg-tracking: -0.031em;
  --text-headline-md-size: 54px;
  --text-headline-md-weight: 600;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.019em;
  --text-headline-sm-size: 45px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 38px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.21;
  --text-body-md-size: 32px;
  --text-body-md-weight: 500;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: -0.008em;
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 8px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 120px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 10px 16px;
  --button-primary-height: 38px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 10px 16px;
  --button-secondary-height: 38px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 32px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Build with facts, not vibes.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.518,
          0.518,
          0.518
        ],
        "hex": "#848484"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.039,
          0.039,
          0.039
        ],
        "hex": "#0a0a0a"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.271,
          0.271,
          0.271
        ],
        "hex": "#454545"
      }
    },
    "brand-brushed-metal": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.784,
          0.784,
          0.784
        ],
        "hex": "#c8c8c8"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.039,
          0.039,
          0.039
        ],
        "hex": "#0a0a0a"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 48,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 120,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 64,
          "unit": "px"
        },
        "fontWeight": 600,
        "letterSpacing": {
          "value": -0.031,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 54,
          "unit": "px"
        },
        "fontWeight": 600,
        "letterSpacing": {
          "value": -0.019,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 45,
          "unit": "px"
        },
        "fontWeight": 600
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 38,
          "unit": "px"
        },
        "fontWeight": 600
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 32,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.008,
          "unit": "em"
        }
      }
    }
  }
}