---
version: alpha
name: Analogue
description: Editorial minimalism for a design-led agency — near-black ink on warm off-white paper, oversized serif-tinged display headlines paired with a clean grotesque, generous whitespace, hairline rules, and almost no decoration. Emotion carried by type and space, not color.

colors:
  # Canvas + ink
  background: "#f4f2ee"
  surface: "#ffffff"
  surface-soft: "#eceae5"
  ink: "#141414"
  ink-pure: "#000000"

  # Secondary text
  ink-secondary: "#5c5a55"
  ink-muted: "#8a8780"

  # Accent — restrained, single warm move
  primary: "#141414"        # primary action = ink itself (monochrome system)
  accent: "#c8461e"         # warm terracotta — rare editorial highlight

  # On-color
  on-primary: "#f4f2ee"
  on-ink: "#f4f2ee"
  on-accent: "#ffffff"

  # Neutral scale
  neutral-900: "#141414"
  neutral-700: "#3b3a36"
  neutral-500: "#5c5a55"
  neutral-400: "#8a8780"
  neutral-200: "#d9d6cf"
  neutral-100: "#eceae5"

  # Hairlines + dividers
  border: "#d9d6cf"
  border-strong: "#141414"

typography:
  display-hero:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -2.4px
  display:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -1.0px
  card-title:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  label-mono:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 1.5px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

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
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  card-work:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderColor: "{colors.border-strong}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 24px 40px

  divider:
    backgroundColor: "{colors.border}"
    height: 1px
    width: 100%
---

# Analogue Design System

## Overview

Analogue is a design-led agency that builds identity systems and digital experiences for product brands like Vitra, Polaroid, and Leica — and its own site reads like an editorial spread rather than a marketing page. The canvas is a warm off-white paper tone (`{colors.background}`) rather than clinical white, lending everything a printed, tactile quality. Against it, near-black ink (`{colors.ink}`) does almost all the work. There is no color system in the conventional sense; emotion is carried by type, scale, and the enormous amount of breathing room around each element.

The typographic contrast is the whole personality. Oversized display headlines lean on a high-contrast serif (`{typography.display-hero}`, here mapped to Fraunces) set at 56–80px with tight negative tracking, evoking the masthead of a design magazine. Everything functional — body copy, navigation, labels, buttons — drops to a clean neutral grotesque (Inter), keeping the interface quiet so the headlines and imagery can speak. This serif-display / sans-body pairing is the signature editorial move.

Decoration is nearly absent. Dividers are hairline rules (`{colors.border}`), corners are mostly square or barely rounded, and shadows are avoided entirely — depth comes from whitespace and the contrast between the paper background and pure-white work cards (`{colors.surface}`). A single warm terracotta (`{colors.accent}`) appears rarely, as a hover state or an underline, never as a flood of brand color.

**Key Characteristics:**
- Warm off-white paper canvas (`{colors.background}`) instead of pure white — printed, tactile feel
- High-contrast serif display (`{typography.display-hero}`) at 56–80px with tight negative tracking
- Clean grotesque (Inter) for all functional text — quiet, neutral, legible
- Monochrome by default: near-black ink does the work, color is rare
- A single warm terracotta accent (`{colors.accent}`) for hover/highlight only
- Hairline rules and square-to-barely-rounded corners; no shadows
- Massive whitespace as the primary compositional tool
- Pill buttons in pure ink for the few calls to action

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, ink-filled buttons. Near-black, slightly warm.
- **Paper** (`{colors.background}`): Page canvas — a warm off-white, not white.
- **Surface White** (`{colors.surface}`): Work cards and panels that lift off the paper canvas.

### Secondary Text
- **Ink Secondary** (`{colors.ink-secondary}`): Body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled states.

### Accent
- **Terracotta** (`{colors.accent}`): Rare warm highlight — hover states, an underline, a single emphasized word. Never a flood.

### Neutral Scale
- **Neutral 900** (`{colors.neutral-900}`): Equivalent to ink — strongest text.
- **Neutral 700** (`{colors.neutral-700}`): Strong secondary text.
- **Neutral 500** (`{colors.neutral-500}`): Standard secondary text.
- **Neutral 400** (`{colors.neutral-400}`): Muted captions.
- **Neutral 200** (`{colors.neutral-200}`): Hairline borders, dividers.
- **Neutral 100** (`{colors.neutral-100}`): Soft surface tint for alternate sections.

### Borders
- **Border** (`{colors.border}`): Hairline rules and card outlines.
- **Border Strong** (`{colors.border-strong}`): Full-ink underlines on inputs and outlined buttons.

## Typography

### Font Family
- **Display**: `Fraunces`, with fallbacks: `Georgia, serif` — high-contrast serif for headlines.
- **Text/UI**: `Inter`, with fallbacks: `Helvetica, Arial, sans-serif` — neutral grotesque for everything functional.

### 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` | 80px serif hero — masthead-scale impact |
| `display` | 56px serif — major section openers |
| `section-heading` | 40px serif — section titles |
| `card-title` | 24px Inter — work/card headings |
| `body-large` | 20px Inter — lead paragraphs |
| `body` | 17px Inter — standard reading text |
| `body-small` | 15px Inter — secondary copy |
| `button-ui` | 15px Inter — buttons, nav links |
| `label-mono` | 12px Inter, wide tracking — eyebrow labels, badges |
| `caption` | 13px Inter — metadata, credits |

### Principles
- **Serif vs sans contrast IS the identity**: serif only at display sizes, sans for everything functional. Never mix them within one role.
- **Tight tracking on display**: negative letter-spacing (-1.0px to -2.4px) gives headlines an editorial, confident set.
- **Wide tracking on labels**: small eyebrow labels open up to +1.5px tracking for an editorial caption feel.
- **Quiet body, loud headline**: body weights stay at 400; emphasis comes from scale, not bold.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with editorial-scale jumps to `{spacing.3xl}` (96px) and `{spacing.4xl}` (160px) for section breathing room.

### Grid & Container
- Max content width: approximately 1280px, generously margined
- Hero: oversized serif headline, single column, enormous top/bottom padding
- Work: large two-column (or single-column) image cards with ample gutters
- Full-width hairline rules separate major sections

### Whitespace Philosophy
- **Space as luxury**: vertical rhythm at `{spacing.3xl}`–`{spacing.4xl}` between sections.
- **Image and type breathe**: work cards sit in their own large whitespace, never crowded.
- **No fills, no shadows**: separation comes from hairline rules and the paper-vs-white contrast.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Card outlines, dividers |
| Surface lift (Level 2) | White card on paper canvas, no shadow | Work cards, panels |
| Focus (Accessibility) | `2px solid {colors.ink}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Shadows are intentionally absent. The system mimics print, where depth is implied by contrast and whitespace rather than drop shadows. A white surface card reads as "raised" purely because it interrupts the warm paper canvas.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Inputs, hairline-underlined fields, sharp editorial edges |
| `xs` | 2px | Subtle softening |
| `sm` | 4px | Small chips |
| `md` | 8px | Minor containers |
| `lg` | 16px | Work cards, image panels |
| `pill` | 9999px | Buttons, badges |

## Components

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

### Buttons
- **`button-primary`** — Pure ink fill, paper-tone text, full pill. Hover shifts to terracotta `{colors.accent}`.
- **`button-secondary`** — Paper background, ink text, ink hairline outline, full pill.

### Pills & Badges
- **`badge`** — Soft surface tint, wide-tracked 12px label text, full pill. Used for eyebrow/category labels.

### Cards
- **`card`** — White surface lifting off the paper canvas, 16px radius, hairline border.
- **`card-work`** — Image-forward work tile, soft tint backing, zero inner padding so imagery runs edge to edge.

### Inputs
- **`input`** — No box: transparent paper background with a full-ink bottom rule (`{rounded.none}`), editorial form styling. Focus thickens/darkens the underline.

### Navigation
- **`nav-bar`** — Paper background, ink links at 15px Inter weight 500, generous 40px horizontal padding. No shadow, optional hairline on scroll.

### Dividers
- **`divider`** — 1px hairline rule in `{colors.border}`, the primary section separator.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`), not pure white, as the page background
- Pair serif display with sans body — that contrast is the brand
- Use tight negative tracking on display headlines (-1.0px to -2.4px)
- Keep color monochrome; let terracotta appear only as a rare hover/highlight
- Separate sections with hairline rules and large whitespace
- Use full-ink pill buttons for the few calls to action
- Let work imagery breathe inside generous gutters

### Don't
- Don't use pure white as the page background — it kills the printed warmth
- Don't flood the UI with the terracotta accent — it's a single highlight, not a brand color
- Don't add drop shadows — depth is contrast and whitespace only
- Don't set body or nav text in the serif — serif is display-only
- Don't crowd work cards; whitespace is the layout
- Don't use bold body weights for emphasis — scale up instead

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display scales to ~40–48px, padding tightens |
| Tablet | 600–1024px | Two-column work grid begins, display ~56px |
| Desktop | 1024–1280px | Full editorial layout, display 56–80px |
| Large Desktop | >1280px | Centered, maximum margins, full whitespace |

### Touch Targets
- Pill buttons use 14px vertical padding for comfortable tap area
- Nav links spaced generously at 15px
- Badges have 14px horizontal padding

### Collapsing Strategy
- Hero: 80px serif → ~40–48px on mobile, tracking relaxes proportionally
- Navigation: horizontal links → minimal menu toggle
- Work grid: two-column → single column, full-width images
- Section spacing: 96–160px → ~64px on mobile

### Image Behavior
- Work imagery runs edge-to-edge inside its card, maintaining aspect ratio
- Hairline borders persist at all sizes
- No image cropping that breaks the editorial composition

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: Paper `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Primary CTA: Ink fill `{colors.ink}`, paper text
- Accent (rare): Terracotta `{colors.accent}`
- Divider: `1px solid {colors.border}`
- Focus ring: `2px solid {colors.ink}`

### Example Component Prompts
- "Create a hero on warm paper background `{colors.background}`. Headline in Fraunces 80px weight 400, line-height 1.00, letter-spacing -2.4px, color `{colors.ink}`. Lead paragraph in Inter 20px weight 400, color `{colors.ink-secondary}`. One ink pill CTA (`{colors.ink}` fill, paper text, 9999px radius, 14px 28px padding)."
- "Design a work card: white surface `{colors.surface}` on the paper canvas, 16px radius, 1px `{colors.border}` outline, no shadow. Edge-to-edge image on top, then a 24px Inter weight 500 title and a 12px wide-tracked label `{colors.ink-secondary}`."
- "Build an editorial input: no box, transparent background, full-ink bottom rule `{colors.border-strong}`, square corners, body text 17px Inter."
- "Create navigation: paper background, Inter 15px weight 500 ink links, 40px horizontal padding, no shadow, optional hairline rule on scroll."

### Iteration Guide
1. Start from the warm paper canvas, never pure white
2. Serif display, sans body — keep the contrast strict
3. Tight negative tracking scales with headline size (-2.4px at 80px → -1.0px at 40px)
4. Color stays monochrome; terracotta is a single accent, used sparingly
5. Separate with hairline rules and whitespace, never shadows
6. Pill buttons in solid ink are the only loud UI element

---

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