---
version: alpha
name: Studio Herrström
description: Editorial near-monochrome for a culture-and-tech brand studio — bold grotesque sans set tight at billboard scale, black ink on a warm off-white canvas, all-caps verb statements (IMMERSE, CREATE, IMPACT), and a single restrained accent. Whitespace and giant type do the work; chrome is square-cornered and quiet.

colors:
  # Canvas + ink
  background: "#f6f4f0"
  surface: "#ffffff"
  surface-soft: "#ecece6"
  ink: "#0a0a0a"
  ink-secondary: "#5c5a55"
  ink-muted: "#8c8a84"

  # Single accent (warm signal)
  primary: "#e8442a"
  on-primary: "#ffffff"

  # Lines + neutrals
  border: "#dcd9d3"
  border-strong: "#0a0a0a"
  gray-100: "#e6e3dd"
  gray-50: "#f0eee9"

  # On-color
  on-ink: "#f6f4f0"

typography:
  display-hero:
    fontFamily: "Archivo, Arial Narrow, Arial, sans-serif"
    fontSize: 88px
    fontWeight: 800
    lineHeight: 0.94
    letterSpacing: -3.5px
  display:
    fontFamily: "Archivo, Arial Narrow, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 800
    lineHeight: 0.98
    letterSpacing: -2.4px
  section-heading:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.4px
  card-title:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.6px
  eyebrow:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.5px
  body-large:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.2px
  body:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.4px
  caption:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.5px

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

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

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

  link-arrow:
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"

  eyebrow-label:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"

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

  card-step:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.border}"

  case-tile:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

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

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

# Studio Herrström Design System

## Overview

Studio Herrström is a creative brand studio working at the intersection of music, tech, and culture, and its website reads like a piece of editorial design rather than a SaaS marketing page. The canvas is a warm off-white (`{colors.background}`) — paper, not pixel-white — and the ink is a near-black (`{colors.ink}`) that lands with the weight of printed type. There is almost no chrome. The interface gets out of the way so that oversized typographic statements and full-bleed case-study imagery can carry the whole experience.

The defining move is scale. Single-word verb statements — IMMERSE, CREATE, IMPACT — are set in a bold grotesque sans at billboard size (`{typography.display-hero}`, 88px, weight 800) with aggressive negative tracking and sub-1.0 line-height, so the words stack into dense black masses. This is type as image. Against the quiet warm paper and generous whitespace, a single headline can own an entire viewport. Supporting copy drops to a calm, readable 17px body, and small uppercase eyebrow labels (`{typography.eyebrow}`) with positive letter-spacing tag each section like a magazine kicker.

Color is deliberately scarce. The system is functionally monochrome — off-white, near-black, and a few warm grays for secondary text and hairline borders. A single warm accent (`{colors.primary}`, a signal red-orange) appears sparingly: a hover state, an arrow link, a highlighted word. Restraint is the brand. Corners are square (`{rounded.none}` is the default for buttons, cards, inputs, and image tiles), reinforcing the print-poster, grid-driven character. Numbered process steps and arrow links (↗) handle navigation cues without decorative weight.

**Key Characteristics:**
- Warm off-white paper canvas (`{colors.background}`) with near-black ink (`{colors.ink}`) — editorial, not clinical
- Bold grotesque sans (Archivo-class) set huge with negative tracking and sub-1.0 line-height — type as image
- All-caps single-word verb statements (IMMERSE, CREATE, IMPACT) at billboard scale
- Uppercase eyebrow kickers with positive letter-spacing tagging each section
- Functionally monochrome palette; one warm accent (`{colors.primary}`) used sparingly
- Square corners throughout (`{rounded.none}`) — print-poster, grid-driven feel
- Arrow (↗) link affordances and numbered process steps over decorative chrome
- Whitespace and giant type do the heavy lifting; borders are quiet hairlines

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The warm off-white page canvas. The brand's base.
- **Surface** (`{colors.surface}`): Pure white for raised cards and image tiles that need to lift off the paper.
- **Ink** (`{colors.ink}`): Near-black for headlines, body, and primary chrome.
- **Ink Secondary** (`{colors.ink-secondary}`): Warm gray for supporting copy and eyebrow labels.
- **Ink Muted** (`{colors.ink-muted}`): Lightest warm gray for captions and metadata.

### Accent
- **Signal** (`{colors.primary}`): Warm red-orange. The sole accent — hover states, highlighted words, arrow links. Used sparingly.
- **On Primary** (`{colors.on-primary}`): White text on the accent.

### Lines & Neutrals
- **Border** (`{colors.border}`): Warm hairline for card and tile separation.
- **Border Strong** (`{colors.border-strong}`): Near-black outline for ghost buttons and inputs.
- **Gray 100 / Gray 50** (`{colors.gray-100}` / `{colors.gray-50}`): Subtle surface tints and dividers.

## Typography

### Font Family
- **Primary**: `Archivo` (a tight grotesque sans with a strong condensed character at heavy weights), with fallbacks `Arial Narrow, Arial, sans-serif`.

### 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` | 88px verb statements — billboard impact |
| `display` | 64px large headlines |
| `section-heading` | Section titles |
| `card-title` | Case-study and step card titles |
| `eyebrow` | Uppercase section kickers, tracked positive |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Secondary UI text |
| `button-ui` | Buttons, arrow links |
| `caption` | Metadata, tags |

### Principles
- **Type as image**: At display sizes the type goes huge (88px), heavy (800), tightly tracked (-3.5px), and sub-1.0 line-height so words read as graphic masses.
- **Kicker discipline**: Eyebrows are the one place tracking goes positive (+1.5px) and caps come on — magazine-style section tags.
- **Calm body**: Below headline scale, type relaxes to a comfortable 17px / 1.55 for genuine readability.
- **Two registers, strict roles**: Heavy (700–800) for announcing, regular (400) for reading. The contrast between them is the whole system.

## Layout

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

### Grid & Container
- Max content width approximately 1280px
- Hero: oversized single-word statements, often left-aligned and full-bleed
- Process: numbered three-step cards in a row
- Work: grid of case-study image tiles with "Load More" expansion

### Whitespace Philosophy
- **Editorial breathing room**: Massive vertical padding (`{spacing.3xl}`–`{spacing.4xl}`) between sections; the paper canvas is allowed to dominate.
- **Compressed type, expanded space**: Tight, heavy headlines are counterbalanced by generous surrounding emptiness.
- **Hairline separation**: Where structure is needed, a quiet `{colors.border}` hairline or a square image tile does it — no heavy boxes.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, cards, inputs, image tiles |
| `xs` | 2px | Tiny inline elements |
| `sm` | 4px | Minor containers |
| `md` | 6px | Soft containers (rare) |
| `pill` | 9999px | Small status badges only |

## Components

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

### Buttons
- **`button-primary`** — Solid near-black, white text, square corners. Hover flips to the warm accent (`{colors.primary}`).
- **`button-secondary`** — Paper background with a strong near-black outline, square corners.
- **`link-arrow`** — Text link paired with an ↗ arrow; the studio's primary navigation affordance.

### Cards
- **`card`** — White surface lifting off the paper, square corners, hairline border.
- **`card-step`** — Numbered process step on the paper canvas, large title, hairline border.
- **`case-tile`** — Square-cornered image tile for case studies in the work grid.

### Labels & Badges
- **`eyebrow-label`** — Uppercase tracked kicker tagging each section.
- **`badge`** — The one pill in the system: near-black fill, small caps caption text.

### Inputs
- **`input`** — White field, strong near-black outline, square corners, no fill tint.

### Navigation
- **`nav-bar`** — Quiet paper header, near-black logo and links at 14px weight 600.

## Do's and Don'ts

### Do
- Set hero statements huge, heavy, and tightly tracked — type is the hero image
- Keep the canvas warm off-white (`{colors.background}`), not pure white
- Use uppercase tracked eyebrows to tag sections
- Keep corners square (`{rounded.none}`) on buttons, cards, inputs, tiles
- Reserve the accent (`{colors.primary}`) for hover, highlight, and arrow moments only
- Let whitespace carry the rhythm

### Don't
- Don't introduce a second accent color — the system is monochrome plus one
- Don't round button or card corners — square is the brand
- Don't track headlines positive; positive tracking is for eyebrows only
- Don't fill the page with chrome, boxes, or shadows — hairlines and space instead
- Don't drop below ~15px on body text — readability under the giant type is deliberate
- Don't use pure white as the page canvas — keep the warm paper tone

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Hero type scales down sharply, single column, tighter padding |
| Tablet | 600–1024px | 2-column work grid, process steps may stack |
| Desktop | 1024–1280px | Full layout, billboard hero, 3-up steps |
| Large | >1280px | Centered, generous editorial margins |

### Touch Targets
- Buttons use comfortable 14px vertical padding
- Arrow links carry adequate tap spacing
- Nav links at 14px with generous gaps

### Collapsing Strategy
- Hero: 88px → scales down while keeping negative tracking proportionally
- Process steps: 3-up row → stacked single column
- Work grid: multi-column tiles → single column
- Section spacing: 96px+ → ~48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Page canvas: Warm paper `{colors.background}`
- Heading + body text: Ink `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Accent (sparingly): Signal `{colors.primary}`
- Primary CTA: near-black fill, white text, square corners
- Borders: hairline `{colors.border}` / strong `{colors.border-strong}`

### Example Component Prompts
- "Create a hero on warm off-white `{colors.background}`. Single word IMMERSE at 88px Archivo weight 800, line-height 0.94, letter-spacing -3.5px, color `{colors.ink}`. Small uppercase eyebrow above it at 13px weight 600, letter-spacing 1.5px, color `{colors.ink-secondary}`."
- "Design a square-cornered process card on the paper canvas: big number, 24px Archivo weight 700 title (-0.6px tracking), 17px body in `{colors.ink-secondary}`, hairline `{colors.border}` divider."
- "Build a primary button: near-black `{colors.ink}` fill, white text, 0px radius, 14px 28px padding, 14px Archivo weight 600. Hover flips background to `{colors.primary}`."
- "Create a work grid of square image tiles (`{rounded.none}`) with a hairline `{colors.border}`, each captioned with a small uppercase label and an ↗ arrow link."

### Iteration Guide
1. Bigger and heavier headlines beat more elements — push type scale first
2. Keep corners square everywhere except the one pill badge
3. Monochrome plus one warm accent — never add a second color
4. Eyebrows are the only positive-tracked, all-caps text
5. Warm paper canvas, not pure white — the warmth is the brand

---

## 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 Studio Herrström. Brand names and trademarks belong to their respective owners.