LONG LONG TENOR
REFERENCE

Design System

The stage-lit visual language behind every page — crimson, cream, and operatic serif type.

MOOD

Stage-lit, dramatic, cinematic. Black and red, warmed with cream highlights and a faint film grain — a printed-program feel applied to the web.

SOURCE
src/styles.css
COLOR SPACE
oklch()
RADIUS SCALE
2 / 3 / 4 / 6 px (architectural)
MODE
Dark-only (no light theme)
COLOR TOKENS
--background
Background
oklch(0.08 0.012 25)
Page background
--foreground
Foreground
oklch(0.95 0.012 80)
Primary text / cream
--card
Card
oklch(0.11 0.012 25)
Card surfaces
--popover
Popover
oklch(0.10 0.012 25)
Popovers, dropdowns
--primary
Primary / Crimson
oklch(0.55 0.22 25)
Brand accent, CTAs, rules
--ember
Ember
oklch(0.65 0.20 28)
Lighter red highlight
--cream
Cream
oklch(0.95 0.012 80)
Light text & highlights
--secondary
Secondary
oklch(0.16 0.012 25)
Subtle surfaces
--muted
Muted
oklch(0.16 0.012 25)
Muted backgrounds
--muted-foreground
Muted Foreground
oklch(0.70 0.015 80)
Secondary text
--accent
Accent
oklch(0.18 0.04 25)
Accent surfaces
--border
Border
oklch(0.25 0.012 25 / 60%)
Hairline borders
--input
Input
oklch(0.20 0.012 25)
Form inputs
--ring
Ring
oklch(0.55 0.22 25)
Focus rings
--destructive
Destructive
oklch(0.55 0.22 25)
Errors
Stage Vignette
.stage-vignette · radial + linear black overlay for hero imagery
Red Rule
.red-rule · 1px crimson gradient divider
Hairline
.hairline · 1px cream/15% top border
Crimson Glow
.glow-crimson · crimson outer shadow
Film Grain
.grain · SVG fractal-noise overlay (uses ::after)

Try selecting this text to see the crimson selection color.

Selection
::selection · crimson background, cream text
TYPOGRAPHY
SERIF — DISPLAY & BODY LEAD
Long Long
tenor
FAMILY
Cormorant Garamond
FALLBACK
EB Garamond, Georgia, serif
WEIGHTS
300, 300i, 400, 400i, 500, 600, 700
CSS VAR
--font-serif
UTILITY
.font-serif-display
SANS — UI & LABELS
OFFICIAL WEBSITE
NEXT ON STAGE · TICKETS · PRESS
FAMILY
Montserrat
FALLBACK
ui-sans-serif, system-ui
WEIGHTS
300, 400, 500, 600, 700
CSS VAR
--font-sans
UTILITY
.font-display · .tracking-widest-2 (0.32em)
H1 — HERO TITLE

The art of bel canto.

font-serif-display · 5xl→8xl · weight 300 · tracking -0.05em
H2 — SECTION TITLE

Selected Honours

font-serif-display · 3xl→4xl · weight 400
EYEBROW
OFFICIAL WEBSITE
font-display · 11px · extrabold · tracking-widest-2 · text-crimson
BODY — BIO LEAD

A celebrated tenor known for his luminous tone and dramatic presence on stages from La Scala to the Met.

font-serif-display · lg/xl · weight 300 · text-foreground/85
UI LABEL
FULL CALENDAR
font-display · 12px · tracking-widest-2
MUTED CAPTION
Teatro alla Scala · Milan · 2025
text-sm · text-muted-foreground (Inter)
COMPONENTS & MOTIFS
PageShell

Top-level page frame composing SiteHeader + main + SiteFooter, with optional top padding for sticky nav.

USED IN
All routes
FRAME
SiteHeader (fixed)
main · {children}
SiteFooter
PageHero

Full-bleed hero with image or autoplaying video, vignette overlay, eyebrow, serif title, optional subtitle, and a red rule. Includes a SOUND ON / OFF toggle when video is provided.

USED IN
/about/calendar/press/repertoire/contact/design-system
EYEBROW
Hero Title
Section

Centered, max-w-7xl horizontal container with responsive page gutters.

USED IN
All content pages
max-w-7xl · px-5 md:px-10
SectionLabel

Small crimson eyebrow preceded by a hairline dash. Anchors each major section.

USED IN
Most page sections
SECTION LABEL
Now-on-Stage Card

Bordered, blurred-background overlay card with a pulsing crimson dot, opera title, composer/role, venue, and a CTA link to the full calendar.

USED IN
/ (Hero)
NEXT ON STAGE
Tosca
Puccini · Mario Cavaradossi
Teatro alla Scala
Mar 12 – Apr 02
FULL CALENDAR
Hero Dot Indicator

Thin 1px bars beneath the hero, expanding to crimson on the active slide.

USED IN
/ (Hero)
Performance Row

Date · opera · composer/role · venue with a TICKETS or SOON link. Stacked rows with hairline separators.

USED IN
/calendar/ (NowPerforming)
MAR 12
Tosca
Puccini · Cavaradossi
Teatro alla Scala · Milan
TICKETS →
Press Quote Card

Pull-quote in serif italic with publication source and context. Tier-1 quotes also drive the homepage rotating press carousel.

USED IN
/press/ (PressCarousel)
“A voice of luminous power and aristocratic phrasing.”
THE TIMES
Royal Opera House · Tosca · 2024
Award Row

Year · title · short detail laid out in a two-column grid.

USED IN
/about/press
2023
Operalia, First Prize
Plácido Domingo · Warsaw
Repertoire Group

Composer header followed by a list of role · opera entries.

USED IN
/repertoire/ (RepertoireTeaser)
Giacomo Puccini
Cavaradossi — Tosca
Rodolfo — La Bohème
Pinkerton — Madama Butterfly
VideoCard / Sampler

Compact video tile with a SAMPLER label, used in the Recordings grid.

USED IN
/repertoire
SAMPLER 01
SiteHeader

Fixed top header with logo, scroll-aware background, desktop nav, and mobile drawer. Active routes highlighted with crimson.

USED IN
All routes (via PageShell)
LONG LONG
HOMESCHEDULEPRESSCONTACT
SiteFooter

Three-column footer (brand + social, EXPLORE nav, MANAGEMENT contact) plus a bottom legal bar.

USED IN
All routes (via PageShell)
Long Long
Tenor
EXPLORE
Schedule
Press
About
MANAGEMENT
MK Impresari
ANIMATION
.animate-rise
Rises in
0.9s upward fade. Used for hero titles and overlay cards.
.animate-fade
FADES IN
1.2s opacity fade. Used for eyebrows and secondary copy.
ll-fade-zoom
Slow Ken-Burns scale on hero imagery.
RADIUS SCALE
--RADIUS-SM
2px
--RADIUS-MD
3px
--RADIUS-LG
4px
--RADIUS-XL
6px
Tokens live in src/styles.css. Layout primitives in src/components/page-shell.tsx.
BACK TO STAGE
CREDITS
WEBSITE DESIGN
joachim.stroh@gmail.com

Website design, management & productization for professional artists.

SEND A MESSAGE