NanaSelect · Design direction · 2026-07-06

The machinery is built. Now make it feel like NanaWall.

A direction for turning the public-facing selector into a top-tier buyer experience: real width, real photography, a compare screen worthy of experts, a payoff-first results page — and four themes that are four experiences, not four palettes.

Scope Public surfaces only (home · /select · results · /compare) Grounded in docs/design/BRIEF.md · live audit of localhost:6650 · nanawall.com Register Calm, confident, architectural — photography carries the interest

1 · The reframe

You already own the hard part

The audit's biggest finding isn't a gap — it's an asset. NanaSelect already has a two-dimensional presentation system most products never build: four public themes (NanaWall, Graphite, Linen, Pressroom) under a 41-token --ns-* contract with build-time enforcement, and five orthogonal structural layouts (Standard, Editorial, Spotlight, Magazine, Spread), both resolved server-side and stamped on <html> with zero flash. Adding or reworking a theme is one CSS file; components never change.

So "we need distinct themes to demonstrate switching" is not a build request — it's a design-depth request. The switching demo already works. What's missing is the reason to gasp when it switches: today the four themes are palette swaps over the same sparse, narrow, photo-less wireframe. The work is to make the shared experience excellent, then let each theme give it a genuinely different voice.

Four moves and one dependency get you there:

  1. Width — make the layout dimension real on every public page, with full-bleed photography bands.
  2. Compare — group the picker by operation type, group the matrix by attribute category, fix the difference treatment.
  3. Results — tab it: recommendation first, answers second; restore the right-sizing nudge to hero status.
  4. Themes — give each theme an audience, a typographic voice, an imagery treatment, and a motion personality.
The dependency

Every "inspirational, enticing, full-bleed" ambition runs through real photography. The media pipeline (renditions, R2 + Drupal referencing, per-entity hero images) is finished code — but the local library contains placeholder color blocks. Until Drupal imagery is ingested, tagged, and attached (per-system heroes, per-operation-type signature shots), no theme will look designed. This is the critical path for the presentation.

2 · Current state

What the audit found

Screen Working Broken / missing
Home Static-first degradation; persona tracks; right-sizing story section; honest voice Hero buried under resume banner + "Projects like yours"; 1024px column on a 1920 screen; placeholder blue boxes where photography should be; tiny "Start this path →" targets
/select stepper One decision per step; progress dots + N-of-M; toggle-button options; resume card; session persistence Education hidden behind "?" disclosures — the brief demands it inline above options as first-class reading (Principle 1). Options lack "what this means" lines
Results Rules engine + right-sizing; corpus-grounded "Why this fits" citations; real-project backing; compare hand-off; non-blocking email capture Hierarchy inverted — a wall of "Skipped" rows renders above the payoff; the cheaper-alternative nudge is an amber strip with raw slugs ("sl45 (Budget) may suffice for less") — a direct H1 heuristic failure; no photography on the hero card
/compare URL-serialized selection; 87 attribute rows; only-differences toggle (50 of 87); per-row "what these values mean"; sticky first column; em-dash for unknowns Picker is a flat alphabetical checkbox list — no operation-type grouping, no photos, no education; matrix rows are flat despite every row carrying its category; differences use warning tokens (reads as "error"); header row doesn't stick vertically; 1024px cap squeezes four columns
Theme system 4 public themes + 5 layouts, admin-switchable, server-stamped, A/B-able, token-gated Only the home page consumes --ns-layout-* — compare, select, and CMS pages hard-code widths, so a layout switch changes one page; no public component kit (each page re-declares its own .btn/.card)
Principle check

Three regressions contradict the product's own brief and are cheap to fix: the amber nudge (should be affirmative success treatment with its own action), tooltip-hidden education (should be inline above options), and warning-colored difference rows (differences are information, not hazards). Fix these before any theme polish — they're the product's stated soul, and heuristics H1–H2 reject any design that fails them regardless of aesthetics.

3 · Move one — width

Make the layout dimension real

nanawall.com sets its content at ~1410–1440px on large screens with photography running wider still. NanaSelect's public pages cap at 64rem (1024px) — the app reads as a form embedded in a page, not a place. The fix is not "make everything wider"; it's to finish the layout system you already have:

The spec

  • Retune the three layout files (src/lib/layouts/*.css): Editorial --ns-layout-max-width: 90rem (1440) with 2rem gutters; Standard 72rem (1152); Spotlight keeps a ~60rem reading column but pairs it with full-bleed imagery moments. Each layout's full identity is in §7.
  • Wire every public page to the variables. Compare, select, and CMS pages currently hard-code max-width: 64rem/40rem/60rem in scoped styles. Replace with var(--ns-layout-max-width) (compare gets its own wider cap — tables want width; give the matrix up to 96rem when 4 systems are chosen).
  • Add a full-bleed band pattern to the layout vocabulary: a section wrapper that runs edge-to-edge (hero photography, the right-sizing story, the consultation CTA) with an inner container back on the grid. Two new layout tokens: --ns-layout-hero-bleed, --ns-layout-band-bleed — Editorial turns them on, Spotlight uses them for imagery only, Standard stays contained.
  • Scale type and space fluidly, not just the box. 19px body text centered in 1440px reads worse than in 1024. Move the display sizes and section rhythm to clamp() ramps (e.g. hero display 2.4rem → 4rem across 1024→1920) so wide screens get bigger typography and more generous rhythm, not just wider margins. The stepper keeps its focused ~44rem question column at every width — one decision per screen survives the wide era; the room around it just breathes more.
  • Keep the brief honest: §7's breakpoint list (480/768/1024/1280) gets a documented amendment adding the 1536+ behavior — a deliberate, recorded deviation, not drift.

Home restructure rides along: hero first (full-bleed photograph, headline, one primary CTA), resume banner becomes a slim dismissible bar above it, "Projects like yours" moves below how-it-works. The operation-type families (Folding / Sliding / Stacking) get an educational strip on home using the enum descriptions and attached media already modeled in admin — buyers learn the product language before they ever hit a question.

4 · Move two — compare

The expert's room, properly furnished

Compare is deliberately the densest public screen — the brief calls it the expert's room. It needs two structural upgrades, both of which the data layer already supports.

The picker: choose by family, not alphabet

Every listSystems() row already carries operationType. Group the empty-state picker into the three families buyers know from nanawall.com — with the education copy and representative photo that already live on the enum values in admin:

The matrix: 87 rows deserve a table of contents

Every row already knows its category — the 11-category MECE taxonomy from #337 (Operation & Configuration, Dimensions & Limits, Performance & Ratings, Glazing…). Render them as grouped sections with sticky headers instead of one flat run:

  • Difference treatment moves off warning tokens. An accent-tinted row with a 3px accent keel reads "this is where they differ" — informative, not alarming. Amber stays reserved for genuine coverage warnings.
  • Both axes stick: first column (exists) and the system header row (new — sticky under the site header), so you always know which column is which 60 rows deep. Scope th/caption groundwork from #437 carries over.
  • Numeric cells go tabular (--ns-font-mono per the brief) so STC ranges and cycle counts align.
  • Mobile: keep pinned first column + horizontal scroll, add scroll-snap per system column and a column-dots indicator. Category headers collapse to accordions under 768px.
  • Sad paths: zero images → header cards collapse the media slot; 1 system selected → invite, don't error; all-shared rows under "differences" → the existing notice stays.

5 · Move three — results

Payoff first: the recommendation is the headline

Today the results view opens with "Your selections" — a wall of Skipped rows — and buries the recommendation below the fold, then follows it with an amber strip that whispers the product's best feature in system slugs. Your tab instinct is exactly right, and it maps cleanly onto what buyers actually do: see the answer, then interrogate it.

Tab two: the answers become an editing room

  • Each factor row shows its answer (or Skipped — adds no constraints in calm muted text, not a shame column) with Edit jumping straight to that step; the engine already re-fetches on answer change, so edits feel live.
  • The "computed from 1 of 8 factors" caveat becomes a quiet completeness meter on the tab label and a one-line prompt: "Answer more to tighten this recommendation" — invitation, not warning.
  • Keep the whole thing one URL (?view=…) so resume, share, and analytics see one results surface.

6 · Move four — the four themes

Four audiences, four voices — one markup

The demo below is the pitch: the same components, restyled entirely by the token contract. Today's theme files already diverge on palette and radius; the direction is to push each into a full experience — audience story, typographic voice, imagery treatment, motion personality, and a signature screen where it shines. That's what makes switching feel like walking between rooms rather than changing a lightbulb.

identical markup — only --ns-* values change

NanaSelect · by NanaWall

Find the right system — not the most expensive one.

Answer project questions one at a time. We explain every trade-off, then point you at the most cost-appropriate NanaWall system — and say so when a simpler one will do.

hero photography · full-bleed · measured scrim
Good news — right-sized

The SL45 meets every requirement you've given — for less.

Budget tier · thermally broken aluminum · openings up to 39 feet wide.

See the SL45 side-by-side →
NW Acoustical 645PREMIUM
NW Aluminum 640MID-RANGE
SL45BUDGET

nanawall.css — teal #00798f · flat radii · Source Serif display · the brand-standard room

NanaWall

The flagship · every buyer

#00798f
#143e30
#f4f2ed
#ffffff
Voice
nanawall.com's calm cousin — white light, teal conviction, tan interludes, dark-green ground. Continuity without mimicry (H7).
Type
Source Serif 600 display at editorial sizes; overlapping panel-on-photograph hero compositions.
Signature screen
Home — the front door of the brand.
Demo pairing
× Editorial layout (1440, full-bleed hero).
Motion
House 0.15s ease — crisp, assured.

Graphite

The design studio · trade pros

#16181c
#e3a13c
#1d2026
#f0f2f5
Voice
Charcoal spec-room for architects and AV-dark presentations; photography glows like backlit film; amber used sparingly, like a section marker in a drawing set.
Type
Sans-forward; serif reserved for pull-quote citations; numbers in mono — the spec register.
Signature screen
Compare — density feels native here.
Demo pairing
× Standard layout (data breathes, chrome recedes).
Motion
Minimal, instant — nothing decorative.

Linen

The home editorial · homeowners

#f6f2ea
#a64c30
#fffdf8
#2b2823
Voice
Warm paper, clay accents, soft corners — the shelter-magazine register for someone imagining Sunday mornings with the wall folded away.
Type
Serif-forward headings, roomier line-heights, generous whitespace; imagery crops looser and more domestic.
Signature screen
Results — the payoff reads like a feature spread.
Demo pairing
× Spotlight layout (narrow column, big imagery moments).
Motion
Slightly slower, softer ease — unhurried.

Pressroom

The editorial palette · the dramatic pitch

#f2f1ef
#bd1a20
#ffffff
#131211
Voice
The most dramatic palette — a printed design-magazine register. Cool gallery paper, a vermillion masthead accent used sparingly, hairline rules, square 0px radii, deep scrim over photography. Art direction consulted via Stitch (#979).
Type
High-contrast Source Serif Pro at 700 — the sharpest serif display of the set (a cover-story masthead); body/figures in clean sans.
Signature screen
Results — the recommendation reads like an editorial spread over a full-bleed hero.
Demo pairing
× Magazine layout (its own full-bleed cover-story arrangement).
Motion
Slow 0.4s cinematic expo-out — a confident, dramatic settle.

What "distinct" costs — and doesn't

  • Palette/radius/shadow depth: already per-theme. Free.
  • Typographic voice: the token contract already carries --ns-font-*; the missing piece is weights — only Source Serif 400 is self-hosted today. Add Serif 600 (and Sans 700 is already there) so display type doesn't faux-bold. If Linen should feel distinct at the type level, its serif can lean on optical-size axes (Source Serif 4 variable) — still self-hosted, still one file per theme.
  • Imagery treatment: art direction bans duotones and heavy grading — differentiate with crop, scrim weight, and frame instead: NanaWall = confident 3:2 landscape with panel overlaps; Graphite = wider 21:9 slices, deeper scrim token; Linen = softer 4:3, more whitespace around images. Needs one proposed token: --ns-color-scrim.
  • Motion personality: propose --ns-motion-duration / -ease tokens (flagged as contract additions per the brand-tokens process). Reduced-motion zeroes them globally.
  • 4 themes × 5 layouts = 20 combinations exist mechanically; bless the five pairings for the demo so each theme is seen in its best room (the layout dimension gets its own section next), and mention the rest as range, not as maintained products.

7 · The five layouts

Layouts rearrange the room; themes repaint it

The second presentation dimension is structural. A layout is one CSS file assigning the --ns-layout-* contract — container width, gutters, section rhythm, hero arrangement, content alignment — stamped on <html data-layout> exactly like a theme, switched from the same admin screen, and orthogonal by design: any theme under any layout. The demo below rearranges one page skeleton five ways; nothing is recolored, because that's the other dimension's job.

same sections — only --ns-layout-* values change

standard.css — today 64rem · gutter 1rem · gap 2.5rem · hero stacked, media over copy → retune to 72rem (1152)

Standard

The neutral baseline · any surface

Arrangement
Comfortable single column, hero stacked media-over-copy, centered. The fallback that can never embarrass a surface it lands on.
Contract
Today 64rem · gutter 1rem · section-gap 2.5rem → retune max-width to 72rem (1152).
Rhythm
Even, unremarkable on purpose — data and forms sit quietly.
When it wins
Utility moments and dense screens; the compare matrix likes a stage that doesn't compete.
Demo pairing
× Graphite — the trade-pro spec room.

Editorial

The wide feature · big screens

Arrangement
Wide container, hero split into a two-column spread (copy beside media), left-aligned, denser vertical rhythm; hero and story bands run full-bleed.
Contract
Today 80rem · gutter 2rem · split hero → retune max-width to 90rem (1440) + new --ns-layout-hero-bleed / --ns-layout-band-bleed tokens.
Rhythm
Confident and dense — sections arrive like features in a portfolio.
When it wins
The 1920 projector, the homepage, anywhere NanaSelect must feel at home beside nanawall.com.
Demo pairing
× NanaWall — the flagship room.

Spotlight

The gallery · story-led reading

Arrangement
Narrow centered reading column, hero stacked and centered, generous whitespace; only imagery bleeds — text never does.
Contract
Today 56rem · gutter 1.25rem · section-gap 4.5rem → keep a ~60rem column; the drama comes from the gaps and the bleeding photography.
Rhythm
Slow and open — one idea at a time, each section in its own light.
When it wins
The homeowner journey; results reads like a feature spread about their project.
Demo pairing
× Linen — the home-editorial room.

Magazine

The cover story · full-bleed drama

Arrangement
One dramatic full-bleed column; the hero photograph runs edge-to-edge as a cover above the copy; grandest display type (~4.6rem); every band bleeds. The immersive single-column cover — distinct from Editorial's asymmetric two-column split.
Contract
Widest canvas — max-width 100rem; hero and every story band bleed to the viewport edge.
Rhythm
Cinematic and unhurried — one enormous beat at a time, cover then story.
When it wins
The showpiece reveal; the recommendation as a magazine cover story.
Demo pairing
× Pressroom — the editorial palette in its full-bleed room.

Spread

The two-page spread · gridded density

Arrangement
A balanced symmetric two-column hero with media on the left; tight printed-page rhythm; the hero bleeds but story bands stay inside the grid — gridded and packed. Distinct from Editorial's roomier asymmetric split and Magazine's full-bleed cover.
Contract
Printed-page canvas — max-width 84rem; hero bleeds, story bands contained on the grid.
Rhythm
Dense and even — the two facing pages of a printed spread, packed but legible.
When it wins
Content-rich comparisons; a spec-forward story that wants balance over drama.
Demo pairing
× NanaWall — the flagship voice on a printed-page grid.

What it takes to make this dimension real

  • Wire the pages. Only home consumes --ns-layout-* today (gap 04) — compare, select, and CMS hard-code their widths, so this section is honest only after that plumbing lands.
  • Two invariants hold in every layout: the stepper's question column stays a focused ~44rem (one decision per screen survives every arrangement — the room around it just breathes differently), and the compare matrix may override width upward (to ~96rem with four systems) because tables want width regardless of register.
  • Bleed is a layout property, not a theme property. The proposed hero-bleed/band-bleed tokens live in layout files; the scrim that makes text legible over the bled photograph is a theme token (--ns-color-scrim). Clean seam, no coupling.
  • Blessed pairings, honest range. The five pairings above are what the demo shows; the other combinations exist mechanically and are worth one screenshot row in the QA matrix, not design attention.

8 · What you're not thinking of

The gap list, prioritized

01 Photography is the presentation's critical path blocker

The media pipeline is done; the library holds colored rectangles. Ingest real Drupal installation photography, set a primary hero per system (23), attach a signature shot per operation-type value and per factor option, write alt text. Without this, every theme demos as a wireframe. This is the #376/#400 media chain — schedule it first, not last.

02 Three brief regressions are quietly failing your own heuristics quick win

The amber slug-text nudge (H1), tooltip-hidden education (Principle 1), and warning-colored diff rows. All three are token/markup-level fixes measured in hours. Fixing them is also the strongest slide in the deck: "the tool argues buyers down — here's the moment."

03 There is no public component kit structural

Themes are centralized; components aren't. Home, select, results, and compare each re-declare their own .btn/.card/.tier-badge. Extract a small $lib/public/ui (Button, Card, TierChip, Tabs, SectionHeading, FieldGroup, NudgeCard) before pixel-polishing — otherwise every refinement is made four times and drifts three ways. The admin kit (#308) is the precedent and pattern.

04 The layout dimension only works on one page structural

Switching to Editorial today widens the home page and nothing else — an embarrassing demo beat. Wiring --ns-layout-* through compare/select/CMS is small and makes the second dimension (§7) real.

05 A presenter mode for the switch moment presentation

Theme changes are admin-driven and take effect on next load — mid-presentation that means alt-tabbing to admin. Add a dev/preview override (?theme=linen&layout=spotlight honored for admins; the experiment-override plumbing in hooks already does 90% of this) and a keyboard cycle for the demo. A View Transitions crossfade on theme swap is a cheap, memorable flourish — respecting reduced-motion.

06 Per-theme accessibility math, gated in CI structural

Amber-on-charcoal and clay-on-linen change every contrast pair, focus ring, and scrim. Extend check:tokens to verify AA (4.5:1 text / 3:1 UI) numerically for each theme's token pairs so a future theme tweak can't ship an illegible state. H8 becomes a build gate instead of a hope.

07 Share and print are conversion features, not chrome quick win

Compare is already a URL — lean in: "Copy link to this comparison." Results deserve the same (a resume-token permalink), because these buyers forward things — to spouses, clients, GCs. A print stylesheet for compare and results (logo, date, answers, citations) turns the tool into the spec document that survives the bid meeting.

08 Wide screens need bigger type, not just wider boxes structural

Moving to 1440 without fluid clamp() ramps for display type, section rhythm, and image scale will read as "same site, more margin." The ramps are where "wider" becomes "grander."

09 Edge states × 4 themes = your real QA surface structural

Zero images, longest names (NW Acoustical 645), "??" cells, 1-of-8 answered, the no-match dead end — each must look designed in all four themes (H4/H5). A Playwright screenshot matrix (key screens × themes × 2 widths) keeps the other themes from rotting while you look at one.

10 The funnel is instrumented but tells no story presentation

Event beacons and sessions already flow (consent-gated). Define the five numbers the deck needs — starts, completion rate, nudge-taken rate, compares opened, configurator hand-offs — and surface them in admin analytics. "Right-sizing works" lands harder with a chart than a claim.

11 Demo-day seed hygiene presentation

A "Seed: Unused Choice" value sits in the operation-type admin list; every public page logs a console error; the footer reads "Nana Wall Systems, Inc.. All Rights Reserved" (double period, from the site-chrome config). Stakeholders notice small things exactly when you least want them to.

12 Taxonomy label check before the grouped picker ships quick win

nanawall.com's public families are "Folding / Sliding / Stacking Glass Doors" — and cero markets as frameless. NanaSelect's enum says Folding/Sliding/Stacking. Confirm the buyer-facing group labels and blurbs with marketing once, so the compare picker, home strip, and site nav all say the same words.

13 Keep themes as code — resist the theme editor structural

The token gate + one-CSS-file-per-theme recipe is the whole reason four themes are cheap. An admin WYSIWYG theme editor would trade that for an untestable config surface. Document the "add a theme" recipe instead; it's genuinely one file.

9 · The presentation itself

Demo choreography

Let each theme own the screen it's best at, so switching demonstrates range rather than repetition:

  1. Open in Linen × Spotlight, on home. The homeowner story: warm, editorial, photography-led. Start the guided flow; answer two questions to show inline education ("one decision per screen, and it teaches").
  2. Land on results. The payoff tab, the photography hero, and the green right-sizing moment: "it just argued us down — that's the product." Flip to the answers tab to show the editing room.
  3. Switch to NanaWall × Editorial, same results page. One reload, whole app re-voiced: "brand-standard, 1440 wide, ready to live beside nanawall.com."
  4. Follow "Compare these 3." Grouped picker → matrix with categories, differences, and the SL45 column crowned. Then switch to Graphite × Standard on the matrix — the trade-pro room, dense and dark. Same data, third voice.
  5. Close on the admin Presentation screen — the reveal that all of it is one token contract, four CSS files, switchable live, A/B-able per session.

Prep checklist: imagery ingested and tagged · seed value cleaned · console clean · resume session staged · presenter override tested at the projector's 1920 · run from the tunnel domain if consent/email capture will be shown.

10 · Sequencing

Order of operations

Phase Work Why this order
A · Foundation Fix the three brief regressions (nudge, inline education, diff treatment) · extract $lib/public/ui kit · wire --ns-layout-* through all public pages · fluid type/space ramps · self-host Serif 600 Everything later is built on these; all are small, none are visible risks
B · Screens Compare: grouped picker + tray, categorized sticky matrix, column nudge · Results: tabs, payoff-first hero · Home: hero-first restructure, operation-type education strip, full-bleed bands The experience upgrade, one screen per work-cluster — parallelizable
C · Themes Deepen NanaWall / Graphite / Linen (type voice, imagery treatment, motion tokens) · per-theme AA gate · Playwright screenshot matrix Polish lands on finished structure, not moving targets
D · Presentation Drupal imagery ingest + tagging (start earlier if content help is available — it's the long pole) · presenter mode · share/print · seed hygiene · demo script rehearsal Converts the build into the pitch

Each phase decomposes naturally into the repo's capability → requirement flow; the imagery work already has a home in the media-management capability chain (#376 → #375 → #378, ingestion #400).