CSO · 2627–0041
Tonight · 7:30 PM
Your evening begins here.
Saturday, October 18
Good evening, Cameron.
Tonight at Music Hall
Doors 6:30
CSO · 2627–0041
Your next action
Ready2026–27 season
Events
October
18Sat
Tonight · 7:30 PM
Music Hall · Springer Auditorium
2 tickets · Orchestra A, row F
24Fri
8:00 PM
Music Hall
Included in your subscription
November
01Sat
7:30 PM
Music Hall
No tickets yet · from $35
CSO · 2627–0041
E
Tonight · 7:30 PM
Măcelaru conducts Enescu
Program
EnescuSymphony No. 3
RavelLa Valse
Tonight’s event
How are you entering?
No signal? Your pass and ticket remain available offline.
Member access
Subscription
CSO®
2026–27
Cameron Koczon
Available offlineUpdated just now
Pass tools
Harmony member
Available now
Membership 1048
Profile
Cameron Koczoncameron@example.com
Member mobile app
Navigation architecture
Every solid node is a screen that exists in this prototype. Shared screens are reached from more than one destination. Roadmap items are drawn apart and dashed — they are not built.
Entry
Destination · bottom nav
Screen in prototype
Shared screen
Roadmap · not built
SplashYour evening begins here
Bottom navigation · four destinations, always present
Home
Announcements
Patron status
Mini profile cardcondensed patron record
Challengese.g. use three benefits this month
Your next action→ Member pass
Upcoming eventTonight’s feature → Event detail
Subscription snapshot
Events
All / Your Eventssegmented control
Calendar
FiltersFor you · Classical · Pops
Event listThree dated rows → Event detail
Purchase links
Ticket + seat detail
View programmultimedia experience
Exchange tickets
Subscription
Membership cardMember pass · QR + NFC
Plan statusHarmony · member access
Included shows
Visible benefits→ Benefits
Renewal
Member connectscan card to link members
Profile
Patron identityMembership 1048
Patron stats
Season journey
Attendance history
Contribution history
HouseholdLinked accounts
Shareable profileengagement, not account
Achievementslater
Settings→ five controls
Contact information
Eligibilitywas: student verification
Notificationsexists · Notifications + Support
Accessibilityexists · Preferences + accessibility
Account controlsexists · Repair web session
Event detailFrom Home + Events · program, share, add to calendar
Choose accessFrom Event detail · member pass or event ticket
BenefitsFrom Home + Subscription · coat check, lounge, guest seat
Non-subscriber upsell
Marketing + promotions
Gamification hub
Sponsor rewards
Friend ticket + payment link
In-hall perk triggers
Live program bubble
First-download incentive
Venue perk activation
Member mobile app
About
Product requirements for the Maestro member app. Counts are read off the navigation map rather than asserted, so this document cannot drift from the build.Problem
A Maestro member holds tickets, a subscription and a set of benefits, and none of it is reachable in one place. Ticket confirmations sit in email. Benefits go unredeemed because nobody knows they exist. Renewal arrives as a letter. The organisation has all of this in Tessitura and no member-facing surface for it.
This prototype tests one answer: put the member’s own relationship to the season in their hand, and make the next action obvious from the home screen.
Who it is for
A subscriber at a performing-arts organisation — someone who already gives the institution money every season and attends more than once. Not a first-time single-ticket buyer, and not box-office staff.
That choice sets the whole shape. A member already knows the organisation, so the app never sells it to them; it answers what do I hold, what is next, and what am I owed.
Scope
Four destinations. Home answers what is next. Events covers the season and what the member holds within it. Subscription is the credential and the benefits. Profile is the patron record, with settings beneath it.
Eight screens are built: splash, home, events, event detail, choose access, member pass, benefits, account. Against the full IA, 16 nodes exist and 31 do not.
Out of scope
Purchase and payment. Ticket exchange. Anything box-office facing. The multimedia programme. Gamification beyond a placeholder — badges and challenges are in the IA because a reviewer asked for them, not because this prototype tests them.
Also out: everything requiring a data source that does not exist yet. Attendance history, contribution history and season journey are surfaces waiting on Tessitura, not screens waiting on design.
Requirements the design is holding to
The member’s relationship to an event is stated, not implied. Every event says whether tickets are held, which seats, or what it costs.
Settings never interrupts. Student status is verified once and stored, not asked again.
The pass works offline. A member at a venue with no signal still gets through the door.
Six flat colours, squared corners, two typefaces. Photography carries the colour the palette withholds.
Open
Typefaces are unlicensed. FT System is a trial cut of 66 glyphs; Lab Grotesque arrived as desktop files. Two strings render mixed-font: Măcelaru conducts Enescu and How are you entering?
Two built nodes are disputed. A reviewer found Your next action undefined and questioned whether Available offline earns its place.
One photograph meets the brief. The direction is motion blur; the event hero is sharp.
No mobile type scale. The variables were namespaced Desktop/ from the start.
Scope is unrecorded. No fee, dates, milestones or client contact are written down for this engagement.
Identity system · 01
A program note that knows where your ticket is.
Headlines carry the expression. Everything a member has to read or tap stays plain.
Principles
FT System sets headlines only. Lab Grotesque sets everything else, including all UI. FT System carries 66 glyphs, so accents, dashes and question marks drop to Lab Grotesque mid-word.
Burgundy marks the primary action and the active tab. Lemon is legal on burgundy or off-black and nowhere else — on white it measures 1.23:1. The rest is gray.
A box means these things act together. Most lists are just lists.
Separation comes from a change of ground or a hairline. The one drop shadow in the build sits under the phone chassis; every other shadow is inset.
Accessibility
Measured, not asserted. Ratios are WCAG 2.2, computed from the token values.
L≈0.235 against L≈0.234. Beyond the unreadable pairing, burgundy set beside ink reads as an off-black rather than a colour. It needs white or lemon to register.
A 3px outline at 3px offset, everywhere. Focus changes weight and colour the same way on every control rather than three ways across three components.
Where the drawn control is smaller — the view switch at 36px, the subnav at 34px — the pressable box is grown with a pseudo-element so the target reaches 44 without moving anything visible.
padding-bottom: env(safe-area-inset-bottom) on the tab bar. A layout that looks correct in a flat mock is wrong on the device without it.
Mark
Eight outlined paths, 511 × 92, no live text — so it carries no font dependency. Inlined once as a <symbol> and referenced wherever it appears.
The fill is currentColor. Burgundy on light grounds, off-white on burgundy. Never recoloured by hand.
18px in the prototype bar, 30px on the splash, 46px here. 18px is the floor — below that the stacked bars of the mark stop separating.
Half the lockup’s height on every side, measured from the bounding box. Nothing sets inside it.
Color
#FFFFFF#EAEAEA#101010#E1EFA3#C2ACE8#390C0CGrayscale
The board names three neutrals. These are the working roles derived from them — the values components actually reference.
--off-white#FFFFFF · screens, cards--raised0.98 / 82% · blocks on white--gray#EAEAEA · nav, tracks--quiet0.58 · eyebrows, inactive--muted#464646 · secondary text--ink#101010 · reading inkTypography
--display · FT System Blank
Maestro
--sans · Lab Grotesque
Member pass ready
Tonight · 7:30 PM · Music HallPhotography
Motion blur carries the energy of live performance and reveals the layers of movement inside it — the complexity behind a performance that Maestro brings into focus.
Composition
Two gap values carry the whole system. Anything that invents a third is drift.
--doc-gapBetween items in a rack--doc-col-gapBetween prose columnslabel columnEvery documentation sectionmap gutterFour-column navigation treeThe tree’s rail spans calc((100% - 60px) / 8) from each edge — half a column, computed from the grid — so it terminates on centre at any width instead of at a guessed inset.
Blocks sit on --raised or --gray and are parted by space. The system carries almost no lines, and none that are decorative.
Motion
pressTransform on tapcolourHover and statescreenEntry between screensambientSplash focus, letter driftcubic-bezier(.22, 1, .36, 1). It decelerates hard and settles, which suits a screen arriving. Nothing in the build uses a second easing.
Three keyframes exist: a screen entering, the splash pulling focus, and a letter drift. Each tracks something happening. Nothing moves to look modern.
Under prefers-reduced-motion: reduce every duration collapses to .01ms. Decoration is never the reason a screen fails to arrive.
Atoms
Live at Music HallNow
Tokens
Spacing
--space-14px--space-28px--space-416px--space-624px--space-1248pxShape
--radius-tile0--radius-control0--radius-card0--radius-round50% · marks onlyIcons
18px · 1.75 stroke Feather. Twenty-four in the set. Every icon has a label next to it.
Voice
Doors open at 6:30.
Not “Your unforgettable evening awaits.” Say what the member needs.