ARTSABERS — Order Confirmation Build Brief

BBAS17 Build Brief ARTSABERS

Purpose

ARTSABERS Order Confirmation — reframed as a cinematic workshop moment, not another commerce template. The customer has committed money; this page acknowledges the moment, offers reassurance that a real workshop is now handling their hilt, and provides the natural next action (set password to track their build).

What this page is NOT: another ecom transactional surface with fieldset stacks, form chrome, and trust badges. It is a notification moment — closer in feel to Airbnb’s booking-confirmed state than to a checkout page.

Constraints locked by operator (2026-07-10):

Site header AND footer STAY. Same as cart/checkout. Never strip them.
Password action REMAINS PRIMARY. Reframed as the natural way for the customer to sign in and track their order — not as “complete your account” ceremony.
This IS a dedicated thank-you page (not an account dashboard).

Direction

Kyber Hull — apply the direction from SAS1. Lean HARD into the “moody cinematic workshop” identity. Full-bleed atmospheric hero at the top. Warm brand-voice copy throughout (“workshop” / “forge” / “bench” / “hand-testing” language). Real hull-plate imagery used for atmosphere. Real ARTSABERS product photography where products are shown. Zero border-radius sitewide.

Reuse the CSS gradient + panel-joint hairline background pattern from MAS60 (including tuned ember bloom positioning). Reuse form primitives from MAS52. Reuse the same site header + site footer patterns from MAS57/MAS60.

Metaphor discipline (LOCKED)

Page framing: your hilt entering the workshop (not “your order was placed”)
Stage language: In workshop / Assembly / Dispatched / Delivered (warmer than “Confirmed / Assembly / Dispatched / Delivered”)
Account framing: track your build or watch your order — not “complete your account”
CTA copy: Set Password & Track My Order → (the ACTION is set password; the REASON is track my order)

Site header (LOCKED — reuse MAS60 verbatim)

Top brand-strip with ARTSABERS mark + right-side status labels (“ORDER CONFIRMED · WORKSHOP NOTIFIED”). Below that, the standard site nav (SHOP / SABER CORES / CHARACTERS / HELMETS / SUPPORT + right USD / ACCOUNT / CART badge). Match the site chrome from MAS60 checkout exactly — this is standard site header, always present.

Sections (top to bottom, after site header)

1. Cinematic hero moment — full-bleed atmospheric

The transformative change from MAS61 v3. This section replaces the “compact page header” pattern from cart/checkout with a full-bleed atmospheric moment.

Height: ~500–600px rendered. Compact enough for the hull-plate imagery to read cleanly (per the direction rule: photographic hull-plate imagery works at compact heights but not at tall section heights).
MANDATORY IMAGERY: full-bleed background loaded via background-image: url('...'). Use the Variant F horizontal smooth hull-plate: https://camcom.dev/generated_imgs/generated-2026-07-07T15-47-31-768Z-joeqpj.jpg. Dark linear-gradient overlay 68–78% for text legibility. Optional radial ember bloom in one corner for warmth.
Structure inside hero:
- Small ember eyebrow (top-left): ORDER #AS-284937 · CONFIRMED
- Display title (chrome-highlight, large — 56–72px scale): Your hilt is entering the workshop, Alex.
- Sub-line body (warm off-white, wider max-width ~640px, comfortable line-height): “Ships direct from our Latvia workshop after hand-testing. Both shipments track through the same account below.”
- NO form fields in the hero itself — it’s a moment, not a decision surface.
Below the hero, at the seam boundary, a gentle ember hairline separator (same as MAS60’s .page-header::before pattern) + ember-glow bloom that spills DOWN into the next section (from .page-header::after, bottom: -120px).

2. Track your order — reframed password prompt (PRIMARY ACTION)

The natural action after the hero moment. Full-width bordered content-group (MAS52 fieldset pattern) with the ember-tinted background treatment from MAS61’s password card, but reframed as a “watch your build” hook, not “complete your account” ceremony.

Legend heading (with ember key/track glyph): Track your order
Body copy (warm, workshop-voice): “We created an ARTSABERS account for your order. Set a password to sign in and watch your build in real time — from bench, through hand-testing, to dispatch. Both shipments track together.”
Signed-in-as line: Signed in as alex@example.com
Password inputs (MAS52 form primitives — labels above, show/hide toggles, 4-bar strength meter partially filled with “Fair — try 12+ characters” label). Same content as MAS61 v3. Same layout.
Primary CTA (ember gradient, full-width): Set Password & Track My Order → (updated copy — action + reason)
Secondary link: “Skip for now — set it later from your email”
Trust footer inside card: ember lock glyph + “Encrypted at rest. Never shared.”
Card visual treatment same as MAS61 v3 — ember hairline border, subtle ember-tinted linear-gradient background, ember key glyph, outer ember glow (0 0 22px rgba(255,122,46,0.10)).

3. Your build — delivery timeline as narrative

Reframe the “What’s next for your order” section as a workshop narrative. Same functional content as MAS61 v3 (two shipments, 4-step progress) but repositioned as a story of what’s happening to the customer’s hilt, not a stack of ecom fieldsets.

Section heading (chrome-highlight): Your build
Section sub-copy (warm brand voice): “Every hilt is played, tuned, and hand-tested before it leaves the workshop. Here’s where your two shipments are now.”
Two shipment blocks stacked vertically. Each block:
- Row header: Shipment 1 of 2 · sub-line right-aligned: Arriving 12–14 August · Standard delivery · FREE. Reuse the pattern from MAS61 v3.
- Small thumbnails of items in that shipment (same as MAS61 v3).
- 4-step horizontal progress indicator with WARMER STAGE LABELS: In workshop (ember, active with glow) → Assembly (muted, next) → Dispatched (muted) → Delivered (muted). Note: “In workshop” replaces “Confirmed” — warmer, more workshop-anchored language.
Shipment 2 same shape, with the “Assembly begins now. You’ll get a dispatch email once your hilt leaves the workshop.” lede beneath (same as MAS61 v3).

4. What happens next — three warm beats

Same three-beat pattern from MAS61 v3 (envelope / parcel / star icons), but with warmer copy and slightly larger visual treatment. Feels like a workshop update, not a bulleted checklist.

Section heading: What happens next
Beat 1: Confirmation email · “In your inbox within 5 minutes with your full receipt + order details.”
Beat 2: Dispatch alerts · “You’ll get an email + SMS when each shipment leaves our workshop, with tracking.”
Beat 3: Review request · “Once your hilt arrives, we’ll ask how it landed. Optional but appreciated.”

5. Compact order recap — much smaller

Very compact — this is a receipt appendix, NOT a re-review. Small strip near the bottom of the page (not near the top). The customer just spent time confirming they wanted this order — the recap serves as a “here’s what you paid” acknowledgment.

Section heading (small display, muted): Your order
Compact horizontal strip: 4 small (48–56px) thumbnails + short text line: “3 items · 2 shipments · 1 free gift · Total paid $832.47“
Below the strip, small muted line: “Paid with Visa ending •••• 4242 · Receipt in your inbox · See full order details →“

6. Share the workshop — refer a friend

Reframe from “Refer a friend” (transactional) to “Share the workshop” (brand-voice). Same functional content (referral link + share row) but the framing signals workshop culture, not marketing.

Bordered content-group. Legend: Share the workshop
Body: “Give friends $25 off their first order. Get $25 in loyalty when they check out. Everyone in the community wins.”
Referral link input (read-only, pre-filled artsabers.com/refer/alex-284937) with inline “Copy link” secondary button
Row of share icons (WhatsApp / Messenger / Email / X / Copy) — same as MAS61 v3

7. Follow the workshop

Same as MAS61 v3. Bordered content-group with four social buttons (Instagram / TikTok / YouTube / Discord).

8. Reinforcement band + site footer

Same as MAS51/57/60/61 v3. Reinforcement band on plain carbon + ember hairline separator top. Site footer verbatim from MAS60.

Layout structure

Single-column layout matching MAS61 v3’s shape — .cart-main max-width 860px, centred, sections stacked with hairline separators (or padding gaps) between them. NO two-column split. NO sticky sidebar. The single-column flow reinforces the “confirmation state” framing — one narrative, not two competing streams.

What this page deliberately does NOT include

NO trust chip strip (customer has already paid — nothing left to trust in commerce sense; the workshop moment IS the trust signal now)
NO cross-sell strip
NO cart/checkout-style bordered fieldsets stacking (except the two CTA cards — password + refer). Everything else is --flat content-group or freeform sections.
NO “Continue shopping” CTA
NO BNPL / Klarna anywhere
NO “Good to know” reassurance card (that lives on cart — post-purchase is different mode)
NO SSL / secure-checkout signals (order is complete, no security decision left)
NO large celebratory graphics (confetti, big check marks). Kyber Hull is understated cinematic, not celebration.
NO breadcrumb in the hero (would clash with cinematic framing)

Form primitive spec (VERBATIM from MAS52)

Password inputs use MAS52 form patterns: labels above, uppercase display font, ember focus glow, show/hide toggle inline right, 4-bar strength meter, forge-red errors (not rendered but available). Zero border-radius.

Reuse from prior mockups

Site header (brand-strip + site nav) — MAS60 verbatim
Panel-joint hairline background (ember blooms tuned per MAS60) — MAS60 verbatim (left bloom at 8% 660px, right bloom at 95% calc(40% + 60px), header seam glow bottom: -120px)
Fieldset border content-group + legend on top border — MAS52
Form primitives (labels, inputs, password show/hide, strength meter, primary + secondary CTAs) — MAS52 verbatim
Password card visual treatment (ember hairline border, subtle ember-tinted background, ember key glyph, outer ember glow) — MAS61 v3
4-step horizontal progress timeline per shipment — MAS61 v3 (but with warmer stage labels)
Compact 4-thumbnail preview strip — MAS60
Reinforcement band + site footer — MAS60 verbatim

Kyber Hull styling notes

Hero uses hull-plate imagery Variant F (horizontal) — the actual URL, MANDATORY. Do not substitute CSS-authored ember-glow.
Dark linear-gradient overlay 68–78% on the hero for text legibility.
Ember accents on: order number, primary CTA, active progress step, password card border + glow + ember-tinted background + key glyph, small hairline dividers, section-header ember bloom below hero.
Chrome-highlight on hero title (NOT ember — reserve ember for actionable elements below).
Zero border-radius everywhere.
Section separators between –flat sections use subtle ember hairlines like MAS60.

Placeholder data

Customer: Alex Doe · alex@example.com
Order: #AS-284937
Payment: Visa ending 4242
Shipment 1: Arriving 12–14 August · Standard delivery · FREE
Shipment 2: Arriving 25 August – 2 September · Standard delivery · FREE
Line items (same as MAS61 v3): Carbon Strike Lightsaber — Xenopixel V3 · Starkiller SE Lightsaber — Proffie 2.2 · Mace Windu SE Duelling Lightsaber — S-RGB. Real product URLs.
Free gift (same): Silver Lightsaber Coupler with the ember GIFT corner tag on the recap strip.
Password strength meter: 2 of 4 bars, “Fair — try 12+ characters”
Referral link: artsabers.com/refer/alex-284937

Copy locks (verbatim)

Hero eyebrow: ORDER #AS-284937 · CONFIRMED
Hero title: Your hilt is entering the workshop, Alex.
Hero sub-line: “Ships direct from our Latvia workshop after hand-testing. Both shipments track through the same account below.”
Password card legend: Track your order
Password card body: “We created an ARTSABERS account for your order. Set a password to sign in and watch your build in real time — from bench, through hand-testing, to dispatch. Both shipments track together.”
Password signed-in-as: Signed in as alex@example.com
Password primary CTA: Set Password & Track My Order →
Password secondary link: “Skip for now — set it later from your email”
Password trust: “Encrypted at rest. Never shared.”
Timeline section heading: Your build · sub “Every hilt is played, tuned, and hand-tested before it leaves the workshop. Here’s where your two shipments are now.”
Timeline stage labels: In workshop · Assembly · Dispatched · Delivered (“In workshop” replaces “Confirmed” — warmer)
Shipment 2 lede: “Assembly begins now. You’ll get a dispatch email once your hilt leaves the workshop.”
What happens next heading: What happens next
Confirmation email beat: Confirmation email · “In your inbox within 5 minutes with your full receipt + order details.”
Dispatch alerts beat: Dispatch alerts · “You’ll get an email + SMS when each shipment leaves our workshop, with tracking.”
Review request beat: Review request · “Once your hilt arrives, we’ll ask how it landed. Optional but appreciated.”
Recap heading: Your order
Recap primary line: 3 items · 2 shipments · 1 free gift · Total paid $832.47
Recap secondary line: “Paid with Visa ending •••• 4242 · Receipt in your inbox · See full order details →”
Refer legend: Share the workshop (reframed from “Refer a friend”)
Refer body: “Give friends $25 off their first order. Get $25 in loyalty when they check out. Everyone in the community wins.”
Follow legend: Follow the workshop
Follow body: “Duelling builds, character series drops, community events. Behind the workshop, not just the storefront.”
Reinforcement band: Every hilt hand-tested in-house · Global 7–10 day delivery · 2,400+ five-star reviews