Peppy — 35% OFF roundel + section banner
Concept catalog · internal review · run component-styles-peppy-promo-roundel-20260821
“use the same design language as the icon rondels … if your rondell for your 35% off has key lines around it, and it has some shade double layers, then you wanna use that same design” [20:47]
“As a secondary layer on top of the product images … just use the index and make sure the rondell sits above those layers” [21:31]
“it has to be responsive … like a sales reel, like a badge” [21:54]
“And then banners, we’ll just make a section banner … it’s good it has a call to action of some sort” [22:21]
The hero is a frozen zone — H1, sub, eyebrow, both CTAs and the parallax product plate are untouched in every candidate. The roundel is an additive layer at z-index:20, above the product plate and the scrims. Design tokens are lifted from the roundel that already exists in the codebase (TrustStrip.tsx:143), not invented.
Hero roundel — 6 mechanisms
glass ring / white core
The TrustStrip roundel scaled up verbatim — the most literal reading of 'use the same design language as the icon rondels'. Blue type on white reads at every size and inherits the site's existing glass vocabulary. Lowest risk, least surprise.
material-blue core, white type
Uses .peppy-panel-blue's feTurbulence/feDiffuseLighting weave as the disc, so the badge carries the same material texture as the site's blue surfaces. Strongest brand claim; the saturated disc owns the corner.
double key-line, hollow core
Two concentric rules with the vial reading through a lightly blurred core. The most restrained option and the most faithful to 'key lines'. Risk: on a dark hero it is quiet — arguably too quiet for a sale badge.
orange pop
The real second accent (#FF5500). Maximum separation from a blue-lit dark hero and the highest-attention option. Risk: orange is the site's accent-2, not its promo colour — this makes the sale the loudest thing on the page.
sales-reel ribbon
Disc plus an angled LIMITED TIME ribbon — Andrew's literal 'like a sales reel'. The ribbon carries urgency without putting a duration in the copy, which matters while the duration is unresolved.
NO DISC — corner rule + stacked type
The contract's required self-questioning candidate: does the hero need a badge at all, or just a mark? Giant Bebas numeral against an orange right rule. Most editorial, least 'sticker'. Risk: reads as part of the hero composition rather than as a promo overlay, so it may not survive a hero image change.
Section banner — 2 mechanisms
material-blue band
TrustStrip's band language: solid brand blue with the woven texture, white roundel at left, white CTA. The one saturated surface on the page, same as the existing trust strip.
dark band, key line + orange eyebrow
Sits quieter in the page flow; hairline rules top and bottom, orange GRAND OPENING eyebrow, brand-blue CTA. Reads as site furniture rather than an ad.
Compliance carried on every candidate: numeric-only claims · “Bacteriostatic water excluded” on both banners · “applied automatically at checkout”, never implying the shelf price is already cut · en-CA. Nauman’s tone review is required before any of this deploys, and the FR needs a real translation under the every-word rule.