← All design systems

Superhuman

Live HTML catalog and full markdown specification for superhuman

View on GitHub
Preview surface

DESIGN.md

Open raw

version: alpha name: Superhumon-Inspired-design-analysis description: An inspired interpretation of Superhumon's design language — a fast-email productivity brand split between an editorial dark hero (deep indigo navy with violet-sky atmospheric backdrop and a portrait subject) and a quiet white content body with off-warm-grey ink. The system uses a single proprietary variable display sans, heavy weight 460–540 with tight tracking, and a deep-teal closing CTA band that breaks the indigo/white rhythm with a warm dark interlude. Buttons are tight rounded rectangles, pricing is sober and dense, and the brand reads more like a high-end newsletter than a SaaS app.

colors: primary: "#1b1938" primary-deep: "#0e0c1f" on-primary: "#ffffff" ink: "#292827" ink-mute: "#73706d" ink-faint: "#9a9794" canvas: "#ffffff" canvas-soft: "#fafaf8" surface-violet-soft: "#c9b4fa" surface-teal-deep: "#0e3030" surface-teal-mid: "#155555" hairline: "#e8e4dd" hairline-dark: "#3f3a52" on-dark-mute: "#bcbac9" on-dark-faint: "#5a5772"

typography: display-xxl: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 64px fontWeight: 540 lineHeight: 0.96 letterSpacing: 0 display-xl: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 48px fontWeight: 460 lineHeight: 0.96 letterSpacing: -1.32px display-lg: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 28px fontWeight: 540 lineHeight: 1.14 letterSpacing: -0.63px display-md: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 22px fontWeight: 460 lineHeight: 1.1 letterSpacing: -0.315px heading-lg: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 20px fontWeight: 460 lineHeight: 1.2 letterSpacing: -0.4px body-lg: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 18px fontWeight: 540 lineHeight: 1.5 letterSpacing: -0.135px body-md: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 16px fontWeight: 460 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 18.72px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 button-md: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0 button-cap: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0 caption: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 14px fontWeight: 460 lineHeight: 1.4 letterSpacing: 0 micro: fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 12px fontWeight: 540 lineHeight: 1.4 letterSpacing: 0

rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 16px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px huge: 64px

components: button-primary-dark: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 12px 20px button-primary-dark-pressed: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 12px 20px button-on-dark-pill: backgroundColor: "{colors.surface-violet-soft}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 12px 20px button-secondary-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 12px 20px button-on-teal: backgroundColor: "{colors.canvas}" textColor: "{colors.surface-teal-deep}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 12px 20px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 10px 12px card-feature-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing-featured: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-teal-band: backgroundColor: "{colors.surface-teal-deep}" textColor: "{colors.on-primary}" typography: "{typography.body-lg}" rounded: "{rounded.lg}" padding: 64px card-feature-row: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 24px pill-tab-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-cap}" rounded: "{rounded.full}" padding: 8px 16px nav-bar-dark: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 16px 24px nav-bar-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 16px 24px link-on-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px footer-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-mute}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 24px

Overview

Superhumon'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} (a barely-tinted off-white). Pricing tiers sit on this white surface; the featured tier inverts to the indigo navy, 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 ({colors.primary}) for hero, white ({colors.canvas}) for body, deep teal ({colors.surface-teal-deep}) 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 ({colors.surface-violet-soft}); rounded-rectangle CTAs everywhere else.

Colors

Source pages: home (/), /products/go-ai-assistant, /contact-sales, /plans.

Brand & Accent

  • Primary Indigo Navy ({colors.primary} — #1b1938): The brand's primary surface and CTA color. Hero canvas, filled rounded-rectangle button, featured pricing tier.
  • Indigo Deep ({colors.primary-deep} — #0e0c1f): Pressed-state lift / deeper navy used in hero gradient stops.
  • Surface Violet Soft ({colors.surface-violet-soft} — #c9b4fa): The hero pill-button fill — pale violet over the indigo canvas. Also appears in atmospheric backdrops.
  • Surface Teal Deep ({colors.surface-teal-deep} — #0e3030): The signature closing-CTA band color. Rich green-blue, almost black.
  • Surface Teal Mid ({colors.surface-teal-mid} — #155555): Slightly lifted teal for nested chrome inside the band.

Surface

  • Canvas ({colors.canvas} — #ffffff): Default body background.
  • Canvas Soft ({colors.canvas-soft} — #fafaf8): Barely-warm off-white for alternating feature-row bands.
  • Hairline ({colors.hairline} — #e8e4dd): 1px borders, slightly warm grey.
  • Hairline Dark ({colors.hairline-dark} — #3f3a52): 1px borders on dark surfaces.

Text

  • Ink ({colors.ink} — #292827): Default body text. Warm dark grey, never pure black.
  • Ink Mute ({colors.ink-mute} — #73706d): Secondary text, captions.
  • Ink Faint ({colors.ink-faint} — #9a9794): Tertiary / disabled text.
  • On Primary ({colors.on-primary} — #ffffff): Text on dark navy / teal surfaces.
  • On Dark Mute ({colors.on-dark-mute} — translucent white): Secondary text on dark.
  • On Dark Faint ({colors.on-dark-faint} — translucent white): Tertiary text on dark.

Typography

Font Family

The display and UI tier is Super Sans VF — a proprietary variable sans (variable axes for weight, with the brand using sub-default 460 / 540 / 600 weights). Fallback chain is the system font stack.

For substitution use Inter Variable (open-source) at weight 460 / 540 / 600 — Inter's variable axes match Super Sans VF's behavior closely. Avoid fixed-weight Inter at 400 / 500 / 600 — the brand specifically picks the in-between weights.

Hierarchy

TokenSizeWeightLine HeightLetter SpacingUse
{typography.display-xxl}64px5400.960Hero headline
{typography.display-xl}48px4600.96-1.32pxSection opener on light surfaces
{typography.display-lg}28px5401.14-0.63pxSub-section / feature title
{typography.display-md}22px4601.1-0.315pxCard title
{typography.heading-lg}20px4601.2-0.4pxCompact card title
{typography.body-lg}18px5401.5-0.135pxMarketing body lead
{typography.body-md}16px4601.50Default UI body
{typography.body-strong}18.72px7001.50Emphasized body
{typography.button-md}16px7001.00Rounded-rectangle button label
{typography.button-cap}14px6001.00Compact button label
{typography.caption}14px4601.40Helper, footnote
{typography.micro}12px5401.40Pill label, fine print

Principles

  • Sub-default weights. The brand picks 460 / 540 / 600 instead of 400 / 500 / 700 — a quiet warmth in the typography that distinguishes it from default SaaS systems.
  • Tight display leading. 0.96 on 48–64px display — the type stacks unusually compact.
  • Negative tracking on display sizes. -1.32px at 48px scaling proportionally — tightens the variable letterforms into editorial density.

Note on Font Substitutes

Inter Variable (open-source via Google Fonts) is the recommended substitute. Set font-variation-settings: "wght" 540 for display, 460 for body — Inter's variable axes match. Avoid fixed-weight Inter; the in-between weights are the brand's signature.

Layout

Spacing System

  • Base unit: 8px (with 2 / 4 / 12 sub-tokens for fine work).
  • Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.huge} 64px.
  • Section padding: 64–96px on most sections; closing teal band uses 96–128px for editorial weight.
  • Card internal padding: 32px on pricing cards; 24px on alternating feature rows.

Grid & Container

  • Hero spans full viewport width with the violet-sky backdrop edge-to-edge; content centers in a ~960px column.
  • Body content centers in ~960–1100px.
  • Pricing collapses 3-up → 2-up → 1-up at 1024 / 768 breakpoints.

Whitespace Philosophy

The brand uses generous editorial whitespace on both polarities — dark hero and white body. Section gaps tend toward 96px; the teal closing band gets up to 128px of vertical air. The whitespace itself is part of the brand's "considered, slow-tempo" feel.

Elevation & Depth

LevelTreatmentUse
0FlatDefault surface
1box-shadow: 0 1px 3px rgba(0,0,0,0.08)Subtle card lift
2box-shadow: 0 8px 24px rgba(0,0,0,0.12)Floating panels, modals
3Atmospheric backdrop (violet-sky over indigo)The hero's depth medium

Decorative Depth

The hero's depth is the violet-sky atmospheric backdrop — a soft indigo-to-violet-to-sky-blue radial wash that sits behind the portrait subject. Implemented as a CSS radial gradient or large background image. Below the hero, depth is minimal — the white canvas is flat.

Shapes

Border Radius Scale

TokenValueUse
{rounded.xs}4pxHairline tags
{rounded.sm}6pxForm inputs
{rounded.md}8pxButtons (the brand's signature button shape — rounded rectangle, never pill)
{rounded.lg}12pxPricing cards, feature cards
{rounded.xl}16pxModal dialogs, large feature cards
{rounded.full}9999pxPill tabs in feature row, hero CTA

Photography Geometry

The hero uses half-bleed portrait subjects — a person photographed at twilight, looking off-frame, occupying the right half of the hero. The portrait extends edge-to-edge vertically and stops mid-canvas horizontally; type sits on the left side. Other photography is rare; product UI mockups handle most other illustrative needs.

Components

Buttons

button-primary-dark — the dominant rounded-rectangle CTA on white surfaces.

  • Background {colors.primary}, text {colors.on-primary}, type {typography.button-md}, padding {spacing.md} {spacing.xl} (12px 20px), rounded {rounded.md} 8px.
  • Pressed state button-primary-dark-pressed shifts to {colors.primary-deep}.

button-on-dark-pill — the hero CTA in pale violet pill shape.

  • Background {colors.surface-violet-soft}, text {colors.primary}, same typography, padding 12px 20px, rounded {rounded.full}. The pill shape only appears on the hero — body CTAs use the rounded rectangle.

button-secondary-outline — outline alternative on white.

  • Background {colors.canvas}, text {colors.ink}, 1px solid {colors.hairline-dark} border, same shape as button-primary-dark.

button-on-teal — CTA inside the closing teal band.

  • Background {colors.canvas}, text {colors.surface-teal-deep}, rounded-rectangle, same typography.

Cards & Containers

card-feature-light — feature card on white.

  • Background {colors.canvas}, padding {spacing.xxl}, rounded {rounded.lg}, 1px {colors.hairline} border.

card-pricing — standard pricing tier card.

  • Background {colors.canvas}, padding {spacing.xxl}, rounded {rounded.lg}, 1px {colors.hairline} border.

card-pricing-featured — inverted indigo featured tier.

  • Background {colors.primary}, text {colors.on-primary}, otherwise identical to card-pricing.

card-teal-band — the closing CTA band on every page.

  • Background {colors.surface-teal-deep}, text {colors.on-primary}, padding {spacing.huge} 64px, rounded {rounded.lg} 12px (often radius-less in practice when full-bleed). Holds a single closing headline in {typography.display-lg} and a button-on-teal.

card-feature-row — alternating feature-row card on the body.

  • Background {colors.canvas-soft}, text {colors.ink}, padding {spacing.xl} 24px, rounded {rounded.md} 8px. Used in pairs/triplets to explain features below the hero.

Inputs & Forms

text-input — standard form input.

  • Background {colors.canvas}, text {colors.ink}, type {typography.body-md}, padding {spacing.sm}+ {spacing.md} (10px 12px), rounded {rounded.sm} 6px, 1px {colors.hairline} border.

Navigation

nav-bar-dark — top nav over the indigo hero.

  • Background {colors.primary}, text {colors.on-primary}, padding {spacing.lg} {spacing.xl}. Logo on the left, nav center, "Get Started" button-on-dark-pill on the right.

nav-bar-light — top nav on body / pricing pages.

  • Background {colors.canvas}, text {colors.ink}, otherwise same structure with button-primary-dark on the right.

Pills, Tags, and Chips

pill-tab-light — feature-row tab selector.

  • Background {colors.canvas}, text {colors.ink}, type {typography.button-cap}, padding {spacing.sm} {spacing.lg}, rounded {rounded.full}. Used in the feature category picker (Mail / Channels / Code / AI / Calendar etc.) below the hero.

Signature Components

Half-Bleed Portrait Hero — a person photographed at twilight, occupying the right half of the indigo hero with violet-sky atmospheric backdrop behind. Type and CTA sit on the left side. The portrait is the brand's recurring visual signature.

Closing Teal Band — every page closes with a card-teal-band containing a {typography.display-lg} closing headline and a single button-on-teal. The teal is the page's resolving chord.

link-on-light — inline links on body.

  • Text {colors.ink} rendered in {typography.body-md} with persistent underline.

footer-light — site-wide footer.

  • Background {colors.canvas}, text {colors.ink-mute}, type {typography.caption}, padding {spacing.huge} {spacing.xl} (64px 24px). Holds 4 columns of link groups, social icons, and a small legal/copyright row.

Do's and Don'ts

Do

  • Pair every hero with the violet-sky atmospheric backdrop and a half-bleed portrait subject when possible.
  • Render display tiers at sub-default weights (460 / 540) — the warmth is the typographic signature.
  • Use rounded-rectangle CTAs at 8px radius everywhere except the hero (where pill-shaped is the rule).
  • Close every marketing page with a deep-teal CTA band.
  • Use warm dark grey {colors.ink} for body text — never pure black.
  • Apply tight 0.96 line-height on display sizes; the editorial compression is the brand.

Don't

  • Don't use pill-shaped buttons in the body of the page; the pill is hero-only.
  • Don't bump display weight above 540 unless using body-strong (700) for emphasized inline body.
  • Don't render body text in pure black — the warm grey #292827 is part of the brand.
  • Don't omit the closing teal band — every marketing page closes with it.
  • Don't introduce additional accent colors beyond indigo, violet-soft, teal, and the off-warm-greys.

Responsive Behavior

Breakpoints

NameWidthKey Changes
Wide≥ 1440pxHalf-bleed portrait at full scale; teal band 128px tall
Desktop1024–1440pxDefault content max-width; pricing 3-up
Tablet768–1023pxPricing 2-up; portrait crops tighter
Mobile< 768pxPricing 1-up; hamburger nav; display drops 64 → 36px

Touch Targets

  • Buttons hit ≥ 44×44px on mobile via 12px vertical padding × 16px line-height. WCAG AAA.
  • Form fields stay at the 44px minimum height.

Collapsing Strategy

  • Display tiers stair-step 64 → 48 → 36 → 28 → 22px.
  • Half-bleed portrait crops to head-and-shoulders on mobile; atmospheric backdrop simplifies.
  • Pricing tiers stair-step 3-up → 2-up → 1-up.
  • Top nav collapses to hamburger below 768px.
  • Closing teal band reduces vertical padding from 128 → 64px on mobile.

Image Behavior

Hero portrait uses srcset with desktop / mobile crops — desktop favors the full half-bleed composition; mobile crops to head-and-shoulders.

Iteration Guide

  1. Focus on ONE component at a time.
  2. Reference component names and tokens directly.
  3. Run npx @google/design.md lint DESIGN.md after edits.
  4. Default body to {typography.body-md}; reserve {typography.body-lg} for marketing leads.
  5. Keep the three-canvas rhythm (indigo / white / teal) — adding a fourth canvas color breaks the system.
  6. The closing teal band is non-negotiable — every marketing page resolves there.