Superpower

A health membership with 100+ lab tests a year

The style

A premium, clinical-calm health language. Crisp white pages, near-black text in a neutral grotesk set light and tight, and black pills for every action. Photography brings warmth while the interface stays restrained: soft greys, 11px cards, gentle shadows and smooth, springy motion.

Colours

Brand#111111
Buttons#141414
Highlight#4c9e76
Background#fefdfb
Text#18181b

Click a colour to copy it.

Fonts

Inter

For headings

Inter

For everything else

Free fonts that look like Superpower’s own, so you can use them anywhere.

Buttons

Get startedContinueCancel

45–54px black pills with white labels; white pills over imagery.

Use this style in your project

Pick the way that suits you. The first one needs no design or coding knowledge.

With an AI tool

Your AI tool builds the page for you, in Superpower’s style.

1. What are you making? (optional)

2. Open it in

For developers

Ready-made CSS variables, a Tailwind theme and design tokens, with light and dark modes.

See the code

Make it your own

Change the colours, fonts and shapes, and see the result straight away before you use it.

Customise

Files

The code, ready to copy

Every file says where the style came from.

tokens.css — Colours, fonts and sizes as CSS variables, with light and dark modes.

/* Clear Vitals — design tokens generated by Markdown */
/* Derived from an analysis of superpower.com; how different from the source: a little different (30/100). */
/* Inspired by, not a copy of, the source. Adapt before commercial use; no logos, imagery, copy or proprietary fonts are included. */

:root {
  color-scheme: light;
  --color-background: #fefdfb;
  --color-surface: #fafafa;
  --color-surface-muted: #f3f2f0;
  --color-text: #18181b;
  --color-text-muted: #6f6f70;
  --color-border: #e2e2e2;
  --color-primary: #141414;
  --color-on-primary: #ffffff;
  --color-brand: #111111;
  --color-on-brand: #ffffff;
  --color-accent: #4c9e76;
  --color-success: #2f7e54;
  --color-warning: #9c691c;
  --color-danger: #a3443e;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-display: 3.75rem;
  --text-display-line-height: 1;
  --text-display-weight: 400;
  --text-display-tracking: -0.017em;
  --text-h1: 2.8125rem;
  --text-h1-line-height: 1.03;
  --text-h1-weight: 400;
  --text-h1-tracking: -0.014em;
  --text-h2: 2.125rem;
  --text-h2-line-height: 1.06;
  --text-h2-weight: 400;
  --text-h2-tracking: -0.01em;
  --text-h3: 1.625rem;
  --text-h3-line-height: 1.15;
  --text-h3-weight: 400;
  --text-h3-tracking: -0.007em;
  --text-lead: 1.25rem;
  --text-lead-line-height: 1.5;
  --text-lead-weight: 400;
  --text-lead-tracking: -0.005em;
  --text-body: 0.9375rem;
  --text-body-line-height: 1.6;
  --text-body-weight: 400;
  --text-body-tracking: 0em;
  --text-small: 0.6875rem;
  --text-small-line-height: 1.5;
  --text-small-weight: 400;
  --text-small-tracking: 0.005em;
  --text-caption: 0.6875rem;
  --text-caption-line-height: 1.4;
  --text-caption-weight: 400;
  --text-caption-tracking: 0.01em;
  --text-label: 0.75rem;
  --text-label-line-height: 1.3;
  --text-label-weight: 600;
  --text-label-tracking: 0.01em;
  --text-code: 0.8125rem;
  --text-code-line-height: 1.55;
  --text-code-weight: 400;
  --text-code-tracking: 0em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-none: 0px;
  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-xl: 23px;
  --radius-full: 9999px;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / 0.18);
  --duration-fast: 230ms;
  --duration-base: 380ms;
  --duration-slow: 640ms;
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --container: 1224px;
  --gutter: 24px;
  --button-radius: 9999px;
  --button-padding: 13px 20px;
  --input-radius: 9px;
  --input-height: 44px;
  --card-radius: 11px;
  --card-padding: 24px;
  --badge-radius: 9999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-background: #161410;
    --color-surface: #22201c;
    --color-surface-muted: #272521;
    --color-text: #f0eeea;
    --color-text-muted: #9d9b97;
    --color-border: #42403c;
    --color-primary: #9e9e9e;
    --color-on-primary: #141210;
    --color-brand: #111111;
    --color-on-brand: #ffffff;
    --color-accent: #6eb995;
    --color-success: #72ca9b;
    --color-warning: #e0a752;
    --color-danger: #cd7f7a;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #161410;
  --color-surface: #22201c;
  --color-surface-muted: #272521;
  --color-text: #f0eeea;
  --color-text-muted: #9d9b97;
  --color-border: #42403c;
  --color-primary: #9e9e9e;
  --color-on-primary: #141210;
  --color-brand: #111111;
  --color-on-brand: #ffffff;
  --color-accent: #6eb995;
  --color-success: #72ca9b;
  --color-warning: #e0a752;
  --color-danger: #cd7f7a;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}

See every detail

Buttons

Inputs

Email address

Badges

New ActivePendingOverdue

Project

Quarterly field notes

Draft

A card groups one idea: a title, one line of support and a clear next step.

Updated 2h agoOpen project

Weekly digest is ready

Three new comments and one approval.

npm i @brandless/ui

Colour

Semantic roles for light mode. Contrast is checked against WCAG AA as you edit.

Background
Surface
Surface muted
AA 17.4:1
Text
AA 4.9:1
Text muted
Border
AA 18.1:1
Primary
AA 18.4:1
On primary
Brand
AA 18.9:1
On brand
AA 3.2:1
Accent
AA 4.9:1
Success
AA 4.6:1
Warning
AA 6.0:1
Danger

Typography

Base 15px on a 1.318 modular scale. Only open-licence fonts are recommended.

display

Inter

Open alternative to NB International Pro

body

Inter

Open alternative to NB International Pro

mono

Ag
DM Mono

Suggested

display · 60px / 1 · 400 · -0.017em
The quiet grammar of form
h1 · 45px / 1.03 · 400 · -0.014em
The quiet grammar of form
h2 · 34px / 1.06 · 400 · -0.01em
The quiet grammar of form
h3 · 26px / 1.15 · 400 · -0.007em
The quiet grammar of form
lead · 20px / 1.5 · 400 · -0.005em
Readable text sets the pace of an interface.
body · 15px / 1.6 · 400 · 0em
Readable text sets the pace of an interface.
small · 11px / 1.5 · 400 · 0.005em
Readable text sets the pace of an interface.
caption · 11px / 1.4 · 400 · 0.01em
Readable text sets the pace of an interface.
label · 12px / 1.3 · 600 · 0.01em
Readable text sets the pace of an interface.
code · 13px / 1.55 · 400 · 0em
const tokens = await load();

Spacing

A 4px base unit. Use the scale for padding, gaps and section rhythm.

4px
8px
12px
16px
24px
32px
48px
64px
96px
128px

Shape & surface

Mostly flat surfaces with a light shadow reserved for raised, interactive elements.

Radii

none
0px
sm
5px
md
9px
lg
14px
xl
23px
full
pill

Shadows & borders

shadow-sm

0 1px 2px rgb(0 0 0 / 0.05)

shadow-md

0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04)

shadow-lg

0 18px 40px -12px rgb(0 0 0 / 0.18)

Borders: 1px hairline · Surfaces: flat

Layout

1224px container · 12 columns · 24px gutters

Patterns

Split hero: message left, supporting visual or product frame right.
Twelve-column grid; content blocks usually span 4, 6 or 8 columns.
Contained sections with consistent side gutters.
Reading text limited to roughly 65–72 characters per line.

Responsive principles

Below md, grids collapse to a single column and side gutters drop to 16px.
Type steps above h2 scale down one step on small screens.
Navigation collapses to a disclosure menu below lg.
Touch targets stay at least 44×44px on every breakpoint.

Motion

Durations and easing curves. Previews respect your reduced-motion setting.

fast
230ms
base
380ms
slow
640ms

ease-standard
ease-enter
ease-exit

Principles

Motion is measured and calm, easing into place rather than snapping.
Animate opacity and transform only; avoid animating layout.
Respect prefers-reduced-motion by replacing movement with instant state changes or fades.

Superpower, its logo and trademarks belong to their owner and are shown only to say where this style comes from. This is our own study of their public website — not made or endorsed by Superpower. Use your own words and images.

New
Collect Mercury
Keep the sites you like in one place and come back to them any time. Browsing stays free — no account needed.
Mercury
Business banking for startups and growing companies
New
Collect Vercel
Keep the sites you like in one place and come back to them any time. Browsing stays free — no account needed.
Vercel
A cloud platform for building and shipping websites
New
Collect Linear
Keep the sites you like in one place and come back to them any time. Browsing stays free — no account needed.
Linear
Plan and build products with your team and AI agents

The style

Colours

Fonts

Buttons

Use this style in your project

With an AI tool

For developers

Make it your own

Quarterly field notes

Radii

Shadows & borders

Patterns

Responsive principles

Principles

More like Superpower

Mercury

Vercel

Linear