---
version: alpha
name: Traffic
description: Editorial restraint for a production studio — a near-monochrome canvas, large clean sans-serif headlines, indexed work entries (a, b, c, d), blurred photographic thumbnails, and generous whitespace that lets the work do the talking.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f4f4f2"
  ink: "#111111"
  ink-pure: "#000000"
  ink-secondary: "#5c5c5c"
  ink-muted: "#8a8a8a"

  # Accent — restrained, used sparingly for interaction
  primary: "#111111"
  accent: "#1a1aff"

  # Inverse / dark sections
  inverse-bg: "#111111"
  inverse-ink: "#f4f4f2"

  # Lines + neutrals
  border: "#e4e4e2"
  divider: "#dcdcd9"
  hairline: "#ebebe9"

  # On-color
  on-primary: "#ffffff"
  on-accent: "#ffffff"
  on-inverse: "#f4f4f2"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1.0px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.56px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px
  index-marker:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.2px
  nav-link:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -0.15px

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

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

components:
  # Primary CTA — solid dark
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  # Secondary — outlined
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border}"

  # Work entry — indexed list row
  work-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    padding: 20px 0px
    borderColor: "{colors.divider}"

  # Index marker (a, b, c, d)
  index-marker:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.index-marker}"

  # Thumbnail card — blurred photographic preview
  card-thumbnail:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.none}"
    borderColor: "{colors.hairline}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 32px
    borderColor: "{colors.border}"

  # Inverse / footer section
  footer:
    backgroundColor: "{colors.inverse-bg}"
    textColor: "{colors.on-inverse}"
    typography: "{typography.body-small}"
    padding: 64px 32px

  # Inline text link
  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"

  # Eyebrow / meta label
  meta-label:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
---

# Traffic Design System

## Overview

Traffic is a Berlin- and Hamburg-based production studio, and its website is built like a well-run operation: nothing wasted, everything in its place. The design system is an exercise in editorial restraint. A pure-white canvas (`{colors.background}`) carries near-black text (`{colors.ink}`), and the whole page reads like a printed index of work rather than a marketing site. There is no decoration competing with the photography; the layout steps back so the studio's output can step forward.

The organizing device is the index. Work entries are enumerated like a table of contents (a, b, c, d), each marker set in muted gray (`{colors.ink-muted}`) beside a clean sans-serif title. This indexical structure gives the site a calm, archival rhythm — the visitor scans a list, not a feed. Thumbnails arrive blurred (served through imgix with `blur` parameters), resolving to sharp imagery, which keeps the page feeling soft and quiet on load before the work asserts itself.

Typographically the system leans on a single neutral grotesque sans (Inter as the closest faithful stand-in) across the entire hierarchy, from 64px headlines with tight negative tracking down to 12px captions. There is no serif, no second family, no flourish — the weight ladder (400 for reading, 500 for headings and labels) does all the differentiation. Headlines compress slightly with negative letter-spacing; body copy sits at neutral tracking for readability.

**Key Characteristics:**
- Near-monochrome palette — white canvas, `{colors.ink}` text, gray for secondary and muted roles
- Indexed work entries (a, b, c, d) with muted marker glyphs
- Blurred-to-sharp photographic thumbnails (imgix `blur` parameter)
- Single neutral sans-serif across the whole scale; weights 400 and 500 only
- Tight negative letter-spacing on large headlines, neutral on body
- Hairline dividers (`{colors.divider}`) separating list rows instead of cards
- Generous whitespace; the layout is a frame, not a grid of boxes
- Optional inverse (`{colors.inverse-bg}`) section for the footer

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, work titles. Near-black, never pure.
- **White** (`{colors.background}`): Page background and surfaces.
- **True Black** (`{colors.ink-pure}`): Reserved for high-emphasis edges.

### Text Hierarchy
- **Ink Secondary** (`{colors.ink-secondary}`): Descriptions, supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Index markers, metadata, disabled text.

### Accent
- **Primary** (`{colors.primary}`): Dark CTA fills — the same ink, used as a surface.
- **Accent** (`{colors.accent}`): Electric blue for sparing interaction highlights and hover links.

### Inverse
- **Inverse Bg** (`{colors.inverse-bg}`): Dark footer / contrast sections.
- **Inverse Ink** (`{colors.inverse-ink}`): Off-white text on dark.

### Lines & Neutrals
- **Border** (`{colors.border}`): Nav and button outlines.
- **Divider** (`{colors.divider}`): Row separators in the work index.
- **Hairline** (`{colors.hairline}`): The lightest separation.
- **Surface Soft** (`{colors.surface-soft}`): Thumbnail placeholder fill, subtle blocks.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica Neue, Arial, sans-serif`
- One family across the entire system — no serif companion, no 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` | 64px hero statement |
| `section-heading` | Major section titles |
| `sub-heading` | Sub-sections, large card headings |
| `card-title` | Work entry titles |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Supporting copy |
| `label` | Buttons, nav, emphasized labels |
| `index-marker` | The a/b/c/d work markers |
| `caption` | Metadata, eyebrows |
| `nav-link` | Top navigation links |

### Principles
- **One family, two weights**: 400 reads, 500 announces. Differentiation comes from size and color, not from a second typeface.
- **Compression at scale**: Negative tracking (-1.6px at 64px) tightens headlines; body copy stays neutral.
- **Index over hero**: The type system is tuned for lists and titles, not splashy slogans.

## Layout

### Spacing System
The scale lives in the `spacing:` token block above. Base rhythm is 8px, opening into very large section gaps (`{spacing.4xl}`–`{spacing.5xl}`) so each block of work breathes.

### Grid & Container
- Wide content column with generous side margins
- Work presented as a vertical index of rows separated by `{colors.divider}` hairlines, not a card grid
- Nav pinned top, simple left logo / right links

### Whitespace Philosophy
- **Archival calm**: Big vertical gaps between sections; the page scrolls like a catalogue.
- **Frame, don't fill**: Whitespace surrounds the work rather than chrome boxing it in.
- **Quiet on load**: Blurred thumbnails keep the first paint soft before imagery resolves.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Thumbnails, image blocks (square edges) |
| `xs` | 2px | Minimal softening |
| `sm` | 4px | Small controls |
| `md` | 8px | Inputs, containers |
| `lg` | 12px | Larger surfaces |
| `pill` | 9999px | Buttons, tags |

## Components

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

### Buttons
- **`button-primary`** — Solid `{colors.ink}` fill, white text, pill radius.
- **`button-secondary`** — White surface with a `{colors.border}` outline.

### Work Index
- **`work-row`** — A full-width row: muted index marker + title, separated by a `{colors.divider}` hairline.
- **`index-marker`** — The a/b/c/d glyph in `{colors.ink-muted}`.
- **`card-thumbnail`** — Square-edged photographic preview that loads blurred then sharpens.

### Navigation
- **`nav-bar`** — White, hairline-bottomed, logo left / links right in `{typography.nav-link}`.

### Footer
- **`footer`** — Optional inverse dark block (`{colors.inverse-bg}`) with off-white text.

## Do's and Don'ts

### Do
- Keep the palette near-monochrome; let photography carry the color
- Use the index pattern (a, b, c, d) for listing work
- Separate rows with hairline `{colors.divider}` lines, not boxed cards
- Apply negative letter-spacing to large headlines only
- Use the single sans across the whole hierarchy
- Lean on whitespace for separation

### Don't
- Don't introduce a second font family or a serif
- Don't use weights heavier than 500 except where genuinely needed
- Don't box every work item into a heavy card — the index is a list
- Don't add positive tracking to headlines
- Don't let accent blue become decorative — reserve it for interaction
- Don't crowd the page; the gaps are the design

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked index rows, reduced section gaps |
| Tablet | 600–1024px | Wider margins, larger thumbnails |
| Desktop | 1024–1400px | Full index layout, generous whitespace |
| Large | >1400px | Centered with expansive margins |

### Collapsing Strategy
- Hero: 64px → scales down, keeps proportional negative tracking
- Navigation: inline links → compact menu
- Work index: rows stack; markers stay aligned left
- Section spacing: 160px → reduced on mobile but still generous

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Index markers: Ink Muted `{colors.ink-muted}`
- Row divider: `{colors.divider}`
- Primary CTA: Ink `{colors.primary}`

### Example Component Prompts
- "Create a work index: full-width rows separated by 1px `{colors.divider}` hairlines. Each row has a muted marker (a, b, c…) in `{colors.ink-muted}` at 14px, then a title at 22px Inter weight 500, letter-spacing -0.44px, color `{colors.ink}`."
- "Build a hero: 64px Inter weight 500, line-height 1.05, letter-spacing -1.6px, `{colors.ink}` on white. No second font."
- "Design a pill CTA: `{colors.primary}` background, white text, 9999px radius, 12px 24px padding, 13px Inter weight 500."
- "Create a thumbnail that loads blurred then sharpens (imgix blur parameter), square edges, `{colors.surface-soft}` placeholder."

### Iteration Guide
1. Stay monochrome — color comes from photography, not chrome
2. One family (Inter), two weights (400/500)
3. Use hairline dividers and the index pattern, not boxed cards
4. Negative tracking on large headlines only; neutral on body
5. Reserve accent blue strictly for interactive states

---

## 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 Traffic. Brand names and trademarks belong to their respective owners.