Constraints & quality bar

Part of the design-brief package (issue #263). The hard edges a generated design must fit inside, and the heuristics for judging whether it's good — not just pretty.

Tech constraints

• Stack: Svelte 5 + Tailwind v4 (CSS-first config — design tokens map through the @theme inline block in src/routes/layout.css; there is no tailwind.config.js). SSR on Cloudflare Workers.
• Designs are themes. Deliver as values for the 40-name --ns-* contract (one theme CSS file) + markup referencing only those tokens or the Tailwind utilities mapped from them. Hardcoded hex/rgb/font/radius literals outside theme files fail the build (scripts/check-theme-tokens.mjs).
• No external dependencies at runtime: no font CDNs (font stacks must resolve locally or self-hosted), no external CSS/JS, no icon CDNs, no analytics beacons. Everything ships from the Worker/assets.
• Performance budget (edge): the public flow must stay light — no component libraries, no runtime CSS-in-JS, no large icon packs; images only through the media pipeline's renditions (thumb/card/hero/full) with loading="lazy" below the fold. Server-rendered pages must be readable before JS (the stepper enhances, the home page works with none).
• Degradation is designed, not accidental: every dynamic slot has a designed absent state (see the screen inventory per-screen states).

Accessibility bar — WCAG 2.1 AA

Non-negotiable; the existing build treats these as regressions:

• Contrast ≥ 4.5:1 for text (3:1 large text/UI components) — verify token pairs (text on bg/surface, on-accent on accent, each state -soft/text combination), don't eyeball them.
• Keyboard: everything operable, visible focus (--ns-color-focus ring), logical order, no traps; the stepper is fully keyboard-completable.
• Semantics: radio groups are radio groups, progress announces N-of-M, landmarks and heading hierarchy per screen, decorative imagery alt="", meaningful imagery described.
• Motion respects prefers-reduced-motion; nothing conveys meaning by color alone (state trios pair color with icon/text).
• Touch targets ≥ 44×44px.

Responsive matrix — mobile-first

Breakpoints (from the token tree): 480 / 768 / 1024 / 1280 — amended 2026-07 with wide-screen behavior above 1280 (see the BRIEF §7 amendment and the direction doc §3).

Range	Register
< 480 (base)	Single column; stepper is the primary experience; comparison table pins first column and scrolls
480–768	Single column, roomier; track cards may pair up
768–1024	Two-column moments (education beside options is allowed but the option column stays dominant); compare shows 2–3 systems
≥ 1024–1280	Full layouts; compare shows 3–4 systems; admin gains sidebar + content pane
1280–1536 (2026-07 amendment)	Layout file governs width via --ns-layout-max-width (Standard 72rem); fluid clamp() type/space ramps engage; stepper keeps its ~44rem question column
≥ 1536 (2026-07 amendment; 1920 reference canvas)	Editorial 90rem (1440) with full-bleed hero/band moments running edge-to-edge; compare matrix may widen to 96rem with 4 systems; type and rhythm ramps reach their clamp() maxima

Design mobile-first: the P1 flow (home → stepper → results) must be excellent on a phone; the compare view may be best on desktop but must be usable on mobile.

Acceptance heuristics — judging a generated design

Score each 1–5; a design that averages under 4, or scores under 3 on any of H1–H3, is rejected regardless of how it looks.

• H1 — The nudge test. Find the cheaper-alternative call-out on the results mock. Does it read as first-class good news (success treatment, card prominence, own action) — or as fine print / an upsell banner?
• H2 — One decision. On any stepper mock: exactly one factor, education visible above the options without interaction, one primary forward action, progress visible. Anything extra (result counts, sibling questions, competing CTAs) fails.
• H3 — Token fidelity. Could this design ship as a theme file? Every color/font/radius/shadow maps to one of the 40 --ns-* names; brand values trace to assets/tokens.json; anything absent from both is explicitly listed as a proposed token, not silently hardcoded.
• H4 — Real-content survival. Swap in the longest real content ("NW Acoustical 645", a 3-paragraph education callout, a 14-step progress bar, a "??" matrix cell): no truncation surprises, no broken layouts.
• H5 — Empty-state grace. Remove all dynamic content (no tracks, no images, no session): does the home page still look designed?
• H6 — Register separation. Public reads calm/educational; admin reads dense/utilitarian; both are recognizably the same brand via tokens.
• H7 — Continuity without mimicry. Side-by-side with nanawall.com: recognizably the same brand (type, teal, neutrals) but clearly a focused tool, not a page of the marketing site.
• H8 — Accessibility spot-check. Sample 5 token pairs for contrast, tab through the stepper mock's interaction design, check focus visibility and touch-target sizes as specified above.