# 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.

Default Input border: 1px solid #dcd7d3 / radius: 8px
Focus State focus: border-color shifts to #292827
Error State Please enter a valid email address
Textarea 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.