Meng Su
Bach, Barrios, and the Baltimore premiere of a new work by Gulli Björnsson.
Sat 7:30 pm · UMBC Concert Hall · reserved seating
$38–$50
Tickets
Baltimore Classical Guitar Society · Design system v2.0
A light system that keeps the concert hall inside the photograph.
This replaces the dark v1.0. The page, every reading surface, and every screen that touches money are warm off-white. Darkness is a material used only inside photographic containers, where it does the work it was always doing: making the stage feel like a stage.
Every text-on-background pairing below carries its measured contrast ratio, computed from the token hex values with the WCAG 2.1 relative-luminance formula. Body copy is held to 7:1, not 4.5:1.
Hard constraints
- 01Warm off-white, never #FFFFFF
- 02Body 19px / 1.65, 7:1 minimum
- 03No grey-on-grey secondary text
- 0456px ticketing & checkout targets
- 05Wordmark is a swappable slot
I.
The four page archetypes
Every other page on bcgs.org is a variation of one of these four, so they carry the review. Each is shown at full width in the tokens defined further down; nothing here is drawn outside the system.
PAGE 01
Homepage
The only dark blocks on the page are the hero plate and the footer. Season cards, prices and calls to action all sit on warm off-white.
PAGE 02
Concert, with ticketing
The commercial heart. The ticket panel never sits on a dark ground and never sits over a photograph. Steppers and the add-to-cart control are 56px and 60px tall.
PAGE 03
Cart and checkout
A mixed cart: two concerts, a membership and a restricted gift. No photography, no dark ground, no decoration. Switch to the confirmation state in Tweaks.
PAGE 04
Lullaby Project
The programme archetype: a page that grows every season. Photography for this programme has not been cleared yet, so the plates show the empty-slot state.
II.
Foundations
Ratios below were computed from these hex values with the WCAG 2.1 relative-luminance formula, against the surface each colour is actually permitted on. Where a pairing falls short it is marked and restricted, not quietly published.
I.
Colour
Two families. A warm off-white ramp that carries all reading and all commerce, and a stage-ink ramp that exists only inside photographic containers, the hero plate, and the footer.
Surfaces
Text on light surfaces
Every cell is the real token on the real surface. The floor for running copy is 7:1; the two cells that fall under it are marked and the token is restricted from those surfaces.
Rule. text-meta is permitted on surface-page and surface-raised only. On sunken and brass grounds it drops below 7:1, so metadata there uses text-secondary at 8.59:1 — which is why the totals rows and member strips in the page examples above are set in #4A3F32, not #5C5044.
Text on stage ink
stage-text · #FBF7EF
Headings and body inside plates.
17.45:1 on stage-ink
stage-text-soft · #DCD2C0
Secondary copy. Still 12:1, so it is not grey-on-grey.
12.45:1 on stage-ink
brass-500 · #C9A96E
Eyebrows, rules, dates. Dark grounds only.
8.33:1 on stage-ink
Brand and functional colour
Brass is the brand. Red is only ever failure, so the primary action can never be mistaken for a warning. Each swatch states what it may and may not be used for.
Prohibitions
- No pure white (#FFFFFF) as a page or card ground. It glares under the fluorescent lighting most of our audience reads in.
- No dark ground behind running copy, prices, forms, or any step of checkout. Stage ink is for photographs, the hero, and the footer.
- No red fill that is not a primary action, and no brass fill that is not a gift. A filled control names its own consequence before the label is read.
- No new grey. There is no neutral grey in this system; every "muted" colour is a warm brown that stands on its own at 7:1 or better.
- No colour as the sole carrier of meaning. Discounts, errors and sold-out states each say so in words.
II.
Typography
Libre Caslon Text for anything that names something — the organisation, a concert, an artist, a section. Libre Franklin for everything a reader has to work through. Body is 19px at 1.65, one step above the 18px floor, because that is where the paragraph spacing stops feeling tight.
Display and headings
Aa Bb Cc
Libre Caslon Text · 400, 400 italic, 700
A text-weight Caslon, not a display cut. It holds up at 26px on a concert card and does not thin out at 54px in a hero.
Body and interface
Aa Bb Cc
Libre Franklin · 400, 500, 600, 700
Large x-height and open apertures, which is what keeps 19px readable for eyes that no longer accommodate quickly.
Typesetting rules
- Measure caps at 68 characters for body, 52 for lead. Long lines are the other half of the legibility problem.
- Paragraph spacing is 20px, slightly more than one line. Never rely on indents.
- 17px is the absolute floor for anything phrased as a sentence. Below it: single-word labels, table headers, and the eyebrow only.
- No italic body copy and no all-caps sentences. Caps are for the eyebrow, at 12px with 0.22em tracking, and nowhere else.
- Prices and totals are Franklin 600, not Caslon, except the one grand total on the order summary, which is Caslon 30px because it should feel like the end of the sentence.
III.
Spacing, radius, elevation
A 4px base. Anything under 16px is spacing inside a component; 24px and above separates components. The scale is deliberately loose at the top — an older reader benefits more from air between blocks than from a tighter grid.
space-14pxIcon to label
space-28pxLabel to field
space-312pxButton to button
space-416pxField to field in a row
space-520pxParagraph to paragraph
space-626pxCard padding
space-740pxBetween cards
space-864pxSection padding
space-996pxHero padding, desktop
Radius
5px
6px
8px
pill
5px inputs, 6px buttons and controls, 8px cards and photo plates, pill for counts and status marks only. Nothing softer — this is a 39-year-old institution, not an app.
Elevation
flat
raised
overlay
Shadows are warm-tinted (rgba of #1F1912) and never the only cue: every raised surface also changes colour or gains a border.
IV.
The six-string rule
Six brass hairlines of graduated weight, thinnest at the top: the six courses of a classical guitar, from the high E down to the low. It replaces every generic divider in the system. Height is fixed at 21px; only the width changes. The geometry is unchanged from v1.0 — the string positions and thicknesses are identical — and only the weights are re-tuned so the courses hold on a warm off-white ground the way they held on ink.
Rule, horizontal — on light
46px beside an eyebrow, 96px under a section label, full width as a section break. Weights run 0.38 → 1.0 of #8A6C36, closing on solid #6E5219.
Rule, horizontal — on stage ink
Unchanged from v1.0: weights 0.28 → 1.0 of #C9A96E. Inside a stage plate the original values are correct as drawn.
Where it does not go
- Never inside a form, a cart line, or a total. Commerce is unornamented.
- Never more than once per screenful. It is a signature, not a texture.
- Never scaled. 21px tall, always; a stretched rule stops reading as strings.
- Never load-bearing. It is aria-hidden everywhere and carries no meaning a reader needs.
III.
Components
Hover and active states are shown as static replicas so they can be reviewed on paper. The live controls in the page examples above use the same values.
VI.
Form fields
Labels are always visible and always above the field — placeholder-as-label fails the moment someone starts typing, and it fails worst for the readers this system is built for. Fields are 56px tall with 18px text.
Rest, focus, filled
Help text sits under the field at 17px, never inside it.
asgerdur@bcgs.org
Locked after payment
4.34:1 — above AA even though it need not be.
Error state, anatomy
This card number is four digits short.
- Border thickens to 2px and turns #9B1C1C — shape changes, not just colour.
- Field ground shifts to #FDF6F5, a warm blush that still reads at 15:1.
- Message carries an icon and says what is wrong, in plain words, at 7.62:1.
aria-invalidplusaria-describedby, androle="alert"on the message.
Select and textarea
Choice controls
Checkboxes and radios are 24–26px with the whole row as the target, so a 52px-tall label is clickable end to end.
VII.
Photograph handling
This is where the dark version's quality survives. A photograph is never dropped onto the page ground; it sits in a stage plate — a #16120D container that behaves like the darkness around a lit stage. The page stays light; the picture gets the room.
Rules
- Ratios: 21:9 hero, 16:9 feature, 3:2 card, 4:3 portrait. No free crops.
- Faces sit in the upper third;
object-positionis set per image, not left at centre. - Alt text describes what is happening, not who commissioned it. Decorative plates get
alt="". - An empty plate is a legitimate published state: ink ground, dashed brass outline, and a line saying what belongs there.
- No photograph behind a form, a price, or any checkout step.
- No duotone, no sepia, no heavy grade. The concert-hall feeling comes from the ink around the picture, not from wrecking the picture.
- No stage plate taller than about 62vh. Past that the page starts to read as a dark page.
- Never more than two stage blocks between the header and the footer.
VIII.
Ticketing and checkout
The rule for every component here: light ground, large targets, and the number the person is about to be charged always visible without scrolling.
Quantity stepper
56 × 56px per half, 156px overall. The count is aria-live="polite" so screen readers hear the new number, and each button's label names the ticket type rather than saying "plus".
Seat section chips
Orchestra$50 · 34 left
Mezzanine$38 · 91 left
BoxSold out
Selected is a 2px brass edge and a brass ground — two cues. Sold out says the words; it is never conveyed by dimming alone.
Seats held for 14:32
Hold timers are info blue, announced politely, and never flash or turn red. Running out extends once automatically before it releases.
Order placed
Success is stated in words with a mark, not with a colour change alone.
Card declined
Failure keeps the whole cart intact, says what to try, and gives the box office number. It never clears a form.
Commerce rules
- A mixed cart shows the deductible split before payment, not only on the receipt. Membership benefits are intangible, so the whole contribution qualifies — and saying so is part of why people give.
- Member pricing is applied automatically and shown as its own line. No promo code stands in for a discount someone has already paid for.
- Recurring gifts state the cadence at the point of commitment and cancel in one click, with the same effort it took to start.
- The box office number appears on every checkout screen. A phone call is a supported path, not a failure.
- Checkout uses a reduced header with no navigation. Nothing competes with finishing.
IX.
Logo slot
The identity is a slot, not an asset. Nothing in this system depends on the current wordmark, and the word "Society" is set on its own line precisely so it can be dropped without redrawing anything.
Default, on light
Baltimore Classical Guitar
Society · founded 1987
Caslon 22px over Franklin 11px caps. Clear space equals the cap height of the first line on all four sides.
Inverse, on stage ink
Baltimore Classical Guitar
Society · founded 1987
17.45:1 and 10.35:1. The only two variants that exist. There is no colour-on-colour lockup.
If "Society" is dropped
Baltimore Classical Guitar
Founded 1987
Same box, same clear space, same vertical rhythm. No layout above changes.
On the existing asset
The current wordmark is a white PNG, which means it can only ever appear on a dark ground — it disappears on every reading surface in this system. That alone would force the page dark, which is the problem we are undoing.
So no page example uses it. When the rebrand lands, the deliverable that unblocks everything is a single-colour vector that can be recoloured to #1F1912 and #FBF7EF. Until then the typographic slot is the identity, and it is doing the job.
X.
What was measured
Computed from the token hex values, against every surface each token is permitted on — not only the default one. Two pairings failed and were restricted rather than published.
7.31:1
Lowest ratio of any text actually shipped on a light surface — text-meta on the page ground. The 7:1 floor holds.
8.33:1
Lowest ratio inside a stage block — brass eyebrows and the six-string rule on stage ink.
3.64:1
Input and control borders against the page, clearing the 3:1 required by WCAG 1.4.11.
4.34:1
Disabled controls. Exempt from 1.4.3, measured anyway, and above AA regardless.
2
Failures found: text-meta on sunken (6.55:1) and on brass (6.53:1). Both restricted; text-secondary is used there instead.
0
Reading surfaces, prices, or checkout steps on a dark ground.