Expressive Type Collage

---
name: expressive-type-collage
description: Apply the Expressive Type Collage visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Expressive Type Collage, mentions anti-AI design, expressive typography, collage editorial, or describes oversized custom letterforms, scribble underlines and arrows, taped-in rotated photos — 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
---

# Expressive Type Collage Design System

The deliberately handmade look: oversized custom-feeling letterforms interrupted by scribbled underlines and arrows, photos taped in at slight angles, mixed illustration styles, and margins full of human marginalia — a visible-hand aesthetic positioned against sterile AI-generated slickness.

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 Expressive Type Collage.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (anti-AI design, expressive typography, collage editorial, mixed-media web, scrapbook editorial, handmade maximal type), or describes its traits: oversized custom letterforms; scribble underlines and arrows; taped-in rotated photos; mixed illustration styles; handwritten marginalia; visible-process artifacts.

## Design tokens

### Color palette

- Warm workbook-paper ground: `#f5efe3` (--color-bg)
- Taped-in photo mounts and cards: `#ffffff` (--color-surface)
- Primary text, ink black: `#17150f` (--color-text)
- Captions and marginalia: `#645d4c` (--color-text-muted)
- Cobalt marker — scribbles, links, annotations: `#2136e0` (--color-accent)
- Red-orange marker for second-pass corrections and stamps: `#d63a17` (--color-accent-2)
- Highlighter yellow swiped behind key phrases: `#ffd23f` (--color-highlight)
- Ink-black frames and rules: `#17150f` (--color-border)

### Typography

- Display / headings: Syne (fallback: Arial Black, sans-serif)
- Body: Instrument Sans (fallback: Helvetica Neue, Arial, sans-serif)
- Mono / data: Space Mono (fallback: Courier New, monospace)
- Type scale: 1.414 ratio, base 16px — computed steps: 16px / 23px / 32px / 45px / 64px / 90px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 800, line-height 0.95, letter-spacing -0.02em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96 — Collage density: headlines huge and tight, annotations crowding their subjects, then sudden empty paper. Rhythm comes from the alternation, like a well-used sketchbook.
- Border radius: none 0px, sm 4px — Squares and near-squares; softness comes from hand-drawn overlays, not CSS corners.
- Border treatment: 2px solid #17150f — Ink-weight frames around photos and cards; some elements instead get a hand-drawn SVG border that wobbles.

### Shadows

- taped: `0 2px 6px rgba(23, 21, 15, 0.18)` — Photos and cards 'taped' onto the page
- lifted: `0 10px 28px rgba(23, 21, 15, 0.16)` — Modals and dragged elements

### Layout

- Max content width: 1280px
- Headline-first compositions: type occupies 40-60% of the viewport, annotations orbit it
- Photos rotated between -4deg and 4deg with visible tape or pin graphics
- Marginalia column: small handwritten-style notes and arrows in the outer margin
- Mix two or three illustration styles per page on purpose — consistency would look machine-made

### Effects

- SVG scribble underlines, circles, and arrows in cobalt and red-orange
- Highlighter-yellow swipes behind key phrases (slightly overflowing the text box)
- Tape and sticker graphics pinning photos to the page
- Rubber-stamp date/edition marks in red-orange
- Slight paper grain on the ground

### Motion

- Easing: cubic-bezier(0.3, 1.2, 0.4, 1); durations 120ms / 260ms / 500ms
- Scribbles draw themselves in (SVG stroke-dashoffset) as sections enter
- Hover nudges taped photos by a degree of rotation
- Keep motion sparse — the page should feel made, not animated

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f5efe3;
  --color-surface: #ffffff;
  --color-text: #17150f;
  --color-text-muted: #645d4c;
  --color-accent: #2136e0;
  --color-accent-2: #d63a17;
  --color-highlight: #ffd23f;
  --color-border: #17150f;
  --radius-none: 0px;
  --radius-sm: 4px;
  --shadow-taped: 0 2px 6px rgba(23, 21, 15, 0.18);
  --shadow-lifted: 0 10px 28px rgba(23, 21, 15, 0.16);
  --border-default: 2px solid #17150f;
  --font-display: Syne, "Arial Black", sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 0.95;
  --leading-body: 1.6;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.3, 1.2, 0.4, 1);
  --duration-fast: 120ms;
  --duration-base: 260ms;
  --duration-slow: 500ms;
}
```

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

## Component recipes

- **Nav:** Hand-adjacent: wordmark in heavy Syne, links in Instrument Sans with scribble underline on hover, a stamp-style badge for the CTA
- **Hero:** Massive Syne headline with one word circled in cobalt scribble, a taped rotated photo overlapping the type, mono metadata line below
- **Card:** White mount with 2px ink border, taped shadow, slight rotation, handwritten-style caption in the margin
- **Button (primary):** Ink-black fill, paper-white text, 2px border, scribble ring appears on hover
- **Button (secondary):** Paper fill with 2px ink border; hover adds highlighter-yellow swipe behind the label
- **Form fields:** White fill, 2px ink border, mono placeholder; focus adds a hand-drawn cobalt outline

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 giant display headline defaced with intent: hand-scribbled circles and underlines in cobalt marker, an arrow annotating one word, and a photo taped over the corner at 3 degrees — typography treated as a worked-on surface, not a rendered output. Spend boldness here; keep everything else quiet.

## Do

- Let annotations physically touch and overlap the type they annotate
- Mix illustration styles and rotate imagery — uniformity is the enemy
- Use real SVG scribbles with varying stroke width, not geometric underlines
- Keep body copy clean and legible so the chaos stays in the display layer

## Don't

- Don't fake handwriting for body text — scribbles are accents, paragraphs are typeset
- Don't align every element to the grid; small rotations and overshoots carry the handmade signal
- Don't use gradients, glass, or glow — nothing here should look rendered
- Don't over-animate; a sketchbook doesn't move by itself

## Accessibility notes

- The red-orange marker (#d63a17) is below 4.5:1 on the paper ground — reserve it for large stamps and decorative scribbles, never for links or small text (cobalt #2136e0 passes and handles all interactive color)
- Decorative scribbles and stamps must be aria-hidden so screen readers hear clean prose
- Rotated text blocks should stay within a few degrees to remain readable for low-vision users

## Reference sites

- Pentagram: https://www.pentagram.com
- MSCHF: https://mschf.xyz
- It's Nice That: https://www.itsnicethat.com

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

Install this skill

unzip expressive-type-collage.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → expressive-type-collage.zip