The warm, quiet room before the hall. Foyer is the design system for the CSO companion app: warm gray by depth, a serif for the music, Tekio for the interface, and color spent so rarely that a single green dot means something. Built from prototype v9.2 and the Jul 21 feature session.
System logic
The CSS in this file is the source of truth. The page only renders it.
Primitives → semantics.
Components never read --gray-*, --space-*, or --radius-* directly. They bind to semantic names (--canvas, --ink, --live, --r-pill). A value used twice earns an alias.
Depth is tone, not shadow.
Warm paper, neutral ink. Surfaces stack canvas → card → white → well. Need emphasis? Move up a layer. Shadows only on true overlays — never inside the phone.
One accent, rationed color.
Accent is ink for committed actions. --live is the only status chroma. Tier dots mark membership. Color is always information.
Squircle pills, control-rung buttons.
Chips use --r-pill (13px). Buttons share --btn-r with fields so corner curve is not a function of height. No capsule radii.
References
Three agreements that lock the register.
Instrument panel.
Floating chrome, segmented controls, quiet readouts. Controls sit next to their subject; metadata stays factual.
Specimen grid.
Cards as catalog objects. Tags top-left, id top-right. Color comes from content (live, tier), never from chrome.
Warm paper.
Near-white ground, white plates, soft radius. Elevation is a tonal step; lift only when something truly floats.
Criteria for evaluation
Our visual identity system should be…
Resonant
Does it welcome & invite deeper understanding and relevance for audiences new and old?
Authentic
Is it true to our beliefs of who we are and where we want to go in the future?
Ownable
Is it uniquely differentiated, cohesive, and actionable by internal teams and partners?
Expansive
Can it be scaled effectively and allow room to flex across verticals and contexts?
Principles
Depth is tone, not shadow.
Surfaces stack canvas, card, white, well. Each layer is read by its gray, so nothing casts a shadow inside the phone. If a surface needs emphasis, move it up a layer, don't decorate it.
The serif carries the music, the sans carries the interface.
EB Garamond speaks whenever the subject is the art: show titles, the live program, offer headlines, section leads. Tekio Grotesk speaks whenever the subject is the machine: labels, chips, buttons, metadata. Neither voice borrows the other's job.
Color is rationed.
The chromatic budget is one live green, for things happening right now, plus three tier identity dots. Everything else is gray. A colored element is therefore always information, never decoration.
Offers are ticket stubs.
Anything promotional wears a dashed frame, an uppercase OFFER chip, and a serif headline. Content never wears the dashed frame, so a promo is recognizable before it is read.
Every card is a specimen.
Feature cards carry their tags top-left and a catalog id top-right (cso-2627-0001, act-i-0519). The id is quiet but present: the app treats its content like a curated collection, not a feed.
Actions are small and near their subject.
Buttons sit on the control rung, inline with what they act on. No full-bleed black capsules; strongest emphasis is press gray with a hairline.
Core goals
What the companion app is for — relationship and attendance, not a second ticket store.
Strengthen attendee and donor relationships.
Tier cues, season log (badges, quests), artistic leadership, and specimen ids that treat every program as part of a collection the patron belongs to.
Heighten the night at Music Hall.
Live Now on the program, wallet QR at the door, program one tap from the live card, and tier cues ushers can recognize in the hall.
Open a direct channel.
Push opt-in that states its value, an in-app notification log, and one-sentence toasts that confirm each state change.
Keep tickets, pass, and account simple.
File-row event lists, buy sheet into the wallet, one-tap Harmony Pass claims, friend-seat payment links, flat account rows.
Application
Where Foyer lands in the product. Web carries account and ticketing; the app deepens the relationship with people who already come.
Web first for complaints
De-prioritize a full mobile rebuild. Fix account and ticket management on the web where most of the current friction lives.
App as companion
Given goals to grow subscriptions and Harmony Pass, build an app that deepens the bond with members — engagement the website cannot carry alone.
3–5 year targets (relationship surface)
Metric
Current
3–5 yr goal
Single ticket purchases
50,134
57,654
Subscriptions
1,214
1,335
Harmony Pass
242
300
Donations
1,942
2,330
Avg. conversion rate
3.4%
5%
Engagement rate
61.39%
80%
Highlight: Subscriptions and Harmony Pass are the rows the companion app is built to move. Ticketing volume still lives primarily on the web.
Identity
The system stays quiet so the orchestra reads as the brand.
Primary mark · ink on white · vector.svg
Reverse · white on ink
Campaign field · aqua ground from the Strategy deck
Naming
The institution is the Cincinnati Symphony Orchestra; the brand tile is CSO. The Cincinnati Pops is a warm sub-voice, always credited to its conductor. Music Hall is named, never “the venue.”
The podium is content
Leadership by name and title: Cristian Măcelaru, Music Director · John Morris Russell, Cincinnati Pops · Louis Langrée, Music Director Laureate · Matthias Pintscher, Creative Partner. Credits live in captions and event meta (“Măcelaru Conducts Enescu”), never as decoration.
Real programming only
Sample content from the announced season: Marsalis residency, Enescu’s Third, Pops films with orchestra, Classical Roots. Photography stands in for Music Hall — muted, architectural.
Fidelity
Identity through content and voice. No logos in cards, no brand color washes. The wordmark tile, the names, and Music Hall carry it.
Color
One warm gray family plus a rationed chromatic budget. Use surface steps for hierarchy; never introduce a new gray between the steps.
canvas#E0E0DE · the room
card#EBEBE9 · specimen card
white#FDFDFC · content card
well#F2F2F0 · row in white
well-2#E7E7E5 · pressed row
press#DCDCDA · strong button
ink#1D1D1B · headlines
gray#7D7D7B · display voice
gray-2#A3A3A1 · metadata
live#3EC770 · now, on, done
Tier identity dots are the only other chroma, used at dot scale on chips, avatar rings, and the phone frame:
First-timerMemberHarmony PassDonor
Type
Two faces, six sizes. EB Garamond 400 only, roman and italic. Tekio Grotesk 300/400/500, sentence case always, no all-caps except the OFFER chip. No em dashes anywhere in copy.
Display / serif 31offer headlines
$20 off your first concert
Lead / serif 25card display voice, gray
Mahler Symphony No. 5, Măcelaru conducting.
Title / serif 20hero plates, sheet titles
Opening Night: Fanfare
Heading / sans 17·500white card headings
Beethoven's Ninth
Body / sans 13.5·300meta, notes
Your pass has covered six nights at Music Hall this season.
Label / sans 12.5chips, ids, captions
cso-2627-0001 · first 10 downloads · Next up › Pick your first show
Shape
One radius per role. Nested surfaces stay concentric: panel > control > tile. Chips are squircles; buttons share the control rung with fields so corner curve is never a function of height.
40phone shell
20panel · card
10control · button · row
13squircle chip
6tile · badge
Components
Rendered live from the canonical CSS in this file. If a screen needs something not on this page, compose it from these before inventing.
Specimen card
Live nowMusic Hallact-i-0519
Mahler Symphony No. 5, Măcelaru conducting.
Doors 6:30Program →
Use for featured, curated content: live state, spotlight, pass pitch. Tags left, catalog id right, serif lead in gray, facts in the caption row.
Offer card
Offerfirst 10 downloads
$20 off your first concert
New to the CSO? Your first night is nearly on us.
Use for anything promotional. The dashed stub frame, OFFER chip, and serif headline are mandatory together; nothing else may use the dashed frame.
Hero card
Season spotlightcso-2627-0001
Opening Night: Fanfare
Sep 12From $35
Use for the one photo-led moment per screen. Chips float on the image, the frosted plate holds a serif title and an inline action. Photography is muted and architectural.
White card · chips · quest state
Beethoven's Ninth
Your next show
Sat Aug 8 · 7:30Orch L · 14–15In wallet
Use for the user's own things: tickets, profile, account. Machine facts live in chips, never in prose. The done chip (press gray + green dot) is the completed state everywhere.
File row
SEP 12
Opening Night: FanfareClassical · from $35
FEB 6
Classical RootsWith the community choir
Buy
Use for lists: events, claims, history. Date tile, one-line meta, circle arrow. The darker variant highlights one row per list at most.
Buttons · tabs · toast · breadcrumb
Added to wallet. One show a month: 3 of 3.
Next up ›Pick your first show
Hierarchy: strong (press + hairline) for the one committing action in a flow · default for everything else · sm inline with content · circ for dismiss and secondary icons. Tabs are pills with a white dot on the active. Toasts confirm state changes in one sentence. The breadcrumb always knows the next step.
Dock
Four tabs, fixed: Home, Events, Pass, Profile, per the Jul 21 session. Active is a soft pill, never black.
Voice
Sentence case everywhere. No em dashes. Facts go in chips, feelings go in serif. Offers say the number ("$20", "$12.99") in the headline. Confirmations are one sentence with the consequence ("Ticket is in your wallet"). Every screen ends knowing its next step.
Register: warm, plain, a little proud of the orchestra. Never exclamation points.
Do / Don't
DoBind UI to semantic tokens only. Move a surface up one tonal layer for emphasis. Put machine facts in squircle chips; buttons on the control rung. Reserve the dashed frame for offers. Keep one photo-led card per screen.
Don'tAdd shadows inside the phone. Use black fills or capsule (999) radii. Bind components to --gray-* primitives. Set UI copy in the serif or titles in all-caps. Spend a new hue on chrome. Show progress as bars; use counts in chips.
