SOLE · Homepage Hero System

One Creative. Any Message. Overlaid in Code.

High-fidelity working demo · BITCADET · SOLE design tokens + the live hero CSS · backdrops = Markos's WIP Phase-1 creatives · copy by a copy panel + UX panel

Interactive — pick a product × version below

Markos's hero creatives are deliberately message-agnostic: a premium product shot with a built-in dark negative-space zone and no baked-in text. This page proves the other half of the system — the programmatic overlay. Each of the four products (C80, F85, F80, E25) gets a Non-Promo and a Promo version — headlines written by a copy panel and fitted to brand by a UX panel, then rendered from a data object onto the same photo in SOLE's real tokens (Barlow Condensed, red #b21e2d, the production scrim). Promo slides run the SOLE July 4th Sale as a dated window (the live countdown only switches on in the final 72 hours). Copy here is v2 — revised through an adversarial copy/UX critique and a skeptic adjudication panel. Change the data → change the message. No re-shoot.

The desktop and phone frames are faithful replicas of sole-2026/sections/hero.liquid — same left-band / bottom-band scrims, same pill buttons, same type scale — scaled with container-query units so what you see is what ships.
§1 · The Composer

Compose a hero

Pick a product and a version. The same photo hosts an evergreen product story or the July 4th promo equally well. Click any preview to enlarge it. Open “Show the data” to see the exact object driving the render.

Product

Desktop · 1920×720

Phone · 375×720

▸ Show the data driving this render 

      

    

  


  
  

  
  

    
§3 · How it's driven

    
The content schema → the theme

    
In production each overlay is one content object. The creative (photo, focal point, safe-zone, scrim strength) comes from the planned hero_creative metaobject; the message comes from per-slide block settings. Same split you see in this demo.

    

      

        
Overlay content object

        
{
  "kind": "product",            // product | promo
  "eyebrow": "The Flagship",
  "heading": "Hotel-Gym Power, Now At Home",
  "headingMobile": "Hotel Power, At Home",  // ≤5 words
  "sub": "Our flagship treadmill — commercial-grade, yours to own.",
  "subMobile": "The flagship, yours to own.", // ≤1 line
  "badges": ["Lifetime Frame & Motor",
             "No Monthly Subscription",
             "Commercial-Grade Build"],
  "ctas": [{ "label":"Explore the F85", "style":"primary" },
           { "label":"Why Commercial-Grade", "style":"outline" }],
  "countdownTo": null            // promo → July 19 deadline
}

      

      

        
Maps to (theme)

        
hero_creative (metaobject)
├─ desktop_image / mobile_image
├─ focal_x / focal_y      → object-position
├─ safe_zone              left | bottom
└─ scrim_strength         light|med|heavy

slide block (section settings)
├─ heading / subheading
├─ badge1..3 / show_badges
├─ cta1 / cta2  (text)
└─ is_promo_slide         → promotion SSOT

      

    

    
Promo treatments reuse the existing promotion metaobject (the weekly-promo single-source-of-truth that already drives the announcement bar) — a slide flagged is_promo_slide pulls its headline, countdown deadline and CTA from there. Nothing new to wire per promo.

  


  
  

    
§4 · Guardrails

    
The rules every overlay respects

    

      

        

          
Copy budgetDesktopMobile

          
H1≤ 6 words / 2 lines≤ 5 words / 2 lines

          
Subhead≤ 2 lines≤ 1 line

          
Badges≤ 3wrap / optional

          
CTAs≤ 21 primary

        

      

      

        

          
ContractValue

          
Copy-zone luminance≤ 0.175 (white text reads unaided)

          
Overlay copy colorWhite only

          
Red #b21e2dAccent / fills only — never a flat field

          
Safe zoneDesktop = left band · Mobile = bottom band

        

      

    

    
About this copy (v2). Written by a copy panel, fitted by a UX panel, then revised through an adversarial critique + a 3-lens skeptic adjudication. Applied: frame-only warranty wording, E25 health-claim reframes (design, not outcome), de-duplication, benefit-led promo subs, product-routed CTAs, and a dated promo window (no live countdown until the final 72h). Specs stay on the PDP. Still needs client/data sign-off (flagged, not shipped as hard claims): the actual July 4th offer amount (unblocks a real countdown/number); "Commercial-Grade Build" confirmed per-product on C80 & E25; the basis of "10,000+ Verified SOLE Reviews" (brand-wide + a star score); and E25's joint/"Easy On Joints" phrasing for legal. Creatives are Markos's work-in-progress.