Superhumon Inspired Design System

Overview

Superhuman's marketing pages open in an editorial dark register: a deep indigo navy {colors.primary} (#1b1938) canvas overlaid with a soft violet-and-sky atmospheric backdrop and a half-bleed portrait subject (often a person looking off-frame, photographed at twilight). Headlines render in {typography.display-xxl} (Super Sans VF at 64px / weight 540) with negative tracking, set in white over the indigo. A single rounded-rectangle CTA button anchors each band — never two, never three.

The body of every page flips to white. {colors.canvas} (#ffffff) takes over below the hero, with body type in {colors.ink} (#292827 — a slightly warm dark grey, never pure black) and feature rows alternating between white and {colors.canvas-soft} (#fafaf8, a barely-tinted off-white). Pricing tiers sit on this white surface; the featured tier inverts to the indigo navy #1b1938, completing the brand's binary polarity.

Every page closes with a deep-teal CTA band ({colors.surface-teal-deep} — #0e3030). The teal is a single chromatic interlude: rich, almost-black green-blue, that breaks up what would otherwise be an indigo/white-only page. The teal band always contains the closing CTA in {typography.display-lg} paired with a single white-pill button.

Typography runs Super Sans VF — a proprietary variable display sans — at unusual mid-weights (460, 540, 600). The variable axes let the brand pick precise sub-default weights that read as warmer and more human than typical 400/500/700 SaaS scales. Display sizes use negative letter-spacing of -1.32px to -0.315px depending on size; line-heights are unusually tight (0.96 on 48px display).

Key Characteristics:

• Three-canvas system: indigo navy #1b1938 for hero, white #ffffff for body, deep teal #0e3030 for closing CTA.
• Half-bleed portrait subject in the hero with violet-sky atmospheric backdrop — the brand uses a person looking off-frame as a recurring visual.
• Single CTA per band; the marketing pages never crowd actions.
• Super Sans VF at sub-default weights (460, 540, 600) — the brand's typographic warmth signature.
• Tight line-heights (0.96) on display sizes — vertical compression as editorial density.
• Off-warm-grey body ink #292827 — never pure black; the brand's quiet warmth.
• Pill-shaped on-hero CTA in pale violet #c9b4fa; rounded-rectangle CTAs everywhere else at 8px radius.

Known Gaps

• Motion vocabulary: the brand uses subtle scroll-triggered fades and a hero portrait parallax that aren't captured in static design tokens; the timing curves and durations would need separate documentation.
• Product-app UI: this spec covers the marketing site only — the in-app email client surfaces (inbox list, message thread, command palette, keyboard shortcut chips) live in a separate design language not captured here.
• Hover state colors: inline link hover treatment and rounded-rectangle button hover lift colors are not documented per the global no-hover policy.
• Iconography: the system uses a custom icon set across feature rows and pricing cards; only the icon container chrome is captured, not the full glyph library.
• Loading states: skeleton screens and progressive loading patterns aren't visible on the extracted marketing surfaces.
• Dark-mode body: the system inverts only via the hero and closing teal band — there is no separate dark-mode rendering of body content or pricing tiers documented here.