name: wayfare-design
version: alpha
description: >
  Wayfare is a flight-fare search UI styled like a printed boarding pass. A warm
  off-white canvas (#F6F6F4) plays against deep ink-navy panels (#101522), with
  an electric-blue action voltage (#2563FF) and a mint accent (#9BE0C2) signalling
  cheap fares; a coral (#FF5C5C) flags peak prices. The signature moves are
  ticket-stub geometry — circular notches punched into card edges and dashed
  perforation lines — plus tappable boarding-pass cards that flip on the X-axis to
  reveal seat/legroom detail. Type pairs Space Grotesk display, Inter body, and an
  IBM Plex Mono workhorse that carries nearly every label, price, and timetable.
  Geometry is sharp-cornered (radius 0) except for the perfectly round notches.
colors:
  # Brand / Voltage
  voltage-blue: '#2563FF'   # primary action: Search button, logo tile, tracker toggle, selected date outline, now-dot
  mint: '#9BE0C2'           # cheapest-fare accent, low-price calendar tint, sparkline stroke, £0 fee, total due
  coral: '#FF5C5C'          # peak-fare accent, high-price calendar tint, high price label
  # Surface
  canvas: '#F6F6F4'         # page background, light cards, on-ink text
  ink: '#101522'            # sidebar, fare-card front, footer/breakdown/tracker panels, primary text on canvas
  ink-2: '#1b2236'          # fare-card flip-back face
  grid-line: '#2a3247'      # tracker chart gridlines, dashed breakdown dividers
  # Text
  muted-cool: '#5b6478'     # labels/captions on light surfaces
  muted-blue: '#9aa3b8'     # secondary text on ink surfaces, nav links, RT labels
  perforation: '#8a93a8'    # dashed-line segment color
  # Hairlines (alpha on ink)
  hairline-15: 'rgba(16,21,34,.15)'  # section dividers, calendar card border
  hairline-12: 'rgba(16,21,34,.12)'  # calendar cell borders
  hairline-30: 'rgba(16,21,34,.30)'  # Fastest pill border
typography:
  display:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.05
  airport-code:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 12px
    fontWeight: 400
  mono-price:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 24px
    fontWeight: 600
  mono-label:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 1.65px
    textTransform: uppercase
  mono-micro:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 2.5px
    textTransform: uppercase
rounded:
  none: 0px          # all panels, cards, buttons, pills, chips
  notch: 9999px      # ticket-stub punch holes only
spacing:              # base unit 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 40px
components:
  search-button:
    backgroundColor: '{colors.voltage-blue}'
    textColor: '{colors.canvas}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '16px 0'
    letterSpacing: '0.3em'
  fare-card-front:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.canvas}'
    rounded: '{rounded.none}'
    height: '112px'
    notches: 'two .notch-light punch holes at left:80% top/bottom; dashed-v perforation at left:80%'
  fare-card-back:
    backgroundColor: '{colors.ink-2}'
    textColor: '{colors.canvas}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    height: '112px'
    padding: '0 24px'
  notch:
    backgroundColor: '{colors.ink}'      # .notch on light card; .notch-light uses {colors.canvas} on ink card
    rounded: '{rounded.notch}'
    size: '28px'
    shadow: 'inset 0 2px 4px rgba(0,0,0,.55)'
  sort-chip-active:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.canvas}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '6px 12px'
  sort-chip-idle:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    border: '1px solid {colors.hairline-30}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '6px 12px'
  calendar-cell:
    backgroundColor: '#ffffff'           # rgba mint .45 (low) / coral .35 (peak) tints
    border: '1px solid {colors.hairline-12}'
    typography: '{typography.mono-micro}'
    rounded: '{rounded.none}'
    selectedOutline: '2px solid {colors.voltage-blue}'
  tracker-toggle:
    backgroundColor: '{colors.voltage-blue}'   # off state -> {colors.grid-line}
    knobColor: '{colors.canvas}'
    rounded: '{rounded.none}'
    size: '48px x 24px'
motion:
  card-flip: 'rotateX(180deg) over .28s cubic-bezier(.4,0,.2,1); perspective 1600px, preserve-3d, backface-visibility hidden'
  lift: 'translateY(-3px) + box-shadow 0 14px 30px -12px rgba(16,21,34,.55) over .16s ease on hover'
  cal-cell-hover: 'scale(1.12) over .12s ease, raised z-index'
  toggle-knob: 'translateX over .15s'
  stagger-reveal: 'GSAP ScrollTrigger: .fare cards y:24 opacity:0 -> in, duration .4, stagger .07, ease power2.out, start top 85%'
  auto-demo-flip: 'first card auto-flips at 900ms for 1100ms to demonstrate interaction'
icons:
  library: Tabler icons (webfont, ti ti-*)
  style: outline
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.mint}'   # also muted-blue on ink, voltage-blue arrows

Wayfare

wayfare-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Wayfare dresses a flight-fare search as a printed boarding pass. The page splits into a sticky left rail (35%) and a scrolling results column (65%) on a warm off-white canvas (#F6F6F4). Against that, deep ink-navy panels (#101522) form the sidebar, every fare card, and the dark footer blocks — the contrast does the heavy lifting. An electric #2563FF is the single action voltage (Search button, logo tile, alert toggle, the selected calendar date), while mint #9BE0C2 celebrates cheap fares and coral #FF5C5C warns of peak ones. The signature moves are physical-ticket details rendered in CSS: 28px circular notch punch holes bitten out of card edges, dashed perforation lines (background-size:2px 11px) separating segments, and a sawtooth torn-edge SVG above the footer. Boarding-pass fare cards flip on the X-axis (rotateX(180deg)) to reveal seat/legroom/baggage detail. Type is a three-face system: Space Grotesk for display and the oversized airport codes, Inter for body, and IBM Plex Mono — set small, uppercase, and wide-tracked — carrying nearly every label, price, and timetable like dot-matrix print. Corners are universally sharp (radius 0); the only curve in the system is the round notch.

Colors

Brand / voltage. voltage-blue #2563FF is the lone interactive accent: the full-width Search button, the logo tile, the alerts toggle, the now-dot on the tracker chart, and the 2px outline on the selected date (14th). mint #9BE0C2 marks the cheapest fare (label + price), tints low-price calendar cells, draws the sparkline polyline, and colors the £0 Wayfare fee and the total due. coral #FF5C5C is its opposite — peak fare label, peak calendar tint, and the "£540 high" marker.

Surface. canvas #F6F6F4 is the page and all light cards, and doubles as the text/icon color on dark panels. ink #101522 is the dominant dark surface (sidebar, fare-card fronts, tracker, breakdown, footer). ink-2 #1b2236 is the slightly lifted flip-back face of each fare card. grid-line #2a3247 draws the tracker chart gridlines and the dashed dividers in the fare breakdown.

Text. muted-cool #5b6478 is the caption/label color on light surfaces; muted-blue #9aa3b8 is secondary text on ink (nav links, RT labels, flight detail). perforation #8a93a8 is the dashed-line segment color.

Hairlines. Borders are ink at low alpha: rgba(16,21,34,.15) for section dividers and the calendar card border, .12 for calendar cell borders, .30 for the idle "Fastest" sort chip.

Typography

Three Google Fonts loaded via one @import: Space Grotesk (400–700) for display and the giant airport codes, Inter (400–700) for body copy, and IBM Plex Mono (400–600) which dominates — labels, prices, timetables, calendar figures, and the legal footer all sit in mono, mostly uppercase with wide letter-spacing for a printed-ticket feel. All are open-source, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	36px (text-3xl/4xl, text-2xl/xl/lg variants)	700	1.05	tight	"Fares, not friction.", section headings
airport-code	48px (text-5xl)	700	1	normal	LHR / JFK codes
mono-price	24px (text-2xl)	600	—	tabular-nums	fare prices £289
mono-label	11px	400–500	—	0.165em–0.3em	uppercase labels, Search, nav
mono-micro	10px	400	—	0.25em	tiny captions, legend, footer caps
body	12px (Inter)	400	—	—	flight detail subtitles, city names

Layout

Base unit 4px (Tailwind scale). Two-pane shell: a lg:w-[35%] sticky full-height left rail and a lg:w-[65%] scrolling main, stacking to a single column below lg. The rail holds the brand, a headline, and a boarding-pass-styled search card (off-white, notched, with From→To airport codes, a perforation divider, a 2×2 date/pax/class grid, and the blue Search bar). Main is capped at max-width:860px with px-6 sm:px-10 py-8, and contains the results header, a space-y-8 list of fare cards interleaved with a 7-column calendar grid, a price-history tracker, a torn-edge separator, and the fare-breakdown footer. Whitespace is generous and the rhythm is vertical; the composition leans on the ticket-stub motifs rather than ornament.

Elevation & Depth

Mostly flat — depth comes from the dark/light surface contrast and from inset shadows inside the notches (inset 0 2px 4px rgba(0,0,0,.55) / inset 0 2px 5px rgba(0,0,0,.35)) that make the punch holes read as physical. The only outset shadow is the .lift hover state on cards: 0 14px 30px -12px rgba(16,21,34,.55) with a -3px translate. The flip-back uses a lighter ink (#1b2236) for subtle layering. No glass/blur.

Shapes

Sharp everywhere — every panel, card, button, chip, and calendar cell has border-radius:0. The one deliberate exception is rounded-full (9999px) on the 28px notch punch holes, whose roundness is the whole point of the ticket-stub metaphor. Dashed strokes (vertical dashed-v and horizontal dashed-h, background-size 2×11 / 11×2) act as perforations.

Components

• Search button — #2563FF fill, #F6F6F4 text, mono uppercase 0.3em tracking, full-width, py-4, square corners, .lift hover. Label "Search".
• Fare card (front) — #101522 panel, 112px tall, two .notch-light punch holes and a dashed-v perforation at left:80%; left side shows plane icon + mono timetable + Inter detail line, right 20% shows status label + price.
• Fare card (back) — #1b2236, same height, revealed by flip; mono row of seats / legroom / baggage with armchair, ruler, luggage icons + "tap to flip".
• Sort chips — active "Cheapest" = #101522 fill / #F6F6F4 text; idle "Fastest" = transparent with rgba(16,21,34,.30) border; mono uppercase, px-3 py-1.5, square.
• Calendar cell — white default, mint rgba(155,224,194,.45) for low fares, coral rgba(255,92,92,.35) for peak, .12 ink border, square aspect; selected date gets a 2px solid #2563FF inset outline. Mono price + body day number.
• Notch — 28px round; .notch is ink (on light card), .notch-light is canvas (on ink card); inset shadow sells the hole.
• Tracker toggle — 48×24 square, #2563FF on / #2a3247 off, #F6F6F4 square knob sliding 24px over .15s.
• Tracker chart — inline SVG, #2a3247 gridlines, mint 2.5px polyline, blue now-dot.
• Torn-edge separator — full-width sawtooth <polygon> in currentColor (#101522) bridging into the footer.

Motion

• Card flip — rotateX(180deg) over .28s cubic-bezier(.4,0,.2,1) on a preserve-3d inner with perspective:1600px; click toggles .flipped.
• Lift — hover translateY(-3px) + drop shadow over .16s ease.
• Calendar hover — scale(1.12) over .12s with raised z-index.
• Stagger reveal — GSAP ScrollTrigger fades .fare cards in from y:24, duration .4, stagger .07, power2.out, starting at top 85%.
• Auto-demo — the first card auto-flips at 900ms and flips back after 1100ms to telegraph the interaction.
• Toggle knob — translateX transition over .15s.

Iconography

Tabler icons via webfont (ti ti-*), outline style. Used: plane-tilt (logo), arrow-right (route), plane (fare rows), and armchair / ruler-2 / luggage on the flip-back. Sizes run from text-base/text-xl (~16–20px) up to text-2xl (~24px). Color is contextual: mint for the cheapest fare's plane, muted-blue for the rest, voltage-blue for the route arrow. Icons are purely functional, never decorative filler.

Do's and Don'ts

• Do keep corners square — radius 0 is the rule; reserve rounded-full for notch punch holes only.
• Do route prices, labels, timetables, and legal text through IBM Plex Mono, uppercase with wide tracking, to hold the printed-ticket voice.
• Do use #2563FF sparingly as the only action color, and reserve mint/coral strictly for cheap/peak fare semantics.
• Don't add gradients, blur/glass, or soft shadows on cards — depth is the dark/light contrast plus the inset notch shadow and the single .lift.
• Don't let mint or coral creep onto non-price UI; don't drop notches or perforations from the fare cards — they are the brand.

Known Gaps

• Display font-size is recorded as the largest hero value (text-4xl ≈ 36px); the system uses several Space Grotesk sizes (text-3xl/2xl/xl/lg) via Tailwind utilities rather than fixed tokens.
• letterSpacing values are converted from Tailwind tracking (tracking-widest ≈ 0.1em, tracking-[.25em], tracking-[.3em]) to approximate px/em; exact computed values depend on font size.
• Calendar low/peak fills are alpha tints (rgba(155,224,194,.45) / rgba(255,92,92,.35)) of the mint/coral tokens, applied via JS at render time.
• The background sidebar image is a remote Unsplash photo at opacity:.12, grayscale, under an ink gradient overlay — not a token.