---
version: alpha
name: Superpower
description: Clinical optimism — deep cobalt navy on warm white, a modern geometric sans at confident weights, soft 12px radii, and atmospheric blue-to-violet gradient washes that turn a medical product into something aspirational and human.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f5f6f8"
  surface-tint: "#eef2fb"
  ink: "#0a1230"
  ink-secondary: "#4a5168"
  ink-muted: "#727892"

  # Brand
  primary: "#063792"
  primary-hover: "#052d77"
  accent: "#ff6a3d"

  # Gradient wash
  gradient-blue: "#dbe5ff"
  gradient-violet: "#e7dcff"

  # Neutral scale
  gray-900: "#0a1230"
  gray-600: "#4a5168"
  gray-400: "#9aa0b4"
  gray-200: "#e2e5ee"
  gray-100: "#eef0f5"
  gray-50: "#f5f6f8"

  # On-color
  on-primary: "#ffffff"
  on-accent: "#ffffff"

  # Functional
  border: "#e2e5ee"
  focus-ring: "#063792"
  link: "#063792"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: -0.16px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0.2px
  eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0.8px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 28px
    borderColor: "{colors.primary}"

  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 28px

  badge:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  card-tint:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.surface-tint}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 18px 32px
    borderColor: "{colors.border}"
---

# Superpower Design System

## Overview

Superpower sells longevity as membership — 100+ biomarkers, a personal health dashboard, a doctor in your pocket — and its design system has to do something delicate: feel rigorously clinical without feeling cold, and feel aspirational without drifting into wellness fluff. It resolves this tension with a single confident gesture. A deep cobalt navy (`{colors.primary}`) anchors the entire experience against a warm, near-pure white canvas (`{colors.background}`), giving the brand the seriousness of a lab report and the calm of a premium consumer product at the same time.

Typography carries most of the brand's confidence. A modern geometric sans (Inter as the rendered stand-in) runs at heavy weights with tightened negative tracking at display sizes (`{typography.display-hero}` at -1.68px), producing headlines that feel declarative and self-assured rather than soft. The hierarchy is steep: enormous 56px hero statements drop quickly to readable 17px body, with a small uppercase-ish eyebrow (`{typography.eyebrow}`) doing the work of section labeling. There is no decorative type, no serif flourish — just a clean, trustworthy voice.

The brand's signature atmospheric move is the gradient wash. Soft blue-to-violet tints (`{colors.gradient-blue}` → `{colors.gradient-violet}`) bloom behind hero imagery and decorative sections, never as flat fills but as barely-there ambient color that adds dimension and optimism. Paired with generous whitespace and soft 12–16px radii, these washes keep an otherwise structured, almost medical layout feeling human and forward-looking. A warm coral accent (`{colors.accent}`) appears sparingly for energy — the spark of "superpower" against all that disciplined navy.

**Key Characteristics:**
- Deep cobalt navy (`{colors.primary}`) as the singular brand anchor on warm white
- Heavy geometric-sans headlines with tight negative tracking at display sizes
- Atmospheric blue-to-violet gradient washes (`{colors.gradient-blue}`/`{colors.gradient-violet}`) behind hero and feature sections
- Soft 12–16px radii throughout — approachable, never sharp
- Coral accent (`{colors.accent}`) used sparingly for energy and CTAs
- Tinted surface cards (`{colors.surface-tint}`) for soft sectioning without hard borders
- Steep type hierarchy: 56px hero to 17px body, with a small confident eyebrow label

## Colors

### Primary
- **Cobalt Navy** (`{colors.primary}`): The brand. Primary buttons, links, key headlines, logo. Carries clinical authority.
- **Navy Hover** (`{colors.primary-hover}`): Pressed/hover state of the primary action.
- **Warm White** (`{colors.background}`): Page background, card surfaces, text on navy.

### Ink
- **Deep Ink** (`{colors.ink}`): Primary text and headings — a navy-tinted near-black, not pure black.
- **Secondary Ink** (`{colors.ink-secondary}`): Body and description copy.
- **Muted Ink** (`{colors.ink-muted}`): Captions, metadata, placeholder text.

### Accent & Gradient
- **Coral Accent** (`{colors.accent}`): Sparingly for energy — highlight CTAs, illustration sparks.
- **Gradient Blue** (`{colors.gradient-blue}`): Start of the atmospheric hero wash.
- **Gradient Violet** (`{colors.gradient-violet}`): End of the atmospheric hero wash.
- **Surface Tint** (`{colors.surface-tint}`): Pale blue tinted card and section surface.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary text equivalent.
- **Gray 600** (`{colors.gray-600}`): Secondary text.
- **Gray 400** (`{colors.gray-400}`): Disabled, placeholder.
- **Gray 200** (`{colors.gray-200}`): Borders, dividers.
- **Gray 100** (`{colors.gray-100}`): Subtle dividers.
- **Gray 50** (`{colors.gray-50}`): Soft neutral surface tint.

### Functional
- **Border** (`{colors.border}`): Card outlines, input borders, nav divider.
- **Focus Ring** (`{colors.focus-ring}`): Keyboard focus — the brand navy.
- **Link** (`{colors.link}`): Inline links.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica Neue, Arial, sans-serif`
- A modern geometric/grotesque sans across the entire system — no serif, no mono in marketing chrome.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero — declarative billboard statements |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, large card headings |
| `card-title` | Feature and metric cards |
| `body-large` | Hero subtitles, introductions |
| `body` | Standard reading text |
| `body-medium` | Navigation, emphasized labels |
| `button-ui` | Buttons and CTAs |
| `caption` | Metadata, small print |
| `eyebrow` | Section labels above headings |

### Principles
- **Weight is confidence**: Headlines live at 700, sub-headings and cards at 600. The brand never whispers at the top of the hierarchy.
- **Tracking tightens with scale**: -1.68px at 56px down to neutral at body — display type feels engineered and compact.
- **One family, many jobs**: A single geometric sans covers eyebrow, headline, body, and button. Differentiation comes from weight and size, never family swaps.
- **Readable body**: 17px body at 1.55 line-height keeps dense health copy comfortable.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.3xl}` 64px, `{spacing.4xl}` 96px) for generous section rhythm.

### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single column with gradient wash behind
- Feature sections: 2–3 column card grids
- Generous vertical padding between sections (`{spacing.3xl}`–`{spacing.4xl}`)

### Whitespace Philosophy
- **Calm clinical space**: Abundant whitespace keeps a data-dense product feeling premium and unhurried.
- **Soft sectioning**: Tinted surfaces (`{colors.surface-tint}`) and gradient washes separate sections instead of hard rules.
- **Atmospheric depth**: Gradient washes add dimension without literal shadows or borders.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 4px | Small inline elements |
| `sm` | 8px | Inputs, small controls |
| `md` | 12px | Buttons, CTAs |
| `lg` | 16px | Cards, image containers |
| `xl` | 24px | Large feature panels |
| `pill` | 9999px | Badges, eyebrow pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Cobalt navy, white text, 12px radius. The default CTA.
- **`button-secondary`** — White surface, navy text and 1px navy border.
- **`button-accent`** — Coral fill for high-energy moments; used sparingly.

### Badges
- **`badge`** — Pale tinted pill with navy eyebrow text for section labels.

### Cards
- **`card`** — White surface, 16px radius, soft `{colors.border}` outline, generous 32px padding.
- **`card-tint`** — Pale blue tinted surface for soft, borderless sectioning.

### Inputs
- **`input`** — White surface, 8px radius, `{colors.border}` outline. Focus uses the brand navy `{colors.focus-ring}`.

### Navigation
- **`nav-bar`** — White header, navy ink, 16px medium links, soft bottom border.

## Do's and Don'ts

### Do
- Anchor the brand with cobalt navy (`{colors.primary}`) on warm white
- Use heavy weights (600–700) with tight negative tracking on headlines
- Deploy gradient washes (`{colors.gradient-blue}` → `{colors.gradient-violet}`) atmospherically behind hero/feature sections
- Keep radii soft (12–16px) for an approachable, premium feel
- Reserve the coral accent (`{colors.accent}`) for rare moments of energy
- Use tinted surfaces for soft sectioning instead of hard borders

### Don't
- Don't make the navy compete with multiple saturated brand colors — it stands alone
- Don't use flat slabs of gradient color — washes are barely-there and atmospheric
- Don't sharpen the corners; this brand is never hard-edged
- Don't overuse the coral accent — its power is its scarcity
- Don't introduce a serif or mono into marketing chrome
- Don't drop headline weight below 600 — confidence is the brand

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Superpower. Brand names and trademarks belong to their respective owners.