# ARTSABERS — Homepage Build Brief
Per-page composition brief for the ARTSABERS homepage. Consumed by `/tf-design`.
Redirected 2026-07-02 to match the new Hull & Ember visual identity — bigger, bolder, cinematic scale, image-driven. Same 13 blueprint sections; treatment reimagined.
—
## ONE-GREY DISCIPLINE (load-bearing)
The whole page sits on ONE primary dark grey — `hull` #1E1E24. Deep-space `void` #0A0A0E appears ONLY at the hero and the footer (dramatic bookends). Card elevation is a subtle 1-step lift to `hull-plate` #26262E — never a bright chrome accent. Chrome hairlines are barely visible (`chrome-dim` #3A3A42) — hints of metal, not accents. The site should read as ONE grey armour surface with a hot core glowing through, not as a tonal ladder of five different greys.
## Section blueprint (top to bottom — 13 sections)
### 1. Promo bar
**Content:** rotating short messages — *”FREE SHIPPING · NEW DROPS EVERY WEEK · GLOBAL DELIVERY IN 7-10 DAYS”*.
**Treatment:** thin hairline band pinned above nav. `hull` ground with a subtle ember panel-seam glow along its bottom edge (light from behind). Text is UPPERCASE Space Grotesk `wider` `micro` in `neutral`. Reads as flight-computer readout, not marketing chrome.
### 2. Navigation
**Content:** logo (light wordmark), mega menu (Lightsabers · Cosplay Helmets · Parts & Accessories · Offers & Deals · Blog), search icon, account icon, wishlist heart, cart with count.
**Treatment:** `hull` ground, sticky, cinematic. Chrome-dim hairline (barely visible) underneath the nav (chrome catches subtle top-light). Nav items in `text` UPPERCASE `wider` letter-spacing.
### 3. Hero — CINEMATIC KEY ART
**Content:** ONE dramatic saber composition + short bold headline + one CTA. This is the film’s opening frame.
**Copy candidate** (Space Grotesk 700 UPPERCASE, display size 128px+):
– *”EVERY SABER. EVERY CORE. EVERY DUELLING GRADE.”*
– Sub-headline (h4 Space Grotesk 500): *”Factory direct. Global. In your hands in 7–10 days.”*
– CTA: ember button *”BROWSE THE CATALOGUE”*
**Treatment:** FULL viewport (100vh). Deep-space `void` bg with subtle starfield + distant nebula wash. Featured saber composition (dramatic side-angle, ember rim-light, chrome catching orange). Headline dominates left; saber image dominates right (or full-bleed with headline overlaid). Ember panel-seam glow at bottom edge bleeding upward into the next section. Zero conservative — this is the film’s opening frame.
### 4. Trust bar — HUD telemetry
**Content:** four minimal telemetry readouts:
1. *”GLOBAL DELIVERY · 7-10 DAYS”*
2. *”REAL CS · 24-HR RESPONSE”*
3. *”1,100 SABERS IN CATALOGUE”*
4. *”30-DAY MONEY-BACK”*
**Treatment:** `hull` ground. Steel-blue `wider` UPPERCASE `micro` text — flight-computer HUD, NOT four-icon marketing chrome. No icons. Optional: hairline chrome divider between each readout. Minimal, disciplined.
### 5. Choose your Saber Core — SPEC HOLOGRAM
**Content:** four Saber Core tiers as hull-plate spec cards:
– **S-RGB** — from $89 — baselit — Bluetooth + infinite colours standard
– **RGB-X** — from $149 — baselit — upgraded sound fonts
– **Xenopixel V3** — from $299 — pixel blade, 34 sound fonts
– **Proffie 2.2** — from $499 — fully programmable
**Treatment:** `hull` ground. Four large hull-plate cards on desktop (NOT tight — give them breathing room), stacked on mobile. Each card: dramatic saber close-up top, tier name in Space Grotesk UPPERCASE, starting price in ember, HUD spec readouts (steel-blue `wider` UPPERCASE micro) below, ghost CTA “READ SPECS →”. Chrome hairline top edge; heavy cinematic shadow below.
### 6. Fan favourites — SPECIMEN SHOWCASE
**Content:** 3 curated products with prices. NOT four.
Candidates: Ahsoka Tano ($534.99), Starkiller SE ($449.99), Darth Vader ROTJ ($619.99).
**Treatment:** `hull` ground. Three LARGE hull-plate product cards on `hull-plate` surface (subtle 1-step elevation). Each card frames the saber as a museum specimen — dramatic angle, hull backdrop, ember rim-light. Card contents: HUD-style Saber Core badge (steel-blue) above the title, title in Space Grotesk 600, price in ember, star rating (once live) in ember-fill. Card has chrome hairline top, heavy shadow, subtle inset ember bleed on hover.
### 7. Shop by Character — MOVIE POSTER GRID
**Content:** 6 large character/faction tiles: Jedi · Sith · Mandalorian · Clone Wars · Original Trilogy · New Republic.
**Treatment:** `hull` ground. Full-width 3×2 grid of LARGE cinematic tiles (each ~500×400px on desktop). Each tile: full-bleed dramatic character imagery, character/faction label overlaid at bottom in Space Grotesk UPPERCASE + optional illustrative SKU count in steel-blue HUD (e.g. `42 SABERS · JEDI`). Hover: ember panel-seam glow along bottom edge.
### 8. New arrivals
**Content:** 3 distinct products with “NEW” data tag. Candidates: Carbon Strike, Dark Hunter, Elzar Mann.
**Treatment:** `hull` ground. Same 3-across hull-plate card format as Fan favourites — cinematic, museum-specimen feel. “NEW” tag as steel-blue HUD label (not a coloured pill).
### 9. Factory-direct + Real customer service — MISSION CONTROL
**Content:** the reframe commitment as a dramatic split-screen block.
**Treatment:** `hull` ground with heavy ember panel-seam glow along its top edge (the boundary with the previous section reads as the mission-control room seam). Split-screen layout on desktop:
– **Left panel (`hull-plate` surface — subtle 1-step elevation, NO chrome-hot):** dramatic factory-floor / warehouse image (ember-lit machinery in dark hull). Overlaid: *”FACTORY-DIRECT.”* Space Grotesk h1 UPPERCASE + sub *”Every saber ships directly from our partner factory in 7-10 days. Broader catalogue than we could ever warehouse.”*
– **Right panel (`hull-plate` surface — matches left panel elevation):** dramatic customer-service imagery (headset operator in dark hull, ember-lit console). Overlaid: *”REAL CUSTOMER SERVICE.”* h1 UPPERCASE + sub *”24-hour initial response. Named single point of contact. We’re here when something goes wrong.”*
– HUD telemetry strip along the bottom of both panels: `RESPONSE · 24H │ SUPPORT · NAMED SPOC │ ORIGIN · FACTORY DIRECT` in steel-blue `wider` UPPERCASE `micro`.
– One CTA: ghost button *”READ OUR PROMISE”*.
### 10. Reviews — HULL-PLATE TESTIMONIALS
**Content:** 3 customer testimonial cards with 5-star ratings, names, review text.
**Treatment:** `hull` ground. Three `hull-plate` cards (subtle 1-step elevation), cinematic. Each: 5-star ember rating top, review text in `text` (Manrope 500 for emphasis), reviewer name in steel-blue HUD, hull-plate chrome hairline + heavy shadow. Overall Trustpilot-style badge at top of section if reviews platform is live (else replace with a founder-quote hero card).
### 11. Brand story — CINEMATIC KEY ART
**Content:** the “why ARTSABERS” moment. Cinematic photography (workshop OR founder in dramatic space aesthetic). Brief text:
*”Founded in Latvia 2020, now part of Nerdworks. We sell every replica saber a fan could want — with the customer service most factory-direct shops won’t give.”*
CTA: ember ghost *”OUR STORY”*.
**Treatment:** `hull` ground. Full-bleed hero-scale photograph left; copy panel right on a `hull-plate` surface (subtle 1-step elevation). Chrome hairline top on the copy panel; ember panel-seam glow along the boundary between image and copy. Dramatic.
### 12. Email capture — SINGLE HULL PANEL
**Content:** *”JOIN THE COMMS”* headline (Space Grotesk UPPERCASE) + subhead *”Get 10% off your first saber + early access to new drops.”* + email input + subscribe button.
**Treatment:** `hull` ground. Single centred `hull-plate` panel (subtle 1-step elevation) (chrome top edge, heavy shadow, subtle inset ember). Input in hull-shadow with ember focus-glow underneath. Subscribe button is ember with hot-spot top edge on hover.
### 13. Footer — DEEP HULL
**Content:** four columns:
– Shop · Support · Company · Connect (Instagram, TikTok, YouTube, Facebook, Threads)
– Payment icons row (Visa, Mastercard, Amex, Apple Pay)
– “A Nerdworks Brand” mark
– Copyright
**Treatment:** `void` ground (deepest tone — the site resolves into deep space). Four-column grid desktop. Text in `neutral`. Column headings in steel-blue HUD UPPERCASE. Hairline chrome divider at top of the footer marking the transition from `brand story` above. Minimal, quiet, disciplined.
—
## Layout scale directive (load-bearing)
**Fewer, larger visual moments per section.** Where the previous concept had four-across grids of small cards, this one has three (or fewer). Where product cards were medium sized, they are now LARGE hull-plate specimens. Where the hero was a 1.05fr/1fr split, it is now FULL VIEWPORT 100vh cinematic. Where the trust bar was four-icon marketing chrome, it is now HUD telemetry (four small text readouts, no icons).
Every section should read as a distinct cinematic frame. Do NOT reduce section-heights for compactness. Do NOT default to four-across grids. Do NOT put icons on the trust bar. Do NOT use pill-shaped buttons.
## Locks (verbatim / do-not-touch)
– **Tagline:** *”From factory floor to your door.”* — primary
– **Signature phrases** — carry forward exactly per PB
– **Retired language** — do NOT reintroduce: “in stock”, “2-3 days”, “USA warehouse”, “free express”, “fastest shipping”
– **Ban list** — see DB
## Deliberately excluded from the homepage
– Electronics comparison tables (product / collection pages)
– “What’s in the box” (product pages)
– FAQ content (dedicated FAQ page or product pages)
– Blog content
## Cross-references
– Brand context, voice, forbidden phrases: Project Brief
– Visual identity, material rules, imagery do/don’t, layout scale directive: Design Brief (Hull & Ember revision)
– Palette values + material tokens: Styleguide (Hull & Ember v2.0)