ARTSABERS — Homepage Build Brief

# 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 — 15 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. Current offers — HULL ISLAND ON EMBER

**Content:** two current offers pinned to a full-width ember band. Never more than two — no phantom-sale carousel, no scrolling ticker. When an offer ends, we take it down.

**Copy candidates:**
– Section headline (Space Grotesk 700 UPPERCASE, clamp 40–62px): *”ON NOW — NO PHANTOM SALES.”*
– Sub (Space Grotesk 500, 17px): *”Two offers running right this minute. When they end, we take them down — you’ll never see a countdown to something we’re about to run again next week.”*
– Meta chip (Space Grotesk `wider` UPPERCASE `micro`): *”REFRESHED WEEKLY · 2 RUNNING”*

**Card 01 · Delivery (evergreen):** eyebrow *”OFFER 01 · DELIVERY”*, headline *”Free UK tracked delivery over £199.”*, body *”No code required — applies at checkout on every eligible order.”*, chip strip `THRESHOLD · £199+ │ REGION · UK MAINLAND`.

**Card 02 · Custom hilts (tactical, ARTSABERS-native):** eyebrow *”OFFER 02 · CUSTOM HILTS”*, headline *”Free personalisation on made-to-order hilts.”*, body *”Every custom hilt commissioned this month ships with your chosen engraving at no charge.”*, chip strip `VALUE · £45 │ ENDS · END OF MON`.

**Treatment:** FULL-WIDTH ember band — same 4-stop ember gradient as the email-capture band (`ember-glow → ember-bright → ember → ember-forge`) with atmospheric radial-gradient depth on `::before`. Ties the two “action” moments on the page together visually. Section head sits on the orange (Space Grotesk display + `on-primary-fixed` dark text). Two dark `hull-plate` cards float on the orange as horizontal 35/65 media/body splits (mirrors the email-capture form treatment — dark island on the ember band). Cards are ~240px tall — HALF the vertical weight of the mission-control panels. Reads compact, honest, receipt-like — NOT a marketing panel. Card hover: 4px lift, CTA text shifts to ember. Chip values in ember. NO countdown timer, NO “HURRY!” language, NO fake urgency.

**Load-bearing:** the two-card cap is deliberate. If we’re running one offer, show one. If we’re running three, retire one to a `/offers` landing page before promoting the third. This section stays TWO or fewer.

### 5. 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.

### 6. 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.

### 7. 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.

### 8. 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.

### 9. Star Wars helmets — HAND-FORGED CATEGORY SHOWCASE

**Content:** a distinct beat for the helmets catalogue — the not-sabers story. ~25 hand-forged pieces, longer transit (14–24 days vs sabers’ 7–10), same aftercare. One hero-helmet image + intro copy + 3 sub-category mini-tiles + browse-all link.

**Copy candidates:**
– Section eyebrow: *”04 · STAR WARS HELMETS”*
– Section headline (Space Grotesk 700 UPPERCASE): *”Twenty-five hand-forged pieces.”*
– Sub: *”Not the sabers story. Helmets take longer, ship slower, and go through fewer hands — every piece is hand-forged by one of three master builders. What stays the same is the aftercare: 24-hour response, named single point of contact, thirty-day money-back.”*
– Body eyebrow (uppercase micro): *”HAND-FORGED · 14–24 DAY TRANSIT”*
– Body copy: *”Every helmet in the catalogue is made-to-order by one of three master builders. Because they’re not factory-runs, lead time runs 14–24 days — we tell you at checkout, and you can track the build inside your account.”*
– Section meta chip: *”CURRENTLY IN THE CATALOGUE · 25 PIECES”*
– CTA: ghost button *”BROWSE ALL 25 HELMETS →”*

**Mini-tiles (3 helmet sub-categories with piece counts):** Trooper (8), Character (12), Dark Side (5).

**Treatment:** `hull` ground. Two-column 60/40 grid on desktop (media wider than body). Left column: LARGE hero-helmet media (min-height 620px), full-bleed background image, ember hairline right edge, bottom caption chip on `backdrop-blur` translucent panel. Right column: intro copy + stacked mini-tile column + ghost CTA. Each mini-tile: 72px square thumb LEFT, category name + count RIGHT, ember arrow far right. Compact horizontal cards on `hull-plate` surface (subtle 1-step elevation). Hover: 3px right shift + ember arrow translates right. Placement in the page rhythm: BETWEEN Shop by Character (movie-poster grid of faction tiles) and New arrivals (fan-favourites product grid) — clusters all “shop by X” beats before the second product grid breaks the rhythm.

**Load-bearing:** the section acknowledges the different lead time UP FRONT rather than surprising customers at checkout. This is the anti-dark-pattern discipline the brand runs on — customers who need it fast see the number before they add to cart.

### 10. 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).

### 11. 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”*.

### 12. 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).

### 13. 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.

### 14. 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.

### 15. 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)