# superpower.com

Source: https://superpower.com/
Captured: 2026-09-20
Tags: marketing, landing, mixed, both, minimal, luxury, calm, premium, trustworthy, warm
Colors: #0f0806, #e39544, #fdfdfd, #b46d2e, #472b1f, #84461d, #dfab6e, #b58954
Type (h1): Nb international pro webfont · 56.2185px/56.2185px · 400 · tracking -1.12437px — "Your new health membership"
Type (h2): Nb international pro webfont · 37.479px/44.9748px · 400 — "How it works"
Type (h3): Nb international pro webfont · 44.9748px/53.9697px · 400 · tracking -1.01193px — "What could cost $10,000 is now $349"
Type (body): Nb international pro webfont · 14.9916px/22.4874px · 400 · tracking -0.2px — "Members get 150+ lab tests across 2 blood draws. $349 per year."
Type (button): Nb international pro webfont · 14.9916px/20.9882px · 400 — "Get your baseline"
Button: "Get your baselineLoading..." — fill #111111, text #ffffff, radius 999px, border 1px, padding 13.1176px 18.7395px, height 54px, type 14.9916px/400
Radii: 3.7479px (11), 11.2437px (9), 5.62185px (4), 7.4958px (4), 8px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/superpower-com/hero.webp?v=7165da88
- Page crop (mid-1): https://media.lvly.design/library/superpower-com/mid-1.webp?v=706ef8c3
- Page crop (mid-2): https://media.lvly.design/library/superpower-com/mid-2.webp?v=92c7527e
- Hero (mobile): https://media.lvly.design/library/superpower-com/mobile-hero.webp?v=73701097
- Full page (desktop): https://media.lvly.design/library/superpower-com/full.jpg?v=6b181cf3
- Full page (mobile): https://media.lvly.design/library/superpower-com/mobile-full.jpg?v=2a854f46
- Clip preview (mp4): https://media.lvly.design/library/superpower-com/video-ugkkws.preview.mp4?v=2c570275

A consumer health membership that opens like a film and then turns into a clean white brochure. The hero is a full-bleed photograph — a woman in profile, eyes closed, rim lit by one amber source that blooms into a halo behind her — and it supplies the page's entire color story: near-black #0f0806 ground, #e39544 glow, white type. Everything sits directly on the photo with no scrim, because the light falls off to black exactly where the copy lives; the headline is 56px set at a 1.0 line-height in a single grotesk (NB International Pro) at weight 400, so the two lines stack as one tight block. Below the fold the page flips to #ffffff and the same restraint holds: one typeface, one weight, black 999px pills as the only filled elements, hairlines and 4% gray fills instead of borders, and photography doing all the emotional work — clinician portraits, member footage, a closing dark frame that reprises the amber. What makes it read premium rather than clinical is the refusal to decorate: no gradients, no cards with shadows, no second accent color anywhere.

## Steal-worthy details

- Single-source amber halo behind a rim-lit portrait is the page's only chroma — #e39544 blooming out of a #0f0806 ground, with the falloff placed so the left third is dark enough to take white copy without a scrim, overlay or gradient
- Three-slot chromeless header over the photo: nav links left, wordmark dead center, "Log in" plus a filled pill right, and a 3x3 dot-grid button as a separate last slot — no bar fill, no border, no shadow, nothing between the header and the image
- On scroll the header detaches into a floating translucent dark pill, inset from all three edges and fully rounded, with the dot-grid button popping out beside it as its own circle — the page ground is never covered by a solid bar
- CTA pair of identical geometry, opposite materials: primary is a solid white 999px pill, secondary is the same pill in translucent white so the photograph reads straight through it — one glass control, and only over imagery
- Stat strip welded to the hero's bottom edge — three label/value pairs at 15px, label in white and value in ~60% white, split by full-height hairline rules rather than gaps, so the proof reads as one band and not three cards
- One grotesk at one weight for the whole page: h1 56px/56px at -1.12px tracking, h3 45px/54px at -1.01px, body 15px/22.5px at -0.2px, buttons 15px — hierarchy comes entirely from size and the negative tracking that tightens as type grows
- Borderless zebra comparison table: alternating ~4% gray row fills carry the rhythm, label column left and value column right, no rules and no outer frame, with a single black pill centered beneath it as the section's only CTA
- Credentials as proof units: each doctor card pairs a grayscale university lockup with a name, a specialty line in muted gray, two sentences and a plain underlined "Learn more" — no avatars in circles, no logos in color, separated by full-height hairlines in a horizontal scroller

## Style recipe

Build the page on two grounds and one accent. Ground A is near-black #0f0806 used only where a photograph is present; ground B is pure #ffffff for every content section. The accent is a single warm amber, #e39544, and it appears only as light inside imagery — never as a fill, a border or a link color. Ink is #111111 on white and #ffffff on black, with secondary text at 60% of whichever ink is in play.

Set everything in one geometric grotesk (NB International Pro, Aeonik, Söhne or Inter Tight) at weight 400 and never go heavier. Scale: display 56px/56px at -1.12px tracking, section head 45px/54px at -1.0px, sub-head 37px/45px at normal, body 15px/22.5px at -0.2px, button 15px/21px. Tracking tightens as size grows and returns to normal below 40px. Cap display lines at roughly two and let them break as a block, not as a ragged paragraph.

Controls: one shape only — a 999px pill, 54px tall, 13px/19px padding, 15px label, no uppercase. Primary is solid ink on the light ground (#111111 / white text) and solid white on imagery; secondary over imagery is the same pill in translucent white with no border. Containers use a small radius scale — 4px, 8px, 11px — and nothing in between; no shadows on anything, ever.

Structure with hairlines and tonal fills instead of boxes. Divide inline stat groups with full-height 1px rules at ~20% ink. Build tables and lists from alternating ~4% ink row fills with no borders and no outer frame. Space sections at roughly 120–160px vertically on desktop, and let one wide photograph or a single full-bleed frame open and close the page.

Photography is the design system's fourth color. Use one warm practical light source, a dark falloff, and a human subject mid-gesture; crop so the copy zone is already dark and never add a scrim, a brightness filter or a gradient over it. Logos, badges and credential marks go in grayscale at ~50% opacity so nothing competes with the amber.

Motion is minimal and mechanical: the header detaches on scroll into a floating translucent pill inset 16–24px from the edges with a 200ms ease, imagery fades up at ~150ms, and nothing else moves. The two moves that make it recognizable are the single amber light source doing all the color work, and the whole page running on one typeface at one weight with pill-shaped controls as the only filled shapes.