---
title: "Dovetail design system"
variant: extended
source: https://dovetail.no/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/dovetail-no)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Dovetail · Design System

> Warm editorial calm with a human, illustrated edge

**Theme:** light · **Industry:** fintech · **Source:** https://dovetail.no/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Dovetail’s homepage uses a consistent pale butter-yellow canvas, dark Lausanne typography and expressive monochrome illustrations to present its investment practice. Open layouts and hairline dividers give the portfolio, team and editorial content a calm, connected rhythm.

## North star

Keep the warm yellow canvas continuous and let oversized, dark typography and expressive imagery define each section without adding decorative UI.

## Overview

The page is anchored by a pale butter-yellow canvas (#f9e5b1) that continues across the hero and lower content, making the whole homepage feel like one composed editorial surface. Dark charcoal (#1d1e21) carries the wordmark, navigation, headings, body copy, rules and primary CTA. Lausanne is used throughout, with unusually large, regular-weight display and heading text balanced by compact supporting copy and heavier link labels. The layout alternates text and imagery rather than boxing every section into cards: the hero pairs its statement with a black-and-cream illustration, while later sections use portfolio and team photography alongside more drawn artwork. Fine dark dividers mark section transitions without introducing heavy panels or shadows. Most content sits directly on the canvas; small pale surfaces appear selectively in a portfolio card and graphic details. The result is warm, distinctive and restrained, with generous open areas and a strong contrast between oversized typography and smaller explanatory text.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Charcoal Ink | `#1d1e21` | `--color-charcoal-ink` | brand | Primary text, wordmark, navigation, hairline section dividers and dark CTA background. |
| Butter Canvas | `#f9e5b1` | `--color-butter-canvas` | brand | Dominant page canvas and continuous background across the homepage sections. |
| Porcelain Cream | `#fef9f3` | `--color-porcelain-cream` | neutral | Light CTA lettering and footer text; also appears as a pale contrast in the illustrations. |
| Periwinkle Mist | `#dfe4f3` | `--color-periwinkle-mist` | surface | Selective pale portfolio-card surface, not a defining background band. |
| Oatstone | `#ede5dc` | `--color-oatstone` | surface | Minor alternate surface detail; subordinate to the continuous yellow canvas. |

### Semantic aliases

`--color-canvas` → `#f9e5b1` (Butter Canvas) · `--color-surface` → `#1d1e21` (Charcoal Ink) · `--color-surface-2` → `#dfe4f3` (Periwinkle Mist) · `--color-surface-3` → `#ede5dc` (Oatstone) · `--color-text` → `#1d1e21` (Charcoal Ink) · `--color-text-muted` → `#fef9f3` (Porcelain Cream) · `--color-border` → `#1d1e21` (Charcoal Ink) · `--color-accent` → `#f9e5b1` (Butter Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1e21` | `#f9e5b1` | 13.39:1 | AAA |
| `#1d1e21` | `#dfe4f3` | 13.12:1 | AAA |
| `#1d1e21` | `#ede5dc` | 13.37:1 | AAA |
| `#fef9f3` | `#f9e5b1` | 1.19:1 | fail |
| `#fef9f3` | `#1d1e21` | 15.92:1 | AAA |
| `#fef9f3` | `#dfe4f3` | 1.21:1 | fail |
| `#fef9f3` | `#ede5dc` | 1.19:1 | fail |
| `#f9e5b1` | `#1d1e21` | 13.39:1 | AAA |
| `#f9e5b1` | `#dfe4f3` | 1.02:1 | fail |
| `#f9e5b1` | `#ede5dc` | 1:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lausanne | `--font-body` | webfont | 400, 700, 600 | All page typography: display and section headings, body copy, navigation, links and buttons. | Inter |

- **Lausanne:** Use clean sans-serif forms; display and headings are regular, while links and selected labels use heavier weights. Preserve measured tracking and avoid forced uppercase.

### Type scale — Augmented Fourth (ratio ≈ 1.377, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1 | -0.01em | — | Lausanne | Oversized brand and hero display statements. |
| h1 | 48px | 400 | 1.17 | -0.005em | — | Lausanne | Primary page or major section headings. |
| h2 | 32px | 400 | 1.5 | -0.005em | — | Lausanne | Supporting section statements and prominent editorial copy. |
| h3 | 28px | 600 | 1 | 0.007em | — | Lausanne | Emphasized subheadings and compact feature titles. |
| body | 20px | 400 | 1.4 | 0.01em | — | Lausanne | Paragraphs, explanatory copy and supporting text. |
| button | 28px | 600 | 1 | 0.007em | — | Lausanne | Prominent CTA labels. |
| nav | 20px | 400 | 1.4 | 0.01em | — | Lausanne | Header navigation links. |
| link | 22px | 700 | 1.36 | 0.005em | — | Lausanne | Emphasized inline and section-level calls to action. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 3, 4, 8, 9, 12, 14, 15, 16, 20, 24, 28, 32, 40, 48, 56, 72 px.
- Section rhythm 32px · element gap 8px · card padding 30px · max content width 1376px.

Use a broad, centered content area with a measured page maximum width of 1376px. The page reads as a sequence of full-width canvas sections, generally aligned to the left, with content arranged in two-column hero and feature compositions and a multi-item portfolio strip. Keep section boundaries clear with fine rules rather than separate colored bands. The measured spacing system is based on an 8px unit; maintain a compact overall density while leaving conspicuous open space around major statements and imagery.

## Shape & elevation

- Radius: button `16px` · card `16px` · media `16px` · xs `16px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual language is predominantly flat: the measured page has no shadows or gradients, and most sections sit directly on the shared canvas. Use thin dark rules to separate content groups. Reserve rounded corners for image media, the portfolio card and controls; do not create layered, elevated panels.

## Imagery

Mix monochrome, hand-drawn editorial illustrations with documentary-style portfolio and team photography. The hero illustration is a high-contrast black-and-cream scene placed opposite the headline; later drawn artwork supports the investment-focus quote and closing statement. Portfolio images appear as a horizontal row of rounded thumbnails, while team and studio photographs use larger rounded rectangles. Keep imagery natural and avoid glossy product-render treatments.

## Components

### Header navigation

Place the oversized wordmark at the left, compact text links toward the right and the symbolic mark at the far edge, all in Charcoal Ink on Butter Canvas.

### Hero CTA

A dark, rounded pill with Porcelain Cream text; keep the label prominent and pair it with a large statement and contrasting illustration.

### Section divider

Use a fine Charcoal Ink horizontal rule to mark transitions between sections while preserving the continuous canvas.

### Editorial text link

Use Charcoal Ink, bold Lausanne styling and a short underline or small directional arrow where shown; avoid button-like filled backgrounds.

### Portfolio carousel

Show company imagery in a horizontal sequence of rounded thumbnails with concise names and simple outlined circular previous/next controls.

### Portfolio prompt card

Use a restrained Periwinkle Mist surface with rounded corners and dark copy to highlight the invitation to recommend a company.

### Team image pair

Present large rounded team and studio photographs side by side beneath the section heading and supporting text.

### Measured component styles

- **Primary button** (“Get in touch”): background #1d1e21 · text #fef9f3 · radius 24px · padding 14px 16px · 600 28px Lausanne
- **Secondary button** (“About us”): transparent background · text #1d1e21 · border 1px solid · radius 16px · padding 9px 12px · 600 20px Lausanne
- **Link** (“LCA.no”): transparent background · text #1d1e21 · radius 0px · padding 0px · 400 20px Lausanne
- **Card** (“Know a great company we should work with”): background #dfe4f3 · text #1d1e21 · radius 16px · padding 28px 32px · 400 20px Lausanne
- **Navigation item** (“About us Portfolio”): transparent background · text #1d1e21 · radius 0px · padding 0px · 600 20px Lausanne

## Do

- Keep Butter Canvas (#f9e5b1) as the dominant continuous page background.
- Use Charcoal Ink (#1d1e21) for primary text, marks and dividing rules.
- Let large, regular-weight typography lead the hero and section introductions.
- Pair text with the page’s expressive illustration or documentary photography.
- Separate major content groups with restrained hairline rules.
- Use rounded corners selectively on media, cards and controls.

## Don't

- Do not introduce unmeasured colors into the interface palette.
- Do not turn every section into a card or colored band.
- Do not add shadows, gradients or layered elevation.
- Do not replace the editorial imagery with glossy 3D renders.
- Do not force headings or navigation into uppercase.
- Do not crowd the canvas with dense controls or decorative UI.

## Agent prompt

Build a new Dovetail page that feels like an open editorial composition, not a dashboard. Use Butter Canvas (#f9e5b1) as the continuous background, Charcoal Ink (#1d1e21) for typography, marks and fine dividers, and Porcelain Cream (#fef9f3) only for light contrast such as CTA lettering. Typeset everything in Lausanne, or a close sans-serif substitute, with large regular headlines and confident smaller link labels. Use an asymmetric text-and-image composition, combining monochrome hand-drawn illustration with natural documentary photography. Keep the measured spacing system and wide centered page area; give major content room to breathe. Prefer direct-on-canvas layouts and thin rules over panels, with Periwinkle Mist (#dfe4f3) reserved for a selective card surface. Keep corners rounded only where the reference uses them. Add no shadows or gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Header and navigation above a two-column hero with statement and CTA on the left, illustration on the right. | Primary contact CTA, Top-level navigation | Oversized wordmark, Warm canvas, Dark pill CTA, Monochrome illustration |
| 2 | feature-split | Section label and introductory copy sit beside a short vertical list of capabilities. | Learn-more link, Capability overview | Thin section divider, Left-aligned heading, Open canvas layout |
| 3 | product-showcase | Introductory heading and portfolio link precede a horizontal carousel of company image cards. | Portfolio navigation, Previous and next controls, Company discovery | Rounded image thumbnails, Outlined circular controls, Selective pale prompt card |
| 4 | testimonials | Illustration and investment quote occupy opposite sides of a two-column composition. | Attributed executive quote, Investment-focus link | Editorial illustration, Large quote text, Minimal supporting label |
| 5 | team | Section heading and explanatory text above a side-by-side pair of large photographs. | About link, Team and studio introduction | Thin divider, Rounded photography, Asymmetric text columns |
| 6 | cta | A closing statement and contact CTA share a broad open canvas with an illustration. | Contact CTA | Large editorial copy, Monochrome illustration, Uninterrupted warm background |

## Source CSS custom properties (selected)

```css
--gap: 1.5rem;
--bg: #fef9f3;
--accent-default: #f9e5b1;
--accent-blue: #b0c5f3;
--accent-red: #f8b7aa;
--bg-accent: #F9E5B1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/dovetail-no