Set headlines and body text in FT System Blank. Do not add a third typeface. The current cut is a trial and covers a limited character set, so accented names fall back to Lab Grotesque. Check names such as Măcelaru at their real size before approving a layout.
Identity system · 01
Maestro identity
A visual identity for cultural institutions, applied across concert information, ticket access, and membership.
Principles
Use Maestro Red for the primary action and the active tab. Do not place it directly against ink; the two measure 1.56:1 and will not separate. Build everything else from the gray ramp.
Group related content in a card rather than dividing it with a line. A set of values describing one thing is a single card. A list of separate items is one card per item.
Three levels, all on Radius/Button 8. Primary fills with Maestro Red. Secondary fills with Gray 100. Tertiary has no fill and is used for low-emphasis actions placed inside other content, such as View all or Clear all. Change the fill between states, not the shape or size.
Separate content with a change of background rather than a divider. Cards are white on the Gray 100 background, with no border and no shadow. Overlays and sheets use a solid background so the controls inside them stay legible.
Accessibility
Contrast ratios below are calculated from the current token values against the Gray 100 background. They are a design requirement, not a completed accessibility audit: keyboard order, screen-reader labels, and motion preferences still need testing.
Gray 300 measures 2.75:1 on the Gray 100 background and 2.99:1 on white, below the 4.5:1 needed for body text. It is currently used for secondary labels and inactive tab labels. Either darken those to Gray 400 or restrict Gray 300 to non-text use.
Maestro Red and ink are close in lightness, so red placed directly on ink is unreadable and stops reading as a color. Place Maestro Red on white or on the Gray 100 background.
Every control needs one visible focus style, applied consistently. The current build uses a 1.5px outline on most controls and a 3px outline in one place; this needs to be reconciled to a single value.
Draw a control at the size the design calls for, then extend its tappable area to at least 44 by 44 points. Do not enlarge the visible control to reach the number.
Pad the tab bar so labels clear the home indicator. env(safe-area-inset-bottom) returns zero in a browser mock, so the build applies a 30px minimum. Check it on a device.
Mark
HarmonyPass
Harmony Pass is set in the interface sans with the nav-membership silhouette in a 30px plate. There is no separate file: it is drawn from the icon set and the type scale, so a change to either carries. It appears on the two pass cards and nowhere else — the app is the orchestra’s, and a product mark competing with the CSO wordmark in a header would say otherwise.
Eight outlined paths on a 1025 × 132 viewBox, with no live text, so the mark carries no font dependency. It is inlined once as a <symbol> and referenced wherever it appears.
The mark inherits currentColor, so it takes Maestro Red on light backgrounds and white on dark ones. Do not recolor the artwork.
Below 18px the stacked bars in the symbol stop separating. In this prototype the Maestro mark appears at 42px on the splash screen, in the marketing screen header, and in this documentation.
Leave clear space on all four sides equal to half the height of the lockup, measured from its bounding box. Place nothing inside that area.
Color
Primary
#FFFFFF#060607#690218#B9D7F6UI · Red
#E5A1A3#D16265#A01F3B#690218#3A000DUI · Blue
#DBE8F6#B9D7F6#8EB3D9#658DB5#365B82UI · Yellow
#FFE4AE#F3CF85#D7B063#B38A39#87641FUI · Green
#CADEB4#B4C699#94A77A#7A8C61#606E46Grayscale
Gray 100#F6F5F3Gray 200#CBCAC8Gray 300#969593Gray 400#50504EGray 500#2D2D2CTypography
Display and UI · FT System Blank
Maestro
UI · FT System, falling back to Lab Grotesque
Member pass ready
Tonight · 7:30 PM · Music HallThe trial cut covers the alphabet, digits, space, comma, and period. Every other character falls back to Lab Grotesque through a unicode-range, so the switch is defined in the stylesheet rather than left to the browser.
Read Măcelaru closely: the M, c, e, l, a, r and u are FT System, the ă is Lab Grotesque. Assume every accented name in the catalog does this until the full cut is licensed.
Photography
Use performance photography with long exposures: a bow mid-stroke, a hand leaving a key, an audience in motion under stage lighting. No posed shots and no one looking at the camera.
Motion
pressTransform on tapcolorHover and statescreenEntry between screensambientSplash focus, letter driftcubic-bezier(.22, 1, .36, 1). It slows quickly and settles, which suits a screen arriving. Do not add a second curve.
The build defines five animations: a screen entering at 280ms, a sheet at 320ms, an overlay fade at 240ms, and two ambient effects on the splash screen. Most transitions run at 160 to 180ms. Animate a change of state; if a motion is not tracking something that changed, remove it.
Under prefers-reduced-motion, reduce every duration to .01ms, including the ambient splash animations.
Voice
Doors open at 6:30.
Not “Your unforgettable evening awaits.” Say what the member needs.