Design System Inspired by Superhuman

A visual catalog of design tokens extracted from Superhuman's website, rendered as a living style guide.

Color Palette

Every color token from the Superhuman design system with semantic naming and roles.

Primary

Mysteria Purple
#1b1938
Hero gradient background
Lavender Glow
#cbb7fb
Primary accent and highlight
Charcoal Ink
#292827
Primary text on light surfaces

Secondary & Accent

Amethyst Link
#714cb6
Underlined link text
Translucent White 95%
rgba(255,255,255,0.95)
Hero text on dark surfaces
Misted White 80%
rgba(255,255,255,0.8)
Secondary text on dark surfaces

Surface & Background

Pure White
#ffffff
Primary page background
Warm Cream
#e9e5dd
Button background
Parchment Border
#dcd7d3
Card and divider borders

Typography Scale

Super Sans VF with non-standard weight stops (460, 540, 600, 700).

Display Hero
Display Hero — 64px / 540 / 0.96 / 0px
Section Display
Section Display — 48px / 460 / 0.96 / -1.32px
Section Heading
Section Heading — 48px / 460 / 0.96 / 0px
Feature Title
Feature Title — 28px / 540 / 1.14 / -0.63px
Sub-heading Large
Sub-heading Large — 26px / 460 / 1.30 / 0px
Card Heading
Card Heading — 22px / 460 / 0.76 / -0.315px
Body Heading
Body Heading — 20px / 460 / 1.20 / 0px
Body Heading Alt
Body Heading Alt — 20px / 460 / 1.10 / -0.55px
Emphasis Body — Medium weight for callouts and highlights
Emphasis Body — 18px / 540 / 1.50 / -0.135px
Body — Standard reading text with generous line-height for comfortable reading across long content blocks.
Body — 16px / 460 / 1.50 / 0px
Button / UI Bold
Button / UI Bold — 16px / 700 / 1.00 / 0px
Button / UI Semi
Button / UI Semi — 16px / 600 / 1.00 / 0px
Caption — Small labels and metadata
Caption — 14px / 500 / 1.20 / -0.315px
Caption Semi — Emphasized small text
Caption Semi — 14px / 600 / 1.29 / 0px
MICRO LABEL
Micro Label — 12px / 700 / 1.50 / 0px

Button Variants

Restrained CTAs using Warm Cream and Charcoal Ink.

#e9e5dd bg / #292827 text / 8px radius
#292827 bg / #fff text / 8px radius
transparent / #dcd7d3 border / 8px radius
#714cb6 / underline / no bg

On dark hero surface:

#e9e5dd bg on #1b1938
transparent / white border

Card Examples

Clean containment using borders and minimal shadows.

Content Card

White background with Parchment Border, 16px radius. Hover to see lift effect.

border: 1px solid #dcd7d3 / radius: 16px

Dark Surface Card

Charcoal Ink background with warm-neutral tone for dark sections of the page.

bg: #292827 / border: 1px solid #292827

Hero Surface Card

Deep purple background with semi-transparent white border for elements on the hero gradient.

bg: #1b1938 / border: rgba(255,255,255,0.2)

Form Elements

Minimal form presence with warm-toned borders and clean focus states.

border: 1px solid #dcd7d3 / radius: 8px
focus: border-color shifts to #292827
Please enter a valid email address
Same styling as inputs, resizable vertically

Spacing Scale

8px base unit system with 15 scale values.

2px
4px
6px
8px
12px
16px
18px
20px
24px
28px
32px
36px
40px
48px
56px

Border Radius Scale

Binary system: 8px for small elements, 16px for cards and containers.

0px Sharp edges (none used)
8px Buttons, spans, inline
16px Cards, links, containers

Elevation & Depth

Restrained elevation using borders and color contrast instead of heavy shadows.

Level 0 — Flat

No shadow, white background. The primary canvas for most content surfaces.

Level 1 — Border

1px solid Parchment Border (#dcd7d3). Gentle card containment and section dividers.

Level 2 — Dark Border

1px solid Charcoal Ink (#292827). Header elements and dark section separators.

Level 3 — Glow

Subtle box-shadow for product screenshot containers and elevated cards.

Level 4 — Hero Depth

Semi-transparent white border on deep purple. Elements floating on the hero gradient.