Foyer · CSO app design system

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.

Brand color is structural.

Cream ground, dark-blue ink, teal accent from Identity Overview. Surfaces stay quiet so music leads.

Status chroma is separate.

--live for now/on/done. Tier dots for membership. Never wash a card in brand teal.

Squircle pills, control-rung buttons.

Chips: --r-pill (10px). Buttons share --btn-r with fields. No capsules.

References

From the CSO Brand Refresh KO — Identity Overview and Core Visual Identity Assets.

Identity Overview.

Dark blue + cream primaries, teal secondary, yellow/orange tertiary. Mark fills in teal.

Specimen cards.

Tags top-left, id top-right. Color from content (live, tier), not chrome washes.

Editorial rail.

Cream page, teal rules, tight radii. No frosted glass chrome.

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

Serif for music, sans for UI.

Reckless Neue: titles, program, offers. Avantt: labels, chips, buttons, meta. Cortese: light display lockups.

Color is information.

Brand teal for accent and mark. Live green + tier dots for status. Everything else stays in the cream/ink family.

Offers are ticket stubs.

Dashed frame + OFFER chip + serif headline. Content never uses the dashed frame.

Cards carry catalog ids.

Tags top-left, id top-right (cso-2627-0001). Collection, not feed.

Actions stay near their subject.

Control-rung buttons. Strongest: dark-blue fill. No black capsules.

Core goals

Companion for relationship and attendance — not a second ticket store.

Strengthen attendee and donor relationships.

Tier cues, season log (badges, quests), artistic leadership, catalog ids.

Heighten the night at Music Hall.

Live Now, wallet QR, program one tap away, tier cues ushers can read.

Open a direct channel.

Push opt-in with a clear value, notification log, one-sentence toasts.

Keep tickets, pass, and account simple.

File-row lists, buy into wallet, one-tap Harmony Pass, friend-seat links, flat account rows.

Application

Web for account and ticketing. App for subscribers and Harmony Pass.

Web first for account friction Fix account and ticket management on the web. Skip a full mobile rebuild.

App as companion Grow subscriptions and Harmony Pass with engagement the website cannot carry alone.

3–5 year targets

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%

Focus: Subscriptions and Harmony Pass. Tickets stay primarily on the web.

Identity

Orchestra first. System stays out of the way.

Primary mark · dark blue on cream

Reverse · cream on dark blue

Campaign field · teal mark

Naming Cincinnati Symphony Orchestra / CSO. Cincinnati Pops credited to its conductor. Music Hall by name — never “the venue.”

The podium is content Cristian Măcelaru, Music Director · John Morris Russell, Cincinnati Pops · Louis Langrée, Music Director Laureate · Matthias Pintscher, Creative Partner. Credits in captions and event meta, not chrome.

Real programming only Announced-season samples only: Marsalis residency, Enescu’s Third, Pops films, Classical Roots. Music Hall photography: muted, architectural.

No logo wallpaper No logos in cards, no full-bleed brand washes. Wordmark, names, and Music Hall carry identity.

Color

From CSO Brand Refresh Identity Overview. Primaries structure the page; teal accents the mark; yellow/orange are tertiary.

Figma · Identity Overview · Dark Blue #333E48 · Cream #FCF4E0 · Teal #64C1C7 · Yellow #F8B632 · Orange #F06E32

Brand tokens

dark blue#333E48 · ink / press

cream#FCF4E0 · canvas

teal#64C1C7 · accent

teal mark#85D0D3 · logo fill

yellow#F8B632 · tertiary

orange#F06E32 · tertiary / donor

UI surfaces

white#FFFDF8 · plates

card#F7F0E2

well#FFF9EF · row

live#2F9E5B · now, on, done

Tier dots — membership chroma only:

First-timer Member Harmony Pass Donor

Type

Reckless Neue (music) · Avantt (UI) · Cortese (light display). Sentence case; OFFER chip is the only all-caps. No em dashes.

Reckless Neue alphabet specimen — **Reckless Neue**--serif · display & music

Avantt alphabet specimen — **Avantt**--sans · interface

Cortese alphabet specimen — **Cortese**--display · light lockups

App size ladder

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. Concentric: panel > control > tile. Chips: squircle. Buttons share the control rung with fields.

28phone shell

12panel · card

8control · button · row

10squircle chip

4tile · badge

Components

Live from the CSS in this file. Compose from these before inventing.

Specimen card

Live nowMusic Hallact-i-0519

Mahler Symphony No. 5, Măcelaru conducting.

Doors 6:30Program →

Use for featured content. Tags left, id right, serif lead, facts in the caption row.

Offer card

Use for promos. Dashed frame + OFFER + serif headline together. Nothing else gets the dashed frame.

Hero card

Opening Night: Fanfare

Sep 12From $35

Use for the one photo-led moment per screen. No floating tags. Plate holds serif title + inline action. Photography muted, architectural.

White card · chips · quest state

Beethoven's Ninth

Your next show

Sat Aug 8 · 7:30 Orch L · 14–15 In wallet

Use for tickets, profile, account. Facts in chips. Done = press gray + green dot.

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 commit · default otherwise · sm inline · circ for dismiss. Active tab: soft pill. Toasts: one sentence.

Dock

Tabs: Home, Events, Pass, Profile. Active is a soft pill.

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: plain. No exclamation points.

Do / Don't

DoBind to semantic tokens. Emphasize by moving up a tonal layer. Facts in squircle chips; buttons on the control rung. Dashed frame for offers only. One photo-led card per screen.

Don'tShadows inside the phone. Black fills or capsule radii. Bind to --gray-* primitives. Serif for UI or all-caps titles. New chrome hues. Progress bars — use counts in chips.