Sunrise Coral
#fc5f2bOrange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Superpower
superpower.comWebsite preview
The design language
Superpower wraps a serious clinical promise in cinematic, atmospheric UI: full-bleed dark photography heroes transition into crisp white content surfaces, with one vivid sunrise-orange accent pulsing through the system. Typography carries the brand — a proprietary geometric sans at whisper-tight negative tracking, scaling from 11px metadata to 66px display with line-heights that compress as sizes grow (1.00 at display, 1.40–1.50 at body). A floating dark pill navigation bar hovers over imagery, and pill-shaped CTAs create a tension between clinical precision and warm vitality. Surfaces are mostly flat — the system relies on generous white space, hairline zinc dividers, and a single faint shadow pattern rather than heavy elevation. Color is rationed: nearly everything is black, white, or zinc-gray, and the orange appears only as functional punctuation on actions and brand marks.
Color palette
brand
Coral Glow
#ff8b64Gradient endpoint paired with Sunrise Coral for decorative membership card wash
neutral
Carbon Black
#18181bPrimary text, floating navigation bar fill, headings, icon strokes
Pure Black
#000000Logo wordmark, deep contrast borders
Zinc Gray
#71717aBody text, secondary descriptions, muted metadata, helper copy
Ash Gray
#a1a1aaTertiary text, inactive borders, disabled states
Mist Gray
#e4e4e7Hairline borders, card outlines, divider lines, button borders
Fog Gray
#f4f4f5Subtle surface elevation, muted backgrounds, image overlay scrim base
Paper White
#ffffffPage background, card surfaces, text on dark images, button text
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
66px · 400 · 1 · -0.025px trackingThe quick brown fox jumps
text-60
60px · 400 · 1.1The quick brown fox jumps
text-56
56px · 400 · 1.06The quick brown fox jumps
heading-lg
45px · 400 · 1.13 · -0.015px trackingThe quick brown fox jumps
text-37
37px · 400 · 1.2The quick brown fox jumps
heading
30px · 400 · 1.2 · -0.013px trackingThe quick brown fox jumps
text-26
26px · 400 · 1.25The quick brown fox jumps
heading-sm
22px · 400 · 1.25 · -0.012px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
NB International Pro
- Weights
- 400, 700
- Sizes
- 11, 13, 15, 17, 19, 22, 26, 30, 37, 45, 56, 60, 66
- Line height
- 1.00, 1.06, 1.10, 1.13, 1.20, 1.25, 1.40, 1.50
- Letter spacing
- -0.0250em, -0.0220em, -0.0200em, -0.0150em, -0.0130em, -0.0120em, -0.0090em, -0.0050em
- Fallback
- Inter Tight, General Sans, Switzer
Everything — display, headings, body, UI, nav. The signature choice is the aggressively tight negative tracking that scales with size (-0.025em at 66px down to -0.005em at small body) combined with line-heights that compress as sizes grow, giving headlines a monolithic, poster-like density that distinguishes Superpower from airy health-tech competitors
Additional typeface
NB International Mono Pro
- Weights
- 400
- Sizes
- 11, 13
- Line height
- 1.40, 1.50
- Letter spacing
- -0.0060em
- Fallback
- JetBrains Mono, IBM Plex Mono
Tabular metadata, micro-copy annotations, technical labels — used sparingly for moments requiring a clinical/instrumented feel
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 75px
- Card padding
- 19px
- Element gap
- 11px
Border radius
cards
15pxicons
7.5pxpills
9999pxnavBar
15pxbuttons
9999pxsmallCards
5pxSpacing scale
1px2px4px6px7px8px9px10px11px15px16px19px21px22px24px26px28px30px37px42px45px60px66px71px75px105px150px185pxGuidelines
Do
- Use Sunrise Coral (#fc5f2b) exclusively for filled primary action buttons and the brand mark — never for body text, icons, or decorative backgrounds
- Set display headlines at weight 400 with letter-spacing -0.025em and line-height 1.0 — the whisper-weight is the signature
- Float the navigation as a dark pill capsule over imagery, never as a flat top bar
- Use 9999px border-radius for all buttons and nav CTAs to maintain the pill system
- Layer the surface stack as white → mist gray → carbon black — no mid-tone chromatic surfaces
- Use the marbled coral gradient ONLY for the membership visual card — it's a one-of-a-kind brand asset, not a reusable pattern
- Pair every primary CTA with a trust badge row (HSA/FSA, payment icons) directly below at 11-13px Zinc Gray
Don’t
- Don't apply heavy drop shadows — the system uses a single 2px hairline shadow at most, and most cards have no shadow at all
- Don't use weight 700 for display headlines — weight 400 at 56-66px is the rule, 700 is reserved for small labels and button text
- Don't introduce additional chromatic colors — the system is deliberately dichromatic (coral + neutrals)
- Don't use square corners on cards — minimum 5px radius, cards default to 15px
- Don't place body text on the hero image without a dark scrim or sufficient contrast — the hero photo is intentionally dark for text legibility
- Don't use outlined or ghost variants of the coral CTA — it is always a filled pill
- Don't stretch the marbled gradient across backgrounds or section dividers — it belongs only on the membership card artwork
Components
Floating Pill Navigation
Primary site navigationDark Carbon Black (#18181b) pill-shaped bar, ~15px radius, floats over hero imagery with generous internal padding (~12px vertical, ~19px horizontal). Logo wordmark left in white, center nav links in white/60 opacity, orange Sunrise Coral CTA button right. The floating pill is a signature element — it never sticks to viewport edges but always appears as a contained capsule.
Primary Pill CTA
Primary conversion buttonSunrise Coral (#fc5f2b) fill, white text at 15-17px weight 700, 9999px border-radius, ~15px vertical × ~24-32px horizontal padding. Tight letter-spacing (-0.009em). Right-arrow chevron after label. No drop shadow — relies on color contrast alone.
Ghost Text Link
Secondary navigation and inline linksNo background, no border. White or Carbon Black text at 13-15px weight 400 with tight tracking. Underline appears on hover only. Used for nav items and inline content links.
Hero Overlay Headline
Hero section primary heading66px display size, weight 400 (NOT 700 — the whisper-weight is deliberate), line-height 1.0, letter-spacing -0.025em, white (#ffffff) text, centered over full-bleed dark photography. This weight-400-at-display-size choice is the system's most distinctive typographic decision.
Hero Subhead
Hero supporting copy17px body-lg, weight 400, Zinc Gray (#71717a) on white sections, white at reduced opacity on dark hero. Centered, max-width ~480px.
Membership Visual Card
Hero/pricing card artworkOrganic marbled pattern in Sunrise Coral gradient (linear 88deg from #fc5f2b to #ff8b64 fading to white), 15px radius, ~320px wide. Contains 'superpower membership' wordmark top-left and '$17/month' price block bottom-left in white. The only decorative visual on the site.
Membership Feature List
Bullet list of membership benefitsVertical list with Sunrise Coral checkmark icons (7.5px radius squircle), 19px body text in Carbon Black, 11px row gap. Checks are filled solid coral, not outlined.
Section Heading
Major section titles45-56px heading-lg/display, weight 400, letter-spacing -0.015 to -0.022em, Carbon Black. Generous bottom margin (~30-40px). Left-aligned in content sections, centered over imagery.
FAQ Item / Read More
Expandable content blocksLarge heading at 30-37px paired with a small ghost-style 'Read more' text link right-aligned. No box, no border — relies on whitespace and type size for separation.
Trust Badge Row
Credibility indicators (HSA/FSA, payment methods)Horizontal row of small icons and labels at 11-13px, Zinc Gray text, with tiny check or icon glyphs in Carbon Black. Sits directly below primary CTA as a conversion reassurance pattern.
Photo Thumbnail Strip
Image carousel/dashboard previewsHorizontal row of 5-6 small rectangular thumbnails (~80-100px wide), 5px radius, showing app/dashboard screenshots. One thumbnail is active with a Sunrise Coral border.
Surfaces & elevation
Level 0
Page Canvas
#ffffffMain content background for all sections below the hero
Level 1
Card Surface
#ffffffMembership card and content cards sit on canvas with hairline borders
Level 2
Muted Surface
#f4f4f5Subtle alt-row or footer surface
Level 3
Floating Nav
#18181bDark pill navigation bar that floats over hero imagery
Elevation is deliberately restrained — a single 2px/2px hairline shadow on cards. The system prefers flat surfaces with hairline borders to communicate layering rather than casting shadows, letting the full-bleed photography do the heavy visual lifting.
Membership Card
rgba(0, 0, 0, 0.05) 0px 2px 2px 0px
Layout & imagery
Imagery
Full-bleed cinematic photography dominates the hero — a person silhouetted against a deep teal-blue sky, the image intentionally dark and moody to create emotional weight and counterpoint the clinical health promise. Secondary imagery uses tight, contained product-style crops (the marbled orange membership card, app screenshots) rather than lifestyle photography. No illustrations, no 3D renders, no abstract graphics — the photographic contrast IS the visual identity. The membership card features an organic marbled/lava-lamp pattern in Sunrise Coral tones, the only decorative visual element. Icons are line-based with a 7.5px radius (soft squircle), using thin strokes in Carbon Black.
Design notes
Agent Guide
**Quick Color Reference** - text: #18181b (Carbon Black) - background: #ffffff (Paper White) - border: #e4e4e7 (Mist Gray) - muted text: #71717a (Zinc Gray) - accent: #fc5f2b (Sunrise Coral) - primary action: no distinct CTA color **3 Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 3. **FAQ Section**: White background, max-width 1200px centered. 'Frequently Asked Questions' heading at 45px weight 400 #18181b, left-aligned, 75px top margin. FAQ items: 30px question text in #18181b weight 400, 'Read more' ghost text link right-aligned at 13px #71717a. 11px row gap between items, no dividers or borders.
Similar brands
Eight Sleep
Same full-bleed dark hero photography with a single warm accent color and large whispered-weight display type
Whoop
Dichromatic health-tech palette (neutral + single vivid accent), pill CTAs, and flat-surface card system
Levels
Compact density, tight negative letter-spacing on display type, and dark floating pill navigation over imagery
Function Health
Clinical/wellness tone with full-bleed atmospheric photography and rationed color use
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
