# Dovetail No · Design system migration spec

> Source: https://dovetail.no  ·  Curated by OpenDesign  ·  en

> This site is a great example of how a limited color palette and strong typography can create a premium, authoritative brand identity for a financial or investment firm.

## 1. Identity DNA

The Dovetail identity is built as a premium Swiss studio would approach the craft of investment: with precision, restraint, and a focus on enduring value. This system is a partnership between technology and longevity, expressed through bold, minimal design.

**One-liner:** Investing in tech-enabled companies that last.
**Keywords:** Investment · Technology · Partnership · Design · Longevity
**Analogy:** A premium Swiss studio crafting investment vehicles for tech longevity.

## 2. Color

The palette is deliberately restrained, built on a high-contrast foundation of warm sandy yellow and deep near-black ink. This two-tone approach creates immediate visual authority and warmth.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F9E5B1` | main background |
| `--ink` | `#1D1E21` | body text |
| `--muted` | `#9CA3AF` | placeholder |
| `--line` | `rgba(229,231,235,1)` | divider |

**Color principle:** Warm, high-contrast palette dominated by a single tint and near-black ink.

The principle is strict limitation: a dominant tint paired with a single ink creates clarity and premium confidence.

## 3. Typography

Typography is the system's primary voice, utilizing a clean humanist sans-serif set at large scales. The category choice prioritizes legibility and a modern, confident statement over playful expression.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -0.72px | Hero headings |
| heading | 48px | 1.17 | 400 | -0.24px | Section headings |
| body-lg | 28px | 1.07 | 400 | 0.11px | Subheadings and quotes |
| body | 22px | 1.36 | 400 | 0.2px | Body text and small headings |
| caption | 16px | 1.25 | 400 | 0.2px | Footnotes and UI elements |

## 4. Spacing

A strict 8px-based vertical rhythm governs all spacing, creating a consistent and harmonious foundation for the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px based vertical rhythm enforced by line-heights and padding.

## 5. Surfaces

Surfaces are defined by absence and selective division. The design avoids drop shadows and complex gradients in favor of flat, open space, using minimal 2px dividers only where necessary.

- **Radius:** sm 4px · md 16px · lg 24px · pill 9999px
- **Borders:** No borders on containers; occasional 2px dividers or 1px borders.

## 6. Layout

The layout skeleton is a spacious two-column split, where large typographic statements are balanced by abstract illustrations. This structure prioritizes editorial hierarchy and breath.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A two-column split layout with large typography balanced by abstract illustrations.

## 7. Motion & Interaction

Motion is minimal and purely functional, reserved for confirming interaction. The philosophy is immediate feedback through subtle, fast transitions rather than decorative animation.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Color and fill transitions on hover

- **Hover:** Subtle color or opacity transition on navigation links and buttons.
- **Click:** Immediate visual feedback via transitions.
- **Transition:** 150ms cubic-bezier transition for most interactive elements.
- **Keyboard:** Standard focusable elements with pointer cursor.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and premium, matching the visual system's boldness. Headlines are statement-driven and CTAs are action-oriented, both built for maximum legibility and impact.

- **Tone:** Confident, direct, and premium.
- **Headline style:** Large, bold, and statement-driven, often using negative tracking.
- **CTA style:** Simple, action-oriented, and highly legible.
- **Avoid:** Flashy gradients / Neon colors / Playful emojis / Dense paragraphs / Complex iconography

### Don'ts
- ❌ Don't use bright accent colors — screenshot shows a strict two-tone palette.
- ❌ Don't use playful or decorative typefaces — screenshot shows a clean humanist sans-serif.
- ❌ Don't add drop shadows to containers — screenshot shows flat, shadowless surfaces.
- ❌ Don't use complex gradients — screenshot shows a single, solid warm background.
- ❌ Don't clutter the layout with small elements — screenshot shows a spacious, typography-driven hierarchy.
- ❌ Don't use rounded cards with borders — screenshot shows open space and minimal visual containers.

The system deliberately rejects flashy gradients, complex iconography, and dense paragraphs to preserve its clean, authoritative focus.

## System Prompt (paste into AI tool)

```
Dovetail is an investment firm with a premium, design-led digital presence. The primary palette is warm and high-contrast, featuring a dominant sandy yellow background (#F9E5B1) paired with near-black ink (#1D1E21). Typography is a clean humanist sans-serif used at large scales with tight tracking for a modern, confident feel. Critical design constraints: 1) Never use playful or decorative fonts; 2) Avoid bright accent colors or complex gradients; 3) Do not use drop shadows or dense, cluttered containers. The layout is spacious and editorial, balancing large statements with bold, abstract illustrations.
```