Art direction & content rules

Part of the design-brief package (issue #263). How the product should feel, what imagery it uses, and the words it speaks.

Imagery

Source. All product imagery is Drupal-sourced architectural photography of real installations, delivered through the app's media pipeline — never stock photos, never generated imagery, never isolated product renders on white. The photography's strength is openings in real spaces: glass walls folded away, indoor–outdoor thresholds, daylight.

Renditions. The pipeline serves fixed widths — thumb 160 · card 480 · hero 1200 · full 2000 (AVIF/WebP/JPEG). Design layouts to these; don't invent sizes.

Aspect & treatment.

• Source photos vary in aspect; design containers that crop gracefully (center-weighted object-fit: cover) rather than assuming a fixed ratio. Prefer landscape containers (roughly 3:2 to 16:9) — the subject is wide openings.
• Treatment is honest: no heavy color grading, no duotones, no dark-overlay hero with white text unless contrast is guaranteed by a measured scrim token. Let the photography carry the light.
• Every layout must degrade with zero images (Drupal endpoints are an external dependency): no broken frames, no placeholder boxes — media slots collapse (see the home page's static-first degradation).

People and projects. Photos may include real project contexts; never crop to imply a different product. Captions, when present, name the system (e.g. "SL45, residential installation") — enforced in code: galleries owned by an entity pass its name as subject and captionForSubject() (src/lib/media/captions.ts) prefixes any caption that doesn't already mention it.

Per-theme treatment (#844). Within the honest-treatment law above (no duotones, no grading — assets untouched), the themes differentiate imagery by crop, scrim weight, and frame, expressed through two contract tokens (--ns-media-aspect, --ns-media-frame-pad) plus the scrim (--ns-color-scrim, #843). Hero-scale placements (home hero and band media, gallery single/slideshow renders) use the theme frame preset and take the signature crop; card grids keep the fixed landscape preset so mixed sets tile uniformly.

Theme	Crop (--ns-media-aspect)	Scrim (over worst-case white)	Frame (--ns-media-frame-pad)
NanaWall	confident 3:2 landscape	measured teal, 5.38:1	edge-to-edge (0)
Graphite	wide 21:9 slices — backlit film	deepest, 9.23:1	edge-to-edge (0)
Linen	softer 4:3, domestic	softest, 4.67:1	0.4rem linen mat (frame inset shows as mount)
Admin	3:2 (no photography bands)	4.66:1	0

Voice & tone (microcopy)

The product is a knowledgeable advisor, not a salesperson.

• Educational, plain-language. Explain terms at the point of use ("STC 45 means normal speech next door is inaudible"), prefer concrete consequences over spec jargon, and keep sentences short. Reading level: a smart homeowner; a pro should never feel talked down to — precision does both.
• Never salesy. Banned register: urgency ("don't miss"), superlative stacking ("the ultimate premium experience"), exclamation points, and any copy that frames the more expensive option as the safer default. The right-sizing nudge is phrased as saving the user from over-specification: "The SL45 meets every requirement you've given — for less."
• Honest about limits. Partial data says so ("We don't have verified acoustic data for this configuration — worth confirming with an advisor"), never papering over gaps.
• Buttons are verbs, specific: "See results", "Compare these 3", "See cost in the configurator" — not "Submit", "Learn more", "Click here".
• The user's project is the subject where possible: "Your opening", "your climate", "your budget" — the tool works for them.

Real content rule — no lorem ipsum

Briefs, mocks, and generated designs use real product data:

• The real system names — there are 24, e.g. SL45, SL60, SL70, SL73, NW Aluminum 640, NW Aluminum 840, NW Acoustical 545, NW Acoustical 645, NW Reinforced 647, NW Reinforced 847, NW Clad 740, NW Wood 540, NW MultiSlide 630, HSW60, HSW66, HSW75, WD65, PrivaSEE, ClimaCLEAR …
• The real factor names for stepper mocks: interior/exterior, geography, climate, residential/commercial, ADA compliance, interior acoustic control, exterior acoustic control, durability, opening shape, material & finish, stacking, panel sizes, sill depth & floor type, structural requirements.
• The real right-sizing example for any nudge mock: NW Acoustical 645 → NW Aluminum 640 → SL45 (the over-spec case from the vision).
• Real tier labels: Budget / Mid / Premium / Ultra.

A mock with placeholder text hides layout failures (long system names, 2-paragraph education callouts, "??" matrix cells) that real content exposes. If a mock needs data the brief doesn't carry, say so in delivery notes rather than inventing plausible-looking specs.

Overall feel

Calm, confident, architectural. Generous whitespace on public surfaces; the photography and the education content are the interest — chrome stays quiet. Closer to a well-set technical publication than a marketing site. Admin is a separate register entirely: dense, fast, utilitarian (see the screen inventory).