Designing 'Score' — a design system inspired by sheet music

Every MusicaTechLab site is moving to a shared design system called Score.

The idea

Score takes its cues from well-printed sheet music — the kind you’d find from Henle or Bärenreiter. Warm off-white paper, ink-black text, thin and precise rules instead of heavy borders or shadows. A single accent color, a deep red reminiscent of an editor’s pencil mark, used sparingly.

Concretely, that means:

• Paper and ink — #FBFBF9 and #1A1A1A, never pure white or pure black.
• Restraint — whitespace is treated as a rest, not empty space to fill.
• One accent — #A93B2A, used once or twice per screen, never as a gradient.
• Type — Montserrat and Zen Kaku Gothic New for UI and body text; Bodoni Moda and Shippori Mincho reserved for large display headings.

Why

The three MusicaTechLab sites originally shared a dark, glassmorphic theme — navy backgrounds, blue-to-purple gradients, blurred cards. It read as a generic “tech template,” and it didn’t say anything about music. Score is an attempt to make the sites feel like the thing they’re about.

This blog is the first place the system is fully applied end to end. More notes on the individual components will follow as the other sites migrate.