Receipt & Ticket Ephemera

---
name: receipt-ephemera
description: Apply the Receipt & Ticket Ephemera visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Receipt & Ticket Ephemera, mentions receipt ui, thermal print, boarding pass, or describes narrow receipt-width column, monospace and typewriter faces throughout, dashed tear lines and zigzag edges — 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
---

# Receipt & Ticket Ephemera Design System

Interfaces styled as thermal-printed ephemera: a narrow receipt column of faded black mono type on off-white paper, dashed tear rules and zigzag torn edges, dotted leader lines between labels and totals, barcodes and stamps, and boarding-pass blocks with perforated notches. Data presented as if a till just printed it.

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 Receipt & Ticket Ephemera.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (receipt ui, thermal print, boarding pass, ticket stub, point of sale, till roll), or describes its traits: narrow receipt-width column; monospace and typewriter faces throughout; dashed tear lines and zigzag edges; dotted leaders between label and value; barcode and QR motifs; stamped totals and rotated ink stamps.

## Design tokens

### Color palette

- Counter-top neutral behind the paper: `#e9e5da` (--color-bg)
- Receipt paper white with a thermal warmth: `#f7f5ef` (--color-surface)
- Thermal ink — black with a slight fade: `#2b2b28` (--color-text)
- Store metadata, timestamps, and fine print: `#656258` (--color-text-muted)
- Stamp red — PAID/VOID stamps, alerts, and the primary action: `#b3261e` (--color-accent)
- Barcodes, QR blocks, and heavy total rules: `#1a1a18` (--color-barcode)

### Typography

- Display / headings: Special Elite (fallback: Courier New, monospace) (ideal: A genuine dot-matrix/thermal printer face (e.g. Merchant Copy), premium — use Special Elite as the free substitute)
- Body: Courier Prime (fallback: Courier New, monospace)
- Mono / data: Courier Prime (fallback: Courier New, monospace)
- Type scale: 1.2 ratio, base 15px — computed steps: 15px / 18px / 22px / 26px / 31px / 37px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.3, letter-spacing 0.08em, uppercase
- Body: line-height 1.6, letter-spacing 0.02em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48 — Line-printer rhythm: content advances in even line-height steps like paper feeding; sections separated by tear rules rather than large gaps; the column stays narrow and dense.
- Border radius: none 0px — Paper has no rounded corners; the only curves are the zigzag tear and punched notch semicircles on boarding-pass blocks.
- Border treatment: 1px dashed #656258 — Dashed and dotted rules everywhere; solid rules are reserved for totals, doubled (double rule) above the grand total.

### Shadows

- paper: `0 2px 8px rgba(43, 43, 40, 0.18)` — The receipt strip floating just off the counter background
- flat: `none` — Everything printed on the paper itself

### Layout

- Max content width: 720px
- One narrow centered strip (roughly 380-480px) is the primary container; wider layouts use side-by-side stubs
- Label-left, value-right rows joined by dotted leaders, exactly like line items
- Store-header pattern up top: centered uppercase name, address lines, date/time stamp
- Tear rules with zigzag edges divide major sections; the 'stub' below holds actions or codes

### Effects

- Zigzag torn edges via clip-path or triangle backgrounds at strip top/bottom
- Barcode blocks built from irregular vertical bars; QR placeholders as pixel grids
- Rotated (-8deg) stamp outlines in accent red with rough double border
- Dotted leader fills: repeating radial dots between flexed label and value
- Faded-ink treatment: slight opacity variance on characters via text-shadow softening
- Punched circular notches on boarding-pass cards at the perforation line

### Motion

- Easing: steps(8, end); durations 120ms / 400ms / 900ms
- New content prints: revealed top-to-bottom with a stepped clip, like paper feeding out
- Stamps thump in: quick scale-down with a one-frame settle, no bounce
- Everything else is static; hover changes are instant inversions or underlines

## CSS variables (drop-in)

```css
:root {
  --color-bg: #e9e5da;
  --color-surface: #f7f5ef;
  --color-text: #2b2b28;
  --color-text-muted: #656258;
  --color-accent: #b3261e;
  --color-barcode: #1a1a18;
  --radius-none: 0px;
  --shadow-paper: 0 2px 8px rgba(43, 43, 40, 0.18);
  --border-default: 1px dashed #656258;
  --font-display: "Special Elite", "Courier New", monospace;
  --font-body: "Courier Prime", "Courier New", monospace;
  --font-mono: "Courier Prime", "Courier New", monospace;
  --text-base: 15px;
  --leading-heading: 1.3;
  --leading-body: 1.6;
  --tracking-heading: 0.08em;
  --tracking-body: 0.02em;
  --ease: steps(8, end);
  --duration-fast: 120ms;
  --duration-base: 400ms;
  --duration-slow: 900ms;
}
```

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

## Component recipes

- **Nav:** The store header: centered uppercase site name in typewriter caps, address-style tagline lines beneath in muted small mono, a date/time stamp row, then a dashed rule — navigation links printed as a single spaced row of uppercase mono items marked with * around the active one.
- **Hero:** The top of the receipt: big uppercase typewriter headline printed line by line, an order-number row, a dotted-leader summary of what the product 'rings up', and a tear rule leading to the CTA stub.
- **Card:** A line-item block: uppercase item name left, mono value right with dotted leader, muted description line beneath; grouped blocks end with a double solid rule and a bold TOTAL row.
- **Button (primary):** A stamped action: uppercase mono label inside a rough 2px double border in stamp red, slightly rotated (-2deg); press straightens and darkens it — like re-inking a stamp.
- **Button (secondary):** A plain bracketed mono label [ VIEW STUB ] that inverts to black-on-paper block on hover — the zero-ink alternative.
- **Form fields:** An underlined blank on the form: dotted baseline rule with mono input text, uppercase micro-label above; focus turns the dotted rule solid black, like pen committing to paper.

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 tear line: a dashed rule with scissors-cut zigzag page edges, separating content sections exactly like the perforation between a receipt and its stub — often paired with a barcode and a rotated 'PAID' stamp. Spend boldness here; keep everything else quiet.

## Do

- Keep the primary column receipt-narrow and let line-height drive the rhythm
- Use dotted leaders for every label/value pair — they are the style's table language
- Reserve solid and doubled rules for totals so their weight means something
- Add the mundane furniture: timestamps, order numbers, 'thank you' footers — the realism sells it

## Don't

- Don't widen text blocks past the paper conceit; wide mono paragraphs read as a terminal, not a receipt
- Don't print in color beyond the stamp red — thermal paper has one ink
- Don't use real scannable barcodes that encode nothing meaningful, and never imitate a real airline or store's pass
- Don't stack more than one rotated stamp per view

## Accessibility notes

- All text pairs pass AA even on the darker counter ground (ink 9.7:1, muted 4.9:1, stamp red 6.1:1), but faded-ink opacity effects must never drop body text below 4.5:1.
- Small 'fine print' rows are decorative flavor; anything informational must stay at 13px+ mono.
- Uppercase mono at length is tiring — keep paragraphs short and use the leaders to structure data instead of prose.

## Reference sites

- Thermal printing: https://en.wikipedia.org/wiki/Thermal_printing
- Boarding-pass design explorations: https://dribbble.com/tags/boarding-pass
- Receipt design explorations: https://dribbble.com/tags/receipt

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

Install this skill

unzip receipt-ephemera.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/receipt-ephemera.json

Settings → Capabilities → Skills → Upload skill → receipt-ephemera.zip