Old-paper theatre system

Mood first. Components second.

First, review the old-paper mood and guest journey at full width. Then inspect each component board beside the CVA-driven React variants implemented in code.

Section 01

Mood board wall

Only mood, reference, and guest-journey boards are displayed at full browser width. Component boards are reserved for the two-column implementation matrix below.

Mood board

1. Master Visual System

The full old-paper theatre direction: hero mood, programme cards, dates, forms, ticket summary, palette, typography, ornaments, and material cues.

Master old-paper theatre visual system board

Mood board

2. Pattern And Booking Language

A closer view of repeated paper forms, ticket summaries, booking rhythm, and printed ornamental structure.

Old-paper theatre pattern and booking board

Mood board

3. Mood And Material Direction

Cabaret mystery, antique gold, velvet red, faded illustration, and aged paper material references.

Old-paper theatre mood and material board

Reference board

4. Show Discovery

Browsing shows should feel like scanning a printed theatre programme.

Old-paper theatre show discovery reference board

Reference board

5. Show Detail

Show narrative, pricing, availability, add-ons, venue information, and responsive detail fragments.

Old-paper theatre show detail reference board

Reference board

6. Guest Form

Booking forms treated as readable printed paperwork instead of generic checkout UI.

Old-paper theatre guest form reference board

Reference board

7. Checkout Journey

Payment, confirmation, ticket download, recovery, and secure checkout surfaces.

Old-paper theatre checkout journey reference board

Reference board

8. Post-Booking Support

Email, mobile e-ticket, wallet pass, reminders, support, policies, and upcoming booking surfaces.

Old-paper theatre post-booking support reference board

Experience board

9. Homepage Programme

The first impression as a full theatre programme, not a generic landing-page layout.

Old-paper theatre homepage programme experience board

Experience board

10. Booking Flow

Ticket choice, add-ons, special requests, and order summary in a practical checkout flow.

Old-paper theatre booking flow experience board

Experience board

11. Mobile Guest Journey

Compact responsive booking surfaces that preserve the same old-paper personality.

Old-paper theatre mobile guest journey board

Section 02

Component image to CVA variant

Each row uses two columns: the generated component or section image on the left, and the live coded React variants on the right.

Theatre buttons

Source board

Theatre buttons

Generated board showing theatre button variants and states

Ticket-like action controls with cabaret red ink, aged-paper secondary states, small icon stamps, and active disabled treatments.

primarysecondaryghostlinkicondisabled
<TheatreButton variant="primary">Book now</TheatreButton><TheatreButton variant="secondary">View programme</TheatreButton><TheatreButton variant="icon" aria-label="Open calendar" />

Live coded variants

Theatre buttons

Read notes

Simulated hover

Simulated active

Disabled

Simulated focus-visible

Theatre badges

Source board

Theatre badges

Generated board showing theatre badge and status label variants

Small printed labels for show metadata, status, capacity, and premium notes.

redpaperespressogoldoutlinesold-out
<TheatreBadge variant="red">New Show</TheatreBadge><TheatreBadge variant="gold">VIP</TheatreBadge><TheatreBadge variant="outline">Limited Seats</TheatreBadge>

Live coded variants

Theatre badges

New ShowMatineeEveningVIPLimited Seats
Sold OutVIPNew ShowLimited Seats
Paper cards

Source board

Paper cards

Generated board showing old-paper theatre card variants

Editorial paper cards with distressed frames, stamped corners, and varied ornament density.

plaineditorialhighlightedcompact
<TheatrePaperCard variant="editorial" title="A Night of Wonder" /><TheatrePaperCard variant="highlighted" eyebrow="Tonight" />

Live coded variants

Paper cards

Surface variants

Plain
Matinee Notice
Low-ornament paper surface for operational copy and compact programme notes.
Use this for dense lists, checkout copy, and content that should stay quiet while keeping the old-paper treatment.
Static surface
Editorial
A Night Of Wonder
A higher-density card for show descriptions, quotes, and venue stories.
The frame and corner stamps carry the generated board into reusable HTML instead of flattening it into a single illustration.
Card with stamped edge
Tonight
Velvet Room Premiere
A red-framed variant for emphasis, featured shows, and limited seat notices.
Highlighted cards keep the same structure as the quiet cards, so density changes without a separate layout system.
Priority treatment
Compact
Door Opens 18:30
Small paper ticket information block.
Reduced density

Focusable card state

Focus-visible
Keyboard Ready
The focus ring uses antique gold instead of a browser-blue default.
This specimen simulates the focused clickable treatment while keeping the card content semantic and readable.
tabIndex=0 with focus-visible treatment
Printed dividers

Source board

Printed dividers

Generated board showing theatre divider ornament variants

Reusable printed separators that break sections without clean digital rules.

flourishperforateddottedmask
<TheatreDivider variant="flourish" /><TheatreDivider variant="perforated" />

Live coded variants

Printed dividers

Flourish

Perforated

Dotted

Mask ornament

Form controls

Source board

Form controls

Generated board showing old-paper input, select, and textarea controls

Readable booking controls with paper fills, rough ink borders, non-blue focus, helper text, and validation states.

inputselecttextareafocusinvaliddisabled
<TheatreField label="Guest name"><TheatreInput /></TheatreField><TheatreSelect value="friday" />

Live coded variants

Form controls

Printed on the booking confirmation and welcome list.

Use an active number for showtime and seat updates.

Theatre selects stay paper-toned and use the same gold focus ring.

Helper text can describe booking preferences without crowding the label.

Disabled controls keep the printed-paper treatment but reduce contrast.

Selection controls

Source board

Selection controls

Generated board showing checkbox and radio card theatre variants

Selection controls with stamped checks, selected ticket frames, disabled fading, and clear keyboard focus.

uncheckedcheckedradio-cardselecteddisabled
<TheatreCheckbox checked label="Dinner included" /><TheatreRadioCard value="vip" selected />

Live coded variants

Selection controls

Booking additions

Checkbox states include checked, unchecked, and disabled choices.

Reserve a two-course supper before curtain.

Add one printed programme to the order.

Disabled because passes are sold out for this show.

Seating tier

Radio cards use border, icon, and title weight for selection.

Poster frames

Source board

Poster frames

Generated board showing theatre poster frame variants

Framed show imagery with playbill, portrait, oval, and dark magic treatments.

portraitplaybillovaldark
<TheatrePosterFrame variant="playbill" imageSrc="/theatre/samples/experience/homepage-theatre-programme.png" />

Live coded variants

Poster frames

Poster frame variants

Generated theatre programme homepage used as a portrait poster reference

Portrait

Ornate frame

Generated theatre card board shown inside a playbill poster frame

Playbill

Gold edge

Old paper reference image inside an oval theatre portrait frame

Oval

Portrait mask

Generated poster frame board inside a dark magic frame

Dark

Cabaret night

Ticket cards

Source board

Ticket cards

Generated board showing admission ticket card variants

Perforated admission cards for booking summaries, promos, and compact checkout states.

admissionbookingpromocompactselected
<TheatreTicketCard variant="booking" title="Balcony Table" /><TheatreTicketCard variant="promo" status="Admit Two" />

Live coded variants

Ticket cards

Admit two

Moonlit Cabinet

Admission for two guests

Date
Fri 21 Jun
Seat
Orchestra B12
Price
$84
Perforation and stub layers are decorative assets while the event details remain selectable text.
Stub$84Orchestra B12

Selected

Balcony Table

Dinner seating with programme

Date
Sat 22 Jun
Seat
Balcony 3
Price
$128
Selected state is visible through a gold ring and border, not color alone.
Stub$128Balcony 3

Promo

Admit One

Cabaret preview

Date
Thu 20 Jun
Seat
Standing
Price
$39
Stub$39Standing

Unavailable

Late Show

Compact checkout item

Date
23:00
Seat
Gallery
Price
$52
Stub$52Gallery
Booking flow composition

Source board

Booking flow composition

Generated board showing a theatre booking flow and ticket form

A page-level booking specimen combining form controls, ticket summary, badges, and action buttons.

form-cardticket-summaryvalidationcheckout-density
<ExperienceCompositionSpecimen />

Live coded variants

Booking flow composition

Generated homepage theatre programme composition

Theatre Programme

Opening week

Booking composition
Reserve The Velvet Room
A composed page-level specimen using the Task 3 surface, divider, poster, and ticket primitives.

Date

Friday, 21 June

Venue

Old Quarter Theatre

Experience

Cabaret table and programme

Selected

Balcony Table

Two guests

Date
Fri 21 Jun
Seat
Balcony 3
Price
$128
Ready for checkout
Stub$128Balcony 3
Static export ready
Mobile website composition

Source board

Mobile website composition

Generated board showing responsive mobile theatre website screens

Compact mobile rhythm for poster surfaces, stacked forms, ticket cards, and reduced ornament density.

mobile-stackcompact-actionsreduced-ornament
<ExperienceCompositionSpecimen compact />

Live coded variants

Mobile website composition

Generated homepage theatre programme composition

Theatre Programme

Opening week

Booking composition
Reserve The Velvet Room
A composed page-level specimen using the Task 3 surface, divider, poster, and ticket primitives.

Date

Friday, 21 June

Venue

Old Quarter Theatre

Experience

Cabaret table and programme

Selected

Balcony Table

Two guests

Date
Fri 21 Jun
Seat
Balcony 3
Price
$128
Ready for checkout
Stub$128Balcony 3
Static export ready