superpower.com

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.

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.