--- version: alpha name: Superhumon Inspired website: "https://superhuman.com" 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. seo: title: "Superhuman Design System for React — Indigo #1b1938, Super Sans VF, 22 components" metaDescription: "Superhuman's design system as a DESIGN.md file. Indigo #1b1938, teal #0e3030, Super Sans VF, 22 components. For React, Next.js, and AI tools." highlights: - "Three-canvas rhythm — indigo navy #1b1938 hero, pure white #ffffff body, deep teal #0e3030 closing CTA band on every page" - "Sub-default variable weights — Super Sans VF at 460/540/600 instead of the usual 400/500/700, the typographic warmth signature" - "Tight 0.96 line-height on 48–64px display sizes — editorial compression rather than airy SaaS leading" - "Single CTA per band rule — pill-shaped violet #c9b4fa over the hero, 8px rounded rectangles everywhere else" - "Warm dark grey #292827 body ink, never pure black — the quiet warmth that distinguishes the system from default SaaS" tags: - "Communication & Messaging" - "Productivity & SaaS" lastUpdated: "2026-05-12" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Superhuman built its reputation on speed — the fastest email client in the world — and its marketing surfaces translate that ethos into a design language that reads more like an editorial broadsheet than a SaaS dashboard. Every page opens on a deep indigo navy hero at #1b1938, overlaid with a soft violet-sky atmospheric backdrop and a half-bleed portrait subject photographed at twilight. Headlines sit at 64px in a proprietary variable sans, tight-tracked into editorial density, paired with a single pale-violet pill CTA. The body of every page flips to pure white #ffffff with warm dark grey ink at #292827, and every page closes on a deep-teal #0e3030 CTA band — the brand's resolving chord. This DESIGN.md file packages all of that into a machine-readable spec built on the Google Labs DESIGN.md format. Inside: 17 color tokens spanning indigo, violet, teal, and warm off-greys; 12 typography styles using Super Sans VF at unusual sub-default weights of 460, 540, and 600; 6 corner-radius tokens from 4px hairline tags to 9999px hero pills; 8 spacing units on an 8px base with 2/4/12px sub-tokens; and 22 components covering rounded-rectangle buttons, pricing cards, the signature teal closing band, half-bleed portrait hero, and pill-tab feature selectors. Drop this file into Claude, Cursor, or GitHub Copilot and the agent will reproduce Superhuman's restraint — the three-canvas rhythm of indigo/white/teal, the single-CTA-per-band rule, the sub-default 460/540 weights, the 0.96 display leading. The tokens are also directly quotable: paste #1b1938 into your Tailwind config, pull `font-variation-settings: "wght" 540` from the typography section, or use the spec as a design audit when reviewing a peer's email-client marketing page. The system is worth studying for one reason — it proves you can build a fast-email brand that reads as warm and considered rather than another minimalist productivity clone. related: - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "/blocks" title: "React blocks for shadcn/ui" description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives." questions: - id: "primary-color" title: "What is Superhuman's primary brand color?" answer: "The primary surface and CTA color is a deep indigo navy at #1b1938, with a deeper #0e0c1f used for pressed states and hero gradient stops. Indigo carries the hero canvas, the dominant rounded-rectangle CTA on white surfaces, and the featured pricing tier. Two supporting brand colors round out the system: a pale violet #c9b4fa for the hero pill button and atmospheric backdrops, and a deep teal #0e3030 reserved entirely for the closing CTA band that resolves every marketing page." - id: "typography" title: "What typography does Superhuman use, and what should I use if Super Sans VF isn't available?" answer: "The display and UI tier runs Super Sans VF, a proprietary variable display sans, used at unusually warm sub-default weights of 460, 540, and 600 — not the typical 400/500/700 SaaS scale. Display sizes also use negative letter-spacing from -1.32px on 48px down to -0.315px on 22px, and tight line-heights of 0.96 on 48–64px display. Inter Variable is the closest open-source substitute: set font-variation-settings to wght 540 for display and 460 for body, and avoid the fixed-weight Inter cuts because the in-between weights are the brand's signature." - id: "three-canvas" title: "Why does the system use a three-canvas rhythm of indigo, white, and teal?" answer: "Every Superhuman marketing page follows the same three-act structure: an indigo navy #1b1938 hero with a violet-sky backdrop and portrait subject, a quiet pure-white #ffffff body for features and pricing, and a deep teal #0e3030 closing CTA band that breaks the indigo/white binary with a warm dark interlude. The teal is non-negotiable — adding a fourth canvas color breaks the system. The rhythm reads like an editorial broadsheet, with the teal acting as the resolving chord that anchors every page's final call to action." - id: "buttons" title: "What is the button shape language?" answer: "Two button shapes govern the entire system. The pill-shaped button (9999px radius) appears only on the indigo hero, filled with pale violet #c9b4fa over the dark canvas. Everywhere else — body, pricing, footer, and the teal closing band — uses a rounded rectangle at 8px radius with 12×20px padding. The pill is hero-only by rule; using it in the body breaks the brand. There is also an outline secondary variant on white with a 1px hairline-dark border for inverse CTAs and a white-fill button-on-teal for the closing band." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React productivity app?" answer: "Yes — feed the file to Claude, Cursor, or any AI tool that reads structured design tokens, and the agent will reproduce Superhuman's restraint rather than a generic shadcn theme. You can also reference the tokens directly: every color hex, typography size, weight, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or your own component library. The 22 components map cleanly onto common React patterns — nav bars, pricing cards, feature rows, text inputs, and the signature closing teal band." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "A handful of things, documented in the Known Gaps section of the file: the full motion vocabulary (the brand uses subtle scroll-triggered fades and a hero portrait parallax that aren't captured in static tokens), product-app UI styling beyond the marketing surfaces, hover state colors for inline links, in-app keyboard shortcut chip styling, and the complete iconography library. The spec captures the marketing site's three-canvas system and its 22-component foundation, which covers roughly 90% of the public web experience." 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 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.