[plainprogrammer]

Summary

Spec 057 / #248 (roadmap item 14a): the design system states the rules the deck issues build on, ships the CSS they need, and shows both in six updated previews. It is documents, additions.css, previews and one view class; it changes no helper, model, route, query, export or migration, and touches no tenant data.

• Rules (README and component docs): navigation with Decks (header: Collection, Decks, Search, Scan, Locations; tab bar: Collection, Decks, Search, Scan, More), the mana-* colour rule and a Charts rule, the deck vocabulary (a new "Decks" section), grouped location pickers, the card page's three stats and full-width "In decks" table, Locations lists places only. The README's "≥6:1" is corrected to 5.5:1.
• CSS, each block under its own (spec 057 …) heading and proved in headless Firefox (red first): grouped-select labels and options; the collection filter's location select up to 300px from a 640px collection (c-select--wide, the one view line; Set and Language selects stay 220px); c-stats--three; and the header's logo mark standing in for the wordmark from 640px to 719px while the nav holds five or more links (decision 19, below).
• Owned in code: no file tells anyone to upstream a pattern or wait for a re-export (CLAUDE.md, the skill, README, additions.css, six component and area docs).
• Guard: spec/design_system_tokens_spec.rb keeps ink-muted and line-strong at 3:1 on every surface in all three tokens.css blocks (lowest pair 3.010:1).

Spec 1.1.0, decision 19 (found by a guard)

The guard for "five header links fit at 640px", written against the app's own layouts/_appbar rather than the preview, failed: the account menu ended 54.6px past the bar. The maintainer ruled the logo mark from 640px to 719px (wordmark from 720px). Two calls inside the ruling, approved at the visual review: the swap applies only while the nav holds five or more links (today's four-link header is unchanged until #49), and it ends at 720px (five links plus the wordmark fit from a 695px viewport).

Verification

• Targeted: spec/system/design_system_deck_rules_spec.rb (16), spec/design_system_tokens_spec.rb (6), spec/design_system_files_spec.rb (7), spec/requests/collection_location_select_spec.rb (15): 44 examples, 0 failures. The whole suite is 3103 examples; the pre-push bin/ci passed on 8ed34efe.
• Document criteria are read against the text and recorded, with the AC-7.4 grep hits, in verification.md.
• Implementation review (read-only Opus): SPEC-ALIGNED WITH MINOR FINDINGS (0 blocking, 0 major, 4 minor, 5 nits); fixed or recorded, see verification.md.
• Spec, plan and plan reviews (two rounds) are under docs/specs/057-deck-design-rules/.

Screenshots

Real Collector CSS, headless Firefox. The maintainer's visual review approved them (with one change, the Collection tab uses the app's grid icon, shown below as re-shot).

Header at the swap's edges: 640px (mark), 719px (mark), 720px (wordmark)

Light	Dark

Header and pages at 1280px

Light	Dark

Phone width (390px frame): tab bar, collection, card page

Light	Dark

Grouped select (the form select and the filter select as open lists; the real dropdown is the browser's own)

Light	Dark

Location filter: 300px against the Set select at 220px (700px), both 220px (390px)

Light	Dark

Notes

• .claude/memory/ changes: the ownership memory reworded as settled, the spec 019 follow-ups memory deleted (PR fix(design): fit card images without cropping #66 merged on 2026-10-12), one new reference memory; plus one lesson in docs/lessons/.
• The Decks link and tab in the system examples are cloned from Collection's in the page; the real ones arrive with Create, rename and remove a deck #49, whose examples will measure them.

Closes #248.

🤖 Generated with Claude Code