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.
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.
The brand register, locked in Brand Book § 12, is the floor: "quiet, declarative, centered hero, off-white field, single CTA red button, no chrome."
Phase map.
| Phase | Status | Output |
|---|---|---|
| 0 — Vision brief | ✓ | This page § 1 |
| 1 — Research | ✓ | 3 reference docs (audit · language · assets) · DR-12 · DR-13 |
| 2 — IA + narrative arc | ✓ | docs/website/IA.md — sitemap (16 routes), per-page purposes (12), narrative arc, navigation. Bundle structure + slider UX locked in canon § 8.7. |
| 3 — Page-level wireframes | ▷ next | Hero through footer per page type |
| 4 — Asset production (AI-gen sprint) | pending | First v1 asset set + future shoot brief |
| 5 — Design system → Hydrogen | pending | Component library + motion principles |
| 6 — Build (Hydrogen on Oxygen) | pending | The site, on staging |
| 7 — Pre-launch QA + cutover | pending | Launch |
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.
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.
- Full drawer pair-count research. Confirms 9 sits inside the 6–12 active-rotation band for premium-tier men; premium European peers (CDLP, Sunspel, Ron Dorff, Derek Rose, Hamilton & Hare) all default to fixed-color logic at top tier, capping at 3-pack. ātem’s Full drawer is structurally novel in the European premium register. Caveat: WebSearch was blocked this run; data is directional from training-knowledge with confidence labels.
Open questions.
Each entry: question, when it’s needed by. Removed when resolved.
- Primary tagline. They grow on you. (current production) · A feeling you won’t want to lose. · The pair you reach for first. — three candidates remain. Approach: defer the lock; wire the slot to a single config; deploy with one, swap to the others live, decide on real-surface feel. Lock during Phase 6 build / shortly post-launch.
- 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.
- German market expansion. Currently English-only at v1 launch (decided 2026-04-28). When/if to add
/de-de/content remains open. Decide post-launch. - 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. Admin task — anytime.
- Pre-existing Shopify state. Current store config, app footprint, existing waitlist data. Audit before Phase 6.
- Phase 3 wireframe questions. Bundle UI slider mechanics, size selector pattern (pills with stock indicators recommended), newsletter framing, account UI depth. Decide in Phase 3.
Critical path.
docs/website/wireframes.md has v0 of every primary page hero-through-footer plus templates for secondary. Phase 3 closes when wireframes are locked; Phase 4 (asset generation) and Phase 5 (design system → Hydrogen) follow.