---
version: alpha
name: Doberman
description: Editorial studio minimalism — near-pure white canvas, heavy black display type, arrow-as-link navigation (→ / ↗), and a single confident accent. Case-study chrome stripped to type, whitespace, and motion; borders are hairlines, radii are near-zero, and the brand voice is loud type on quiet space.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f5f5f3"
  ink: "#0a0a0a"
  ink-secondary: "#5c5c5c"
  ink-muted: "#8a8a8a"

  # Accent — signal yellow, used sparingly for emphasis/hover
  primary: "#0a0a0a"        # primary action = black on white (studio default CTA)
  accent: "#e8ff48"         # signal yellow highlight
  accent-ink: "#0a0a0a"     # text on the yellow accent

  # Hairline borders + dividers
  border: "#e6e6e3"
  border-strong: "#0a0a0a"

  # On-color
  on-primary: "#ffffff"
  on-accent: "#0a0a0a"

  # Neutral scale
  gray-900: "#0a0a0a"
  gray-600: "#5c5c5c"
  gray-400: "#8a8a8a"
  gray-200: "#d6d6d2"
  gray-100: "#e6e6e3"
  gray-50: "#f5f5f3"

typography:
  display-hero:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -2.4px
  display:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.2px
  card-title:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.6px
  body-large:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.2px
  body:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  label:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.4px
  eyebrow:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.2px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  link-arrow:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
  eyebrow-tag:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
  accent-highlight:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 2px 6px
  card-work:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 32px
    borderColor: "{colors.border}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 24px 40px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderColor: "{colors.border-strong}"
  divider:
    backgroundColor: "{colors.border-strong}"
    height: 1px
---

# Doberman Design System

## Overview

Doberman (now EY Doberman) is a Stockholm-born design and innovation studio, and its website reads like a case-study monograph: a near-pure white canvas (`{colors.background}`) carrying heavy black display type (`{colors.ink}`), with almost nothing else competing for attention. This is editorial minimalism in the Scandinavian tradition — the page is a gallery wall, and the work is the art. Chrome is stripped to type, whitespace, and motion; there are no decorative gradients, no glassmorphism, no busy cards. Structure comes from hairline dividers and generous vertical rhythm.

Typography does almost all of the heavy lifting. Large grotesque headlines (the corpus renders this in Archivo, the closest Google match to the studio's tight neo-grotesque) sit at display sizes with tight negative tracking, giving the page a confident, almost newspaper-masthead authority. Body copy relaxes to a comfortable reading measure. The hierarchy is steep — there is a deliberate cliff between the loud display sizes and the quiet body, with little in between, which is exactly what makes the work feel curated rather than catalogued.

The studio's signature interaction move is the arrow link. Navigation and calls to action are set as plain text followed by an arrow — `→` for internal moves, `↗` for outbound — rather than boxed buttons. This keeps the interface feeling like reading material rather than an app. When a button form is needed, it's a black pill on white, and the one flash of color in the whole system is a signal-yellow accent (`{colors.accent}`) reserved for hover states and the occasional highlighted word.

**Key Characteristics:**
- Near-pure white canvas (`{colors.background}`) with heavy near-black ink (`{colors.ink}`)
- Large grotesque display type with tight negative tracking (-2.4px at hero)
- Arrow-as-link navigation: text + `→` (internal) / `↗` (outbound), not boxed buttons
- Single signal-yellow accent (`{colors.accent}`) reserved for hover and highlights
- Hairline dividers (`{colors.border}`) and full-bleed black rules for structure
- Near-zero radii — work imagery and cards are square-cornered and editorial
- Steep type hierarchy: a deliberate cliff between display and body
- Whitespace as the primary compositional tool

## Colors

### Primary
- **Doberman Ink** (`{colors.ink}`): Headlines, body, nav, the black CTA pill. Near-black, not pure.
- **Paper White** (`{colors.background}`): Page background and card surfaces.
- **Soft Paper** (`{colors.surface-soft}`): Subtle alternate-section tint and quote/feature panels.

### Accent
- **Signal Yellow** (`{colors.accent}`): The studio's one color move — hover fills, highlighted words, emphasis marks. Used sparingly.
- **Accent Ink** (`{colors.accent-ink}`): Black text placed on the yellow accent for contrast.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions, metadata.
- **Ink Muted** (`{colors.ink-muted}`): Timestamps, tertiary labels, disabled text.

### Borders & Neutrals
- **Hairline Border** (`{colors.border}`): Dividers, card edges, table rules.
- **Strong Border** (`{colors.border-strong}`): Full-bleed black section rules and underlined inputs.
- **Gray Scale** (`{colors.gray-600}`–`{colors.gray-50}`): Supporting neutral ramp.

## Typography

### Font Family
- **Primary**: `Archivo`, with fallbacks: `Helvetica Neue, Arial, sans-serif`. A tight neo-grotesque chosen as the closest Google match to the studio's display face.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 72px masthead — the loud opening statement |
| `display` | 56px — major section openers |
| `section-heading` | Feature/section titles |
| `card-title` | Work and case-study titles |
| `body-large` | Lead paragraphs, introductions |
| `body` | Standard reading text |
| `body-small` | Captions, metadata |
| `nav-link` | Navigation and arrow links |
| `label` | Small labels, button text |
| `eyebrow` | Uppercase tracked kicker above headings |

### Principles
- **Loud type, quiet space**: display sizes carry the page; everything else recedes.
- **Tight tracking at scale**: negative letter-spacing tightens headlines into a masthead; body sits at neutral tracking for readability.
- **Steep hierarchy**: a deliberate gap between display and body — little mid-range — keeps the page feeling curated.
- **Two weights do the work**: 400 for reading, 600–700 for announcing.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, but the system favors large jumps — `{spacing.3xl}` (96px) and `{spacing.4xl}` (160px) drive the editorial rhythm between sections.

### Grid & Container
- Wide content container with generous outer margins
- Hero: left-aligned single-column display headline
- Work index: large single- or two-up image cards, square-cornered
- Full-bleed black rules (`{colors.border-strong}`) separate major sections

### Whitespace Philosophy
- **Gallery emptiness**: massive vertical padding between sections; the white space is the composition.
- **Edge-to-edge work**: case-study imagery runs wide; chrome stays minimal so the work dominates.
- **Rhythm over ornament**: separation comes from rules and spacing, never from boxes or shadows.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Work cards, imagery, inputs — the editorial default |
| `xs` | 2px | Tiny inline marks |
| `sm` | 4px | Small functional elements |
| `md` | 8px | Soft feature panels |
| `pill` | 9999px | CTA buttons, eyebrow tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card-work}`).

### Buttons & Links
- **`button-primary`** — black pill, white text; on hover the fill flips to signal yellow with black text.
- **`button-secondary`** — white pill with a strong black 1px border.
- **`link-arrow`** — the signature: plain ink text trailed by `→` (internal) or `↗` (outbound), no box.

### Tags & Highlights
- **`eyebrow-tag`** — soft-paper pill with tracked uppercase label.
- **`accent-highlight`** — square signal-yellow swatch behind a highlighted word.

### Cards
- **`card-work`** — square-cornered work tile: image plus title, hairline edge, no shadow.
- **`card-soft`** — soft-paper feature panel with a small 8px radius for quotes/stats.

### Navigation & Inputs
- **`nav-bar`** — white sticky header, ink links, hairline bottom border.
- **`input`** — underlined-only field (no box), strong black baseline, square corners.
- **`divider`** — 1px full-bleed black rule structuring the page.

## Do's and Don'ts

### Do
- Let large grotesque type and whitespace carry the page
- Use arrow links (`→` / `↗`) instead of boxed buttons for navigation
- Keep the accent to signal-yellow hovers and highlights only
- Use hairline and full-bleed black rules for structure
- Keep work imagery square-cornered and edge-to-edge

### Don't
- Don't introduce gradients, shadows, or glass effects
- Don't add a second accent color — yellow is the only one
- Don't round work imagery or cards heavily — the system is square
- Don't crowd sections; the white space is the design
- Don't put yellow behind large text blocks — it's an accent, not a surface

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display scales down, nav → menu |
| Tablet | 600–1024px | Two-up work cards begin, padding expands |
| Desktop | 1024–1440px | Full editorial layout, wide margins |
| Large | >1440px | Centered, maximum margins, hero at full scale |

### Collapsing Strategy
- Hero: 72px → scales down while keeping negative tracking proportional
- Navigation: horizontal arrow links → hamburger menu overlay
- Work index: two-up → single column
- Section spacing: 160px → ~64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper White `{colors.background}`
- Heading + body text: Doberman Ink `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Accent (hover/highlight only): Signal Yellow `{colors.accent}`
- Dividers: `{colors.border}` (hairline) / `{colors.border-strong}` (full black rule)

### Example Component Prompts
- "Create a left-aligned hero: 72px Archivo weight 700, line-height 1.02, letter-spacing -2.4px, color `{colors.ink}` on white. Below it a 22px weight 400 lead in `{colors.ink-secondary}`, then a plain 'See our work →' arrow link."
- "Build a black pill CTA: `{colors.ink}` background, white text, 9999px radius, 14px 28px padding. On hover flip to `{colors.accent}` fill with black text."
- "Design a work card: square corners (0px radius), full-width image, 28px weight 600 title beneath, hairline `{colors.border}` separating items. No shadow."
- "Add an uppercase eyebrow tag: soft-paper `{colors.surface-soft}` pill, 12px weight 600, letter-spacing 1.2px, `{colors.ink-secondary}` text."

### Iteration Guide
1. Type and whitespace first — if it looks busy, remove, don't add
2. Two weights: 400 to read, 600–700 to announce
3. Arrow links over boxed buttons for navigation
4. Yellow is a spark, never a surface — hovers and single highlighted words only
5. Square corners everywhere except pill CTAs and tags

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Doberman. Brand names and trademarks belong to their respective owners.