---
name: Dovetailapp
description: "A strong example of a premium B2B dark-mode UI that balances technical authority with approachable, modern design."
version: alpha

colors:
  background: "#0A0A0A"
  primary: "#FAFAFA"
  secondary: "#A7A7A7"
  tertiary: "#0044FF"
  neutral: "#A7A7A7"
  bg-soft: "#141414"
  bg-quiet: "#151515"
  line: "rgba(255, 255, 255, 0.08)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 112px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 600
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.3
    fontWeight: 500
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Dovetail is a sleek, dark-themed B2B platform that uses AI to turn customer signals into actionable insights.

*A modern, data-centric command center for customer feedback.*

## Colors

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

- **Background (`#0A0A0A`)** — uses `bg` token
- **Primary text (`#FAFAFA`)** — uses `ink` token
- **Secondary text (`#A7A7A7`)** — uses `ink-soft` token
- **Accent (`#0044FF`)** — uses `accent` token
- **Muted (`#A7A7A7`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.08)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Generous vertical rhythm with 124px padding creating clear section separation.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Rounded pill buttons; primary is solid white with black text, secondary is outlined with white text.
- **card:** Dark cards with subtle borders and slight background elevation (#141414).
- **chip:** Small rounded tags for metadata, often with subtle borders.
- **input:** Clean, dark input fields with subtle borders.
- **hero:** Full-width, centered text layout with massive typography and a playful 3D icon.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```