name: superhuman-design
version: alpha
description: >
  A light, airy white canvas carrying a single electric-purple voltage and a
  warm off-black ink (#292827, never pure black). The whole system rides on one
  proprietary variable grotesque — Super Sans VF — set at intermediate weights
  (460 body, 540 display) with slightly tightened tracking. Generous 16px
  rounded corners, soft lavender-to-blue-to-violet hero gradients, and the odd
  deep-teal interlude are the signature moves. Surfaces studied via Playwright:
  home (computed styles + representative elements).
colors:
  # Brand
  primary: '#6B4EFF'              # electric purple — links, CTA arrow, accents (approximate)
  on-primary: '#FFFFFF'
  primary-soft: '#E9DDFB'         # lavender — Sign up button fill (approximate)
  # Surface
  surface: '#FFFFFF'
  surface-secondary: '#F4F2EE'    # warm paper grey panel ("Your Superhuman suite")
  surface-inverse: '#0E3D3A'      # deep teal interlude ("Becoming Superhuman.")
  surface-cta: '#13182A'          # near-navy dark button ("Get Superhuman")
  # Text
  on-surface: '#292827'           # warm near-black ink
  on-surface-secondary: '#6B6A67' # muted grey body
  on-inverse: '#FFFFFF'
  # Hairlines
  hairline: '#E6E3DE'
typography:
  display:                        # hero h1
    fontFamily: '"Super Sans VF", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'
    fontSize: 64px
    fontWeight: 540
    lineHeight: 61px
    letterSpacing: -0.5px
  headline-md:                    # section h3
    fontFamily: '"Super Sans VF", system-ui, sans-serif'
    fontSize: 28px
    fontWeight: 540
    lineHeight: 32px
    letterSpacing: -0.63px
  body-lg:
    fontFamily: '"Super Sans VF", system-ui, sans-serif'
    fontSize: 16px
    fontWeight: 460
    lineHeight: 24px
    letterSpacing: 0
  body-md:
    fontFamily: '"Super Sans VF", system-ui, sans-serif'
    fontSize: 14px
    fontWeight: 460
    lineHeight: 21px
    letterSpacing: 0
rounded:
  md: 16px                        # cards, buttons, suite tabs
  full: 9999px
spacing:                          # 4px base scale
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:                 # "Get Superhuman"
    backgroundColor: '{colors.surface-cta}'
    textColor: '{colors.on-inverse}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.md}'
    padding: '14px 20px'
    note: 'trailing arrow chip carries a blue→purple gradient'
  button-soft:                    # "Sign up"
    backgroundColor: '{colors.primary-soft}'
    textColor: '{colors.primary}'
    rounded: '{rounded.md}'
    padding: '10px 16px'
  link-text:
    textColor: '{colors.primary}'
    decoration: underline
  suite-tab:
    backgroundColor: '{colors.surface-secondary}'
    rounded: '{rounded.md}'
motion:
  easing-standard: 'cubic-bezier(0.2, 0, 0, 1)'
  duration-standard: 250ms
icons:
  style: solid-and-line
  sizes: { sm: 16px, md: 24px }
  color-rule: 'monochrome ink (#292827) or purple accent for interactive'

Superhuman

v alpha · "Superpowers, everywhere you work"

Overview. Superhuman's marketing canvas is bright white with warm off-black ink (#292827, deliberately not pure black so the page reads soft and premium). The brand voltage is a single electric purple — it lights up text links, the CTA arrow chip, and the lavender Sign-up button — and it is rationed: body copy and headings stay ink, never purple. Everything is set in the proprietary Super Sans VF variable grotesque at intermediate weights (460 for text, 540 for display) with subtly negative tracking on headlines, giving a confident, engineered feel. The signature moves are the dreamy lavender→blue→violet hero gradient, soft 16px rounded corners on every interactive surface, and occasional full-bleed interludes in deep teal (#0E3D3A) or near-navy.

Colors

• Purple #6B4EFF {colors.primary} (approximate) — the only accent. Reserved for text links, the gradient arrow chip on the primary CTA, and the Sign-up button label. Use sparingly.
• Lavender #E9DDFB {colors.primary-soft} — fill of the secondary "Sign up" button, with purple text on top.
• Ink #292827 {colors.on-surface} — all headings and body. Warm near-black, never #000.
• White #FFFFFF {colors.surface} — default canvas. Warm paper grey #F4F2EE for grouped panels (the "Your Superhuman suite" board with its hatched borders).
• Deep teal #0E3D3A {colors.surface-inverse} and near-navy #13182A {colors.surface-cta} — full-width inverse moments; white text on top.

Typography

Family: Super Sans VF (proprietary variable grotesque); closest open-source substitute: Inter or Hanken Grotesk. Strategy: one family, weight does the work — 460 for running text, 540 for display/headings. Tracking is slightly negative on large headings (-0.5 to -0.63px), normal on body.

Token	Size	Weight	Line-height	Tracking	Usage
display	64px	540	61px	-0.5px	hero h1
headline-md	28px	540	32px	-0.63px	section titles
body-lg	16px	460	24px	0	nav, buttons, lead
body-md	14px	460	21px	0	descriptions, list items

Layout

Centered single-column hero with a max content width (~1200px), generous vertical rhythm built on a 4px base (8/12/16/24/48). The "suite" section uses a bordered card-board with hatched edges grouping product tabs (Mail / Grammarly / Coda / Go). Whitespace is abundant; sections breathe.

Elevation & Depth

Essentially flat. No drop shadows on buttons or cards — depth is implied by background tint changes (white → paper grey → teal) and hairline borders, not shadow ladders.

Shapes

Rounded-but-not-soft: a consistent 16px radius on cards, buttons and tabs; pills (9999px) only on small chips. No sharp corners anywhere in the chrome.

Components

• button-primary "Get Superhuman": dark navy fill, white label, 16px radius, with a distinctive blue→purple gradient arrow chip on the right.
• button-soft "Sign up": lavender fill, purple label.
• link-text: purple, underlined, often paired with a small arrow.
• suite-tab: paper-grey rounded tab inside the bordered suite board.

Motion

Smooth, confident, ~250ms standard transitions with a soft ease (cubic-bezier(0.2,0,0,1)). Gradients shift gently; nothing bounces or distracts. The personality is "fast but calm."

Iconography

Mixed solid/line monochrome icons, rendered in ink (#292827) or purple when interactive. Sizes 16/24px. Product marks (Grammarly green, Coda red) appear only as third-party brand chips, never as Superhuman's own palette.

Do's and Don'ts

• Do keep ink at #292827, never pure black — it's warmer and more premium.
• Do reserve purple for links, the CTA arrow, and the Sign-up button only.
• Do round every interactive surface to 16px.
• Don't add drop shadows — the system is flat and relies on tint + hairlines.
• Don't introduce a second accent hue; teal and navy are full-bleed surfaces, not accents.
• Don't set headings in a different family — Super Sans VF does both display and body.