Superhuman Design System

---

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

---

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:**

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

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.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xxl}` | 64px | 540 | 0.96 | 0 | Hero headline |

| `{typography.display-xl}` | 48px | 460 | 0.96 | -1.32px | Section opener on light surfaces |

| `{typography.display-lg}` | 28px | 540 | 1.14 | -0.63px | Sub-section / feature title |

| `{typography.display-md}` | 22px | 460 | 1.1 | -0.315px | Card title |

| `{typography.heading-lg}` | 20px | 460 | 1.2 | -0.4px | Compact card title |

| `{typography.body-lg}` | 18px | 540 | 1.5 | -0.135px | Marketing body lead |

| `{typography.body-md}` | 16px | 460 | 1.5 | 0 | Default UI body |

| `{typography.body-strong}` | 18.72px | 700 | 1.5 | 0 | Emphasized body |

| `{typography.button-md}` | 16px | 700 | 1.0 | 0 | Rounded-rectangle button label |

| `{typography.button-cap}` | 14px | 600 | 1.0 | 0 | Compact button label |

| `{typography.caption}` | 14px | 460 | 1.4 | 0 | Helper, footnote |

| `{typography.micro}` | 12px | 540 | 1.4 | 0 | Pill label, fine print |

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

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.

| Level | Treatment | Use |

|---|---|---|

| 0 | Flat | Default surface |

| 1 | `box-shadow: 0 1px 3px rgba(0,0,0,0.08)` | Subtle card lift |

| 2 | `box-shadow: 0 8px 24px rgba(0,0,0,0.12)` | Floating panels, modals |

| 3 | Atmospheric backdrop (violet-sky over indigo) | The hero's depth medium |

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.

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Hairline tags |

| `{rounded.sm}` | 6px | Form inputs |

| `{rounded.md}` | 8px | Buttons (the brand's signature button shape — rounded rectangle, never pill) |

| `{rounded.lg}` | 12px | Pricing cards, feature cards |

| `{rounded.xl}` | 16px | Modal dialogs, large feature cards |

| `{rounded.full}` | 9999px | Pill tabs in feature row, hero CTA |

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.

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

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

**`button-secondary-outline`** — outline alternative on white.

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

**`card-feature-light`** — feature card on white.

**`card-pricing`** — standard pricing tier card.

**`card-pricing-featured`** — inverted indigo featured tier.

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

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

**`text-input`** — standard form input.

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

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

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

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

**`footer-light`** — site-wide footer.

| Name | Width | Key Changes |

|---|---|---|

| Wide | ≥ 1440px | Half-bleed portrait at full scale; teal band 128px tall |

| Desktop | 1024–1440px | Default content max-width; pricing 3-up |

| Tablet | 768–1023px | Pricing 2-up; portrait crops tighter |

| Mobile | < 768px | Pricing 1-up; hamburger nav; display drops 64 → 36px |

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

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.