The 2026 to 2027 season is on sale. Members save 30 percent on every concert.Join BCGS
Design system, version 1.0
A darkened hall, a warm instrument, a system.
Tokens, type, photography treatment, and a component library for the Baltimore Classical Guitar Society: concerts, competition, education programs, and the commerce that pays for them. Built on the established direction of Libre Caslon Text, Plus Jakarta Sans, brass, and a warm dark ground.
The faces, the brass, the red, and the mood are kept exactly as established. These five changes make the direction more distinctive and more durable under the weight of a content-heavy, transaction-heavy site.
I.
Warm the foundation
The neutral #1a1a1a ground put brass in tension with a cool grey. Rotating the dark scale warm, to #13100C and its neighbours, makes brass read as light in a room rather than as a competing hue, and it flatters warm stage photography.
II.
Retire the red band
A red tint over a warm photograph fights the photograph and reads as a banner, not a hall. Replaced by the stage scrim: a deep warm gradient anchored to one edge, with a brass hairline. Red is then free to mean one thing only, which is act now.
III.
Two surfaces, one system
Stage is the dark ground: heroes, listings, programs, the emotional register. Program is the warm paper ground: long-form reading, forms, cart, checkout. An eight-section checkout on near-black is fatiguing, and dark should stay a choice rather than a constraint.
IV.
A signature, not a flourish
The six-string rule replaces every generic divider and brass top-bar: six brass hairlines of graduated weight, the courses of the instrument. It scales from a 96px caption rule to a full-bleed section break, and it is unmistakably this institution.
V.
Give data a real voice
Half this site is dates, times, durations, and prices. Rather than a third typeface, Plus Jakarta Sans gains defined Data and Label roles with tabular figures, so a ticket table and a track list align to the pixel and never reflow as numbers change.
01 / Foundations
Color
Every value below is a token. Contrast figures are measured against the surface each token is intended for, and all text pairings listed meet WCAG 2.1 AA at their stated size.
Stage: the dark foundation
Warm-rotated neutrals. Surfaces step up in lightness as elements come forward, never with a border alone.
Ink 950
--ink-950 #0B0907
Page ground, header, footer, photo scrims.
Ink 900
--ink-900 #13100C
Default Stage body surface.
Ink 800
--ink-800 #1B1712
Cards, panels, table shells.
Ink 750
--ink-750 #241F18
Inputs, raised rows, selected states.
Ink 700
--ink-700 #2E2820
Hover fills, borders on Stage.
Hairline
--line brass 16%
Section and card edges. Never pure white alpha.
Program: the paper foundation
For long-form reading and every long form. Same warmth, inverted.
Paper
--paper #FAF8F3
Article and form ground.
Paper warm
--paper-warm #F3EEE0
Inset panels, summaries, sponsor bands.
Card
--paper-card #FFFFFF
Cards and inputs on Program.
Paper hairline
--paper-line ink 12%
Dividers, input borders, table rules.
Accents and their rules
Brass carries identity. Red carries transaction. Neither is decorative.
Primary accent
--brass #C9A96E
8.4:1 on Ink 900. Safe as text at any size on Stage. Use for eyebrows, meta, links, hairlines, active states, and as a fill behind ink text.
On Paper, 2.1:1. Not text, not a border, not a focus ring: substitute Brass 800. Never white on brass either, at 2.2:1, so a brass fill always carries ink text.
--brass-100 / 300 / 700 / 800
100 #EFE0C4 for headlines over photography. 300 #E3C896 for hover and emphasis. 700 #A8884E for section labels on Stage. 800 #8A6C36 for small brass text and the focus ring on Paper at 4.6:1, dropping to Brass 900 #6B5433 at 6.2:1 for small text on Paper warm, where 800 measures only 4.2:1.
Action
--red #990000
8.9:1 with white text. Reserved for the primary commerce action, on-sale dates, and the cart badge. One red element per view.
Never red text on Stage: 1.6:1. Red as a fill only. Hover #B31212.
Text and functional
Text on Stage / on Ink 900
Primary #F6F2E916.9:1
Secondary #C8C0B110.5:1
Tertiary #9C94876.3:1
Disabled #6E675C3.3:1, exempt
Text on Program / on Paper
Primary #17130E17.4:1
Secondary #5C53467.1:1
Tertiary #6E66595.3:1
Red text #9900008.4:1
Functional
Success #86C79A9.6 / 5.9
Error #E8897E7.5 / 6.1
Warning #E0B65C9.9 / 5.1
Info #9BB6D49.0 / 7.3
Ratios read Stage on Ink 900 / Program on Paper. Tinted for Stage; their Program counterparts darken to #2F6B43, #B3261E, #8A6212, #2C5578, and each pair clears 4.5:1 on the surface it is used on.
02 / Foundations
Typography
Libre Caslon Text speaks once per view, at the moment that matters. Plus Jakarta Sans does everything else, including the data work.
An evening with Manuel Barrueco
Display 1
Caslon 400 60/62, -2% Hero only, once
The Lullaby Project
Display 2
Caslon 400 40/45, -1% Page and section titles
Peabody Conservatory, Griswold Hall
Heading 3
Caslon 400 26/32 Card and block titles
It is no secret that Baltimore is a special place for the classical guitar.
The legendary Cuban-American guitarist returns to Baltimore with a program of Bach, Albeniz, and two new commissions.
Lead
Jakarta 300 20/32 Intros, one per page
Founded in 1988, BCGS presents an annual concert series, runs the Baltimore International Guitar Competition, and sustains education programs across the region. Body copy sets at 17px with a 1.7 measure and a maximum of 70 characters per line.
Body
Jakarta 400 17/29, max 70ch 16/27 on Paper
Season pass · Members save 30%
Griswold Hall holds 240. Doors open at 7:00.
Label / Caption
Label: 600 12/12, +18% caps Caption: 400 13.5/21
Sat 18 Oct 2026 · 7:30 PM · $40 / $28
03:121,284 seats$2,500+Nov 22
Data
Jakarta 500/600 tabular-nums always 14 or 22, +1%
Rules: one Caslon element per viewport at Display size, never two. Caslon is never set below 18px and never all-caps. Every price, date, time, duration, and seat count carries font-variant-numeric: tabular-nums. Line length caps at 70 characters for body and 46 for Display.
03 / Foundations
Space, radius, elevation, focus
Spacing, 4px base
1 4px
2 8px
3 12px inline gaps
4 16px card padding sm
6 24px card padding
8 32px block gaps
12 48px form sections
20 80px section rhythm
30 120px desktop sections
Sections drop to 56px on mobile. Gutter is 24px below 768px, 40px above.
Radius
0 image
2 chip
3 default
6 modal
full badge
Tight radii only. A concert hall is not a consumer app; 3px is the default for cards, inputs, and buttons alike. Control edges carry their own contrast floor: interactive borders clear 3:1 against their surface, ink at 50 percent on Program and #6E675C on Stage, while purely decorative dividers at 12 and 16 percent are exempt.
Elevation
e0 hairline only
e1 resting card
e2 hover, dropdown
e3 modal, cart drawer
On Stage, elevation is carried mostly by surface lightness. Shadows on near-black do little work alone, so e2 and e3 always step the surface up too.
Two layers, and one ring token per surface rather than one shared value. Brass 500 carries the ring on Stage; on Paper it measures 2.1:1 and would fail the 3:1 floor for focus indicators, so Brass 800 carries it there. Brass stays the focus identity on both, which is why the ring is not red: red remains transaction-only. Transitions are 150ms ease for color, 200ms for transform, and all of it is suppressed under prefers-reduced-motion.
04 / The signature
The six-string rule
Six brass hairlines of graduated weight, thinnest at the top: the six courses of a classical guitar, from the first string to the sixth. It is a rule, a section break, a card edge, and a masthead device. Nothing else in the system is allowed to be a plain 1px divider.
Rule, horizontal
96px under a section label, full width as a section break. Height is fixed at 21px; only the width changes.
Rule, vertical
Rotated, it becomes the leading edge of a quote, a featured card, or an alert. The sixth string sits closest to the content it marks, so weight always leans toward the text.
Masthead strings
Descending 40px courses fading from the top edge of any Stage hero. Under 4 percent opacity at the point of fade, so it never competes with a headline.
VII.Fret markers number sections, doors, and form steps.
Do not tint the rule any color other than brass, do not animate it, do not stack two rules within one section, and do not use it inside a card that already carries a vertical rule.
05 / Photography
Type over dark, warm-lit images
Real BCGS photography is dark, warm, and often a single figure against an unlit ground. Three treatments cover every case, and each guarantees a legible contrast floor without touching the photograph's own color.
Sat 18 Oct · 7:30 PM
Manuel Barrueco
Stage scrim. The default. Bottom-anchored warm gradient reaching 97 percent at the baseline. Guarantees 12:1 for the title regardless of what is behind it.
Artist in residence
Meng Su
Two seasons of teaching, masterclasses, and a commissioned premiere.
Corner scrim. For heroes and wide crops where the subject sits off-center. Type stays bottom-left, below the face, with a 3px brass edge anchoring the block without a box.
Applications close 15 Jan 2027
Baltimore International Guitar Competition
Brass hold. Desaturate, then multiply a brass-to-ink gradient. Unifies mismatched submitted photography, such as competition applicant portraits, into one warm register.
The change, side by side
Left: the current red-tinted title band. It flattens the warm light, tints skin tones magenta, and spends the accent that should mean buy a ticket. Right: the stage scrim, same photograph, same crop.
SoloDuo
Retire
Fri 13 Mar · An die Musik
SoloDuo
On sale
Adopt
Rules for every image: 16:10 for listing cards, 3:4 for artist portraits, 21:9 for full-bleed bands. Focal point set per asset in the CMS, never a blanket center crop, because these subjects are rarely centered. Alt text describes the performer and the setting, not the file. No text is ever placed on an untreated photograph.
06 / Components
Buttons
On Stage
Sold out
Primary is red and appears once per view, including navigational primaries such as the link into a section. Brass fill is reserved for giving, so donation never competes with ticketing for the same visual slot. An unavailable control is genuinely disabled and marked aria-disabled, and the reason why sits beside it as readable status text rather than inside the dimmed label: Disabled is the only token exempt from AA, so nothing a patron needs to read is ever set in it. Minimum height 48px, minimum touch target 48 by 48.
On Program
Saved
Same three tiers, re-grounded. Ink fills replace brass fills on Paper, since brass at small sizes fails contrast on a light ground.
07 / Components
Form controls
Every control appears on both grounds. Labels sit above the field, always visible, never a placeholder. Required is marked on the label, not implied. Errors name the fix.
Text, select, textarea
⚠Add the part after the @ sign, for example bcgs.org. Your ticket confirmation goes here.
Optional. Visible to the box office only.
Choice, stepper, states
Quantity stepper
2
Promotional code SEASON30 applied.
Only 4 student tickets remain for this concert.
Student tickets are will-call only and cannot be mailed.
08 / Components
Cards: event, artist, venue
The event card is the workhorse of the site. Date first, because a returning patron scans for a date, then a name.
Season pass
2026 to 2027 Season
Eight concerts. Members save 30 percent and keep their seats each year.
From $175
On sale
Sat 22 Nov · 7:30 PM
Meng Su
Peabody Conservatory, Griswold Hall
$40 / $28 member
Fri 13 Mar · 8:00 PM
SoloDuo
An die Musik, Mount Vernon
$35 / $25 member
Sold out
Sun 17 Jan · 3:00 PM
BIGC Winners Recital
UMBC, Linehan Concert Hall
Waitlist open
Artist
Manuel Barrueco
Grammy-winning Cuban-American guitarist, faculty at Peabody, and a friend of this society for three decades.
Peabody Conservatory · 240 seats · General admission
{{ tabBody }}
09 / The Lullaby Project
The recital player
A repeating content type: title, rich description, optional video, optional image set, and a numbered playlist. The player is built as a program page rather than a media widget, so a track list reads like the printed order of a recital.
Lullaby Project · Spring 2026
Songs for the smallest audience
Five lullabies written by new and expectant parents in Baltimore with BCGS teaching artists, recorded at Peabody in April. In partnership with Carnegie Hall and the Weill Music Institute.
▶
Documentary, 6:41
Five lullabies
{{ totalTime }} total
{{ nowTitle }}
{{ nowCredit }}
{{ elapsedLabel }}{{ remainLabel }}
Each track is a real audio element with a caption track and a transcript link. Space and Enter play, arrow keys move between tracks, and the current track is announced.
10 / Commerce
Tickets, qualifier, cart
Everything from the ticket table onward sits on Program. Money deserves a lit desk, and a mixed cart of tickets, memberships, and donations has to stay legible under scrutiny.
Manuel Barrueco in recital
Sat 18 Oct 2026, 7:30 PM · An die Musik
Member prices apply automatically at checkout when you are signed in.
Ticket type
General
Member
Quantity
General admissionUnreserved seating, doors at 7:00
$40
$28
{{ qty0 }}
Senior 65+Please bring ID to the door
$35
$25
{{ qty1 }}
StudentWill call only, cannot be mailed
$10
$10
{{ qty2 }}
{{ ticketCount }} in this order · {{ ticketTotal }}
Your cart
{{ c.name }}
{{ c.sub }}
{{ c.qty }}
{{ c.line }}
Code applied. Season discount of 30 percent is on your subscription line.
Add a gift to your order
Ticket sales cover about half of what a concert costs. Anything you add here is fully tax deductible.
$
Subtotal{{ subtotal }}
Member discount{{ discount }}
Donation{{ giftLine }}
Total{{ total }}
{{ deductible }} of this order is tax deductible. Your receipt will itemize it.
Checkout
Four sections, numbered in Caslon, with a persistent rail so a long form always says where you are and what is left.
{{ s.num }}
{{ s.title }}
{{ s.desc }}
{{ s.badge }}
Section 2, per attendee
Ticket 1 of 3, Senior 65+
11 / Membership and giving
The ladder
Tiers are cumulative across a September to August season, and their names, thresholds, and benefits are configuration rather than code. The ladder reads bottom to top, and the sixth string of the rule thickens as you climb.
{{ ti.name }}{{ ti.amount }}
{{ ti.benefits }}
Open amount
Give what feels right
The field leads and the presets follow, so a donor who has a number in mind is never nudged toward ours. Live feedback names the tier the amount reaches.
$USD
{{ donateNote }}
Testimonial block
I wrote a song for my daughter before she was born, and thirty people played it back to me. I have never felt so held by a city.
12 / Content patterns
FAQ, program page, funders
Accordion FAQ
{{ f.a }}
Program
Guitar Certificate
Two years of mentorship for emerging artists: private study, chamber coaching, a recital on the main series, and a stipend. Applications open each January.
Supported by
The Maryland State Arts Council, the Baltimore County Commission on Arts and Sciences, and gifts from BCGS members.
Sponsors and funders
Two different things, two different treatments. Paid display advertisements keep their own proportions on a light card, because an advertiser bought that space. Grant funders sit below in a quiet monochrome row at a uniform optical weight, because a public agency logo is an acknowledgment, not an ad.
display ad half page, 4:5
display ad, banner
display ad, banner
display ad square
display ad square
Public supportNEA logoMaryland State Arts CouncilBaltimore CountyPeabody Institute
Funder logos are rendered at a constant optical height, not a constant box, and are supplied as single-color assets so a light mark and a dark mark never sit next to each other at different apparent weights.
Components read semantic and component tokens only. Stage and Program are one theme with two surface scopes, set by a data attribute on a section wrapper, so a paper form inside a dark page needs no component variants.
Configuration, not code
Tier names, thresholds, and benefits. Ticket type names and prices. Qualifier labels. Fund designations. Venue tab labels and copy. Preset donation amounts. All of it is editable content, per the platform and configuration split, so BCGS can change a threshold without a deploy.
Accessibility floor
AA contrast on both surfaces, with every published ratio computed from the token values at build time rather than written by hand, so a color change cannot leave a stale guarantee behind. A two-layer focus ring on every interactive element, 48px minimum targets, labels never replaced by placeholders, errors that name the fix, tabs and accordions on real ARIA patterns, prefers-reduced-motion honored, and alt text written per asset rather than generated.
Next, for the design gate
Four archetypes applying this system: homepage, an event with tickets, the cart and checkout flow, and the Lullaby Project program page. Those are the four that carry client approval, and every other page is a variation of one of them.
