Big Type / Oversized Typographic

---
name: big-type-typographic
description: Apply the Big Type / Oversized Typographic visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Big Type / Oversized Typographic, mentions oversized typography, type-driven design, huge headlines, or describes 80–160px viewport-filling headlines, 0.95 heading leading, tight negative letter-spacing — 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
---

# Big Type / Oversized Typographic Design System

The headline is the design: 80–160px grotesque type filling the viewport edge to edge, tight negative letter-spacing, 0.95 leading, near-zero chrome, and one electric accent. Everything else — nav, body, imagery — is subordinate furniture.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Big Type / Oversized Typographic.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (oversized typography, type-driven design, huge headlines, kinetic type, typographic hero), or describes its traits: 80–160px viewport-filling headlines; 0.95 heading leading; tight negative letter-spacing; minimal supporting chrome; scale as the only hierarchy; kinetic scroll reveals.

## Design tokens

### Color palette

- White stage for the type: `#ffffff` (--color-bg)
- Near-black display and body ink: `#0a0a0a` (--color-text)
- Small supporting copy and metadata: `#555555` (--color-text-muted)
- Klein blue — one highlighted word, hover fills, selection color: `#002fa7` (--color-accent)
- Occasional full-width hairline rules between sections: `#0a0a0a` (--color-border)

### Typography

- Display / headings: Space Grotesk (fallback: Arial, Helvetica Neue, sans-serif) (ideal: Clash Display, premium — use Space Grotesk as the free substitute)
- Body: Inter (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.6 ratio, base 16px — computed steps: 16px / 26px / 41px / 66px / 105px / 168px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 0.95, letter-spacing -0.04em
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 40, 64, 96, 160 — Chrome is minimal and tight; the type itself consumes the space that other styles spend on padding — sections are separated by scale changes more than by margin.
- Border radius: none 0px — Square everything; rounding would soften the poster energy.
- Border treatment: 1px solid #0a0a0a — Used sparingly as full-width section rules; most separation comes from the type blocks themselves.

### Shadows

- none: `none` — Perfectly flat — depth would compete with the type; hierarchy is scale, weight, and motion

### Layout

- Max content width: 1536px
- Headlines run edge to edge, sized with clamp(48px, 10vw, 160px)
- Body copy confined to narrow columns (~480px) tucked beside or under the type block
- Horizontal-scroll or marquee strips for project lists and tickers
- Footer is another giant type moment — the email address at 80px is a convention of the genre

### Effects

- Viewport-relative type sizing via clamp() and vw units
- Marquee/ticker strips of repeated text
- Hover swaps a word from fill to outline (-webkit-text-stroke) or floods it with Klein blue
- Text masks over video or imagery for one hero moment maximum

### Motion

- Easing: cubic-bezier(0.76, 0, 0.24, 1); durations 200ms / 500ms / 900ms
- Headlines reveal line by line, sliding up from behind clip-path masks
- Letters or words may stagger 20–40ms apart on entrance
- Scroll advances the composition — type scales or shifts, but never parallax soup
- All kinetic effects collapse to simple fades under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-text: #0a0a0a;
  --color-text-muted: #555555;
  --color-accent: #002fa7;
  --color-border: #0a0a0a;
  --radius-none: 0px;
  --border-default: 1px solid #0a0a0a;
  --font-display: "Space Grotesk", Arial, "Helvetica Neue", sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 0.95;
  --leading-body: 1.5;
  --tracking-heading: -0.04em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.76, 0, 0.24, 1);
  --duration-fast: 200ms;
  --duration-base: 500ms;
  --duration-slow: 900ms;
}
```

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

## Component recipes

- **Nav:** Tiny by contrast: 13px uppercase links pinned to the corners of the viewport, no bar, no background — the nav is deliberately dwarfed by the headline
- **Hero:** A 2–4 line manifesto at 10vw filling the first viewport, one word in Klein blue or outlined; a 14px scroll cue is the only other element
- **Card:** A project is a giant type row: 48–80px title with an index number (01, 02), hairline rule below; hover fills the title with accent or reveals a thumbnail following the cursor
- **Button (primary):** Oversized text link — 24–32px with thick underline; on hover the underline floods upward into a full Klein-blue highlight
- **Button (secondary):** 13px uppercase letterspaced text link with 1px underline
- **Form fields:** Giant single-field form: 32–48px bottom-bordered input (Your email →), matching the typographic scale of the page

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

A headline set with clamp() to span the full viewport width at 80–160px, line-height 0.95 and -0.04em tracking, so tightly stacked that the type block reads as a graphic object. Spend boldness here; keep everything else quiet.

## Do

- Size headlines relative to the viewport (vw + clamp) so they always dominate the frame
- Keep tracking tight (-0.03 to -0.05em) and leading at or below 1.0 so the type block reads as one mass
- Give the accent one job per viewport — a single word, underline, or hover fill
- Let small elements be genuinely small; the contrast between 12px chrome and 140px headlines is the aesthetic

## Don't

- Don't shrink headlines to 'reasonable' sizes on desktop — below ~80px the style evaporates
- No decorative imagery competing with the type; photos appear only inside or behind letters, or as cursor-reveals
- Don't animate everything; one kinetic system (line reveals OR marquee OR hover fills) per page
- Never use more than one accent color

## Accessibility notes

- Klein blue #002fa7 on white passes AA for text at all sizes (~10:1); #555555 metadata passes AA (~7.5:1)
- Staggered letter animations must respect prefers-reduced-motion and settle to static text
- Outline-only (text-stroke) treatments have very low effective contrast — reserve them for decorative duplicates of text that also appears solid
- Viewport-scaled type needs a minimum clamp floor so headlines stay legible (and don't overflow) at 320px widths

## Reference sites

- Locomotive: https://locomotive.ca
- basement.studio: https://basement.studio
- Awwwards: https://www.awwwards.com

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

Install this skill

unzip big-type-typographic.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/big-type-typographic.json

Settings → Capabilities → Skills → Upload skill → big-type-typographic.zip