Dovetail. Faint graph lines, white type, one violet spark.
- SaaS
- Dark theme
- 10 colors
- 2 typefaces
Dovetail operates in a midnight command-center language: a near-black canvas structured by a faint blueprint grid, with white type and a single soft indigo accent. Surfaces stack from pure black to charcoal, each step subtle enough to feel like elevation through luminance rather than shadow. The system is compact and data-dense — Inter carries every reading load, JetBrains Mono stamps categorical labels, and 8px radii keep containers crisp rather than soft. Color is rationed: most of the interface stays achromatic, with #6798ff appearing only as functional punctuation on icons, stat markers, and chart elements.
Dovetail design system
Brand1
Brand accent — iconography, stat markers, chart series, link states; the single chromatic note in an otherwise achromatic system
Neutrals9
Deepest surface — modal backdrops, full-bleed image fills, inline SVG fills
Page canvas — the primary background; near-black with no warmth
Card surface — one step above the canvas to delineate content blocks
Elevated surface and border — secondary cards, table rows, subtle dividers
Hairline borders on imagery and nested elements — visible but recessive
Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color
Disabled or low-emphasis button text
Secondary text — captions, metadata, helper text, muted labels
Primary text, icons, filled CTA background, card surface inverts; the dominant light element in the dark system
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Pure Black on Soft Indigo
7.51 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
