Frost String Quartet — six design directions

How to look at these. Start with the screenshots below, then open the ones you like and scroll — much of the work is in the motion, which a still image cannot show. Every design has the same five pages: Home, Musicians, Concerts, Voices and Contact.

Every fact comes from the existing site. All seven musician biographies, all eleven concert dates and venues, the one testimonial and the mission text are exactly as published. Nothing was invented — where a design wanted content the data could not supply, the design was changed instead.

Design 01 is the closest to the reference you shared. The other four deliberately go elsewhere, so there is a real choice to make. Design 06 is the new client direction, created after the detailed feedback email and the Dover, Brentano, Formosa and Pacifica references.

Desktop home page of the Bone & Slate design.

Design 01

Bone & Slate

The reference, in its own language

This is the one that is the design language of danishquartet.com — the site the client already likes — carrying the quartet’s own content.

A full-bleed documentary photograph on black anchors the top of every page, the headline in IBM Plex Sans 400 laid over a scrim. Three photo tiles carry the big overlaid links. Slate-blue blocks with cream type carry the editorial weight — the mission, the story, the invitation — and bone bands separate the movements. IBM Plex Serif for reading and for the italic credits. Zero corner radius, no shadows, no gradients, one type weight throughout. Restraint is the whole point.

Type: IBM Plex Sans / Serif / Mono
Palette
Motion: Photographs settling from 1.06 to 1.00 as they enter, hairline rules drawing in, cross-fade page transitions, a bone scroll line. Deliberately quiet.
Informed by: apple · theverge · wired · notion · airbnb · mintlify · figma

Desktop home page of the Resonance design.

Design 02

Resonance

Sound made visible

A quartet is four vibrating bodies. This design renders that literally — on bright paper, the way an oscillogram looks printed.

Every page carries a GPU-drawn harmonograph plate: four damped pendulums running at the quartet’s real frequency ratios — A4 440, D4 294, A3 220, C2 65, reduced to 6:4:3:1 — one traced line per voice, one colour per voice. Each page draws a different figure from the same machine. Every musician also gets a waveform seeded from their own name, tinted by the chair they play. The concerts are plotted as a stem chart on a real 2023–2026 axis.

Type: Instrument Serif / Inter Tight / JetBrains Mono
Palette
Motion: WebGPU with WebGL2 and static-SVG fallbacks. The figure draws itself; hovering a link plucks a ripple through it.
Informed by: elevenlabs · spotify · runwayml · replicate · minimax · cohere · x.ai · stripe

Desktop home page of the Atelier design.

Design 03

Atelier

A museum programme

Swiss grid discipline and exposed structure, with one violent accent. The confidence of an exhibition poster — except the exhibition is seven fourteen-year-olds who play in nursing homes.

A visible twelve-column rig runs the full height of the document, with numbered margins and a GRID toggle in the colophon. Headings are optically fitted to the measure and split character by character. Photographs sit in hairline frames with plate captions. The musicians are a catalogue raisonné; the concerts an exhibition checklist. The tension between the austere grid and the tenderness of the content is the design.

Type: Archivo / Newsreader / Space Mono
Palette
Motion: Native CSS scroll-driven animations with a GSAP fallback, character reveals, plates clipping open, hard-cut page transitions.
Informed by: figma · linear.app · vercel · superhuman · sanity · wired · mintlify · raycast

Design 04

Bloom

The children’s spirit

The direction that goes hardest at the one instruction that mattered most. Warm, generous, tactile — the feeling of a sunlit room where kids are tuning up.

A real bento grid of soft clay surfaces with inset highlights, spring physics on every interaction, and pointer-tracked 3D tilt on the cards. Thirteen hand-drawn SVG marks — staves, a fermata, a bow, a bloom, a dotted path — do the connective work; no emoji anywhere. Each of the four parts owns a colour that follows its player across the whole site. The interests the kids actually listed — cross country, snowboarding, painting, engineering — get real space.

Type: Fraunces / DM Sans / Caveat
Palette
Motion: Spring-settled tiles, hover lift, press scale, a dotted path that draws itself down the concert list.
Informed by: airbnb · clay · notion · pinterest · cal · intercom · framer · starbucks

Desktop home page of the Marble & Brass design.

Design 05

Marble & Brass

Cinematic reverence

The engineered reverence Bugatti and Ferrari give to a machine, given instead to a violin — and to the act of playing for someone who is ill or elderly.

White marble instead of black, brass instead of chrome. A real 3D brass ribbon reads as a bow stroke and a sound wave at once, its form driven by scroll. Three pinned cinematic chapters carry the story; photographs are uncovered by a brass hairline sweeping across. The statistics become a milled specification panel. Each musician gets a full-width chapter with a Roman numeral. The luxury here is the care, not the ostentation.

Type: Cormorant Garamond / Montserrat
Palette
Motion: Three.js WebGPU with WebGL2 and static-SVG fallbacks, Lenis smooth scroll, scroll-scrubbed chapters, brass curtain reveals.
Informed by: bugatti · ferrari · lamborghini · bmw-m · apple · nike · tesla

Design 06 · New client direction

Client Direction

One refined answer to the feedback

A new website direction built from the client’s liked features and four ensemble references — not another revision of the original five.

The home page puts a group image, Fairfax County, Fall 2023 and the impact statistics immediately in view. Mobile navigation stays fully visible. The Musicians page separates the founding quartet from the three performing members and gives every musician structured School, Introduction, Accolades and Beyond the Stage sections. Mission, community work and past performances are brought together as a clear proposal while the final content labels are still being decided.

Type: Instrument Serif / DM Sans
Palette
Structure: Home, Musicians, Concerts, Voices and Contact. Thirty responsive pages across all six directions.
Informed by: dover quartet · brentano quartet · formosa quartet · pacifica quartet