Design System: Superhuman

1. Visual Theme & Atmosphere

Superhuman's website feels like opening a luxury envelope predominantly white, immaculately clean, with a single dramatic gesture of color that commands attention. The hero section is a cinematic purple gradient, a deep twilight wash of #1b1938 that evokes the moment just before dawn, overlaid with confident white typography. Below this dramatic entrance, the rest of the site is almost entirely white canvas with dark charcoal text, creating a stark but refined reading experience.

The typography is the true signature: Super Sans VF, a custom variable font with unconventional weight stops (460, 540, 600, 700) that sit between traditional font weight categories. Weight 460 slightly heavier than regular but lighter than medium is the workhorse, creating text that feels more confident than typical 400-weight but never aggressive. The tight line-heights (0.96 on display text) compress headlines into dense, powerful blocks, while generous 1.50 line-height on body text provides airy readability. This tension between compressed power and breathing room defines the Superhuman typographic voice.

The design philosophy is maximum confidence through minimum decoration. Warm cream buttons (#e9e5dd) instead of bright CTAs, a near-absence of borders and shadows, and lavender purple (#cbb7fb) as the sole accent color. It's a productivity tool that markets itself like a luxury brand every pixel earns its place, nothing is merely decorative. The brand naming convention extends to colors: the primary purple is called "Mysteria," straddling blue and purple with deliberate ambiguity.

Key Characteristics:

• Deep purple gradient hero (#1b1938) contrasting against a predominantly white content body
• Super Sans VF variable font with non-standard weight stops (460, 540, 600, 700) sits between conventional weight categories
• Ultra-tight display line-height (0.96) creating compressed, powerful headlines
• Warm Cream (#e9e5dd) buttons instead of bright/saturated CTAs understated luxury
• Lavender Purple (#cbb7fb) as the singular accent color a soft, approachable purple
• Minimal border-radius scale: only 8px and 16px no micro-rounding, no pill shapes
• Product screenshots dominate the content the UI sells itself with minimal surrounding decoration