Dovetail
Turns customer feedback from every channel into evidence teams can act on
The style
A dark, high-impact product language. A near-black canvas carries enormous semibold Inter headlines set tight, with small uppercase monospace labels adding a technical, data-driven edge. A saturated cobalt blue marks the main action and fills big statement panels, while everything else stays in quiet greys on faint hairline edges.
Colours
- Brand#024ece
- Buttons#0059f9
- Highlight#915cff
- Background#0b0b0c
- Text#fafafa
Click a colour to copy it.
Fonts
Inter
For headings
Inter
For everything else
Buttons
42px buttons with 8px corners: cobalt with a light label for the main action, white with a dark label in the nav.
Use this style in your project
Pick the way that suits you. The first one needs no design or coding knowledge.
With an AI tool
Your AI tool builds the page for you, in Dovetail’s style.
2. Open it in
For developers
Ready-made CSS variables, a Tailwind theme and design tokens, with light and dark modes.
See the codeMake it your own
Change the colours, fonts and shapes, and see the result straight away before you use it.
CustomiseFiles
The code, ready to copy
Every file says where the style came from.
tokens.css — Colours, fonts and sizes as CSS variables, with light and dark modes.
/* Midnight Cobalt — design tokens generated by Markdown */
/* Derived from an analysis of dovetail.com; how different from the source: a little different (30/100). */
/* Inspired by, not a copy of, the source. Adapt before commercial use; no logos, imagery, copy or proprietary fonts are included. */
:root {
color-scheme: dark;
--color-background: #0b0b0c;
--color-surface: #121212;
--color-surface-muted: #1e1e1f;
--color-text: #fafafa;
--color-text-muted: #9f9fa0;
--color-border: #1d1d1d;
--color-primary: #0059f9;
--color-on-primary: #ffffff;
--color-brand: #024ece;
--color-on-brand: #ffffff;
--color-accent: #915cff;
--color-success: #55e799;
--color-warning: #e6a84c;
--color-danger: #e8685e;
--font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--text-display: 6rem;
--text-display-line-height: 0.9;
--text-display-weight: 600;
--text-display-tracking: -0.016em;
--text-h1: 4.1875rem;
--text-h1-line-height: 0.93;
--text-h1-weight: 600;
--text-h1-tracking: -0.013em;
--text-h2: 2.9375rem;
--text-h2-line-height: 0.96;
--text-h2-weight: 600;
--text-h2-tracking: -0.009em;
--text-h3: 2.0625rem;
--text-h3-line-height: 1.15;
--text-h3-weight: 600;
--text-h3-tracking: -0.006em;
--text-lead: 1.4375rem;
--text-lead-line-height: 1.5;
--text-lead-weight: 400;
--text-lead-tracking: -0.005em;
--text-body: 1rem;
--text-body-line-height: 1.6;
--text-body-weight: 400;
--text-body-tracking: 0em;
--text-small: 0.6875rem;
--text-small-line-height: 1.5;
--text-small-weight: 400;
--text-small-tracking: 0.005em;
--text-caption: 0.6875rem;
--text-caption-line-height: 1.4;
--text-caption-weight: 400;
--text-caption-tracking: 0.01em;
--text-label: 0.8125rem;
--text-label-line-height: 1.3;
--text-label-weight: 600;
--text-label-tracking: 0.08em;
--text-code: 0.875rem;
--text-code-line-height: 1.55;
--text-code-weight: 400;
--text-code-tracking: 0em;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 32px;
--space-6: 40px;
--space-7: 64px;
--space-8: 80px;
--space-9: 120px;
--space-10: 160px;
--radius-none: 0px;
--radius-sm: 5px;
--radius-md: 9px;
--radius-lg: 14px;
--radius-xl: 23px;
--radius-full: 9999px;
--border-width: 1px;
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: none;
--duration-fast: 170ms;
--duration-base: 280ms;
--duration-slow: 470ms;
--ease-standard: ease;
--ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
--ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
--container: 1488px;
--gutter: 24px;
--button-radius: 9px;
--button-padding: 12px 16px;
--input-radius: 9px;
--input-height: 48px;
--card-radius: 8px;
--card-padding: 32px;
--badge-radius: 9999px;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
color-scheme: light;
--color-background: #f8f8f9;
--color-surface: #fcfcfd;
--color-surface-muted: #ededee;
--color-text: #1d1616;
--color-text-muted: #706c6c;
--color-border: #d9d8d9;
--color-primary: #0052e6;
--color-on-primary: #ffffff;
--color-brand: #024ece;
--color-on-brand: #ffffff;
--color-accent: #915cff;
--color-success: #127d44;
--color-warning: #986416;
--color-danger: #c4271c;
}
}
[data-theme="light"] {
color-scheme: light;
--color-background: #f8f8f9;
--color-surface: #fcfcfd;
--color-surface-muted: #ededee;
--color-text: #1d1616;
--color-text-muted: #706c6c;
--color-border: #d9d8d9;
--color-primary: #0052e6;
--color-on-primary: #ffffff;
--color-brand: #024ece;
--color-on-brand: #ffffff;
--color-accent: #915cff;
--color-success: #127d44;
--color-warning: #986416;
--color-danger: #c4271c;
}
@media (prefers-reduced-motion: reduce) {
:root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}
See every detail
Buttons
Inputs
Badges
Project
Quarterly field notes
A card groups one idea: a title, one line of support and a clear next step.
Weekly digest is ready
Three new comments and one approval.
npm i @brandless/ui01
Colour
Semantic roles for dark mode. Contrast is checked against WCAG AA as you edit.
Background
Surface
Surface muted
- AA 18.8:1
Text
- AA 7.4:1
Text muted
Border
- AA 3.6:1
Primary
- AA 5.5:1
On primary
Brand
- AA 7.0:1
On brand
- AA 4.9:1
Accent
- AA 12.4:1
Success
- AA 9.4:1
Warning
- AA 6.2:1
Danger
02
Typography
Base 16px on a 1.432 modular scale. Only open-licence fonts are recommended.
display
Inter
body
Inter
mono
JetBrains Mono
display · 96px / 0.9 · 600 · -0.016em
The quiet grammar of form
h1 · 67px / 0.93 · 600 · -0.013em
The quiet grammar of form
h2 · 47px / 0.96 · 600 · -0.009em
The quiet grammar of form
h3 · 33px / 1.15 · 600 · -0.006em
The quiet grammar of form
lead · 23px / 1.5 · 400 · -0.005em
Readable text sets the pace of an interface.
body · 16px / 1.6 · 400 · 0em
Readable text sets the pace of an interface.
small · 11px / 1.5 · 400 · 0.005em
Readable text sets the pace of an interface.
caption · 11px / 1.4 · 400 · 0.01em
Readable text sets the pace of an interface.
label · 13px / 1.3 · 600 · 0.08em
Readable text sets the pace of an interface.
code · 14px / 1.55 · 400 · 0em
const tokens = await load();
03
Spacing
A 8px base unit. Use the scale for padding, gaps and section rhythm.
- 4px
- 8px
- 12px
- 16px
- 32px
- 40px
- 64px
- 80px
- 120px
- 160px
04
Shape & surface
Flat, paper-like planes separated by fine rules instead of elevation.
Radii
none
0px
sm
5px
md
9px
lg
14px
xl
23px
full
pill
Shadows & borders
none
none
none
Borders: 1px hairline · Surfaces: paper
06
Layout
1488px container · 12 columns · 24px gutters
Patterns
- Wide single-column hero with generous vertical rhythm between sections.
- Twelve-column grid; content blocks usually span 4, 6 or 8 columns.
- Full-bleed bands for feature sections, inner content capped at the container.
- Reading text limited to roughly 65–72 characters per line.
Responsive principles
- Below md, grids collapse to a single column and side gutters drop to 16px.
- Type steps above h2 scale down one step on small screens.
- Navigation collapses to a disclosure menu below lg.
- Touch targets stay at least 44×44px on every breakpoint.
07
Motion
Durations and easing curves. Previews respect your reduced-motion setting.
- fast170ms
- base280ms
- slow470ms
ease-standard
ease-enter
ease-exit
Principles
- Motion is measured and calm, easing into place rather than snapping.
- Animate opacity and transform only; avoid animating layout.
- Respect prefers-reduced-motion by replacing movement with instant state changes or fades.
Dovetail, its logo and trademarks belong to their owner and are shown only to say where this style comes from. This is our own study of their public website — not made or endorsed by Dovetail. Use your own words and images.
More like Dovetail
Linear
Plan and build products with your team and AI agents
Cloudflare
The connectivity cloud that powers a fifth of the internet
Retool
A platform for building internal tools and business apps quickly