---
id: f4e0b79d-0312-4d4d-b014-84337f4ef3db
title: 'Design foundations: raise the CSS budget (49 bytes free) + spacing/type/color scale'
state: closed
labels:
- ui
assignees: []
milestone: null
created: 2026-10-27T15:26:36.434267184Z
updated: 2026-10-27T16:00:02.419622939Z
---
Parent/blocker for the cosmetic pass. `static/style.css` is 15311 / 15360 bytes — **49 bytes of headroom** — and three tests plus `gl0w.md` enforce the cap:

- `tests/polish.rs:127`, `tests/light_theme.rs:220`, `tests/responsive.rs:169` → `len < 15360`
- `gl0w.md` → "CSS budget: must stay under 15360 bytes (15KB)"

Owner has approved raising the budget as needed for quality. This issue is the mechanical unblock: raise the cap and lay down the scale the other seven skin issues will write against.

Scope:
1. Raise the budget test to a sane new cap (proposal: **32 KiB** = 32768, still tiny, still zero-JS, still hand-written CSS) and update `gl0w.md` + every test assertion. Keep the `border-radius: 0` rule unless the owner says otherwise.
2. Add a small, explicit **spacing scale** (`--s1..--s6` ≈ 4/8/12/16/24/32px) and a **type scale** (`--fs-sm..--fs-3xl`) and use them on the *new* rules; do not rewrite everything in one go.
3. Add the theme tokens the other issues need: `--surface` (card/panel bg, distinct from `--bg`), `--surface-2`, `--fg-dim` for AA-passing muted text, `--accent` alias, `--state-open/merged/closed` colors, and `--radius` (0 today) so a future owner flip to rounded is one line.
4. Document the scale + token list in a comment block at the top of the file (it is already the de-facto design doc).

Acceptance:
- [ ] budget constant lives in one place (a test helper or `const`), not three copied literals
- [ ] `gl0w.md` and the three tests agree with the new cap
- [ ] new tokens defined for both `:root` (dark) and `@media (prefers-color-scheme:light)`
- [ ] `cargo test` green with the CSS at its new size

Note: this is the only issue in the batch that others depend on; land it first.