Letterpress / Vintage Print

---
name: letterpress-vintage
description: Apply the Letterpress / Vintage Print visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Letterpress / Vintage Print, mentions letterpress, vintage print, heritage print, or describes debossed text and panels, cream cotton-paper ground, classic old-style serifs — 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
---

# Letterpress / Vintage Print Design System

Classic printcraft rendered digitally: ink pressed into thick cotton paper, cream grounds with dense black ink and one muted spot color, Caslon-style serifs, ornamental rules, and centered playbill hierarchy. Debossed text and inset shadows supply the tactility of the press.

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 Letterpress / Vintage Print.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (letterpress, vintage print, heritage print, debossed print, old-style printshop, apothecary label), or describes its traits: debossed text and panels; cream cotton-paper ground; classic old-style serifs; ornamental rules and flourishes; centered playbill hierarchy; single muted spot color.

## Design tokens

### Color palette

- Thick cream cotton-paper ground: `#f5efe0` (--color-bg)
- Second paper stock for panels and tickets: `#efe7d2` (--color-surface)
- Dense warm ink black: `#23201c` (--color-text)
- Lighter impression for captions and folios: `#6e6656` (--color-text-muted)
- Oxblood spot ink — rules, initials, CTAs: `#7a2e2e` (--color-accent)
- Faded hairline rules and borders: `#8f8672` (--color-line)

### Typography

- Display / headings: Libre Caslon Text (fallback: Georgia, Times New Roman, serif) (ideal: Adobe Caslon Pro, premium — use Libre Caslon Text as the free substitute)
- Body: Libre Baskerville (fallback: Georgia, serif) (ideal: Baskerville, premium — use Libre Baskerville as the free substitute)
- Mono / data: Special Elite (fallback: Courier New, monospace)
- Type scale: 1.25 ratio, base 17px — computed steps: 17px / 21px / 27px / 33px / 42px / 52px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.3, letter-spacing 0.06em, uppercase
- Body: line-height 1.5, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 20, 32, 48, 72, 104 — Classic book margins: generous symmetric whitespace, narrow measure, vertical rhythm marked by ornamental rules between sections like a title page.
- Border radius: none 0px, sm 2px — Square, cut-paper corners; at most 2px softening on buttons. Ticket components may use punched semicircle notches instead of radius.
- Border treatment: 1px solid #8f8672 — Hairline rules, often doubled (thick-thin pairs) as in Victorian job printing; oxblood rules for emphasis. Frames stay inside comfortable margins.

### Shadows

- deboss: `inset 0 1px 1px rgba(0, 0, 0, 0.2)` — Pressed-in panels, wells, and form fields — the letterpress impression
- text-emboss: `0 1px 0 rgba(255, 255, 255, 0.6)` — text-shadow under dark headline ink so glyphs read as pressed into paper
- page-lift: `0 1px 3px rgba(0, 0, 0, 0.12)` — Whole-page or card sheet sitting on the desk; use sparingly

### Layout

- Max content width: 960px
- Centered playbill hierarchy: stacked centered blocks of varying type sizes
- Ornamental dividers (fleurons, thick-thin double rules) between sections
- Narrow reading measure (60–70ch) with wide symmetric margins
- Small caps and letterspaced uppercase for subheads and folios

### Effects

- Paper grain texture overlay at 3–5% opacity across the background
- Fleuron/ornament glyphs (❦ and SVG flourishes) as dividers
- Slightly uneven ink: 0.5px text-shadow blur on large display type to soften edges
- Ticket edges: punched-notch and perforation-dash treatments on coupon components

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 150ms / 280ms / 500ms
- Quiet fades only; a printed page does not animate
- Buttons deepen their deboss on press (inset shadow strengthens)
- No parallax, no sliding entrances — content is simply there, like ink

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f5efe0;
  --color-surface: #efe7d2;
  --color-text: #23201c;
  --color-text-muted: #6e6656;
  --color-accent: #7a2e2e;
  --color-line: #8f8672;
  --radius-none: 0px;
  --radius-sm: 2px;
  --shadow-deboss: inset 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-text-emboss: 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-page-lift: 0 1px 3px rgba(0, 0, 0, 0.12);
  --border-default: 1px solid #8f8672;
  --font-display: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-body: "Libre Baskerville", Georgia, serif;
  --font-mono: "Special Elite", "Courier New", monospace;
  --text-base: 17px;
  --leading-heading: 1.3;
  --leading-body: 1.5;
  --tracking-heading: 0.06em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 500ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@400;700&family=Libre+Baskerville:wght@400;700&family=Special+Elite:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Cream bar with a thick-thin double rule beneath; centered wordmark in Libre Caslon small caps; links letterspaced uppercase, oxblood on hover
- **Hero:** Centered stack: letterspaced uppercase kicker, large debossed Caslon headline, ornamental fleuron divider, supporting line in Baskerville italic, oxblood CTA
- **Card:** Surface paper panel, 1px hairline frame with a second inner rule, deboss inset shadow, centered uppercase title, 24–32px padding
- **Button (primary):** Oxblood fill, cream letterspaced uppercase label, 2px radius, subtle inset top edge; press deepens the deboss
- **Button (secondary):** Paper fill, 1px ink border, ink letterspaced label; hover adds the deboss inset
- **Form fields:** Pressed-in well: surface tone, deboss inset shadow, 1px hairline border, ink text; focus swaps border to oxblood

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

Debossed typography — headline ink that appears pressed into the paper via a light-catch text-shadow (0 1px 0 rgba(255,255,255,0.6)) and panels with a soft inset impression shadow. Spend boldness here; keep everything else quiet.

## Do

- Press ink into paper: pair dark text with the subtle white text-emboss and use inset shadows on wells
- Keep one muted spot color against cream and ink black
- Center the hierarchy and mark rhythm with ornamental rules
- Use real small caps and old-style figures where the faces provide them

## Don't

- No pure white (#ffffff) backgrounds or pure black text — everything is warmed paper and ink
- No drop shadows floating cards in space; depth is pressed in, not lifted up
- Don't mix in geometric sans or modern grotesques for content type
- Don't overload ornament — Victorian excess buries the type it should frame

## Accessibility notes

- Ink (#23201c) on cream is about 13:1 and oxblood (#7a2e2e) about 8:1 — both comfortably pass; keep text-muted (#6e6656) for 18px+ or non-essential folios only
- The white emboss text-shadow must stay at 1px offset; heavier values halo the glyphs and reduce legibility
- Letterspaced uppercase subheads should be short; apply via text-transform and letter-spacing so screen readers receive normal words
- Paper grain overlays must remain under 5% opacity behind text

## Reference sites

- Hamilton Wood Type & Printing Museum: https://woodtype.org
- Letterpress Commons: https://letterpresscommons.com
- St Bride Library (print history): https://www.sbf.org.uk

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

Install this skill

unzip letterpress-vintage.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/letterpress-vintage.json

Settings → Capabilities → Skills → Upload skill → letterpress-vintage.zip