---
version: alpha
name: Spring/Summer
description: Editorial agency brutalism — Grotesk display set at billboard scale (up to 12.5rem) with crushed 0.76 line-height and negative tracking, a near-monochrome white/black/grey palette warmed by a single beige and punctuated by an electric chlorine yellow, Montreal grotesque for body and Supply mono for labels.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-warm: "#ece5d4"    # beige — hsl(43 49% 90%)
  ink: "#000000"             # black — hsl(0 0% 0%)
  ink-secondary: "#363636"   # grey — hsl(0 0% 21%)

  # Accent
  primary: "#fff200"         # yellow — hsl(56 100% 50%)
  accent-blue: "#1e90ff"     # dodgerblue, link/selection

  # Inverse (dark sections)
  ink-on-dark: "#ffffff"
  surface-dark: "#000000"

  # On-color
  on-primary: "#000000"      # black text on yellow
  on-ink: "#ffffff"

  # Borders / hairlines
  border: "#000000"
  border-soft: "#e0dccf"     # beige-leaning hairline over warm surface

typography:
  display-hero:
    fontFamily: "Grotesk, Impact, sans-serif"
    fontSize: 200px
    fontWeight: 400
    lineHeight: 0.76
    letterSpacing: -2px
  display-h1:
    fontFamily: "Grotesk, Impact, sans-serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.76
    letterSpacing: -1.2px
  heading-h2:
    fontFamily: "Grotesk, Impact, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  body-xl:
    fontFamily: "Montreal, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: 0.64px
  body-menu:
    fontFamily: "Montreal, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.4px
  body-large:
    fontFamily: "Montreal, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.32px
  body-medium:
    fontFamily: "Montreal, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.28px
  body-small:
    fontFamily: "Montreal, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.36px
  number:
    fontFamily: "Supply, monospace"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -0.48px
  label-mono:
    fontFamily: "Supply, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.11px
  cta-mono:
    fontFamily: "Supply, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0.11px

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

rounded:
  none: 0px
  xs: 2px
  sm: 3px
  md: 4px
  lg: 32px
  pill: 9999px

components:
  # Outlined pill CTA (mono label)
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.cta-mono}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.cta-mono}"
    rounded: "{rounded.pill}"
    padding: 10px 20px

  # Ghost / outlined pill
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.cta-mono}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.cta-mono}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
    borderColor: "{colors.border}"

  # Yellow tag / pill label
  tag:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Mono pill chip (outlined)
  chip:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  # Project / work card — image-led, square corners
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  # Warm beige panel section
  card-warm:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 40px
    borderColor: "{colors.border-soft}"

  # Inverted dark section
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-on-dark}"
    rounded: "{rounded.none}"
    padding: 40px

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.none}"
    padding: 12px 4px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.accent-blue}"

  # Sidebar / top nav
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    padding: 24px
    borderColor: "{colors.border}"

  # Mono numeric label (index/counter)
  counter:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.number}"
---

# Spring/Summer Design System

## Overview

Spring/Summer is a Copenhagen design agency, and its site reads like an editorial poster brought to motion. The defining gesture is scale: the display headline (`{typography.display-hero}`) runs to roughly 12.5rem, set in the custom "Grotesk" face with a crushed 0.76 line-height and faint negative tracking, so words stack into dense typographic walls that fill the viewport edge to edge. This is type as image. Everything else in the system exists to frame that one loud move with calm, near-monochrome surrounding space.

The palette is deliberately spare. The canvas is pure white (`{colors.background}`) with pure-black ink (`{colors.ink}`), softened only by a 21%-grey (`{colors.ink-secondary}`) for secondary copy. Two accents break the monochrome: a warm beige (`{colors.surface-warm}`) used as a full-bleed section wash that signals a tonal shift, and an electric chlorine yellow (`{colors.primary}`) deployed sparingly for tags, highlights, and hover states. Black text on yellow is the only "loud color" pairing the system permits, and it always carries weight precisely because it appears so rarely.

Three typefaces carry three jobs. "Grotesk" is the display voice — billboard headlines only. "Montreal," a neutral grotesque, handles all reading text and menu copy with a touch of positive tracking (around 0.02em) for an airy editorial feel. "Supply," a monospace, does the technical labelling — counters, index numbers, category tags, and CTA text — lending the layout the metadata-driven rhythm of a studio archive. Corners are essentially square throughout (`{rounded.none}`); the only rounding is the full pill (`{rounded.pill}`) on chips and CTAs.

**Key Characteristics:**
- Grotesk display type at extreme scale (up to ~200px) with 0.76 line-height and negative tracking — type as image
- Near-monochrome white/black/grey base, warmed by a single beige section wash
- Electric chlorine yellow (`{colors.primary}`) as the lone loud accent — black-on-yellow tags and hovers
- Three-typeface system: Grotesk (display), Montreal (body, lightly tracked), Supply mono (labels/numbers)
- Square corners everywhere; rounding reserved for pill chips and CTAs
- Monospace metadata rhythm — counters, index numbers, category chips
- Full-bleed sectioning by background swap (white → beige → black) rather than borders

## Colors

### Primary
- **White** (`{colors.background}`): The dominant canvas, card surfaces, button text on dark.
- **Black** (`{colors.ink}`): Display and body text, hairline borders, inverted sections.
- **Grey** (`{colors.ink-secondary}`): Secondary copy, captions, counters — 21% lightness.

### Accent
- **Yellow** (`{colors.primary}`): The signature pop — tags, highlights, CTA hovers. Always paired with black text.
- **Beige** (`{colors.surface-warm}`): Warm full-bleed section wash that signals a tonal/editorial shift.
- **Dodger Blue** (`{colors.accent-blue}`): Link and text-selection color, used minimally.

### Inverse
- **Surface Dark** (`{colors.surface-dark}`): Inverted black sections.
- **Ink on Dark** (`{colors.ink-on-dark}`): White text within dark sections.

### Borders
- **Border** (`{colors.border}`): Pure-black 1px hairlines on inputs, nav, outlined chips.
- **Border Soft** (`{colors.border-soft}`): Beige-leaning hairline over the warm surface.

## Typography

### Font Family
- **Display**: `Grotesk`, fallbacks `Impact, sans-serif` — headlines only.
- **Sans / Body**: `Montreal`, fallback `sans-serif` — all reading and menu text.
- **Mono**: `Supply`, fallback `monospace` — labels, counters, CTA text.
- **CJK**: `Noto` for Chinese language support.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | Billboard hero headline, max compression |
| `display-h1` | Page H1, full-bleed |
| `heading-h2` | Section headings |
| `body-xl` | Lead paragraphs, large statements |
| `body-menu` | Navigation menu items |
| `body-large` | Standard reading text |
| `body-medium` | Default UI / paragraph text |
| `body-small` | Captions, fine print |
| `number` | Index numbers, stats (mono) |
| `label-mono` | Category tags, metadata labels (mono) |
| `cta-mono` | Button / CTA text (mono) |

### Principles
- **Scale is the message**: Grotesk display sizes are deliberately oversized with 0.76 line-height — headlines become typographic architecture, not captions.
- **Negative tracking on display, positive on body**: Display headlines tighten (~-0.01em); Montreal body relaxes (~+0.02em) for editorial air.
- **Mono = metadata**: Supply monospace carries all the index numbers, counters, and category chips that give the layout an archive cadence.
- **Single weight discipline**: Grotesk runs at one weight at huge scale; emphasis comes from size and color, not from boldening.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. The scale jumps generously at the top (`{spacing.3xl}` 96px, `{spacing.4xl}` 160px) to give the oversized headlines room to breathe.

### Grid & Container
- Sidebar-driven layout: a persistent navigation column offset from a fluid content grid (the CSS computes column width from `(100vw - sidebar - margin)/100`).
- Headlines run full-bleed to the content edge — type intentionally collides with the viewport boundary.
- Work/portfolio grids are image-led with square corners and minimal gutters.

### Whitespace Philosophy
- **Loud type, quiet frame**: A single oversized headline is surrounded by deliberate emptiness; nothing competes with it.
- **Section by background swap**: Tonal shifts (white → beige → black) replace dividers — the canvas color is the section marker.
- **Edge tension**: Type is allowed to crowd or exceed the grid margin, creating poster-like cropping.

## Components

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

### Buttons
- **`button-primary`** — Black pill with mono CTA text; on hover it flips to yellow with black text.
- **`button-secondary`** — Outlined white pill; hover inverts to solid black.

### Tags & Chips
- **`tag`** — Yellow pill, black mono label — the signature accent chip.
- **`chip`** — Outlined white pill with mono label, for neutral metadata.

### Cards
- **`card`** — Image-led project card, square corners, zero padding (image to edge).
- **`card-warm`** — Beige full-bleed panel for editorial sections.
- **`card-dark`** — Inverted black section with white text.

### Inputs & Navigation
- **`input`** — Square, single-line, black hairline border; focus shifts the border to dodger blue.
- **`nav-bar`** — Mono-labelled sidebar/top nav with a black hairline.
- **`counter`** — Mono index number in grey, the archive-style numbering motif.

## Do's and Don'ts

### Do
- Set display headlines at extreme scale with 0.76 line-height and slight negative tracking
- Keep the base monochrome — white canvas, black ink, grey secondary
- Reserve yellow (`{colors.primary}`) for tags, highlights, and hover flips, always with black text
- Use the beige wash (`{colors.surface-warm}`) to mark editorial section shifts
- Use Supply mono for all numbers, counters, and category labels
- Keep corners square except for pill chips and CTAs

### Don't
- Don't shrink the hero headline into a polite, safe size — scale is the identity
- Don't add a second loud color alongside yellow
- Don't round card or section corners — squareness is the frame
- Don't set body copy in Grotesk — Montreal carries all reading text
- Don't use yellow as a large background fill or as text on white (fails contrast)
- Don't add drop shadows — depth comes from background swaps, not elevation

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Sidebar collapses to top bar; H1 clamps down to ~2.7rem |
| Tablet | 600–1024px | Two-column work grids, headline scales with viewport |
| Desktop | 1024–1440px | Sidebar + fluid grid, headline at full clamp |
| Large Desktop | >1440px | Headline caps near 12.5rem, generous margins |

### Touch Targets
- Pill CTAs use ~10px vertical padding for comfortable tap area
- Mono labels stay legible at small sizes via tight, consistent letter-spacing
- Menu items at ~20px (`{typography.body-menu}`) for thumb-friendly tapping

### Collapsing Strategy
- Hero headline uses viewport-relative clamps (`clamp(2.7rem, 10.5vw, 12.5rem)`) — scales continuously
- Sidebar navigation → top bar / overlay menu on mobile
- Work grid: multi-column → single column, images full-width
- Beige and dark sections remain full-bleed at every size

---

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