Superpower — Steps / How-it-works
Centered How It Works heading over a four-up row of numbered step cards each pairing a small product thumbnail with a short caption.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/inspiration/superpower-how-it-works-four-steps.
Measured spec
| Scheme | light |
| Background | #FFFFFF |
| Text | #7C624F |
| Accents | #BB6C3E, #7C624F, #783D22 |
| Contrast | 5.65 |
| Columns | 1 |
| Alignment | left |
| Whitespace | regular |
| Density | 0.371 |
| Measured size | 1600×801 px |
Palette
#FFFFFF#18181B#111111#FFEFEA
Fonts
NB International Pro
Page types
Detail
UX patterns
Wizard / Stepper
UI elements
Card
Context
Other sections on this page
- Hero — Giannis measure hero
- Logo Wall — Featured-in press strip
- Feature — 100+ biomarkers dashboard
- Comparison — $10,000 vs $199 value card
- Testimonial / Social Proof — Led by doctors authority row
- Testimonial / Social Proof — Changing outcomes quotes
- Gallery / Showcase — Used by athletes mosaic
- Pricing / Plans — Membership starts here
- CTA / Sign-up — Health is your superpower
- Footer — Site footer