# DESIGN.md: Superhuman-style design system

Measured from https://superhuman.com/ on 2026-10-14 by PikSpec (https://www.pikspec.com). An independent measurement of the rendered page, not Superhuman's official design system, and not affiliated with Superhuman.

Use it to build your own product in this design language: put this file in your project root and tell your AI tool (Claude Code, Cursor, Codex, Lovable, v0) to follow DESIGN.md. Never use the original's name, logo, copy or images; licensed fonts are replaced with the closest free Google Fonts.

To capture any other page, or get a ready project for your tool: https://www.pikspec.com/build-with-ai

HOW IT SHOULD LOOK
Build it in the design language of superhuman.com, measured from the live site: it should feel designed by the same team as superhuman.com — the same temperament, colour, type and density — for a different product. Never use superhuman.com's name, logo, words or images.

Stack: use the one your project already has. Starting fresh: React + Vite + TypeScript + Tailwind CSS v4, with no UI kit (no shadcn/ui, MUI or Chakra) — their defaults would override this system. In a chat that shows one file (an artifact or canvas), build one HTML file instead, with the tokens below in its <style> block.
Use every value exactly as written. Do not round, rename, approximate or substitute a colour, size, radius, shadow or easing (fonts: see section 1). Anything not listed here does not exist in this system.

THE WEBSITE THIS SYSTEM COMES FROM
- Reference page: https://superhuman.com/ — "superhuman.com" (home page).
- Page frame: a top navigation bar and a footer.
- It uses 73 images including 6 videos, 51 of them large. Large, real product imagery is part of the look — leave clearly labelled image slots at those sizes rather than stock photos or abstract 3D shapes.
- Interaction: 16 buttons on one page.
- The page runs about 7 screens long at 1440px wide.
- Density is moderate.

HOW IT LOOKS (WHAT MAKES IT LOOK LIKE ITSELF, BEYOND THE VALUES)
- Almost entirely neutral: 97% of the page is painted in #FFFFFF and #F2F0EB.
- #0C4243 is an accent: 3.1% of the page, as one of a few coloured bands or panels. Use it for a band or two, never as the page ground.
- #714CB6 is an accent: 0.1% of the page, used for text only. Don't fill large areas with it.
- The largest type (64px Super Sans VF) is medium weight, not bold (540).
- Open: text covers 10% of the page.
- Share of the painted page: #FFFFFF 37.7% (dominant, backgrounds); #F2F0EB 36.1% (dominant, backgrounds); #F7F5F2 13.8% (dominant, backgrounds); #421D24 5.2% (supporting, backgrounds); #0C4243 3.1% (accent, backgrounds); #F6F5F1 1.9% (detail, backgrounds); #292827 1.8% (supporting, text); #141413 0.2% (detail, text). Keep accents at these proportions; do not promote them to fills.
- Hairline dividers: 1px lines in #73716D separate sections and rows (29 of them).
- Illustrations: One large illustration in filled shapes.
- Large images: Photographs, video or raster artwork cover about 68% of the page.
- Type as set (size, weight and tracking measured together; use these pairs): 64px weight 540; 49px weight 460 tracking -0.027em; 48px weight 460; 28px weight 540 tracking -0.022em; 26px weight 460; 22px weight 460 tracking -0.014em.

1. DESIGN TOKENS — PASTE INTO YOUR GLOBAL CSS
Allowed colours, with how the original uses each. Use no other colour, including in hover states:
- #FFFFFF — 37.7% · backgrounds (var(--color-background))
- #F2F0EB — 36.1% · backgrounds (var(--color-f2f0eb))
- #F7F5F2 — 13.8% · backgrounds (var(--color-surface))
- #421D24 — 5.2% · backgrounds (var(--color-action))
- #0C4243 — 3.1% · backgrounds (var(--color-0c4243))
- #F6F5F1 — 1.9% · backgrounds (var(--color-f6f5f1))
- #292827 — 1.8% · text (var(--color-text))
- #141413 — 0.2% · text
- #73716D — 0.1% · lines
- #ECE9E2 — 0.1% · backgrounds
- #714CB6 — Link (var(--color-link))
- #027E6F — Positive (var(--color-positive))
Fonts — put these first in your global CSS (one import per font, so one that fails cannot stop the others):
```css
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700&display=swap");
```
Font: superhuman.com uses Super Sans VF (body) — its own licensed face, not available to download. This kit uses Figtree for body, the closest free match, already in the tokens. If you own the original, add it with @font-face and it is used first; to use another font, change the --font-* variables.
Keep every size, weight, line height and tracking exactly as listed whichever font renders.
```css
:root {
  --color-background: #FFFFFF; /* Background */
  --color-surface: #F7F5F2; /* Surface */
  --color-text: #292827; /* Text */
  --color-action: #421D24; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-link: #714CB6; /* Link */
  --color-positive: #027E6F; /* Positive */
  --color-f2f0eb: #F2F0EB; /* 36.1% of the page, as fills */
  --color-0c4243: #0C4243; /* 3.1% of the page, as fills */
  --color-f6f5f1: #F6F5F1; /* 1.9% of the page, as fills */
  --font-body: "Super Sans VF", "Figtree", sans-serif; /* Super Sans VF on the site; Figtree renders */
  --type-display-large: 64px; /* Display Large, weight 540 */
  --type-display-large-leading: 61.44px;
  --type-display-medium: 49px; /* Display Medium, weight 460 */
  --type-display-medium-leading: 58.8px;
  --type-display-medium-tracking: -0.027em;
  --type-display-small: 48px; /* Display Small, weight 460 */
  --type-display-small-leading: 46.08px;
  --type-headline-large: 28px; /* Headline Large, weight 540 */
  --type-headline-large-leading: 32px;
  --type-headline-large-tracking: -0.022em;
  --type-headline-small: 26px; /* Headline Small, weight 460 */
  --type-headline-small-leading: 33.8px;
  --type-title-1: 22px; /* Title 1, weight 460 */
  --type-title-1-leading: 16.8px;
  --type-title-1-tracking: -0.014em;
  --type-title-2: 20px; /* Title 2, weight 460 */
  --type-title-2-leading: 30px;
  --type-title-2-tracking: -0.007em;
  --type-title-3: 18.72px; /* Title 3, weight 700 */
  --type-title-3-leading: 28.08px;
  --type-title-4: 18px; /* Title 4, weight 540 */
  --type-title-4-leading: 27px;
  --type-title-4-tracking: -0.008em;
  --type-body-large: 16px; /* Body Large, weight 460 */
  --type-body-large-leading: 24px;
  --type-body-small: 14px; /* Body Small, weight 460 */
  --type-body-small-leading: 21px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
  --elevation-1: oklab(0.961183 0.000942708 0.00455891 / 0.2) 0px 0px 0px 1px inset;
  --elevation-2: color(srgb 0.45098 0.443137 0.427451 / 0.2) 0px 0px 0px 1px inset;
  --elevation-3: rgb(113, 76, 182) 0px 0px 0px 1px inset;
  --elevation-4: color(srgb 1 1 1 / 0.9) 0px 0px 0px 1px inset;
  --elevation-5: color(srgb 0.0784314 0.0784314 0.0745098 / 0.08) 0px 1px 2px 0px;
  --elevation-6: color(srgb 0.0784314 0.0784314 0.0745098 / 0.24) 0px 1px 2px 0px, rgb(53, 48, 136) 0px 0px 0px 1px;
  --elevation-7: rgb(255, 255, 255) 0px -5px 0px 0px, rgb(255, 255, 255) 0px 5px 0px 0px;
  --elevation-8: color(srgb 0.278431 0.270588 0.262745 / 0.16) 0px -4px 8px 0.5px;
  --duration-1: 0.2s;
  --duration-2: 0.3s;
  --duration-3: 1s;
  --ease-1: ease-in-out;
}
```
Tailwind CSS v4 (the default for new projects): put this after `@import "tailwindcss";`. It removes Tailwind's own palette, so only these colours exist as utilities:
```css
@theme {
  --color-*: initial;
  --color-background: #FFFFFF;
  --color-surface: #F7F5F2;
  --color-text: #292827;
  --color-action: #421D24;
  --color-on-action: #FFFFFF;
  --color-link: #714CB6;
  --color-positive: #027E6F;
  --color-f2f0eb: #F2F0EB;
  --color-0c4243: #0C4243;
  --color-f6f5f1: #F6F5F1;
  --font-body: "Super Sans VF", "Figtree", sans-serif;
  --text-display-large: 64px;
  --text-display-large--line-height: 61.44px;
  --text-display-medium: 49px;
  --text-display-medium--line-height: 58.8px;
  --text-display-medium--letter-spacing: -0.027em;
  --text-display-small: 48px;
  --text-display-small--line-height: 46.08px;
  --text-headline-large: 28px;
  --text-headline-large--line-height: 32px;
  --text-headline-large--letter-spacing: -0.022em;
  --text-headline-small: 26px;
  --text-headline-small--line-height: 33.8px;
  --text-title-1: 22px;
  --text-title-1--line-height: 16.8px;
  --text-title-1--letter-spacing: -0.014em;
  --text-title-2: 20px;
  --text-title-2--line-height: 30px;
  --text-title-2--letter-spacing: -0.007em;
  --text-title-3: 18.72px;
  --text-title-3--line-height: 28.08px;
  --text-title-4: 18px;
  --text-title-4--line-height: 27px;
  --text-title-4--letter-spacing: -0.008em;
  --text-body-large: 16px;
  --text-body-large--line-height: 24px;
  --text-body-small: 14px;
  --text-body-small--line-height: 21px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
  --shadow-e1: oklab(0.961183 0.000942708 0.00455891 / 0.2) 0px 0px 0px 1px inset;
  --shadow-e2: color(srgb 0.45098 0.443137 0.427451 / 0.2) 0px 0px 0px 1px inset;
  --shadow-e3: rgb(113, 76, 182) 0px 0px 0px 1px inset;
  --shadow-e4: color(srgb 1 1 1 / 0.9) 0px 0px 0px 1px inset;
  --shadow-e5: color(srgb 0.0784314 0.0784314 0.0745098 / 0.08) 0px 1px 2px 0px;
  --shadow-e6: color(srgb 0.0784314 0.0784314 0.0745098 / 0.24) 0px 1px 2px 0px, rgb(53, 48, 136) 0px 0px 0px 1px;
  --shadow-e7: rgb(255, 255, 255) 0px -5px 0px 0px, rgb(255, 255, 255) 0px 5px 0px 0px;
  --shadow-e8: color(srgb 0.278431 0.270588 0.262745 / 0.16) 0px -4px 8px 0.5px;
  --ease-1: ease-in-out;
}
```
Tailwind CSS v3 only: extend the theme with these instead, and use no other palette:
```js
// tailwind.config — theme.extend
{
  colors: { "background": "var(--color-background)", "surface": "var(--color-surface)", "text": "var(--color-text)", "action": "var(--color-action)", "on-action": "var(--color-on-action)", "link": "var(--color-link)", "positive": "var(--color-positive)" },
  fontFamily: { "body": ["var(--font-body)"] },
  borderRadius: { "md": "var(--radius-md)", "lg": "var(--radius-lg)", "xl": "var(--radius-xl)", "2xl": "var(--radius-2xl)", "3xl": "var(--radius-3xl)", "full": "var(--radius-full)" },
  boxShadow: { "e1": "var(--elevation-1)", "e2": "var(--elevation-2)", "e3": "var(--elevation-3)", "e4": "var(--elevation-4)", "e5": "var(--elevation-5)", "e6": "var(--elevation-6)", "e7": "var(--elevation-7)", "e8": "var(--elevation-8)" },
}
```

2. BASE STYLES
```css
html { background: var(--color-background); }
body { margin: 0; font-family: var(--font-body); font-size: var(--type-body-large); line-height: var(--type-body-large-leading); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { font-family: var(--font-body); margin: 0; }
a { color: var(--color-link); }
:focus-visible { outline: 2px solid var(--color-action); outline-offset: 2px; }
```

3. COMPONENTS — MATCH THESE EXACTLY
```css
.button { /* Primary */
  background: var(--color-action);
  border-radius: var(--radius-2xl);
  padding: 12px 12px 12px 12px;
  min-height: 64px;
  color: var(--color-on-action);
  font-family: var(--font-body);
  font-size: var(--type-body-small);
  font-weight: 460;
  line-height: 16.8px;
}
.button-2 { /* Tertiary */
  background: transparent;
  min-height: 68px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  font-weight: 460;
  line-height: 19.2px;
}
.button-3 { /* Tertiary 2 */
  background: transparent;
  padding: 0px 8px 0px 8px;
  min-height: 42px;
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  font-weight: 460;
  line-height: 24px;
  /* recorded states: collapsed */
}
.link { /* Inline */
  background: transparent;
  padding: 0px 8px 0px 8px;
  min-height: 42px;
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  font-weight: 460;
  line-height: 24px;
}
.link-2 { /* Inline 2 */
  background: transparent;
  min-height: 30px;
  color: var(--color-link);
  font-family: var(--font-body);
  font-size: var(--type-title-2);
  font-weight: 540;
  line-height: 30px;
}
.link-3 { /* Inline 3 */
  background: transparent;
  min-height: 24px;
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  font-weight: 460;
  line-height: 24px;
}
```
Where a component lists recorded states, write those states using only the colours above; the capture saw that the state exists, not its values. Never invent a state colour.

4. PAGE COMPOSITION
- Light interface on #FFFFFF. Keep that ground; do not add a dark mode.
- The opening screen carries a large image or video behind or across the heading. Leave a [content: hero image or video] slot there, at least half the screen wide; the opening is not text alone.
- Sections change ground between #F2F0EB, #0C4243 and Action (#421D24); use only those.
- #421D24 is the action colour. Fill the primary action with it and little else — at most one #421D24-filled element per screen; other accents keep to the uses listed above.
- Type: Figtree (standing in for Super Sans VF) for body. Hierarchy comes from size and weight, not colour or decoration.
- Everything sits on a 8px grid.
- Corner radii are 8px, 12px, 14px, 16px, 24px, fully round (pill) — nothing else.
- Body text uses Super Sans VF at around 16px, weights 460, 500, 540, 600, 700.
- Headings use the same family as body text; the largest heading is 64px.
- Primary buttons are #421D24, 16px radius, weight 460.
- Spacing follows a 4px rhythm (2, 4, 5, 6, 8, 12, 16).
- Corner radii in use: 8px, 12px, 16px, 999px, 14px.

HOW THE ORIGINAL PACES ITS PAGE (BORROW THE RHYTHM — THE OPENING, THE COLOURED BANDS, THE CARD GRIDS — NOT THE LIST; BUILD THE SECTIONS YOUR PRODUCT NEEDS)
1. Hero — 72px tall, centred 22px heading (weight 460), artwork behind the content.
2. Text — 67px tall, left-aligned 16px heading (weight 460), artwork on the left.
3. Statement — 931px tall, centred 64px heading (weight 540), artwork behind the content.
4. Cards — 298px tall, 6 equal columns, centred 20px heading (weight 460), artwork on the left, on #F6F5F1.
5. Cards — 194px tall, 4 equal columns, left-aligned 48px heading (weight 460), on #F2F0EB.
6. Split (×4) — 4 bands of 676px, 2 equal columns, 32px gap, left-aligned 49px heading (weight 460), artwork on the right, on #F7F5F2.
7. Split — 556px tall, 2 equal columns, 24px gap, left-aligned 48px heading (weight 460), artwork on the left, on #0C4243.
8. Full-bleed image — 480px tall, left-aligned 64px heading (weight 540), artwork behind the content.
9. Footer — 868px tall, split 4 / 8, 32px gap, left-aligned 28px heading (weight 540), full-width artwork, on #421D24.
- Content runs 1292px wide with 64px side margins at 1440px; there is no narrower centred container.
- The hero is 72px (0.1 screens): centred 22px heading (weight 460), artwork behind the content.
- Column splits on a 12-column grid: halves (2×), sixths, quarters, 4/8; gaps of 32px.
- Headings align left (6 of 9 sections); centre only the occasional statement.
- Sections change background 6 times, between #F6F5F1, #F2F0EB, #F7F5F2: colour comes in full-width bands, not in boxes.
- A typical section is about 480px tall.

COPY SHAPE (MATCH THE LENGTH AND CASE; WRITE YOUR OWN WORDS)
- The main heading is 4 words long.
- Section headings are short: typically 2 words.
- Headings are in sentence case (only the first word capitalised).
- The page describes itself in about 22 words; keep your intro paragraph to about that length.

5. MOTION
Interactive elements change colour, background, border and opacity with the measured timing. Animate nothing else.
```css
a, button, [role="button"], input { transition: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), border-color var(--duration-1) var(--ease-1), opacity var(--duration-1) var(--ease-1); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
```
No scroll-triggered fade-ins, parallax, typewriter text or bouncing elements.

6. RESPONSIVE
- The design was measured at 1440px wide. Lay it out for that width first, then let it reflow down to 360px.
- Content sits in a column at most 1312px wide, centred, with var(--space-4) (16px) side padding on small screens.
- The largest heading scales fluidly: font-size: clamp(28px, 4.4vw, 64px). Every other size stays fixed.
- Break on composition, not device names: a row of columns drops a column when any column would be narrower than 240px; side-by-side splits stack when either side would be narrower than 320px.
- Spacing steps never change between sizes; use smaller steps from the same list where space is tight.
- On touch screens, every link and button has a hit area of at least 44 × 44px without changing its drawn size.

7. ACCESSIBILITY
- Text pairs that pass for body copy: Text on Background (14.7:1), Action on Background (14.7:1), Link on Background (6.2:1), Positive on Background (5:1), Text on Surface (13.5:1), Action on Surface (13.5:1), Link on Surface (5.7:1), Positive on Surface (4.6:1) and On action on Action (14.7:1).
- Use no other text-on-background pairing.
- One h1 per page, headings in order, landmarks (header, nav, main, footer), real buttons and links, a label on every field, alt text on every image, an aria-label on icon-only buttons.
- Every interactive element shows the :focus-visible outline above.

8. DO NOT (THESE ARE WHAT MAKE AI-BUILT SITES LOOK GENERIC)
- No gradients: not in backgrounds, text, buttons or borders. (No gradient was measured.)
- Only these colours: #FFFFFF, #F2F0EB, #F7F5F2, #421D24, #0C4243, #F6F5F1, #292827, #141413, #73716D, #ECE9E2, #714CB6, #027E6F. No new tints, no Tailwind defaults (slate, indigo, violet). (They are every colour that covers a measurable part of the page, and the colours its lines and drawings use.)
- #0C4243 fills a few coloured bands or panels, as in the layout — a handful at most, never the page ground and never body text. (It covers 3.1% of the page, all of it in those panels.)
- #714CB6 only for text — never as a section background or a large panel. (It covers 0.1% of the page.)
- Only the fonts in the tokens: Figtree for body. No other typeface, and no Inter, Roboto or system UI font unless it is one of these. (The page is set in Super Sans VF; the tokens carry what stands in for them.)
- Headings and large text never heavier than weight 540. Do not make headlines bold to add emphasis. (Every size from 24px up is set at weight 540 or lighter.)
- No all-caps eyebrow labels above headings. (No uppercase text was measured.)
- No icon above every feature, no emoji, no decorative blobs, sparkles or glows. (None of these is part of the captured design; they are a coding model's defaults.)
- Build the sections your product needs, not the original's list. Give each one this system's look: its kinds of section (hero, text, statement, cards, split, image, footer), its colours, type, shapes and spacing. (The style carries to any kind of site; the original's page was for a different product.)
- No glassmorphism, backdrop blur, glowing orbs, noise blobs or neon outlines.
- No row of three identical feature cards as the default section. Vary the layout from section to section: a split, a list, a single large statement, a table.
- No centred-everything hero with a pill badge, a gradient headline and two buttons. Lead with the most specific thing about the product.
- No filler copy: no "Unlock your potential", "Revolutionize", "Seamless", "Elevate", "Supercharge", "Next-gen" or lorem ipsum. Write plain, specific sentences a real company would publish.
- No made-up statistics, testimonials or customer logos. Leave a clearly marked [content: …] slot instead.
- No radius larger than the largest one listed.
- No shadows other than the levels listed.
- Do not use superhuman.com's name, logo, copy or images. This is its design system, not its content.

BEFORE YOU FINISH
- Search your code for every colour, font size, spacing value, radius, shadow and easing, and replace anything that is not a variable above.
- Check that no [content: …] slot has been filled with invented facts.
- Search your CSS for gradient(. There should be none.
- Every colour value in your CSS is one of the allowed colours. Nothing else, including in hover states.
- #714CB6 covers about 0.1% of the page or less, as on the original.
- No text 24px or larger has a font-weight above 540.
- Every section, including ones the original does not have, uses only this system's colours, type, shapes and spacing.
- There is no placeholder copy (lorem ipsum, "Feature one", "Your headline here"). Every word is real.
- Take a screenshot at 1440px and put it beside the original. List every difference in colour, weight, spacing, alignment and imagery, and fix each before finishing. Then check 390px wide: nothing scrolls sideways and no heading runs off the screen.