Appearance
Design-brief package
A versioned, self-contained brief for handing to a design-generating AI (issue #263): everything needed to produce a top-notch, on-brand NanaSelect design in one shot — and to judge the result, not just admire it.
Contents
| File | What it covers |
|---|---|
| design-principles.md | The vision's product principles as UI heuristics a design AI can follow |
| brand-tokens.md | Token source (@nanawallweb/design-tokens), the 21-name --nw-* contract, the app's 40-name --ns-* delivery contract, and the gap audit (filed upstream) |
| screen-inventory.md | Every public and admin surface: purpose, key states, priority |
| component-inventory.md | The reusable pieces the design must define, with behavioral requirements |
| art-direction.md | Imagery guidelines, voice & tone, and the real-content (no lorem ipsum) rule |
| constraints-quality-bar.md | Tech constraints, WCAG 2.1 AA bar, responsive matrix, and the 8 acceptance heuristics |
| references.md | Curated liked/disliked examples with one-line rationales |
| BRIEF.md | The hand-off: the package assembled into one self-contained document — paste/upload it with assets/tokens.json attached |
| direction-2026-07-public-experience.html | The 2026-07 design direction (interactive — open in a browser): width/layout strategy, compare & results redesigns, the three themes × three layouts as distinct experiences, prioritized gap list, demo choreography. The forward plan the brief's next revision folds in |
| validation-log.md | Trial designs generated from the brief and what the brief failed to communicate |
| trials/trial-001/ | First trial: 40-token theme + stepper/results mocks + candid delivery notes |
| assets/tokens.json | Full 3-tier brand token tree (attach with the brief) |
| assets/contract-names.json | Canonical 21-name contract snapshot |
Ground rules
- Designs are themes. Output must be expressed as values for the 40-name
--ns-*theme contract plus token-referencing components — never hardcoded values (theming reference). - Real content only. Briefs and mocks use the real 24 systems and real factor names — no lorem ipsum.
- Brand values come from the package. Never invented, never re-extracted; gaps are filed upstream (brand-tokens.md).