Advertorial
Stepwell · Design system
Stepwell is a one-product listicle for paid traffic: numbered reasons that lead to one offer. Build new pages and sections from these styles and components. Run the stepwell-site-system skill before asking the Agent for changes.
Color styles
Use the Color/ styles only. Accent is for buttons, numbers, and small highlights, never for large backgrounds except the closing offer.
Color/Background
#16130F · Page background
Color/Surface Dark
#211C16 · Dark panels, sticky bar
Color/Border On Dark
#3A3229 · Lines on dark
Color/Surface Light
#F6F0E6 · Cards; headings on dark
Color/Surface Light Inset
#ECE3D4 · Tiles inside cards
Color/Border On Light
#DDD1BE · Lines on light
Color/Accent
#9A5226 · Buttons, numbers, closer
Color/Accent On Dark
#E0925C · Labels on dark
Color/Text Primary
#1E1A15 · Text on light
Color/Text Secondary
#6B6055 · Secondary text on light
Color/Text Muted On Dark
#C2B6A6 · Secondary text on dark
Color/White
#FFFFFF · Text on accent
Text styles
Every text layer uses one of these styles. Sizes step down for Tablet and Phone inside each style, so never set font size, weight, or font by hand.
Text/H1 Display
Hero headline only. One per page.
Text/H2 Heading
Reason titles, section headings, the closer.
Text/H3 Title
Card titles, steps, FAQ questions, wordmark.
Text/Reason Number
The 01–06 index on reason cards.
04
Text/Price
Sale price on offer cards and the sticky bar.
$149
Text/Compare Price
The crossed-out compare-at price, next to Price.
$249
Text/Lead
Hero subhead and one-line intros.
A 10-minute session you can do after you wash your face.
Text/Body
All paragraphs and list rows.
The useful products are the ones you still use on a tired Wednesday.
Text/Small
Captions, step details, footer copy.
Soft, flexible fit with built-in eye shields.
Text/Label
Eyebrows, badges, the top bar. Uppercase.
Limited offer
Text/Button
Button labels only.
Get the Solenne Mask
Layout and spacing
4px · space-1
Icon to label. Step title to its detail line.
8px · space-2
Pill and chip padding. Gap inside price rows and stat blocks.
12px · space-3
List rows. Photo to caption. Tile inner padding.
16px · space-4
Copy stacks: label, heading, paragraphs. Phone gutter.
24px · space-6
Grid gutter. Offer card padding. Phone sheet padding.
32px · space-8
Before a list or CTA. Tablet gutter. Stacked columns on tablet.
48px · space-12
Blocks inside one reason. Tablet sheet padding. Phone section rhythm.
64px · space-16
Sheet padding and reason rhythm on desktop. Tablet section rhythm.
96px · space-24
Section rhythm on desktop.
Desktop: 12 columns, 24px gutters, 1120px container. Splits used on the home page: 5 | 7, 6 | 6, 7 | 5, 4 | 4 | 4 for the steps, 3 | 9 for the guarantee, and a stacked 5 | 7 intro over full-width media. Never use the same split twice in a row. Tablet and phone stack every split into one column.
Every page uses Stepwell Layout: top bar, masthead, page content, footer.
1120px container. Gutters 24px desktop, 32px tablet, 16px phone. Body copy stays under about 65 characters a line (560px).
96px between sections on desktop, 64px tablet, 48px phone. Only values from the spacing scale above.
Reasons sit on one cream sheet split by hairlines: padding 64 / 48 / 32×24, radius 24 (16 on phone). The offer break sits on the dark page between sheets.
24 sheets, 16 photos and offer cards, 12 buttons (8 small), 8 inset photos and tiles, round for pills and tabs. Inner radius equals outer radius minus padding.
Blocks fade in and rise 24px once (0.75s). Side-by-side items stagger by 0.08s. The hero animates on load. The only loop is the button shine: one sweep every 3 seconds, off with Reduce Motion.
Components
Every button on the site is Stepwell / Button. Pick a variant and set the label on the instance; the shine, arrow and hover states come with it. Change offer values on the instances, not inside the components. Review Card and Press Row are empty placeholders: their home sections stay hidden until you have real, permitted reviews and press.
Stepwell / Button · Primary, Secondary, On Dark, Small
Props: Label, Link, Click Tracking, Variant, Show Arrow, Shine. Primary for offers, Secondary for a quieter second action, On Dark on dark surfaces, Small for the sticky bar. Shine is one light sweep every 3 seconds and stops when the visitor has Reduce Motion on.
Stepwell / Badge · On Light, On Dark
Use sparingly: one short fact where a sentence would be too much. Never a rating or a review count.
10-minute sessions
Free shipping
Stepwell / Icon · Phosphor Fill
One set: Phosphor, Fill weight (MIT). 16px in chips and buttons, 20px in lists. Colour from tokens only. Use an icon where it tells you something: comparison rows, fit lists, offer chips.
Stepwell / Offer Card · Hero, Compact
Hero: on the hero photo and in the closer. Compact: the offer break. Same prices on every instance.
Solenne LED Mask
Red and near-infrared · 10-minute sessions
40% off for a limited time
$149
$249
Save 40%
Free shipping
30-day returns
Secure checkout
Solenne LED Mask
Red and near-infrared · 10-minute sessions
40% off for a limited time
$149
$249
Save 40%
Free shipping
30-day returns
Secure checkout
Stepwell / FAQ Item · Closed, Open
Tap toggles. Six questions max; answer objections, not features.
+
−
Ten minutes, three to four evenings a week, after you cleanse.
Stepwell / Mode Switch · Mode 1, Mode 2
A real two-tab control for products with two settings. Name and describe each mode in one sentence.
Red light
The everyday session, three to four evenings a week after you cleanse.
Stepwell / Sticky Bar · Visible, Hidden
Fixed to the bottom of the home page. Shows through the reasons, fit, and FAQ; hidden on the hero and the closer.
40% off · Free shipping
Stepwell / Review Card · placeholder
Placeholder only. The Reviews section on the home page is hidden until you have real reviews: paste each one word for word with the customer’s permission, set Name and Detail, turn on Show Rating only for a real rating, then make the section visible. Never invent a review.
Paste a real customer review here, word for word, with their permission.
Customer name
Verified buyer
Paste a real customer review here, word for word, with their permission.
Customer name
Verified buyer
Stepwell / Press Row · empty slots
The As seen in row on the home page is hidden. Upload logos only for outlets that actually covered the product and allow their logo, one per Logo field, then make the Press section visible. Empty slots show as dashed outlines here.
As seen in
Stepwell / Step Card
How it works: three cards in a 4 | 4 | 4 grid on dark. Set Number, Title, and Line on each instance.
01
Wash your face the way you already do. No extra prep.
Stepwell / Guarantee Seal
Sits in the Guarantee band before the closer. Days and Caption must match your real return window.
Home trial
Example sections
A reason inside the article sheet, then a full-bleed band (offer, guarantee, closer). Bands and sheets alternate down the page. Change the composition from one reason to the next: a 5 | 7 split, 6 | 6 with the photo first, or a stacked intro over full-width media.
01
A facial can take a whole afternoon and a few hundred dollars once you count the drive and the tip. It’s easy to mean to go, and then not go.
Solenne is the version that happens at the sink: ten minutes in your own bathroom, on a night you already have.
A booked facial
Time off and a drive
A slot in the calendar
A salon bill
The Solenne session
Ten minutes at home
After you cleanse
Nothing to book
40% off for a limited time
Free shipping, and a full refund within 30 days if it isn’t for you.
Solenne LED Mask
Red and near-infrared · 10-minute sessions
40% off for a limited time
$149
$249
Save 40%
Free shipping
30-day returns
Secure checkout
Agent Skill Playbook
The stepwell-site-system skill follows these. Work only in the requested scope and keep the section order unless asked.
01 · Sections
Hero with offer card. One article sheet: statement, then reasons 01–05. The offer break on the dark page. Reason 06 in a second sheet. Then who it’s for, FAQ, and the closer band.
02 · Offer settings
Checkout link: the CTA inside Stepwell / Offer Card and inside Stepwell / Sticky Bar (two edits cover every offer button). Prices and chips: each Offer Card instance and the Sticky Bar. Countdown end and Ad Params: in the top bar of Stepwell Layout.
03 · Voice
Plain, specific, second person, with contractions. Talk about routine, time, and cost. Skip words like elevate, unlock, and seamless. No decorative em dashes.
04 · Honest claims
No medical or clinical claims, no promised results or conversion lift. Never invent reviews, ratings, review counts, press logos, or customer names. Add proof only when it is real and permitted.
05 · No fake urgency
The countdown ends at the visitor’s midnight or a real date. No “selling out” lines. The closer headline is never the button label.
06 · Tracking
GTM, Meta Pixel, and GA4 IDs go in Site Settings > Custom Code. Never ship a dummy tag.
07 · Breakpoint QA
Desktop 1200, Tablet 810, Phone 390, plus 320. Hero offer reachable on the first phone screen, sticky bar never covers copy, tap targets 44px+, no one-word lines.
08 · Publishing
Do not publish, connect a domain, or list the template without the owner’s approval.
Starter prompts
/stepwell-site-system Rebrand Stepwell for [product]. Update the Color/ styles and wordmark, rewrite the six reasons in the same voice, and keep every component.
/stepwell-site-system Add a reviews section after reason 06 using my real reviews below. Use Surface Light cards and Text/ styles only.
/stepwell-site-system Build a /shipping page with the Stepwell Layout, one H1, and Body text in a 760px column.
/stepwell-site-system Run the breakpoint QA on the home page and fix only what fails.
Headline options
A (live): 6 reasons people are skipping the spa for Solenne
B: 6 reasons the light mask is moving from the clinic to the bathroom
C: Why more people are doing a 10-minute light session at home