Replace the generated design vocabulary in the JS templates

[timkpaine]

Five JavaScript extensions shipped the same design system into every project generated from them. Two unrelated sites built from this template — tim.paine.nyc and a Hasan Piker clip archive — turned out to be recognisably the same design, down to a moon icon path differing by three tenths of a unit.

The common source is here.

What every generated project was getting

Tokens	paper / ink / muted / line / accent
Accent	#6cff8f, applied wherever a page looked flat
Eyebrow	.eyebrow { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase }
Headline	h1 { font-size: clamp(3rem, 10vw, 8rem); line-height: .85; letter-spacing: -.06em }

Affected: uitk-svelte, uitk-webawesome, site-react, site-sveltekit, site-webawesome.

Changes

Tokens are named for the role a color plays, not a material it imitates.

paper → bg          ink   → fg
                    muted → fg-muted
line  → border      accent → (removed)
                    bg-raised, focus (new)

Roles survive a redesign; metaphors have to be renamed or quietly start lying. paper/ink also carry an aesthetic — they presume a print look before the consumer has chosen one.

The decorative accent is gone. focus replaces it and is the only non-neutral color left, because a focus ring is an accessibility requirement rather than a flourish. A single accent applied wherever a page looks flat is precisely how unrelated products end up looking identical.

Defaults are plain greys, documented as placeholders. They exist so a generated project renders legibly on first run, not because they are anyone's brand.

The eyebrow and the oversized headline are removed from both toolkit galleries and all three site templates.

BRAND.md no longer ships a filled-in palette that consumers keep by default. It is now a table to complete, plus the two rules worth keeping whatever the palette becomes.

Verification

All five templates render, lint, type-check and build:

copier copy . <out> --data-file examples/<t>.yaml   # ✓ ×5
pnpm lint && pnpm check && pnpm build               # ✓ ×5

Contrast on the shipped defaults, computed against WCAG 2.1 relative luminance:

Pair	Light	Dark	Needs
fg on bg	17.93	16.00	4.5
fg on bg-raised	16.59	14.56	4.5
fg-muted on bg	6.69	7.70	4.5
fg-muted on bg-raised	6.19	7.00	4.5
focus on bg	6.62	8.97	3.0
focus on bg-raised	6.13	8.16	3.0

Breaking change

This renames the public CSS custom-property contract. Existing generated projects will conflict on copier update and must map the old names to the new ones. Given the tokens are the thing being fixed, a rename is the point rather than a side effect.

timkpaine/ui has already moved off this vocabulary independently (timkpaine/ui#3) and will conflict on these files regardless.