Dovetail

Overview

Dovetail is a customer intelligence platform that transforms fragmented feedback signals into unified, actionable insights. The design system embodies 'Data-Driven Minimalism'—a refined aesthetic that pairs a near-absolute black canvas (#0a0a0a) with a vivid electric blue accent (#0044ff) to convey precision, intelligence, and technological confidence. The UI prioritizes clarity over decoration: every pixel serves the user's goal of extracting truth from customer data. The emotional response is one of calm authority—users feel they are in control of complex information, not overwhelmed by it.

The brand voice is direct, confident, and grounded in evidence. Dovetail speaks in the language of data practitioners: precise, outcome-focused, never hyperbolic. The vocabulary favors action verbs ('assemble', 'analyze', 'act') and concrete nouns ('signals', 'insights', 'feedback'). Example sentence in brand voice: 'Your sales calls contain the answers—Dovetail surfaces them in seconds, not weeks.'

Colors

The color system is built on a high-contrast, data-centric foundation. Surface (#0a0a0a) is near-absolute black, creating maximum legibility for text and data visualizations; it is paired with on-surface (#fafafa), a near-white that reads as #fafafa at 100% opacity. Primary (#0044ff) is the brand's electric blue accent—used exclusively for call-to-action buttons, active states, and key interactive elements. This vivid, saturated blue (#0044ff, RGB 0, 68, 255) signals precision and forward momentum; it appears infrequently but commands attention. Secondary (#00c4cc) is a cyan accent used for supporting highlights, status indicators, and secondary interactions. Tertiary (#ffd6cb) is a warm peach used sparingly for success states or tertiary CTAs. Error (#ff6b6b) is a red reserved for destruc

Typography

The type system uses Inter as the primary typeface, paired with JetBrains Mono for code and technical labels. Display (72px, 600 weight, -0.02em tracking) is reserved for hero headlines and major section titles; it commands the page with its 84px line-height and negative letter-spacing, creating visual tension that reflects the brand's data-driven intensity. Headline-lg (48px, 600 weight) is used for section headers and modal titles. Headline-md (32px, 600 weight) anchors subsections. Body-lg (20px, 400 weight, 28px line-height) is the primary reading size for hero copy and feature descriptions. Body-md (16px, 400 weight) is standard paragraph text. Label-md (14px, 500 weight, 0.01em tracking) is used for button text, form labels, and UI controls. Label-sm (12px, 400 weight, 0.05em trackin

Layout

The layout follows a 12-column grid with a maximum container width of 1280px. The page rhythm is built on the spacing scale: use lg spacing (40px) to separate major sections (hero, features, testimonials), md spacing (24px) for component padding and section margins, and sm spacing (12px) for internal component spacing. The gutter is 24px on desktop, reducing to 16px on mobile (max-width: 799px). White-space is generous and intentional—avoid cramping content. The hero section uses full-width background imagery with centered text overlay, typically 2–3 lines of display-size headline followed by body-lg copy. Cards and containers use md padding (24px) internally, with lg spacing (40px) between card groups. On mobile, reduce container max-width to 100% and apply 16px horizontal padding. The gr

Elevation & Depth

Elevation is conveyed through a restrained shadow system and strategic use of the surface-container stack. Level 1 (Base): the background is surface (#0a0a0a) with no shadow. Level 2 (Standard Card): use surface-container (#1a1a1a) with a 1px border in outline-variant (#3b3b3b) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modal): use surface-container-high (#262626) with a 1px border in outline (#626262) and box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26). Do not use blur or glassmorphism; instead, rely on color contrast and shadow depth. Interactive elements (buttons, inputs) do

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used sparingly and consistently to signal interactivity without softening the brand's technical edge. Buttons use rounded.lg (1rem / 16px) for a slightly softened square, creating a modern, approachable feel while maintaining geometric clarity. Cards use rounded.lg (16px) for consistency with buttons. Input fields use rounded.DEFAULT (0.5rem / 8px) for a tighter, more technical appearance. Modals and dropdowns use rounded.lg (16px). Badges and pills use rounded.full (9999px) for maximum softness, signaling non-critical, informat

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses backgroundColor: {colors.primary} (#0044ff), textColor: {colors.on-primary} (#ffffff), rounded: {rounded.lg} (16px), padding: 16px 24px, and height: 48px. Apply font-weight: 500 and typography: {typography.label-md}. On hover, transition to button-primary-hover with backgroundColor: {colors.primary-container} (#0033cc) over 200ms using cubic-bezier(0.2, 0.6, 0.6, 1). On focus, add outline: 2px solid {colors.primary} with outline-offset: 2px. Button-secondary uses backgroundColor: {colors.surface-container-high} (#262626), a 1px border in outline-variant (#3b3b3b), and the same padding and height. Button-ghost is transparent at rest, with backgroundColor: transparent and textColor: {colors.on-surface};

Do's and Don'ts

**Do**

• Do use primary (#0044ff) exclusively for the most important call-to-action on each page—typically 'Contact sales' or 'Try free'—to maintain visual hierarchy and user focus.
• Do apply md spacing (24px) consistently between major sections and inside card padding to create a predictable, restful rhythm.
• Do use the surface-container stack (8 levels) to create depth without shadows; each level represents a distinct elevation, from surface-container-lowest (#0f0f0f) for recessed inputs to surface-container-highest (#323232) for modals.
• Do apply 200ms cubic-bezier(0.2, 0.6, 0.6, 1) transitions to all interactive state changes (hover, focus, active) for a smooth, confident feel.
• Do use label-sm (12px JetBrains Mono, 0.05em tracking) for metadata, timestamps, and promotional badges to signal technical precision.

**Don't**

• Don't use secondary (#00c4cc) or tertiary (#ffd6cb) as primary CTAs; reserve them for supporting actions, status indicators, and secondary highlights only.
• Don't apply shadows to cards at rest; use the surface-container background color and a 1px outline-variant border instead—shadows are reserved for elevated modals and popovers.
• Don't mix rounded.sm (4px) and rounded.lg (16px) on the same component; maintain consistency within a component family (all buttons use lg, all inputs use DEFAULT).
• Don't use glassmorphism, blur effects, or transparency on the main surface; the near-black canvas (#0a0a0a) is the foundation, and clarity is paramount.
• Don't apply text-shadow to body text; reserve it only for small labels (label-sm) displayed over busy backgrounds or data visualizations to ensure legibility.