New Wave Typography

---
name: new-wave-typography
description: Apply the New Wave Typography visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" New Wave Typography, mentions new wave, swiss punk, weingart style, or describes stair-stepped text blocks, angled and rotated baselines, extreme open letterspacing — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# New Wave Typography Design System

Weingart-school postmodern typography: the Swiss grid learned perfectly and then violated on purpose. Stair-stepped type blocks, baselines tilted off-axis, extreme letterspacing, thick bars and layered rules crossing the composition, mixed weights within single words, and paper white with black plus one printing red. Energy through controlled collision.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as New Wave Typography.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (new wave, swiss punk, weingart style, emigre style, postmodern typography, typografie als kunst), or describes its traits: stair-stepped text blocks; angled and rotated baselines; extreme open letterspacing; thick black bars layered over type; mixed weights inside single words; paper white, black, and printing red.

## Design tokens

### Color palette

- Warm paper white: `#f5f2ea` (--color-bg)
- Pasted-up panels and inset blocks: `#ffffff` (--color-surface)
- Ink black type and bars: `#141414` (--color-text)
- Annotations, folios, and secondary lines: `#55524b` (--color-text-muted)
- Printing red — the second ink; highlights, key words, tilted rules: `#c92318` (--color-accent)
- Occasional third ink for layered offset effects, sparingly: `#1f3f9e` (--color-accent-blue)

### Typography

- Display / headings: Archivo (fallback: Helvetica Neue, Arial, sans-serif) (ideal: Akzidenz-Grotesk / Univers (Weingart's Basel palette), premium — use Archivo as the free substitute)
- Body: Inter (fallback: Helvetica Neue, Arial, sans-serif) (ideal: Helvetica, premium — use Inter as the free substitute)
- Mono / data: Space Mono (fallback: Courier New, monospace)
- Type scale: 1.5 ratio, base 16px — computed steps: 16px / 24px / 36px / 54px / 81px / 122px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 900, line-height 1.1, letter-spacing 0.12em
- Body: line-height 1.55, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96, 144 — Asymmetric: dense collisions of type and rule in one zone, then aggressive emptiness. The grid exists precisely so its violations register — body content still sits on it.
- Border radius: none 0px — Everything is cut, not rounded; this is paste-up and repro camera, not soft UI.
- Border treatment: 1px solid #141414 — Hairlines for structure; expressive rules go 6-24px thick and may run at angles across content.

### Shadows

- none: `none` — Print-flat; overlap is expressed by layering and ink, not shadow
- offset-ink: `3px 3px 0 #c92318` — Occasional misregistered second-ink offset behind display type or blocks

### Layout

- Max content width: 1200px
- Build on a visible Swiss column grid, then break it deliberately: one rotated block, one crossing bar per composition
- Stair-step key headlines down the page as a navigational rhythm
- Let one element bleed off the container edge per section
- Annotations and folios in small mono at unexpected margins

### Effects

- Stair-stepped headline blocks via per-line translate offsets
- Rotated type blocks at 15-45 degrees crossing section boundaries
- Thick bars layered over/under type with mix-blend-mode multiply
- Letterspacing that widens progressively across a repeated word
- Halftone gradient bands (dot-pattern) as texture behind compositions
- Misregistered red offset duplicates of key display words

### Motion

- Easing: cubic-bezier(0.7, 0, 0.2, 1); durations 100ms / 220ms / 400ms
- Elements snap between composed states — jump cuts, not eases, for expressive moves
- Stair-steps can build line by line on first reveal
- Hover shifts a block 2-4px off-grid or swaps ink to red; nothing floats continuously

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f5f2ea;
  --color-surface: #ffffff;
  --color-text: #141414;
  --color-text-muted: #55524b;
  --color-accent: #c92318;
  --color-accent-blue: #1f3f9e;
  --radius-none: 0px;
  --shadow-offset-ink: 3px 3px 0 #c92318;
  --border-default: 1px solid #141414;
  --font-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.55;
  --tracking-heading: 0.12em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --duration-fast: 100ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=Inter:wght@400;700&family=Space+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** A grid-true bar that one element refuses to obey: wordmark set in mixed weights (Ne­wWave with the second half heavier), links in spaced small caps along the baseline, and the active link rotated 8 degrees breaking above the hairline.
- **Hero:** A composition, not a banner: stair-stepped headline descending the grid, a thick red rule slicing diagonally beneath it, a small mono annotation block at an unexpected margin, and one massive letterform cropped by the container edge.
- **Card:** A paste-up block: white panel with a hairline frame, a heading whose letterspacing visibly exceeds its size, one bar element overlapping the frame edge, body text set obediently on the grid to anchor it.
- **Button (primary):** A black bar with white 900-weight label, zero radius; hover shifts it 3px off its grid position and reveals the red offset-ink shadow behind.
- **Button (secondary):** Spaced uppercase label with a thick underline bar only; hover tilts the underline 2 degrees.
- **Form fields:** A field drawn as a baseline: thick 2px black underline, no box, input text at full size; the label sits rotated 90 degrees at the field's left edge in small mono; focus turns the baseline red.

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The stair-step headline: a single phrase broken into blocks that each shift right and down like a staircase, letterspacing widening step by step, with one thick rule slicing diagonally through the composition. Spend boldness here; keep everything else quiet.

## Do

- Master the grid first — body copy stays disciplined so display violations carry meaning
- Limit each composition to one or two violations: a step, a tilt, or a bar
- Use letterspacing as an expressive variable, not a default
- Keep the palette to paper, ink black, and one printing red; add the blue only for layered offsets

## Don't

- Don't rotate body text — only display elements tilt
- Don't confuse this with grunge: edges are razor-sharp, compositions are precise, nothing is distressed
- Don't center anything; tension comes from asymmetry
- Don't stack every effect at once — Weingart's collisions were composed, not chaotic

## Accessibility notes

- Core text passes AA (black 13:1, muted 6.7:1, red 5:1 on paper), but rotated and stair-stepped display text can defeat screen-reader reading order — keep DOM order linear and treat offsets as pure CSS.
- Extreme letterspacing on long strings harms dyslexic readers; cap expressive tracking to short display phrases.
- Bars crossing type must never cross body copy — decorative collisions belong to display layers only.

## Reference sites

- Wolfgang Weingart: https://en.wikipedia.org/wiki/Wolfgang_Weingart
- Emigre magazine and type foundry: https://www.emigre.com/
- Letterform Archive (Weingart holdings and exhibitions): https://letterformarchive.org/
- April Greiman: https://en.wikipedia.org/wiki/April_Greiman

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip new-wave-typography.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/new-wave-typography.json

Settings → Capabilities → Skills → Upload skill → new-wave-typography.zip