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 canvas, dark-blue ink, teal accent from Identity Overview.

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 and buttons share --r-ctl (6px). No capsules.

References

Source: Brand Refresh KO (Jul 28, 2026) · Figma 1605:8431. Split Toolkits In Action 1605:8883 · Criteria 1605:8697.

In Action · Split Toolkits

CSO Identity OverviewDark blue + cream, teal mark (#85D0D3), yellow/orange tertiary. Foyer companion chrome.

POPS Identity OverviewSeparate toolkit. Mark red (#ED2330 / --pops-red). Do not mix into CSO companion chrome.

Identity Overview.

Panel cream #FCFAEC, ink #333E48, mark teal #85D0D3. Exact fills from 1605:8888.

Criteria.

Resonant, Authentic, Ownable, Expansive. From evaluation slide 1605:8697.

Split toolkits.

CSO and Pops stay separate. Foyer binds to CSO primary; Pops red is documented only.

Docs chrome.

Cream page, cream sidebar, bordered plates. Sketches compose from components.

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

Avantt for everything.

One face for titles, program, offers, labels, chips, buttons, and meta. Weight and size carry hierarchy.

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 + Avantt 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 and student redeem, friend-seat links, flat account rows.

Application

Web for account and ticketing. App for subscribers, Harmony Pass, and student access.

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 purchases50,13457,654

Subscriptions1,2141,335

Harmony Pass242300

Donations1,9422,330

Avg. conversion rate3.4%5%

Engagement rate61.39%80%

Focus: Subscriptions, Harmony Pass, and student access. Tickets stay primarily on the web. Track student redemptions to limit abuse.

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

Dark Blue

--cso-dark

#333E48
R 51 · G 62 · B 72

Cream

--cso-cream

#FCFAEC
R 252 · G 250 · B 236

Teal

--cso-teal

#64C1C7
R 100 · G 193 · B 199

Yellow

--cso-yellow

#F8B632
R 248 · G 182 · B 50

Orange

--cso-orange

#F06E32
R 240 · G 110 · B 50

Brand tokens

dark blue--cso-dark · ink / press

cream--cso-cream · canvas

teal--cso-teal · accent

teal mark--cso-teal-mark · logo fill

yellow--cso-yellow · tertiary

orange--cso-orange · tertiary / donor

pops red--pops-red · POPS mark only

UI surfaces

canvas--canvas#FCFAEC · 100%

page--page → canvas#FCFAEC · 100%

white--white · plates#FFFDF8 · 100%

panel--panel → white#FFFDF8 · 100%

well--well → gray-50#FFF9EF · 100%

card--card → gray-100#F7F0E2 · 100%

sidebar--sidebar → gray-100#F7F0E2 · 100%

well-2--well-2 → gray-300#DDD2BC · 100%

press--press → dark#333E48 · 100%

live--live · status#2F9E5B · 100%

Neutral ramp

gray-25--gray-25#FFFCF5 · 100%

gray-50--gray-50#FFF9EF · 100%

gray-100--gray-100#F7F0E2 · 100%

gray-200--gray-200#EFE6D4 · 100%

gray-300--gray-300#DDD2BC · 100%

gray-400--gray-400#9A9488 · 100%

gray-500--gray-500#6E6A62 · 100%

gray-600--gray-600#524E48 · 100%

gray-700--gray-700#3F4650 · 100%

gray-800--gray-800#333E48 · 100%

gray-900--gray-900#262C33 · 100%

Opacity

ink-soft--ink-softink @ 8%

line--lineink @ 14%

live-soft--live-softlive @ 14%

accent-soft--accent-softteal @ 18%

dash--dashink @ 32%

scrim--scrimink @ 48%

ink 64%overlay strongink @ 64%

ink 88%near-solidink @ 88%

Tier · membership

First-timer--tier-first

Member--tier-member

Harmony Pass--tier-harmony

Student Access--tier-student

Student Access Plus--tier-student-plus

Donor--tier-donor

Shape

One radius per role. Docs chrome uses 6px panels and controls. Shell 12. Tile 4.

12phone shell

6panel · card

6control · button · row

6chip

4tile · badge

Sketches

Lo-fi flows built from Foyer components. Season commerce on web including student access; companion app for subscribers, Harmony Pass, and students.

Season commerce · web

CSOAccount

Announcement → Renewal

Renew your season

6-week window. One-click renew; seats held until cleanup week.

Classical · 8 concertsUnseated · zone pricing

Pops · curatedFixed package

Create Your OwnFlex · min 5 concerts

Renewal · unseatedPackage types + one primary commit. Parking as add-on when concerts are in cart.

CSOSubscribe

New sale · by zone

Pick your zone

Before renewal end: unseated sales. Heat map optional.

A

Orchestra

From $85 / concert

B

Gallery

From $45 / concert

Subscription / CYO · unseatedZone map + tier rows. No seat picker until seats release.

CSOSeats

After renewal end

Select your seats

Ecommerce switches to seated sales for packages and singles.

Orch L · 14–152 seats · $170

Seated salesSame map language; commit is seat hold, not zone only.

CSOCheckout

Fees

Digital tickets: no delivery fee. Facility fee on every ticket.

Package · print/mail$15

Single · mail$4

Will call$5

Group order$5

Fee summaryFacts in blocks. Total on the strong button.

CSOParking

Package cart

Add parking?

Package buyers can add parking for concerts in the cart. Singles: reserve from Monday of performance week.

Opening Night · Sep 12Garage A · $25

Classical Roots · Feb 6Not available yet

Parking add-onPer-concert rows. Unavailable states stay factual.

Student sales · web

CSOStudents

Announcement → Renewal

Student access

Two lanes. Verify once; ticket rules unlock at single-ticket on sale.

Student Access Plus · $50Paid · like Harmony Pass for students

Student Access · freeSign up with info only

EnrollMembership choice before renewal end. No concert pick yet.

CSOVerify

Required for both lanes

Confirm student status

Third-party check. Tracked online so redemptions stay within program rules.

School emailOr upload ID via partner

ProgramAccess Plus · active

Verify + trackAccount-bound. Abuse controls live here, not at the door only.

CSOAccess Plus

Single ticket on sale · Mon of week

Claim your ticket

1 ticket to CSO & Pops. Some specials excluded. Friend ticket optional.

This week · Classical RootsEligible · opens Mon

Pops film nightExcluded · special

Access Plus redeemSame Monday-of-week gate as parking for singles.

CSOStudent Access

Single ticket on sale · Mon of week

$15 student tickets

Free membership. Limit 2. Redeem from Monday of the concert week. Some specials excluded.

Tickets this week0 of 2 used

Opening Night$15 · available Mon

Access redeemCount in a block. Cap is hard; specials stay unavailable.

Companion app

CSOLive now

Tonight at Music Hall

Mahler Symphony No. 5Doors 6:30 · Program →

Your seatsOrch L · 14–15 · In wallet

Next upPick your first show ›

HomeEventsPassProfile

Home · Live NowMarketing + account facts. Live chip only when doors are open.

CSOWallet

Events

SEP
12

Opening NightIn wallet

FEB
6

Classical RootsBuy · from $35

MAR
20

Pops film nightSpecial · early single

HomeEventsPassProfile

Events · walletFile rows for upcoming + purchase. Specials can sell singles before general on-sale.

CSOHarmony

Harmony Pass

$12.99 / month · select shows

3 of 3 this monthOne show a month quest complete

Available this weekThu rehearsal open dress

HomeEventsPassProfile

PassStatus count in a block; claim is the only strong action.

CSOProfile

Season log

First show One / month All series

Student Access PlusVerified · redeem Mon of week

RedemptionsTracked online · 1 this week

HomeEventsPassProfile

Profile · questsChips for badges; tier as content, not a chrome wash.

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, Avantt lead, facts in the caption row.

Offer card

Use for promos. Dashed frame + OFFER + Avantt 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 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. 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.