Appearance
Reference set
Part of the design-brief package (issue #263). Curated examples with one-line rationales — what to emulate, what to avoid. These calibrate taste; the binding rules live in the principles and quality bar.
Liked — emulate the named quality
| Reference | Why |
|---|---|
| nanawall.com product pages | The brand baseline: photography-led, generous type (19px body), calm neutrals + teal — NanaSelect must read as this brand's tool. |
| tokens.nanawall.com | The token reference site — the authoritative visual rendering of the brand values in assets/tokens.json. |
| TurboTax's guided interview | The canonical one-decision-per-screen flow: plain-language education at each question, visible progress, momentum through a long questionnaire — exactly the stepper's register. |
| Apple's "Help me choose" / Mac compare | Plain-language trade-off education beside honest spec comparison; premium feel without salesy pressure. |
| Warby Parker's quiz | A guided flow that feels lighter than browsing — proof that principle 3's "guide beats filter" can win on perceived speed. |
| Wirecutter's "budget pick" framing | The editorial model for the right-sizing nudge: the cheaper recommendation presented as expertise working in your favor, never as a downgrade. |
| Stripe's documentation UI | Register separation done well — dense, monospace-accented technical surfaces that still feel like the marketing brand; the model for public-vs-admin. |
Disliked — avoid the named failure
| Reference | Why |
|---|---|
| The current NanaWall product finder | The anti-pattern this product replaces: filter-as-you-go, live result counts, a pile of undifferentiated options, zero education — if a mock resembles it, the design has failed. |
| Car-brand "build & price" tools | Prestige-tiered trims and up-sell-default packaging — the exact "podium" framing banned for Budget/Mid/Premium/Ultra. |
| Big-box faceted search (door/window aisles) | Dozens of checkboxes, no guidance, no convergence — density mistaken for capability. |
| Marketing-site quizzes that gate results behind a lead form | Violates the vision's non-goal directly: hand-offs are offered, never a gate. |
| Window configurators that start at configuration | Jumping to glass/frame/hardware options assumes the system choice was right — the mis-specification NanaSelect exists to prevent. |
| Dashboard-y admin templates (generic SaaS kits) | Chart-heavy, widget-first admin aesthetics; NanaSelect's admin is a focused data-editing tool, not a KPI theater. |
How a design AI should use these
Emulate the quality named in the rationale, not the pixels — this product must not look like TurboTax or Apple. When a generated design is reviewed, resemblance to anything in the disliked table is grounds for rejection under the corresponding acceptance heuristic (H1, H2, H6, H7).