---
version: alpha
name: Ticket Stub
description: Mauve-grey stock with a perforated tear line down every card and one validation green.
meta:
  id: "theme-ticket-stub"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T23:26:31+09:00"
  updatedAt: "2026-09-01T23:26:31+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Torn along the dotted line.
  bestFor: Ticketing and check-in, boarding and travel, order confirmations, coupons, event entry
  avoidFor: Editorial reading, analytics, anything with dense tabular data
  defaultMode: light
  surfaceStyle: outline
  accentUse: fill
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: none
  motion:
    intensity: 2
    duration: 260ms
    ease: "cubic-bezier(0.2, 0.8, 0.2, 1)"
    signature: "A validated stub separates at the perforation and the two halves part by 6px."
  displayFont: Khand
  displayKind: sans
  bodyFont: Asap
  monoFont: Overpass Mono
colors:
  background: "#E2DDED"
  foreground: "#100D11"
  card: "#D8CDF2"
  card-foreground: "#100D11"
  popover: "#D8CDF2"
  popover-foreground: "#100D11"
  primary: "#009141"
  primary-foreground: "#0F0A18"
  secondary: "#CCBCEE"
  secondary-foreground: "#100D11"
  muted: "#CCBCEE"
  muted-foreground: "#524F54"
  accent: "#00823A"
  accent-foreground: "#FBF9FF"
  destructive: "#B6322D"
  destructive-foreground: "#FBF9FF"
  border: "#C0B2DE"
  input: "#C0B2DE"
  ring: "#009141"
  chart-1: "#118D42"
  chart-2: "#008DA0"
  chart-3: "#625EC1"
  chart-4: "#C8598A"
  chart-5: "#885E00"
colorsDark:
  background: "#1B1625"
  foreground: "#EEE5F3"
  card: "#261F32"
  card-foreground: "#EEE5F3"
  popover: "#261F32"
  popover-foreground: "#EEE5F3"
  primary: "#35B65F"
  primary-foreground: "#0F0A18"
  secondary: "#332A44"
  secondary-foreground: "#EEE5F3"
  muted: "#332A44"
  muted-foreground: "#9D94A4"
  accent: "#48D072"
  accent-foreground: "#0F0A18"
  destructive: "#F1695E"
  destructive-foreground: "#0F0A18"
  border: "#413A52"
  input: "#413A52"
  ring: "#35B65F"
  chart-1: "#4BB76A"
  chart-2: "#00A6BD"
  chart-3: "#9999FF"
  chart-4: "#D06090"
  chart-5: "#E09F1A"
typography:
  display-lg:
    fontFamily: Khand
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Khand
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.1
  headline-md:
    fontFamily: Khand
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.24
  body-lg:
    fontFamily: Asap
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.58
  body-md:
    fontFamily: Asap
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.54
  body-sm:
    fontFamily: Asap
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.44
  label-caps:
    fontFamily: Asap
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.2em
  label-mono:
    fontFamily: Overpass Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0.04em
  numeral-xl:
    fontFamily: Overpass Mono
    fontSize: 42px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.02em
rounded:
  none: 0px
  sm: 2px
  md: 3px
  lg: 4px
  xl: 4px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 46px
  gutter: 20px
  margin: 28px
  measure: 58ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.sm}"
    padding: 13px
  card-stub:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 18px
  code-block:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.foreground}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.sm}"
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Ticket Stub

## Overview

Ticket Stub is organised around one physical idea: a card that tears in two. The
signature component is a stub — a bordered panel with a dashed perforation line
across it and a semicircular notch bitten out of each edge where the line meets
the border. The large half carries the human-readable detail; the small half
carries the code.

That gives the system something most interfaces lack, which is an obvious place
to put machine data. Codes, barcodes, seat numbers and gate references all live
on the short side of the perforation, so a person never has to read past them.

The neutrals are unusually tinted — mauve-grey rather than grey — which is what
keeps a page full of dashed lines from looking like a wireframe. It is a poor
choice for dense tables and long reading.

## Colors

Mauve-grey stock, and green means valid.

- **Ground:** a mauve-tinted stock. The tint is heavy by this library's
  standards, and deliberately so: unfilled bordered boxes on true grey look
  unfinished.
- **Primary (green):** validation. Scanned, boarded, admitted, confirmed. It is
  the fill on the primary button because in this system the primary action is
  always "let this person through".
- **Accent:** a deeper shade of the same green for the validated *state*, so a
  used stub is unmistakably different from a live one.
- **Neutrals** carry a lot of chroma, especially in the borders.
- Charts are polychrome, because gate and time data are genuinely unrelated
  series.

## Typography

Khand for display, Asap for body, Overpass Mono for every code.

- **Display:** Khand at 64px, weight 600. Tall and narrow — it fits a
  destination or an event name across a stub without shrinking.
- **Body:** Asap at 14.5px, 1.54. Slightly condensed itself, so the body agrees
  with the display rather than fighting it.
- **Codes:** Overpass Mono at 13px with 0.04em tracking — wide-set, because a
  reference someone reads aloud to an agent needs air between characters.
- **Labels:** uppercase at 0.2em, always above the value they label, never
  beside it.

## Layout

A 12-column grid at 1280px with 20px gutters. The signature structure is the
**stub split**: a panel divided at roughly 68/32 by a vertical dashed
perforation, with notches at both ends of the line. On narrow widths the split
becomes horizontal and the perforation runs across instead of down — the
component keeps its identity at every size.

Vertical rhythm is 4px, and stub panels stack with 16px between them.

## Elevation & Depth

Outline. Every surface is a 1px bordered card on the stock; there are no
shadows. Depth is implied by the notch, which reads as a physical bite out of
the edge.

The signature motion is separation: on validation the two halves part by 6px and
the perforation line fades.

## Shapes

Small radii — 2px on controls, 4px on stubs. The notches are true semicircles at
14px diameter, and they are the only circular geometry in the system apart from
avatars.

Photography is used rarely and untreated; when it appears it is a venue or a
vehicle, cropped into the large half of a stub.

## Components

- **Stub:** the signature component. 1px border, dashed perforation, two
  notches, detail on the large half, code on the small half.
- **Code block:** mono on secondary, wide tracking, always inside the short
  half.
- **Validation state:** green fill on the short half, "used" in uppercase, the
  perforation removed.
- **Buttons:** green fill, 2px radius, 13px padding, uppercase label.
- **Inputs:** 1px border, 3px radius, label above in uppercase.

## Do's and Don'ts

- Do put machine-readable data on the short side of the perforation.
- Do keep the notches semicircular and consistent at 14px.
- Do set every code in the mono face with wide tracking.
- Do let the green mean "admitted" and nothing else.
- Don't use the stub for content that has no code.
- Don't put dashed borders on anything that is not a perforation.
- Don't add shadows; the notch is the depth cue.