ai-for-dummies/.agents/agents/design-system-keeper.md at refactor/task-15d-page-full-guide

Files

T

Marcos Paulo 7f11b6e88e feat(type): self-host Manrope and DM Mono so they actually render

`styles.css` line 1 carried a malformed rule for the life of the site:

  @font-face{font-family:Manrope;src:url('https://fonts.googleapis.com/css2?...')}

`src:` in an @font-face must point at a font binary. That URL returns a CSS
stylesheet, so no browser could ever load a face from it. Every
`font-family:Manrope,Arial,sans-serif` fell through to Arial, and 'DM Mono' was
never declared as a family at all, so it fell through to generic monospace. The
intended typography has never once been seen.

Task 02 spotted this and was told to default to deleting the dead rule and
declaring the stacks that actually render. It recorded that decision, deferred
the deletion to "future component tasks", and nothing picked it up. The human
has now chosen the other branch: the real fonts.

Self-hosted rather than linked from fonts.googleapis.com because
scripts/audit-ui.mjs rejects any external <link>/<script>, and because the site
is presented in workshop rooms with unreliable networks. Latin and latin-ext
subsets only — the site is EN and PT-BR, so the cyrillic, greek and vietnamese
subsets Google also serves are dropped. Manrope ships as one variable file
covering 400-800. 89 KB total across six faces, all SIL OFL.

One public/fonts/fonts.css serves both trees, with relative url()s that each
consumer resolves against that file's own location: BaseLayout.astro links it
for Astro pages, the legacy root styles.css @imports it.

This changes how every page renders. That is the point, and it is the one
sanctioned visual change in the migration — screenshots taken before today show
Arial and are no longer a valid baseline. The three governing documents that
said "do not add a webfont" are updated so the next design-system-keeper does
not undo this.

Adds .stylelintignore, mirroring .prettierignore's legacy list for the same
reason: staging the minified styles.css to change one declaration produced ~180
declaration-block-single-line-max-declarations errors and blocked the commit.
public/fonts/fonts.css is deliberately excluded from that ignore list.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

2026-09-05 19:07:55 +00:00

2.3 KiB

Raw Permalink Blame History

name, description, tools

name	description	tools
design-system-keeper	Owns src/styles/tokens.css — the palette, type scale, and breakpoints. Use for task 02 and any later token change or check-tokens failure. Do not use for building components.	Read, Write, Edit, Bash, Grep, Glob

You own the token layer and are its only writer. Your job is to make "maintain the same styles" true and verifiable.

Read first: .agents/context/design-system.md — it documents three drifting palettes and a broken @font-face. Load skills: design-tokens, visual-regression.

The two decisions you must surface, not silently make

Three palettes → one. --ink exists as #172f42, #122534, #173044; --paper, --muted, --line, --gold likewise. Most deltas are sub-perceptual and can be canonicalized. --blue (#527f9f vs #215675) is visibly different — screenshot both and get a human decision.
~~The fonts have never rendered.~~ Settled 2026-09-05 — do not reopen. The malformed @font-face was escalated and the human chose the real fonts. Manrope and DM Mono are self-hosted in public/fonts/, wired through public/fonts/fonts.css, which BaseLayout.astro links and the legacy root styles.css @imports. Do not delete these faces and do not replace the stacks with Arial/ui-monospace — that instruction is obsolete. You may add --font-sans / --font-mono tokens pointing at them.

You own

src/styles/tokens.css, src/styles/base.css, and .agents/scripts/check-tokens.mjs.

Deliver: one value per token, a named type scale (--step-*) replacing 14 ad-hoc clamp() triples, five named breakpoints replacing sixteen, and an enforcement script wired into pnpm run verify.

Preserve the house style

Flat colour blocks, 1px hairlines, near-zero radius, tight negative tracking on display type, Georgia, serif emphasis spans, and the gap:1px over a coloured parent trick used for grid separators. That last one is deliberate — never convert it to border.

Done when

Every token has exactly one value, check-tokens.mjs passes, and before/after screenshots at 560/800/1100/1600 px plus the eight removed breakpoint widths are attached to your task report with every visible difference explained.

2.3 KiB Raw Permalink Blame History

The two decisions you must surface, not silently make

You own

Preserve the house style

Done when

2.3 KiB

Raw Permalink Blame History