CSO · 2627–0041
Tonight · 7:30 PM
Măcelaru conducts Enescu
Music Hall · Springer Auditorium2 tickets · Orchestra A, row F
Your evening begins here.
Saturday, October 18
CSO · 2627–0041
Tonight · 7:30 PM
2 tickets · Orchestra A, row F
2026–27 season
6 events ·
October
Tonight · 7:30 PM
Music Hall · Springer Auditorium
2 tickets · Orchestra A, row F
8:00 PM
Music Hall
Included in your subscription
November
7:30 PM
Music Hall
No tickets yet · from $35
7:30 PM
Music Hall
4 tickets · Balcony C rows 2–3 · 1 accessible seat
8:00 PM
Music Hall · General admission
Sold out · waitlist open
7:30 PM
Cathedral · seats assigned at door
Presale · subscribers until 3 Nov
Tonight · 7:30 PM
Tonight’s event
No signal? Your pass and ticket remain available offline.
Classical · six shows
Your six seats in Orchestra A are held until 15 December. Pricing for 2027–28 is published on 3 November, and renewing keeps the same seats.
Harmony member
Patron 1048 · since 2019
Verified once and stored. The app does not ask again until it expires.
Member mobile app
Member mobile app
Every rack and every prose column uses one of two gap values.
--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, which is half a column computed from the grid, so it terminates on center at any width.
Blocks sit on --raised or --gray with space between them. Four rules remain in the whole build, all of them structural.
color.text
#101010
Body copy and headings
color.text.subtle
#464646
Secondary text and captions
color.text.subtlest
oklch(0.58 0 0)
Eyebrows, inactive tab labels
color.text.inverse
#FFFFFF
Text sitting on burgundy or ink
color.text.brand
#390C0C
Current tab, brand emphasis
color.background
#FFFFFF
Screens and cards
color.background.raised
oklch(0.98 0 0 / 82%)
Blocks sitting on white
color.background.subtle
#EAEAEA
Tab bar and segmented tracks
color.background.brand
#390C0C
Primary action, full bleed sections
color.background.accent
#E1EFA3
Lemon. Legal on burgundy or ink only
color.border
oklch(0.90 0 0 / 90%)
The four structural rules in the build
space.050
4px
Icon to label
space.100
8px
Inside a chip
space.150
12px
Button padding block
space.200
16px
Between items in a rack
space.250
20px
Button padding inline
space.300
24px
Screen padding
space.400
32px
Between stacked groups
space.600
48px
Page gutter
space.800
64px
Between sections
radius.none
0
Every rectangle in the system
radius.full
50%
Circular marks only. Dots, avatars
font.family.display
Aa
FT System Blank
Headings. 66 glyphs, trial cut
font.family.body
Aa
Lab Grotesque
Everything a member reads
font.family.code
Aa
Lab Grotesque Mono
Metadata, captions, token names
font.heading.large
72
72 / 1.12
Hero on the splash
font.heading.medium
48
48 / 1.1
Section headings
font.body
16
16 / 1.2
Default reading size
font.body.small
14
14 / 1.2
Buttons and navigation
font.code
10
10 / 1.4
Mono, always uppercase
--space-14px--space-28px--space-416px--space-624px--space-1248px--radius-tile0--radius-control0--radius-card0--radius-round50% · marks only18px · 1.75 stroke Feather. Twenty-four in the set, and every one of them sits beside a label rather than standing in for it.
Maestro is a ticketing and patron system for performing arts organizations, and this is the member side of it: the app a subscriber opens somewhere between buying a ticket and walking into the hall.
We built it as a working prototype rather than a deck, because the questions that actually matter here are about sequence and priority, and those only become arguable once you can tap through them. Eight screens exist. You can move between four destinations, open the member pass, and read the season. Twenty seven of the forty six things the full navigation calls for are built, which is the honest ratio for something meant to settle shape rather than ship.
The person we designed for already pays the organization every season and attends more than once a year, so the app never has to sell them anything. It answers what they hold, what happens next, and what they are owed, and it tries to answer all three before they go looking.
Two decisions are still open, and everything downstream is waiting behind them. The first is what your next action should actually contain, which sounds small until you try to rank a ticket against a benefit against a renewal that closes in a week. The second is what offline really means for the member pass, because a credential that works in the lobby with no signal is a different piece of engineering from one that merely looks like it might.
A few things are unfinished and worth saying out loud. The typefaces are still trial and desktop licenses, so two strings fall back mid word. Only one photograph meets the motion blur direction we set, and the concert hall image is standing in until there is a real shoot. None of that is buried; the pages that document the system say so on the page.
Navigation map, Identity system and Design system are the other three tabs. Every count on this page is read off the map, so it stays true as the build changes.
Identity system · 01
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.
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 color. It needs white or lemon to register.
A 3px outline at 3px offset, on every control in the build.
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, so the labels are not sitting under the indicator on a real phone.
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 recolored 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.
#FFFFFF#EAEAEA#101010#E1EFA3#C2ACE8#390C0CThe 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 ink--display · FT System Blank
Maestro
--sans · Lab Grotesque
Member pass ready
Tonight · 7:30 PM · Music HallMotion 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.
pressTransform on tapcolorHover 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: a screen entering, the splash pulling focus, and a letter drift. Each one tracks a state change.
Under prefers-reduced-motion: reduce every duration collapses to .01ms, including the ambient splash animations.
Doors open at 6:30.
Not “Your unforgettable evening awaits.” Say what the member needs.