---
version: alpha
name: Superpower
description: "A silhouette turned to a vermillion sun, over clinical zinc calm."
colors:
  on-surface: "#000000"
  outline: "#e4e4e7"
  error: "#b90090"
  surface: "#fafafa"
  primary: "#f7861e"
  white: "#ffffff"
  zinc-100: "#f4f4f5"
  zinc-400: "#a1a1aa"
  zinc-500: "#71717a"
  zinc-900: "#18181b"
  off-black: "#111111"
  ink-950: "#141414"
  vermillion-900: "#fc5f2b"
  vermillion-500: "#fdba74"
  vermillion-100: "#ffedd5"
  vermillion-50: "#fff6ea"
  success-green: "#26936b"
typography:
  micro:
    fontFamily: NB International Pro
    fontSize: 11.24px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  caption:
    fontFamily: NB International Pro
    fontSize: 13.12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-button:
    fontFamily: NB International Pro
    fontSize: 14.99px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: NB International Pro
    fontSize: 16.87px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  subheading:
    fontFamily: NB International Pro
    fontSize: 22.49px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  heading:
    fontFamily: NB International Pro
    fontSize: 29.98px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  heading-lg:
    fontFamily: NB International Pro
    fontSize: 37.48px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.01em
  display:
    fontFamily: NB International Pro
    fontSize: 44.97px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.015em
  display-xl:
    fontFamily: NB International Pro
    fontSize: 56.22px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.02em
  hero:
    fontFamily: NB International Pro
    fontSize: 65.59px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  none: 0px
  xxs: 0.25rem
  xs: 0.375rem
  small: 0.5rem
  medium: 0.625rem
  card: 11.24px
  large: 0.75rem
  xl: 1rem
  2xl-4xl: 1.25rem
  pill: 999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 19px
  xl: 60px
  navbar: 6rem
---
# Superpower — Style Reference
> A silhouette turned to a vermillion sun, over clinical zinc calm.

**Theme:** mixed

Superpower runs a two-register health-membership aesthetic: a near-black cinematic hero where a warm vermillion sun-glow does all the emotional work, and a bone-white editorial body built on a full zinc neutral ramp. The one signature move is restraint with the orange — `#fc5f2b` (vermillion-900) is the whole brand, yet it is used as an accent, a link, an active border, never as the button fill. Buttons are surface-inverted pills: white-on-dark in the hero, dark-on-white in the body, always fully rounded (`999px`). Typography is a single Swiss neo-grotesque — NB International Pro — set at weight 400 with a mono companion, letting the type stay quiet so the imagery carries the register. The layout is full-bleed cinematic at the top, then contained editorial cards on `#fafafa` below, with a tall 6rem navbar and generous section air.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| White | `#ffffff` | `--white` | Canvas and primary text on dark; the hero CTA fill. |
| Zinc 50 | `#fafafa` | `--_base-color-zinc--zinc-50` | Secondary surface, card backgrounds in the editorial body. |
| Zinc 100 | `#f4f4f5` | `--_base-color-zinc--zinc-100` | Tertiary surface, subtle fills and tertiary borders. |
| Zinc 200 | `#e4e4e7` | `--_base-color-zinc--zinc-200` | Primary hairline border on light surfaces. |
| Zinc 400 | `#a1a1aa` | `--_base-color-zinc--zinc-400` | Tertiary text, disabled/muted labels. |
| Zinc 500 | `#71717a` | `--_base-color-zinc--zinc-500` | Secondary body text, captions, icon-secondary. |
| Zinc 900 | `#18181b` | `--_base-color-zinc--zinc-900` | Primary text on light; dark button fill; alternate surface. |
| Off-Black | `#111111` | `--black` | Near-black ink used for deep headings and dark UI. |
| Ink 950 | `#141414` | *(from button bg)* | Rounded dark control fill (icon buttons). |
| Pure Black | `#000000` | `--_base-color-zinc--black` | Cinematic hero backdrop behind the vermillion glow. |
| Vermillion 900 | `#fc5f2b` | `--orange` · `--_base-color-brand--vermillion-900` | THE brand orange — accent, link-alternate, active border. Never a CTA fill. |
| Vermillion 700 | `#f7861e` | `--_base-color-brand--vermillion-700` | Warmer ramp step for hover/gradient into the sun-glow. |
| Vermillion 500 | `#fdba74` | `--_base-color-brand--vermillion-500` | Soft amber mid-tone, the glow's outer falloff. |
| Vermillion 100 | `#ffedd5` | `--_base-color-brand--vermillion-100` | Palest warm tint, secondary/wash backgrounds. |
| Vermillion 50 | `#fff6ea` | `--_base-color-brand--vermillion-50` | Barely-there cream warm wash. |
| Success Green | `#26936b` | `--_base-color-accents--green-700` | Status-only accent (text-success). Never decorative. |
| Error Pink | `#b90090` | `--_base-color-accents--pink-700` | Status-only accent (text-error / border-error). |

Full zinc ramp, the complete vermillion ramp, and the green/pink/yellow status accents are reproduced intact in Quick Start.

## Tokens — Typography
### NB International Pro — the whole voice: nav, display, body, buttons · `--font-primary`
- **Substitute:** Neue Haas Grotesk, Helvetica Now, Inter
- **Weights:** 400 (regular, the default everywhere), 700 (available, sparingly)
- **Sizes:** 15px body/buttons, 17px lead, 22px / 30px / 37px / 45px / 56px headings, 66px largest display
- **Line height:** tight on display (~1.0–1.05), ~1.4–1.5 on body
- **Letter spacing:** near-zero; the grotesque is left to its natural metrics, slight negative on big display
- **Role:** A single Swiss neo-grotesque carries every register — the wordmark "superpower" is this face, lowercase, in white on the hero.

### NB International Mono Pro — technical/label companion · `--font-mono`
- **Substitute:** Söhne Mono, JetBrains Mono, ui-monospace
- **Weights:** 400
- **Sizes:** small label sizes (11–15px)
- **Line height:** ~1.4
- **Letter spacing:** natural mono metrics
- **Role:** Data, eyebrows, and technical labels — pairs the grotesque with its mono sibling for a clinical/lab feel.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Micro | 11.24px | 1.4 | 0 | `--text-micro` |
| Caption | 13.12px | 1.4 | 0 | `--text-caption` |
| Body / Button | 14.99px | 1.5 | 0 | `--text-body` |
| Lead | 16.87px | 1.5 | 0 | `--text-lead` |
| Subheading | 22.49px | 1.3 | 0 | `--text-subheading` |
| Heading | 29.98px | 1.2 | -0.01em | `--text-heading` |
| Heading LG | 37.48px | 1.15 | -0.01em | `--text-heading-lg` |
| Display | 44.97px | 1.1 | -0.015em | `--text-display` |
| Display XL | 56.22px | 1.05 | -0.02em | `--text-display-xl` |
| Hero | 65.59px | 1.0 | -0.02em | `--text-hero` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| XS | 4px | `--spacing-xs` |
| SM | 8px | `--spacing-sm` |
| MD | 12px | `--spacing-md` |
| LG | 19px | `--spacing-lg` |
| XL | 60px | `--spacing-xl` |
| Navbar | 6rem (96px) | `--navbar-height` |

### Border Radius
| Element | Value |
|---------|-------|
| None | 0px (`--radius-none`) |
| XXS | 0.25rem (`--radius-xxs`) |
| XS | 0.375rem (`--radius-xs`) |
| Small | 0.5rem (`--radius-sml`) |
| Medium | 0.625rem (`--radius-med`) |
| Card | 11.24px / 0.7rem *(measured card)* |
| Large | 0.75rem (`--radius-lrg`) |
| XL | 1rem (`--radius-xl`) |
| 2XL–4XL | 1.25rem / 1.5rem / 2.5rem |
| Pill | 999px / 9999px (`--radius-full`) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Hairline lift | `rgba(0,0,0,0.02) 0px 1.39px 1.39px 0px` | `--shadow-xs` |
| Soft | `rgba(0,0,0,0.1) 0px 2px 2px 0px` | `--shadow-sm` |
| Modal | `0 0.5rem 3rem rgba(0,0,0,0.12)` | `--modal-dialog-shadow` |

### Layout
- **Page max-width:** contained editorial body; full-bleed cinematic hero
- **Section gap:** generous (≈60px block padding)
- **Card padding:** roomy asymmetric (up to ~60px inset on feature cards)
- **Element gap:** 12–19px between controls
- **Navbar:** 6rem tall, transparent over the hero

## Components
### Primary CTA (Hero) — "Become a member"
**Role:** The membership conversion action, on the dark hero.
White fill `#ffffff`, text `#18181b`, fully rounded `999px`, padding `13px 19px`, weight 400 at 15px, no border, no shadow. Surface-inverted so the button reads as the brightest object on near-black.

### Primary CTA (Light body) — "Become a member"
**Role:** Same action, on the white editorial body.
Dark fill `#18181b`, text `#ffffff`, fully rounded `9999px`, no border, no shadow. The pill inverts with the surface — dark on light, light on dark.

### Secondary CTA — "See what we test"
**Role:** The exploratory action beside the primary.
Translucent/ghost pill on the hero (fully rounded `999px`, white text), reading as a quieter sibling to the solid white button. On light surfaces it becomes an outline or `#141414` fill variant.

### Nav Bar
**Role:** Top-level wayfinding — What we test, Reviews, FAQs.
6rem tall, transparent over the hero, centered lowercase wordmark "superpower", links in white (hero) / `#18181b` (body), a solid pill CTA at the right, and a 9-dot app grid affordance.

### Announcement Bar
**Role:** Promo strip above the nav ("Free progress check panel ($99 value) · Learn more").
Full-width white, `#18181b` text, an inline chevron link — the single always-on marketing line.

### Eyebrow / Checkmark Label
**Role:** Qualifier above the hero headline ("✓ HSA/FSA eligible").
Small 15px label with a leading check glyph, white on the hero — trust signal, not decoration.

### Input Field
**Role:** Email / form capture.
White fill, text `#18181b`, `1px #cccccc` border, fully rounded `99px`, padding `8px 12px`, 15px. The pill radius carries from the buttons into the fields.

### Feature Card
**Role:** Editorial content block in the light body.
Fill `#fafafa`, radius `11.24px`, no border, no shadow — depth comes from the luminance step off white, not from elevation.

### Accordion (FAQ)
**Role:** Expandable FAQ rows.
White fill, `1rem` radius, `1px #e8e8e8` border that turns `#fc5f2b` (vermillion) when active, title `#1a1a1a` at 1.25rem, body `#666666`, 0.4s cubic-bezier expand. This is the one place the orange paints a border.

### Modal / Dialog
**Role:** Overlay flows (sign-up, more info).
White dialog, `1rem` radius, `0 0.5rem 3rem rgba(0,0,0,0.12)` shadow, backdrop `rgba(0,0,0,0.5)` with 1.25rem blur, slides 2rem on a `cubic-bezier(0.32,0.72,0,1)` easing.

### Icon Button
**Role:** Compact dark control (e.g. app-grid / utility).
Fill `#141414`, white icon, radius `7.5px`, snug asymmetric padding — the only near-black rounded-rectangle in an otherwise pill world.

### Link
**Role:** Inline navigation and text links.
Primary links are black `#000000`; the alternate/highlight link is vermillion `#fc5f2b`. Underline on the legal/footer links only.

## Do's and Don'ts
### Do
- Invert the pill with its surface: white-on-dark in the hero, dark-on-white in the body.
- Keep every button and input fully rounded (`999px` / `99px`) — the pill is the shape system.
- Let a single warm glow (`#fc5f2b` → `#f7861e` → `#fdba74`) carry the hero's emotion against pure black.
- Set almost everything at weight 400 in NB International Pro and let the neutral zinc ramp do the hierarchy.
- Reserve green (`#26936b`) and pink (`#b90090`) for status only.

### Don't
- Don't fill a CTA with the vermillion orange — it is accent, link, and active border, never the button.
- Don't introduce a second display typeface; the grotesque + its mono sibling is the entire voice.
- Don't add drop shadows for depth in the body — use the `#fafafa` luminance step and hairline `#e4e4e7` borders.
- Don't break the lowercase wordmark; "superpower" is always lowercase.
- Don't scatter the accent ramp — one glow per view, then back to zinc neutral.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| -1 | Cinematic Void | `#000000` | Hero backdrop behind the vermillion sun-glow. |
| 0 | Canvas | `#ffffff` | Primary page background, editorial body. |
| 1 | Sunk | `#fafafa` | Secondary surface, feature cards. |
| 2 | Tertiary | `#f4f4f5` | Subtle fills and grouped panels. |
| 3 | Inverted | `#18181b` | Dark blocks / dark CTA fills within the light body. |

## Elevation
Elevation is almost entirely flat. Depth in the light body is conveyed by luminance steps (`#ffffff` → `#fafafa` → `#f4f4f5`) and hairline `#e4e4e7` borders, not shadow. Shadows are reserved and minimal — a near-invisible `rgba(0,0,0,0.02)` lift and a modal-only `0 0.5rem 3rem rgba(0,0,0,0.12)`. In the hero, depth is purely photographic: the radial vermillion glow separates the subject from the black.

## Imagery
Cinematic, warm, human. The hero is a single high-contrast portrait — a woman in profile silhouetted against a large radial vermillion-to-amber sun-glow on black. Photography does the emotional lifting; the palette (`#000000` → `#fc5f2b` → `#fdba74`) is literally sampled from the light. Elsewhere the body turns clinical and quiet. No stock-flat illustration, no gradients-for-decoration — imagery is editorial and used at full bleed.

## Layout
Full-bleed cinematic hero (edge-to-edge portrait, transparent 6rem navbar, centered wordmark) transitioning into a contained, card-based editorial body on white/`#fafafa`. A slim announcement strip sits above the nav. Rhythm alternates dark cinematic sections with light editorial ones; controls are pill-shaped and left-aligned; FAQ accordions and modals govern the deeper flows. Generous vertical air (~60px section padding) keeps the clinical calm.

## Typography Voice
Superpower is a one-face system used in two moods. On the hero, NB International Pro goes large (56–66px), tight, and white — a confident, almost pharmaceutical clarity against black. In the body it drops to 15px regular and gets out of the way, deferring hierarchy to the zinc ramp and generous spacing rather than weight contrast (nearly everything is 400). The NB Mono Pro companion appears on data and eyebrows, reinforcing a lab/measurement register. The signature move: no italics, no bold-heavy hierarchy — restraint through a single grotesque, letting warmth come from color and image, not type.

## Agent Prompt Guide
## Quick Color Reference
- background: #ffffff / text: #18181b / surface: #fafafa / border: #e4e4e7 / accent: #fc5f2b / primary action: #18181b fill (dark-on-light) or #ffffff fill (light-on-dark) — the orange is NOT a CTA color
## Example Component Prompts
1. **Hero**: Full-bleed section, `#000000` background, a radial vermillion-to-amber glow (`#fc5f2b` core → `#fdba74` falloff) behind a profile portrait; white NB International Pro display at 56px, a `✓ HSA/FSA eligible` eyebrow, a white pill CTA (`#ffffff` fill, `#18181b` text, `999px` radius, 13px×19px padding) beside a translucent ghost pill.
2. **Primary CTA (body)**: Fully-rounded pill, `#18181b` fill, `#ffffff` text, `9999px` radius, no border, no shadow, 15px weight 400.
3. **Feature Card**: `#fafafa` fill, `11.24px` radius, no border, no shadow, roomy padding; depth from the luminance step off `#ffffff`.
4. **FAQ Accordion**: White row, `1rem` radius, `1px #e8e8e8` border that becomes `#fc5f2b` when active, title `#1a1a1a` at 1.25rem, body `#666666`, 0.4s `cubic-bezier(0.4,0,0.2,1)` expand.
5. **Input**: White fill, `1px #cccccc` border, `99px` radius, `#18181b` text, 8px×12px padding, 15px.

## Similar Brands
- **Function Health** — clinical biomarker-testing membership with the same warm-editorial-over-neutral restraint.
- **Levels** — metabolic-health UI built on a quiet neutral ramp with a single hot accent.
- **Oura** — dark, cinematic health photography and disciplined minimalism.
- **Aesop** — warm-neutral editorial calm where a single hue carries the whole identity.
- **Teenage Engineering** — the NB International grotesque lineage: technical, deadpan, Swiss.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Zinc neutral ramp */
  --white: #ffffff;
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --black: #111111;
  --color-ink-950: #141414;
  --color-black: #000000;

  /* Colors — Vermillion brand ramp */
  --color-vermillion-50: #fff6ea;
  --color-vermillion-100: #ffedd5;
  --color-vermillion-300: #fed7aa;
  --color-vermillion-500: #fdba74;
  --color-vermillion-700: #f7861e;
  --orange: #fc5f2b; /* vermillion-900 — the brand accent */

  /* Colors — Status accents */
  --color-green-50: #e9f9f3;
  --color-green-100: #a7f3d0;
  --color-green-300: #00fca1;
  --color-green-500: #11c182;
  --color-green-700: #26936b;
  --color-pink-50: #fbf2f9;
  --color-pink-100: #ffddf8;
  --color-pink-300: #ffbef1;
  --color-pink-500: #ff68de;
  --color-pink-700: #b90090;
  --color-pink-900: #84004b;
  --color-yellow-50: #fbfbe7;
  --color-yellow-100: #f7ff9d;
  --color-yellow-300: #e8fc00;
  --color-yellow-500: #d7db0e;
  --color-yellow-700: #938700;

  /* Semantic roles */
  --text-primary: #18181b;
  --text-secondary: #71717a;
  --text-tertiary: #a1a1aa;
  --text-alternate: #fc5f2b;
  --text-white: #ffffff;
  --background-primary: #ffffff;
  --background-secondary: #fafafa;
  --background-tertiary: #f4f4f5;
  --background-alternate: #18181b;
  --border-primary: #e4e4e7;
  --border-secondary: #d4d4d8;
  --border-tertiary: #f4f4f5;
  --border-alternate: #fc5f2b;
  --link-primary: #000000;
  --link-alternate: #fc5f2b;

  /* Typography — Families */
  --font-primary: 'Nb International Pro Webfont', 'Neue Haas Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Nb International Mono Pro', ui-monospace, 'JetBrains Mono', monospace;

  /* Typography — Scale */
  --text-micro: 11.24px;
  --text-caption: 13.12px;
  --text-body: 14.99px;
  --text-lead: 16.87px;
  --text-subheading: 22.49px;
  --text-heading: 29.98px;
  --text-heading-lg: 37.48px;
  --text-display: 44.97px;
  --text-display-xl: 56.22px;
  --text-hero: 65.59px;
  --leading-tight: 1.05;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 19px;
  --spacing-xl: 60px;
  --navbar-height: 6rem;

  /* Border Radius */
  --radius-none: 0px;
  --radius-xxs: 0.25rem;
  --radius-xs: 0.375rem;
  --radius-sml: 0.5rem;
  --radius-med: 0.625rem;
  --radius-card: 11.24px;
  --radius-lrg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: rgba(0, 0, 0, 0.02) 0px 1.39px 1.39px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 2px 2px 0px;
  --modal-dialog-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.12);
}
```
### Tailwind v4
```css
@theme {
  --color-white: #ffffff;
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-off-black: #111111;
  --color-ink-950: #141414;
  --color-black: #000000;

  --color-vermillion-50: #fff6ea;
  --color-vermillion-100: #ffedd5;
  --color-vermillion-300: #fed7aa;
  --color-vermillion-500: #fdba74;
  --color-vermillion-700: #f7861e;
  --color-vermillion-900: #fc5f2b;

  --color-green-50: #e9f9f3;
  --color-green-100: #a7f3d0;
  --color-green-300: #00fca1;
  --color-green-500: #11c182;
  --color-green-700: #26936b;
  --color-pink-50: #fbf2f9;
  --color-pink-100: #ffddf8;
  --color-pink-300: #ffbef1;
  --color-pink-500: #ff68de;
  --color-pink-700: #b90090;
  --color-pink-900: #84004b;
  --color-yellow-50: #fbfbe7;
  --color-yellow-100: #f7ff9d;
  --color-yellow-300: #e8fc00;
  --color-yellow-500: #d7db0e;
  --color-yellow-700: #938700;

  --font-primary: 'Nb International Pro Webfont', 'Neue Haas Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Nb International Mono Pro', ui-monospace, 'JetBrains Mono', monospace;

  --text-micro: 11.24px;
  --text-caption: 13.12px;
  --text-body: 14.99px;
  --text-lead: 16.87px;
  --text-subheading: 22.49px;
  --text-heading: 29.98px;
  --text-heading-lg: 37.48px;
  --text-display: 44.97px;
  --text-display-xl: 56.22px;
  --text-hero: 65.59px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 19px;
  --spacing-xl: 60px;

  --radius-none: 0px;
  --radius-xxs: 0.25rem;
  --radius-xs: 0.375rem;
  --radius-sml: 0.5rem;
  --radius-med: 0.625rem;
  --radius-card: 11.24px;
  --radius-lrg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2.5rem;
  --radius-full: 9999px;
}
```