Dark Mode

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 light tones on dark surfaces.

#e9e5dd bg / #292827 text / 8px radius
white bg / dark text / 8px radius
transparent / dark border / 8px radius
#cbb7fb / underline / no bg

On hero gradient surface:

#e9e5dd bg on #1b1938
transparent / white border

Card Examples

Clean containment using borders on dark surfaces.

Surface Card

Dark surface with subtle border, 16px radius. Hover to see the lift effect.

bg: #1c1b1a / border: 1px solid #3a3938

Elevated Card

Slightly lighter dark surface for elevated containers and feature sections.

bg: #252423 / border: 1px solid #3a3938

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

Dark-surface inputs with warm-toned focus states.

border: 1px solid #3a3938 / radius: 8px
focus: border-color shifts to Lavender Glow
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, dark surface background. The primary canvas for most content.

Level 1 — Border

1px solid subtle border. Gentle card containment and section dividers.

Level 2 — Strong Border

1px solid lighter border. Header elements and prominent section separators.

Level 3 — Lavender Glow

Subtle lavender-tinted shadow for elevated cards and featured content.

Level 4 — Hero Depth

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