Website Project · v 1.0 · 2026-04-27

atemwear.com.

The build doc for the new website. The through-line in one place — primary for Simon B. and Claude; for Simon L. and Levi to follow how it comes together, and what shapes each call.

Six sections. Read this page for the through-line; follow the cross-references for depth. Brand Book and Design System are the floor; this page is the live build state on top of them.


01 — Brief

North star.

The site reads like a quiet, paced editorial. Not a magazine — an editorial. One scene at a time, each earned. The fabric is photographed like an artifact, not a feature. The product appears the way you'd find it in a workshop — set down on a surface, lit naturally, regarded carefully. The engineering page is deep enough that a journalist could write a 1,500-word piece without leaving it. The brand never raises its voice. The single Fire Red detail — the CTA, the macron, the stitch — appears exactly where it should and nowhere else. Motion is used the way punctuation is used: to clarify a thought, never to entertain.

Material as protagonist. The engineering page is the forwardable unit.

The brand register, locked in Brand Book § 12, is the floor: "quiet, declarative, centered hero, off-white field, single CTA red button, no chrome."


02 — Brief

Phase map.

PhaseStatusOutput
0 — Vision briefThis page § 1
1 — Research3 reference docs (audit · language · assets) · DR-12 · DR-13
2 — IA + narrative arc▷ nextSitemap + page-by-page purpose statements
3 — Page-level wireframespendingHero through footer per page type
4 — Asset production (AI-gen sprint)pendingFirst v1 asset set + future shoot brief
5 — Design system → HydrogenpendingComponent library + motion principles
6 — Build (Hydrogen on Oxygen)pendingThe site, on staging
7 — Pre-launch QA + cutoverpendingLaunch

03 — State

Decisions.

Each entry: status, one-line rationale. Full decision records live in decisions/active/ in the repo.

  • DR-1 · Platform: Shopify. Accepted 2026-04-08. Single platform for brand surface and commerce.
  • DR-7 · Build owner: SB; LDC fallback if not started by 2026-04-22. Accepted 2026-04-15.
  • DR-12 · Architecture: headless Shopify (Hydrogen on Oxygen). Accepted 2026-04-27. Refines DR-1's Liquid-template assumption. The brand register's "no chrome" principle is structural, not visual; no premium peer at the target register sits on a customized theme; AI-assisted economics collapse the labor argument for theme.
  • DR-13 · Asset strategy v1: AI-generated imagery as bridge. Accepted 2026-04-27. Overrides asset-inventory recommendation for v1 only. Generation work doubles as future-shoot brief. Physical shoot deferred to post-launch swap.

04 — State

Findings.

Each entry: one-line distillation. Full reference docs in .claude/skills/…/references/.

  • Competitive web audit (24 sites). Premium peers at our register run on heavy enterprise (Salesforce Commerce Cloud) or headless Shopify; none on customized themes. Three to emulate: Aesop (material-as-headline posture) · Tracksmith (scroll narrative arc + storytelling PDP) · Hermès (editorial register + the discipline of refusal). Three anti-patterns to reject: Pangaia's discount ladder · SAXX/BN3TH "life-changing" superlative register · the near-universal "10% off newsletter capture."
  • Customer language reservoir. Hero pull-quote candidate: Francesco"I started to feel like I don't have anything… never feeling like that. Never in life." Drawer-replacement validated at four named testers (Felix 9 · Peter 10 · Philipp 9 · Holger 6 pairs). About-surface candidate: Mirko"Mehr sollte eine Unterhose auch nicht haben." Six customer-validated phrases proposed for word-bank addition: angenehm · dezent · konstant sehr gut · lässt sich gut anpassen · nicht zu auffällig · perfekte Sporthose.
  • Asset inventory. Brand-mark layer solid (wordmark, monogram, Advercase fonts, LinkedIn 6-up ground system). Product / material / founder / lifestyle layers empty. Existing product imagery is two AI-rendered PNGs at 1024×1536 — sub-retina, not launch-ready. The "material as protagonist" gap is real: zero fabric macros, zero stitch close-ups, zero motion. Factory imagery confirmed parking-lot for v1.

05 — Live

Open questions.

Each entry: question, when it’s needed by. Removed when resolved.

  • Customer Account API surface. Does it support the customer flows ātem needs (account, order history, returns, address management)? Need by Phase 6 build.
  • Content layer. Shopify metaobjects + MDX-in-repo at v1 (DR-12 default), or commit to Sanity now? Decide in Phase 5.
  • Image-gen platform access. Which models do we have hands-on access to (Flux on fal.ai / replicate, Midjourney, Magnific, Imagen)? Gates Phase 4 sprint kickoff.
  • Dark mode. Default, toggle, or off for v1? Decide in Phase 5.
  • Klaviyo. Formal lock + account setup. Need by Phase 6.
  • Email lifecycle flows. Which sequences for launch (welcome · abandoned cart · post-purchase · drawer-replacement)? Decide in Phase 5.
  • Domain strategy. atemwear.com root + /de-de/ subfolder, or atemwear.de separate? Decide before Phase 6.
  • Francesco quote consistency. Verbal enthusiasm not yet behaviourally confirmed in Orders Log. Reconcile before quoting in production copy.
  • Brand book v2 § 7 word-bank additions. Fold the six customer-validated phrases in. Next focused session.
  • Pre-existing Shopify state. Current store config, app footprint, existing waitlist data. Audit before Phase 6.

06 — Live

Critical path.

Phase 2 — IA + narrative arc.

Until the page-by-page narrative is mapped, both the image-generation sprint (Phase 4) and the design-system work (Phase 5) are speculative. One focused session.