Design system

One palette, two grounds, one red.

Everything on this site is built from the tokens below. The swatches and the contrast figures on this page are read out of theme.css at build time, so it cannot drift from what ships.

The mark

An arrangement, played through.

An arrangement seen straight on, in a red block hung from the top edge. The playhead is the page: it starts at the left and reaches the right as you reach the end, filling the notes in behind it. Never set it on a busy ground, never recolour it, never add a wordmark beside it.

At the top of a page

Two thirds read

Header size

Colour

Two grounds, never inverted by hand.

Each token carries a light and a dark value. Use the token, never the hex. The figures are the WCAG ratio against that theme’s ground.

Ground

What everything sits on. Warm, never pure white.

--paper

#f7f4ec / #16161a

1.00 · 1.00 on ground

--paper-2

#fffdf7 / #1e1e23

1.08 · 1.09 on ground

--paper-3

#efeadd / #26262c

1.09 · 1.20 on ground

Ink

Text, in three weights of presence.

--ink

#1c1b18 / #f0ece2

15.67 · 15.30 on ground

--ink-2

#4a4740 / #bdb8ad

8.43 · 9.13 on ground

--ink-3

#746f65 / #8b867c

4.54 · 4.98 on ground

Accent

One red. It points, it never decorates.

--red

#c43e2a / #ff6a4d

4.69 · 6.38 on ground

--red-soft

#fbe9e4 / #3a201a

1.07 · 1.20 on ground

Structure

Dividers, then borders on things you can press.

--line

#ddd7c8 / #34343c

1.31 · 1.46 on ground

--line-2

#e9e4d7 / #2b2b32

1.15 · 1.28 on ground

--line-strong

#b3ab98 / #56565f

2.08 · 2.49 on ground

Support

Reserved for asides and warnings.

--sage

#e2e9e1 / #1e2a22

1.13 · 1.21 on ground

--sage-ink

#33513a / #a8ccb1

8.03 · 10.26 on ground

--amber

#956512 / #e0a842

4.61 · 8.46 on ground

--amber-soft

#fbf1dc / #322715

1.02 · 1.23 on ground

Type

Space Grotesk, and mono for anything physical.

Space Grotesk carries the voice. JetBrains Mono is reserved: a control name, a value, a label. If it is something you press or a number you read off, it is mono.

The type scale
Role	Size	Weight	Face	Used for
Display	clamp(2rem, 5vw, 3rem)	700	Space Grotesk	Page titles. One per page.
Heading	1.12rem	700	Space Grotesk	Group and card names.
Body	1rem	400	Space Grotesk	Everything you read.
Note	.8rem	400	Space Grotesk	The line under a card.
Label	.66rem	700	JetBrains Mono	Uppercase, tracked. Eyebrows and counts.
Keycap	.8em	700	JetBrains Mono	A physical control, always in mono.

Components

Few pieces, reused everywhere.

The same card, chip and keycap appear on every guide. A new page composes these rather than inventing shapes.

FN PLAY

Keycap

A physical control. Mono, boxed, accent.

FNPLAY

Chip

A filter you can hold down. Filled when active.

Gesture score

One lane per control, time left to right.

Device

Lights the controls a move needs.

Voice

Say less.

Terse, physical, no reassurance. The reader has the hardware in their hands.

Short sentences.One idea each. If it needs a comma splice, it needs a full stop.
No em dashes.Use a full stop or a colon. This is a house rule, applied everywhere.
No "friendly", no "simply", no "just".They promise ease instead of delivering it.
Say the move, then the result."Hold FN and click the rocker. Up halves the window."
Name things the way the hardware does.FN, PLAY, T1. Never "the function key".
Warnings earn their colour.Amber only where something is destroyed or lost.

Non-negotiable

Checked on every build.

Text contrast clears 4.5:1Both themes, every pair. tools/contrast.mjs proves it.
One h1 per pageChecked by tools/a11y.mjs on every build.
Skip link firstBefore the header, pointing at #main.
Every control has a nameVisible text, or aria-label. Icon-only buttons always get one.
Decorative SVG is hiddenaria-hidden, with the meaning carried in adjacent text.
Motion is optionalprefers-reduced-motion leaves the baked, static pose.

npm run check runs the accessibility audit. node tools/contrast.mjs proves the palette.