What is Superhuman's primary brand color?

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.

What typography does Superhuman use, and what should I use if Super Sans VF isn't available?

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.

Why does the system use a three-canvas rhythm of indigo, white, and teal?

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.

What is the button shape language?

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.

Can I use this DESIGN.md to build my own React productivity app?

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.

What's missing from this DESIGN.md spec?

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.

Superhumon Inspired Design System

Superhuman's design system as a DESIGN.md file.

About Superhumon Inspired DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source superhuman.com

Communication & Messaging
Productivity & SaaS

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.

What makes it distinct

Three-canvas rhythmindigo navy #1b1938 hero, pure white #ffffff body, deep teal #0e3030 closing CTA band on every page
Sub-default variable weightsSuper 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 sizeseditorial compression rather than airy SaaS leading
Single CTA per band rulepill-shaped violet #c9b4fa over the hero, 8px rounded rectangles everywhere else
Warm dark grey #292827 body ink, never pure blackthe quiet warmth that distinguishes the system from default SaaS

Live at superhuman.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

superhuman.com

Explore Superhumon Inspired

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Superhumon Inspired design system FAQ

Common questions about Superhumon Inspired's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Superhumon Inspired in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→