One system.
Room for character.

Nocturne frames the experience. Paper carries reading and decisions. Living Colour comes from the artwork; it is not a separate theme for each page. The specimens below use the same tokens and controls as the product.

Tap either real component to open Who / What / Where. Close or go Back to return here; the full-page action opens its canonical concert route. Both examples use the existing catalogue fixtures, not live availability. Featured city cards keep their editorial composition while sharing this interaction contract.

One concert, one atmosphere

Sun 7 Apr · 15:00

Elgar’s Cello Concerto

BBC Scottish Symphony Orchestra

City Halls

Fri 29 Aug · 19:30

Gabriela Montero’s Latin Concerto

BBC Scottish Symphony Orchestra

Glasgow Royal Concert Hall

The keys mark: aurora rim on its 100° axis, ivory keys on nocturne, black keys rounded at the bottom only. One SVG, every size.

The Iconography set in use: 48-box strokes in currentColor with non-scaling widths. Tint with the badge palette; labels stay ink or ivory.

One button of the kit filter bar (co-located AnchorScroll.module.css). The active segment carries aria-current; FilterBar watches for it and glides a single aurora thumb to whichever pill has it — toggle the knob to see the slide.

Historical hero stat pill: iris/amber/rose glyph tints on ink text over paper. The Glasgow hero now uses HeroFacts; this specimen is retained for comparison, not new adoption.

The editorial figures row under a hero heading: label/value pairs separated by hairlines. `facts` is the venue and artist heroes’ row; `figures` leads with the number, as on the Glasgow hero.

Paper is primary on nocturne; ink is primary on paper and inherits the concert’s ink. Ghost is secondary on nocturne. Aurora is retained for an intentional accent, not a default booking action. An href preserves native link behaviour.

Legacy page-local labels, preserved as comparison specimens. These copies use workbench-only styles; they do not import or establish reusable product controls.

A kit component with its own co-located CSS. Uses the router’s A, which works fine on this /components route; explicit items are passed here so it doesn’t derive a trail from the workbench’s own URL.

Content navigation with associated panels. Arrow keys wrap, Home/End jump, and only the selected tab enters the tab order. Unlike SegmentedControl, these reveal content rather than set a filter value.

The mood/location filter chip. A real button — selection is aria-pressed, and the aurora-bordered selected look is keyed off that, not a class. ChipRow is just the flex-wrap slot around a set of them.

The showcase’s paper date-range selector. A radiogroup of radio buttons, roving tabindex, Left/Right and Up/Down move focus and select — try tabbing in, then arrowing between segments.

The paper email input with a round arrow action. Enter in the input, or the action button, fires onSubmit. Input font-size is 16px rather than the showcase’s 13px — an iOS zoom-on-focus guard, noted on the component.

The social reaction bar plus its trailing share affordance. Reaction pills are aria-pressed toggle buttons; counts are plain visible text.

One concert, six deliberate levels of presence. Living Colour remains recognisable as practical detail and supporting context progressively fall away.

Six levels of presence

The family in its intended v1.7 footprints—not six unrelated layouts squeezed through one generic preview box.

01 · FeatureEmotional discovery

Fri 16 May · 19:30

Symphony · RSNO

Wagner’s Ring: Twilight of the Gods

Arranged for concert orchestra by Henk de Vlieger

Royal Scottish National Orchestra

One shattering finale, drawn from four nights of Wagner.

MLJ

3 people you follow are going

Glasgow Royal Concert Hall, Glasgow

02 · GridTwo-up browse

Wed 3 Apr · 19:30

Chamber · SCO

Brahms Clarinet Quintet

Scottish Chamber Orchestra

Usher Hall, Edinburgh

Autumn light, one clarinet’s long farewell.

03 · RailRecommendations

Sun 7 Apr · 15:00Concerto · BBC SSO

Elgar’s Cello Concerto

BBC Scottish Symphony Orchestra

City Halls, Glasgow

Because you loved Mahler 9.

04 · ListSearch results

Wed 3 Apr · 19:30

Brahms Clarinet Quintet

Scottish Chamber Orchestra

Usher Hall, Edinburgh

05 · AgendaDense feeds

Sat 6 Dec · 19:30

Shostakovich Five

Royal Scottish National Orchestra

Glasgow Royal Concert Hall, Glasgow

06 · InlineSocial references

Wagner’s Ring: Twilight of the Gods

Royal Scottish National Orchestra

Fri 16 May · 19:30

Playground

Change density or artwork accent; tap the heart to exercise the independent save action.

Fri 16 May · 19:30

Symphony · RSNO

Wagner’s Ring: Twilight of the Gods

Arranged for concert orchestra by Henk de Vlieger

Royal Scottish National Orchestra

One shattering finale, drawn from four nights of Wagner.

MLJ

3 people you follow are going

Glasgow Royal Concert Hall, Glasgow

Presencefullhalfhorizontalminivery-minimicroArtwork accent

Loading skeleton

Reserves the selected composition while its content arrives; motion freezes when reduced motion is requested.

Presencefullhalfhorizontalminivery-minimicro

Error, with retry

Couldn’t load this concert.

Retry

Retried 0 time(s).

Living Colour

Artwork changes the atmosphere; the information hierarchy and silhouette remain Maestro.

Fri 16 May · 19:30

Wagner’s Ring: Twilight of the Gods

Royal Scottish National Orchestra

Glasgow Royal Concert Hall, Glasgow

Sun 7 Apr · 15:00

Elgar’s Cello Concerto

BBC Scottish Symphony Orchestra

City Halls, Glasgow

Sat 6 Dec · 19:30

Shostakovich Five

Royal Scottish National Orchestra

Glasgow Royal Concert Hall, Glasgow

Wed 3 Apr · 19:30

Brahms Clarinet Quintet

Scottish Chamber Orchestra

Usher Hall, Edinburgh

Presencefullhalfhorizontalminivery-minimicro

The card with the printed programme tucked beneath it: a paper whose top edge peeks out from under the card and slides out with the works, the performers, running time and the booking action.

Card + programme paper

Pull the tab. The paper shares the card’s living colour — the numbering, initials and booking gradient all come from the artwork palette.

Fri 16 May · 19:30

Symphony · RSNO

Wagner’s Ring: Twilight of the Gods

Royal Scottish National Orchestra

Glasgow Royal Concert Hall, Glasgow

One shattering finale, drawn from four nights of Wagner.

ProgrammeWagner, arr. de VliegerSlide outSlide up

The loc-small paper card: artwork beside a living-colour panel. Renders as an article, or as a link once an href is given. A kit component with co-located CSS.

Living colour

Sun 7 Apr · 15:00

Elgar’s Cello Concerto

BBC SSO · City Halls

TitleAccentAs link

No artwork

Without an image prop, the art panel falls back to a gradient wash of the accent colour.

Fri 5 Dec · 19:30

Tchaikovsky’s Sleeping Beauty

BBC SSO · Glasgow Royal Concert Hall

The hero card in a location page Featured grid: full-bleed art under a scrim, living-colour date and a pull-quote.

Featured in the city

Sat 17 Oct · 19:30 · GRCH

Dvořák’s New World Symphony

BBC Scottish Symphony Orchestra · Alpesh Chauhan

“A whole new world, remembered in music.”

The This Week strip: a grid of day links. The today variant washes in the aurora gradient. Two days shown here; the Glasgow page passes seven.

The venue tile in a Venues row: a radial wash of its colour behind ink copy. A kit component; the venue-row grid stays page layout.

The season strip card from the Concerts and Season proposal, now a kit component. The compact variant drops the essence quote; tall is the feature size.

Compact

Fri 16 May · GRCH

Brahms’ Violin Concerto

Thomas Søndergård · one violin against the storm

Card accent

The taste-grid card from the home programme proposal. The big variant grows the art pane and heading and carries the reason line.

Worth the journey

Worth the journey

Wagner in Edinburgh

Festival Theatre · 47 miles

AccentBig

The Tonight strip tile: the clock leads, the room follows, the title is bottom-anchored. A short accent rule marks the tile without becoming it.

The waiting state: a staff with a living-colour bow sweeping across it. role="status" carries a visually-hidden label; the visible italic caption stays fixed and decorative. The sweep freezes under prefers-reduced-motion.

The social toast surface: glass surface, avatar slot, text slot, and the check affordance when a friend already has a ticket. Presentational only — no timing or portal logic.

The Spektrix handoff pass: a piano-key barcode drawn as real vector shapes, not an image. The artwork palette drives the edge and perforation living colour as instance custom properties.

Post-concert mood capture. A controlled component: the chosen look is keyed off aria-pressed. This story owns the selection state to show it working end to end.

Plans on paper, rehearsal photography, and programme-like memories. Each owns its colours and readable conversation controls, without page CSS.

A concert plan

A concert plan

MF

Maya FraserFollows you · 4h

Third time hearing this cellist. Bring tissues. I’m in the side stalls if anyone wants to make an evening of it.

BBC SSOElgar’s Cello ConcertoSun 7 Apr · City Halls

From rehearsal

From rehearsal

Royal Scottish National OrchestraOrchestra · 2h

Søndergård in the building. Mahler Six rehearsals begin today—the hall already feels bigger.

RSNOSeason opener: Mahler SixSat 19 Sep · Glasgow Royal Concert Hall

A night remembered

Afterglow

AM

Aoife MurrayFollows you · last night

“That final chord felt like the whole room exhaled together.

TenderElgar’s Cello ConcertoCity Halls · Last night

The named social presence used beside plans, comments, profiles, and notifications. Tone is stable per person; every linked form has a full profile label.

Going and interested are explicit choices; visibility is independent and defaults to friends, following the canonical showcase toggle.

A plan with company

Your next night out

Your plans

Dvořák’s New World Symphony

Sat 17 Oct · Glasgow Royal Concert Hall

GoingInterested

Visible to friendsPeople you follow can see this beside the concert—not in a public tally.

MFLC

Maya & Lewisare interested too

An invitation preview with real clipboard copying, native sharing, a selectable-link fallback, and focus-managed sheet behaviour.

Generic disclosure mechanics with no visual chrome of its own — a plain trigger and body here. Escape while focus is inside the open panel closes it and returns focus to the trigger; the height/opacity transition is instant under prefers-reduced-motion.

The long-form reading surface reproduced from the showcase's "14 / Programme — sheet interaction" demo: handle, reading column, movement list, listen-for callouts — the concert page's notes, not the summary paper beneath a card. Presentational only, always shown open here.

The paper that slides out from beneath a concert card. At rest only its top edge shows — the handle and the composers line — and that edge is the trigger; pulled, it draws out the printed programme (ProgrammePaper): works, performers, running time, tickets and the booking action. Staged here beneath a placeholder block carrying the concert's palette.

An artwork-coloured programme above the browsing page, with compact mobile type. The sheet slides up and down on a phone, settles on desktop, and skips motion when requested. Who / What / Where share a sliding colour indicator; the solid booking action stays in place. Portal styling is independent of product-page CSS.

Unstyled behavior layer: press/keyboard handling, disabled/loading gating, and data-state / data-loading / data-focused for CSS to key off. No aria-pressed — pressed is a transient visual, not toggle state.

Unstyled structural card: role and tabIndex only appear when interactive and rendered as div/article — as="a" relies on native link semantics instead. Selection is exposed as data-state (no aria-pressed).

Tracks scroll state via the data-scrolling attribute and an onScroll(scrollTop, scrollLeft) callback (no per-frame data-scroll-top / data-scroll-left attributes); momentum enables -webkit-overflow-scrolling on iOS, and scrollBehavior sets CSS scroll-behavior (auto or smooth).

The cookie decision surface, rendered inline — in the product it arrives in a modal gate (CookieConsentModal) that cannot be dismissed without an answer. "Essential only" and "Accept all" carry equal weight by design, the optional switches start off, and the detail sits behind a Collapsible rather than a second screen.