SOLE — Hero Creative Template Brief

A small, reusable library of art-directed hero photos. Each is a premium product shot with a built-in dark, empty zone where we later overlay the headline, badges, and buttons in code — so we can re-message a hero for any feature/promo without re-shooting. The photos never contain text, prices, or offers.

🔑 The one rule everything depends on: that empty zone must stay dark enough for white text to read at every screen size. Get that right and the rest is straightforward.

You already proved this with the two live sliders — this brief just turns that into a repeatable system.

·The 3 axes

So nothing below blurs together — these are independent.

1 · Structure

which master + which format. What you frame.

2 · Style

the lighting / mood (3 looks). How you light it. Default = studio.

3 · Phase

when you deliver it. Nothing to do with the design.

A creative = one structure + one style, delivered in one phase.

1Look & feel

"Product theatre on a dark stage."

The product is the hero, lit like a premium object; the empty zone is a quiet, dark stage for the message. The image sells the product; our overlay sells the message — they never compete.

The image's mood can vary; the copy zone is always dark. That's the whole rule. (Mood ≠ contrast — even a bright room keeps its copy zone dark.)
✓ Brand red #b21e2d as an accent only — rim light, soft glow, floor reflection, a thin element. ✗ Never a flat red/saturated background — it looks promotional and can't host white text.

The 3 sanctioned styles default to #1 for Phase 1

Studio product theatre (default) — product on a seamless dark/charcoal sweep, dramatic key + rim light, grounded shadow, optional restrained red glow.
Dim in-home lifestyle — product in a low-key premium room → our current dark slider.
Bright in-home lifestyle — airy daytime room → our current bright slider. Reserve for brand/value heroes; still bake the copy zone dark.

Bright in-home lifestyle reference — **Style #3** — bright in-home lifestyle (current slider)

Dim in-home lifestyle reference — **Style #2** — dim in-home lifestyle (current slider)

2The masters (structure)

One geometry can't fit a tall treadmill and a low rower, so there are 2 masters by silhouette, each shot in 3 formats (desktop / mobile / tablet-crop):

Master	Silhouette	Products
A — Tall / Upright	vertical console, tall frame	treadmills, ellipticals, upright bikes
B — Low / Long	long, low body	recumbent bikes (LCB, LCR, R92), rower (SR550)

3The creative spec sheet ★

Shoot to this one table. All numbers are relative to the master canvas (row 1).

If a photo can't meet the darkness rule on its own, bake a gradient scrim into the export — darker on the side where the copy sits (left on desktop, bottom on mobile).

	Desktop	Tablet (crop)	Mobile
Master canvas	2400 × 900 (8:3)	~1600 × 1100 (3:2)	1125 × 2160 (portrait)
Copy-safe zone	left band, ≥ `max(620px, 42%)` wide, y ≈ 30–75%	left ~45%	bottom 38–42%, full width − 48px sides
Keep the product	right of 50%	right ~55%	above the top 57%
Darkness rule	copy-zone avg luminance ≤ 0.175 (≈ RGB ≤ 76 / near-black) so white text reads on its own	← same	← same
Max copy (design for the longest msg)	H1 ≤ 6 words / 2 lines · subhead ≤ 2 lines · ≤ 3 badges · ≤ 2 CTAs	—	H1 ≤ 5 words / 2 lines · subhead ≤ 1 line · 1 CTA
Export widths WebP q80 · sRGB · <300 KB	1000 / 1400 / 1800 / 2400 / 3000	1600	500 / 800 / 1125
Filename	`sole-hero-{sku}-{w}.webp`	`…-tablet-{w}.webp`	`…-mobile-{w}.webp`

You design to rows 1–5 (canvas, copy-safe zone, keep-product line, darkness rule, copy budget) and mark each product's focal point so copy never lands on it. The export widths + filenames (rows 6–7) are BITCADET's job — we produce them from your Figma frames (see Handoff), so you never export files. Overlay type is Barlow Condensed, white only, uppercase H1 ~40→64px — we render it; you just leave the room. {sku} = lowercase model (f83, f85, e25, c80, cc81…).

4QA self-check (before handoff)

Correct master (A/B); all 3 formats delivered (desktop + mobile + tablet).
Product on the correct side / above the line per the spec table; nothing critical in the outer 100px gutter.
Copy zone passes the darkness rule with a max-length white-text dummy dropped in — product still clear, nothing clipped.
Built as Figma frames at the master canvas sizes (rows 1) — ready for us to export. (We handle widths / WebP / <300 KB / filenames.)
Product grounded (real shadow / reflection); current-gen unit + correct colorway; on-brand dark look.
Checked against the live preview at 375 / 768 / 1920 px.

5Phase 1 deliverables (start here)

Proof first → we wire it on the preview and confirm the pipeline before you build the rest. For speed the proof is F85 (retrofit from existing photos — can start today, no shoot); F83 follows once its shoot lands (it's the long pole — see Timeline).

Then the remaining 2026 products, all Master A, style #1 (studio):

Product	Model	Imagery
F83	treadmill (new launch)	needs a shoot
F85	treadmill (2026 refresh)	retrofit (51 photos)
F80	treadmill (2026 refresh)	retrofit
E25	elliptical (2026 refresh)	retrofit
C80	curved / manual treadmill (new)	retrofit
CC81	cardio climber (new)	retrofit (has lifestyle)

⚠️ Confirm this exact 2026 list with BITCADET before shooting — the catalog flags aren't a clean model-year signal, so this set needs a quick sign-off (e.g. should F65/F89 count as 2026?).

Phase 2 — HOLD: best-selling non-2026 products live in the store (set chosen from sales data; introduces Master B).
Phase 3 — HOLD: everything else.

6Timeline (ASAP — this is the priority)

The fast path: the five 2026 refreshes can start today from existing photos; only F83 needs a shoot. Don't wait on F83 to ship the rest.

Now Sign off the Phase 1 list (§5) — a same-day decision; it unblocks everything.
Start today F85, F80, E25, C80, CC81 — retrofits from existing imagery (no shoot). F85 first = the pipeline proof.
Long pole F83 needs a new shoot → book it ASAP; everything else ships before it.

Proposed cadence — confirm against your capacity: F85 proof delivered & wired ~2–3 business days after sign-off · the other 4 retrofits within ~1 week · F83 on shoot delivery.

7Handoff (just send Figma links)

Deliver each creative as Figma node links — the desktop, mobile, and tablet frames in the "SOLE – Landing Pages" file — exactly like you handed over the current sliders. No exports, no uploads.
BITCADET does the rest from your frames: export, WebP optimization, all responsive widths, <300 KB, filenames, and theme wiring. Then we preview & QA.
Your deliverable in Figma = the frames hitting spec-sheet rows 1–5 + the focal-point marker.

Preview / QA once wired: e3f442.myshopify.com/?preview_theme_id=186163953967. A future theme-editor picker is planned — see THEME-ARCHITECTURE.md (dev).

Why these constraints — direction stress-tested by a 5-lens expert panel (UX/CRO, Shopify, accessibility, responsive, art-direction): GO-WITH-CHANGES. The load-bearing requirements: a copy budget (variable message length was breaking a fixed zone), 2 masters (one geometry can't fit all silhouettes), a tablet breakpoint (the 750–1024px gap), a testable darkness floor (a fixed CSS scrim can't guarantee contrast over a swappable photo), white-only overlay copy, and a consistent dark look. Full theme-side plan + dev wiring: THEME-ARCHITECTURE.md.