---
title: "Superpower design system"
variant: extended
source: https://superpower.com/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/superpower-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Superpower · Design System

> Clinical clarity, framed with warmth.

**Theme:** light · **Industry:** health · **Source:** https://superpower.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Superpower pairs a restrained, white editorial layout with cinematic health imagery and clear membership messaging. The homepage moves from a high-impact hero to process steps, medical credibility, member outcomes, and social proof.

## North star

Keep the interface quiet and editorial so clear health information and expressive human photography carry the story.

## Overview

The page is built on a bright white canvas and a narrow grayscale palette, letting its large lifestyle photographs provide most of the visual warmth. The hero is a dark, cinematic image with an amber-lit portrait; white copy and pill-shaped calls to action sit over the image for strong contrast. Across the rest of the page, near-black headings and muted gray supporting text keep health information legible without making the interface feel clinical. A single sans-serif family is used throughout, with regular-weight headings, compact tracking, and a clear scale from display messaging to small navigation labels. Layouts alternate between centered explanatory sections and wide, media-led feature areas. Generous white space separates the process cards, biomarker content, doctor profiles, testimonials, and member-story gallery. Fine gray dividers and softly rounded cards provide structure, while color inside photography and product imagery remains illustrative rather than a general UI palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation, and open content sections; also the high-contrast hero text and primary light CTA. |
| Ink | `#18181b` | `--color-ink` | brand | Primary headings, body copy, links, and dark text on cards. |
| Quiet Divider | `#e3e3e3` | `--color-quiet-divider` | neutral | Hairline borders and subtle card or link surfaces separating content without adding strong contrast. |
| Soft Graphite | `#89898b` | `--color-soft-graphite` | semantic | Secondary text and subdued button treatment; use for lower-priority labels rather than headlines. |
| True Black | `#000000` | `--color-true-black` | accent | Dark membership CTA and black gradient overlays over hero or other media; not a general section background. |
| Slate Text | `#71717a` | `--color-slate-text` | semantic | Muted supporting copy and secondary explanatory text against white. |
| Overlay Gray | `#7f7f7f` | `--color-overlay-gray` | neutral | Intermediate tone sampled from section gradients; treat as overlay or image transition, not a core flat surface. |
| Button Charcoal | `#111111` | `--color-button-charcoal` | brand | Near-black membership button background with white label. |
| Stone Gray | `#9e9e9e` | `--color-stone-gray` | surface | Inverse or low-emphasis surface tone; keep limited to supporting elements rather than main page bands. |
| Pale Rule | `#b2b2b2` | `--color-pale-rule` | neutral | Occasional faint border detail; subordinate to the more commonly used light gray hairline. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e3e3e3` (Quiet Divider) · `--color-surface-2` → `#9e9e9e` (Stone Gray) · `--color-text` → `#18181b` (Ink) · `--color-text-muted` → `#89898b` (Soft Graphite) · `--color-text-subtle` → `#71717a` (Slate Text) · `--color-border` → `#e3e3e3` (Quiet Divider)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#18181b` | `#ffffff` | 17.72:1 | AAA |
| `#18181b` | `#e3e3e3` | 13.8:1 | AAA |
| `#18181b` | `#9e9e9e` | 6.61:1 | AA |
| `#89898b` | `#ffffff` | 3.49:1 | AA-large |
| `#89898b` | `#e3e3e3` | 2.72:1 | fail |
| `#89898b` | `#9e9e9e` | 1.3:1 | fail |
| `#71717a` | `#ffffff` | 4.83:1 | AA |
| `#71717a` | `#e3e3e3` | 3.77:1 | AA-large |
| `#71717a` | `#9e9e9e` | 1.8:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%)`
- `linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.5))`
- `linear-gradient(rgb(255, 255, 255), rgb(250, 250, 250) 85%, rgba(250, 250, 250, 0))`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Nb international pro webfont | `--font-body` | webfont | 400 | All page typography, from the hero and section headings to navigation, cards, buttons, and captions. | Inter |

- **Nb international pro webfont:** Regular weight throughout; headings use tight negative tracking, while buttons and navigation stay compact and untransformed.

### Type scale — Perfect Fourth (ratio ≈ 1.347, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 400 | 1 | -0.02em | — | Nb international pro webfont | Large hero or campaign statement. |
| h1 | 45px | 400 | 1.2 | -0.022em | — | Nb international pro webfont | Primary hero headline and main page title. |
| h2 | 34.5px | 400 | 1.2 | 0 | — | Nb international pro webfont | Major section headings, including process and member outcomes. |
| h3 | 22.5px | 400 | 1.4 | -0.017em | — | Nb international pro webfont | Feature, step, and profile titles. |
| body | 17px | 400 | 1.44 | -0.005em | — | Nb international pro webfont | Explanatory paragraphs and membership details. |
| caption | 15px | 400 | 1.5 | -0.013em | — | Nb international pro webfont | Card descriptions, metadata, and supporting labels. |
| button | 13px | 400 | 1.5 | 0 | — | Nb international pro webfont | Membership and other action labels. |
| link | 13px | 400 | 1.5 | 0 | — | Nb international pro webfont | Compact navigation and inline destination links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 7, 8, 11, 13, 14, 15, 19, 22, 30, 37, 40, 52, 60 px.
- Section rhythm 60px · element gap 7px · card padding — · max content width —.

A wide, single-page flow sits on a white canvas, with a compact horizontal header above a nearly full-width hero. The hero uses left-aligned overlay copy, while the process section centers its heading over a four-card row. Later sections switch between full-bleed media, centered comparison content, and multi-column doctor or story layouts. Keep broad breathing room between sections and tighter grouping within cards. The measured page does not establish a reliable maximum width, so follow the screenshot's generous desktop framing without prescribing a fixed value.

## Shape & elevation

- Radius: button `7px` · card `11px` · media `8px` · link `11px` · xs `4px` · sm `6px` · md `7px` · lg `8px` · xl `11px` · pill `9999px`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0.02) 0px 1.38672px 1.38672px 0px`
- Shadow `hairline-2` (button): `rgba(0, 0, 0, 0.1) 0px 2px 2px 0px`
- Motion: standard transition `0.15s ease-out` on interactive elements.

The interface is mostly flat, with whitespace and fine gray hairlines doing more work than shadows. Cards use softly rounded corners and only a very subtle shadow where measured. Dark gradients appear as image overlays for legibility; avoid raised panels or heavy borders.

## Imagery

Photography is the main expressive device: the hero uses a shadowed portrait against a warm amber spotlight, while later imagery shows health dashboards, doctors, and members. Use human, candid-feeling images with rounded media framing and restrained overlays where text sits on top. Product screens and warm photographic colors belong to imagery, not the core interface palette.

## Components

### Navigation header

Slim white horizontal bar with compact links at left, centered wordmark, and login, dark pill membership CTA, and icon control at right.

### Hero media panel

Wide rounded photograph with darkened edges, left-aligned white headline and copy, two contrasting pill CTAs, and small proof points along the bottom.

### How-it-works cards

Four evenly aligned image-led steps with short titles and small supporting copy, introduced by a centered section heading.

### Feature media section

Large lifestyle or product image paired with explanatory copy and compact accordion-like questions or feature labels.

### Membership comparison

Centered heading above a simple two-column list of included benefits and descriptions, ending in a dark membership CTA.

### Doctor profile cards

A horizontal set of portrait-led clinician profiles with credentials, concise biography, and small institutional marks.

### Member stories

Wide testimonial area with outcome heading, review context, and image-led story cards; a later gallery presents member and creator content.

### Measured component styles

- **Primary button** (“How is Superpower better than a standard”): background #898989 · text #ffffff · radius 7.4958px · padding 11.2px 11.2px 11.2px 18.7px · 400 14.9916px Nb international pro webfont · shadow rgba(0, 0, 0, 0.1) 0px 2px 2px 0px
- **Secondary button** (“Become a member”): background #000000 · text #ffffff · radius 9368.82px · padding 9.4px 18.7px · 400 13.1176px Nb international pro webfont
- **Link** (“I felt "fine"—but my bloodwork told a di”): background #e2e2e2 · text #18181b · radius 11.2437px · padding 0px · 400 14.9916px Nb international pro webfont
- **Card** (“@avnibarman_ 406k followers”): background #e2e2e2 · text #18181b · radius 11.2437px · padding 0px · 400 14.9916px Nb international pro webfont

## Do

- Use white space as the primary section separator.
- Keep headings in Ink and supporting copy in measured muted grays.
- Reserve black membership buttons for high-priority actions.
- Use warm, human photography to add color and emotion.
- Place white hero copy over a darkened portion of the image.
- Keep cards softly rounded and visually quiet.

## Don't

- Don't introduce an unmeasured bright UI accent color.
- Don't turn warm image tones into interface backgrounds.
- Don't use heavy shadows or thick borders to define every card.
- Don't center every section; preserve varied alignments.
- Don't use bold, all-caps typography as the default.
- Don't crowd the hero with dense copy or too many controls.

## Agent prompt

Build a new health-service page in Superpower's restrained editorial style. Use Gallery White (#ffffff) as the canvas, Ink (#18181b) for headings and primary text, Slate Text (#71717a) for supporting copy, and Quiet Divider (#e3e3e3) for subtle rules. Keep the single sans-serif voice close to Inter, with regular-weight type and compact, gently tight heading tracking. Start with a compact white navigation bar, then use a wide, rounded photographic hero with a dark overlay, clear left-aligned message, and contrasting pill actions. Let warm human photography supply atmosphere; do not use its amber tones as UI colors. Alternate centered explanatory blocks with wide image-led features and compact card groups. Favor open whitespace, fine borders, understated shadows, and clear health information over decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide rounded image panel with left-aligned overlay copy and bottom proof points. | membership CTA, secondary exploration link, eligibility reassurance | cinematic photo, dark image overlay, white pill CTA, bottom proof row |
| 2 | logo-cloud | Centered credibility statement followed by a row of institutional marks. | trust building, expertise reassurance | small portraits, muted logos, white background |
| 3 | how-it-works | Centered introduction above four horizontally aligned image-led steps. | step-by-step explanation, progressive product education | four-card row, image thumbnails, compact captions |
| 4 | feature-split | Full-width lifestyle image with text, product interface, and compact feature controls overlaid. | feature explanation, accordion questions, product detail preview | large media composition, dashboard mockup, small text panels |
| 5 | comparison | Centered heading over a narrow two-column benefits list and CTA. | value comparison, membership conversion | simple rows, subtle alternating surface, dark pill CTA |
| 6 | team | Left-aligned heading above a horizontal grid of clinician profiles. | credentials discovery, profile links | portrait cards, institution marks, brief biographies |
| 7 | testimonials | Outcome heading and review context above a wide, image-led testimonial carousel. | social proof, member outcome stories, carousel browsing | large photo cards, review score, minimal separators |
| 8 | gallery | Left-aligned heading above a wide, dense horizontal stream of member images. | social proof discovery, browse member content | image card strip, rounded thumbnails, creator-style content |

## Source CSS custom properties (selected)

```css
--text-color--text-primary: #18181b;
--text-color--text-alternate: #fc5f2b;
--text-color--text-secondary: #71717a;
--background-color--background-primary: white;
--_base-color-zinc--zinc-100: #f4f4f5;
--radius--radius-full: 9999px;
--_base-color-zinc--zinc-400: #a1a1aa;
--_base-color-zinc--black: black;
--_base-color-brand--vermillion-900: #fc5f2b;
--_base-color-brand--vermillion-500: #fdba74;
--radius--radius-sml: .5rem;
--_base-color-zinc--zinc-200: #e4e4e7;
--_base-color-zinc--zinc-700: #3f3f46;
--radius--radius-xxs: .25rem;
--_base-color-brand--vermillion-700: #f7861e;
--border-color--border-alternate: #fc5f2b;
--border-color--border-primary: #e4e4e7;
--_base-color-zinc--white: white;
--background-color--background-secondary: #fafafa;
--_base-color-zinc--zinc-800: #27272a;
--radius--radius-med: .625rem;
--_base-color-zinc--zinc-50: #fafafa;
--radius--radius-none: 0px;
--_base-color-zinc--zinc-900: #18181b;
--text-color--text-primary-hover: #3f3f46;
--_base-color-zinc--zinc-300: #d4d4d8;
--text-color--text-secondary-hover: #a1a1aa;
--radius--radius-lrg: .75rem;
--radius--radius-xl: 1rem;
--_base-color-zinc--zinc-500: #71717a;
--radius--radius-3xl: 1.5rem;
--text-color--text-white: white;
--background-color--background-tertiary: #f4f4f5;
--_base-color-brand--vermillion-100: #ffedd5;
--background-color--background-alternate: #18181b;
--radius--radius-xs: .375rem;
--link-color--link-secondary: #fc5f2b;
--radius--radius-4xl: 2.5rem;
--border-color--border-secondary: #d4d4d8;
--radius--radius-2xl: 1.25rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/superpower-com