---
title: "Superhuman design system"
variant: extended
source: https://superhuman.com/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/superhuman-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Superhuman · Design System

> Calm interfaces, cinematic imagery, capable AI

**Theme:** light · **Industry:** productivity · **Source:** https://superhuman.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Superhuman pairs a quiet, warm-neutral product page with cinematic, full-bleed imagery and a restrained violet-blue accent system. Its modular product sections lead into contrasting teal and burgundy brand moments, keeping the suite’s breadth legible without losing visual cohesion.

## North star

Let a warm, low-noise product interface frame cinematic imagery, and reserve vivid color for accents and purposeful brand interludes.

## Overview

The page balances a warm, paper-like interface with cinematic, blue-toned hero photography. The measured canvas is #f2f0eb, while white and #f7f5f2 panels distinguish content without harsh contrast; #d9d7d2 supplies fine dividers. A large centered hero headline overlays the immersive opening image, then the page settles into a compact suite selector and alternating two-column product features. Super Sans VF carries the system with restrained weights and close, readable line spacing; dark text and muted gray copy keep feature descriptions calm. Violet appears in product links, with brighter blue and lilac tones reserved for gradient artwork rather than general UI. Full-width brand interludes in teal and burgundy punctuate the neutral sequence. Rounded controls, thin outlines, layered UI mockups, and generous section breathing room make the interface feel polished without relying on heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Opening content panels, white section surfaces, and light text over dark navigation or imagery. |
| Soft Graphite | `#d9d7d2` | `--color-soft-graphite` | neutral | Fine navigation, section, and control borders; use as a quiet hairline rather than a strong divider. |
| Warm Canvas | `#f2f0eb` | `--color-warm-canvas` | surface | Main page canvas and the continuous background behind the suite selector and product feature sections. |
| Carbon Ink | `#292827` | `--color-carbon-ink` | neutral | Primary headings and body copy on the light canvas. |
| Linen Surface | `#f7f5f2` | `--color-linen-surface` | surface | Softly differentiated content surfaces within the warm neutral page. |
| Oxblood Footer | `#421d24` | `--color-oxblood-footer` | brand | Deep burgundy announcement link treatment and the large footer background. |
| Muted Slate | `#636360` | `--color-muted-slate` | neutral | Secondary explanatory copy and lower-emphasis text on light surfaces. |
| Deep Teal | `#0c4243` | `--color-deep-teal` | brand | Full-width Becoming Superhuman feature band, providing a strong contrast to the pale product sections. |
| Mist Type | `#ced9d9` | `--color-mist-type` | neutral | Measured subdued text tint; use sparingly for secondary copy where the background provides sufficient contrast. |
| Superhuman Violet | `#714cb6` | `--color-superhuman-violet` | accent | Product text links and small interface accents; avoid using it as a broad section fill. |
| Electric Indigo | `#554dcb` | `--color-electric-indigo` | accent | Gradient artwork accent, not a dominant page background or general-purpose text color. |
| Sky Blue | `#86cbf9` | `--color-sky-blue` | accent | Gradient and illustrative media accent; echoes the blue-toned hero imagery. |
| Lilac Glow | `#f7dbff` | `--color-lilac-glow` | accent | Pale gradient artwork color; retain it within decorative media treatments. |
| Lavender Haze | `#d3d1eb` | `--color-lavender-haze` | accent | Soft gradient color in decorative section imagery, not a core interface surface. |
| Powder Blue | `#b5d2f3` | `--color-powder-blue` | accent | Illustrative gradient tint used to soften blue-purple media treatments. |
| Orchid Mist | `#d0a9d9` | `--color-orchid-mist` | accent | Muted lilac-pink gradient tone for artwork only, not standard text or control styling. |

### Semantic aliases

`--color-canvas` → `#f2f0eb` (Warm Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#f7f5f2` (Linen Surface) · `--color-surface-3` → `#421d24` (Oxblood Footer) · `--color-surface-4` → `#0c4243` (Deep Teal) · `--color-text` → `#292827` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#636360` (Muted Slate) · `--color-border` → `#d9d7d2` (Soft Graphite) · `--color-accent` → `#714cb6` (Superhuman Violet) · `--color-accent-2` → `#554dcb` (Electric Indigo) · `--color-accent-3` → `#86cbf9` (Sky Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#292827` | `#f2f0eb` | 12.92:1 | AAA |
| `#292827` | `#ffffff` | 14.72:1 | AAA |
| `#292827` | `#f7f5f2` | 13.52:1 | AAA |
| `#292827` | `#421d24` | 1:1 | fail |
| `#ffffff` | `#f2f0eb` | 1.14:1 | fail |
| `#ffffff` | `#f7f5f2` | 1.09:1 | fail |
| `#ffffff` | `#421d24` | 14.66:1 | AAA |
| `#636360` | `#f2f0eb` | 5.29:1 | AA |
| `#636360` | `#ffffff` | 6.03:1 | AA |
| `#636360` | `#f7f5f2` | 5.54:1 | AA |

### Gradients

- `repeating-linear-gradient(45deg, color(srgb 0.45098 0.443137 0.427451 / 0.2), color(srgb 0.45098 0.443137 0.427451 / 0.2) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 5px)`
- `linear-gradient(to left bottom, rgba(168, 164, 216, 0.5), rgba(107, 165, 232, 0.5), rgba(176, 112, 192, 0.6), rgba(144, 136, 208, 0.5)), linear-gradient(rgb(124, 154, 211), rgb(49, 70, 130))`
- `none, linear-gradient(270deg, rgb(85, 77, 203) 9.04%, rgb(134, 203, 249) 84.36%, rgb(247, 219, 255) 100%)`
- `linear-gradient(210deg, color(srgb 1 1 1 / 0.15) 0px, rgba(0, 0, 0, 0) 30%), linear-gradient(color(srgb 0.156863 0.0862745 0.278431 / 0.3) 0px, color(srgb 0.156863 0.0862745 0.278431 / 0.2) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Super Sans VF | `--font-body` | webfont | 460, 540, 700, 600, 500 | Site-wide interface, navigation, headings, body copy, links, and captions. | Inter |

- **Super Sans VF:** Use a clean sans-serif with restrained case, light-to-medium display weights, compact headline tracking, and readable body leading.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 540 | 0.9 | 0 | — | Super Sans VF | Large hero headline over the cinematic opening image. |
| h1 | 49px | 460 | 1.2 | -0.027em | — | Super Sans VF | Primary page and section-level product headlines. |
| h2 | 48px | 460 | 0.96 | 0 | — | Super Sans VF | Major feature statements and prominent section headings. |
| h3 | 28px | 540 | 1.14 | -0.022em | — | Super Sans VF | Product names and secondary feature headings. |
| h4 | 26px | 460 | 1.3 | 0 | — | Super Sans VF | Supporting headings within product and content blocks. |
| body | 14px | 460 | 1.5 | 0 | — | Super Sans VF | Feature descriptions, explanatory copy, and footer content. |
| caption | 12px | 700 | 1.5 | 0 | — | Super Sans VF | Compact labels, badges, and small supporting interface text. |
| nav | 16px | 460 | 1.5 | 0 | — | Super Sans VF | Main navigation, suite tabs, and header links. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 20, 24, 26, 28, 32, 36, 40 px.
- Section rhythm 36px · element gap 4px · card padding — · max content width 1312px.

Use a centered, wide content frame with a measured maximum width of 1312px. The opening is full-bleed and vertically immersive, with its headline and CTA centered over photography. Follow with a logo strip, a suite selector, then repeated two-column product features that alternate copy and media emphasis. Keep alignment mostly left within feature blocks and center the hero. The measured spacing system is compact, with a 4px base unit and a 36px section gap; preserve generous visual breathing room inside the large media-led sections. Finish with full-width brand bands and a multi-column footer.

## Shape & elevation

- Radius: button `8px` · badge `8px` · nav `12px` · link `12px` · xs `8px` · sm `12px` · md `16px` · pill `9999px`
- Shadow `inset` (button): `color(srgb 0.988235 0.980392 0.968627 / 0.2) 0px 0px 0px 1px inset`
- Shadow `hairline` (button): `color(srgb 0.0784314 0.0784314 0.0745098 / 0.24) 0px 1px 2px 0px, rgb(53, 48, 136) 0px 0px 0px 1px`
- Shadow `hairline-2` (other): `color(srgb 0.0784314 0.0784314 0.0745098 / 0.08) 0px 1px 2px 0px`
- Shadow `hairline-3` (other): `rgb(255, 255, 255) 0px -5px 0px 0px, rgb(255, 255, 255) 0px 5px 0px 0px`
- Shadow `inset-2` (nav): `rgb(113, 76, 182) 0px 0px 0px 1px inset`
- Shadow `inset-3` (link): `color(srgb 1 1 1 / 0.9) 0px 0px 0px 1px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The design is mostly flat: section changes come from tonal surfaces, full-width color bands, and imagery rather than strong shadows. Use fine #d9d7d2 borders for controls and panel separation. Buttons and floating interface mockups may have subtle hairlines or restrained shadowing, with layered media providing the main depth.

## Imagery

The hero uses cinematic, blue-hour photography with a person in profile and floating translucent product-interface panels. Product feature sections pair concise copy with large media or interface mockups, including colorful gradients and natural imagery. A later brand interlude uses a silhouetted figure against layered digital artwork. Keep imagery edge-to-edge or generously framed, and let UI overlays remain translucent and secondary to the subject.

## Components

### Announcement banner

A compact burgundy, rounded announcement link sits above the navigation, with a white icon, short message, and outlined learn-more control.

### Primary CTA

A dark, pill-like visual treatment with white text and a violet-blue arrow tile; keep the action clear against photography or neutral surfaces.

### Suite selector

A horizontal row of four product tabs—Mail, Grammarly, Docs, and Go—on the warm canvas, using compact labels and subtle dividers.

### Feature split

Two-column product blocks pair a label, headline, short description, violet learn-more link, and concise benefit list with large media.

### Logo cloud

A low-contrast customer strip presents company marks in evenly divided cells against the warm neutral band.

### Brand interlude

A deep-teal split section combines layered artwork on one side with a white headline and supporting copy on the other.

### Footer

A burgundy footer groups product, company, legal, and social links in columns, with white headings and subdued supporting text.

### Measured component styles

- **Primary button** (“Mail”): background #ece9e2 · text #292827 · radius 0px · padding 0px · 460 16px Super Sans VF
- **Secondary button** (“Get Superhuman”): transparent background · text #ffffff · border 1px solid #ffffff · radius 12px · padding 6px 6px 6px 16px · 460 16px Super Sans VF · shadow color(srgb 0.0784314 0.0784314 0.0745098 / 0.24) 0px 1px 2px 0px, rgb(53, 48, 13
- **Link** (“Learn more about Mail”): transparent background · text #714cb6 · radius 0px · padding 0px · 540 20px Super Sans VF
- **Badge** (“#launch-project-chat”): transparent background · text #ffffff · border 1px solid #ffffff · radius 8px · padding 2px 4px · 460 14px Super Sans VF
- **Navigation item** (“Products Solutions AI Resources Pricing ”): transparent background · text #ffffff · radius 0px · padding 0px · 460 16px Super Sans VF

## Do

- Keep the primary interface grounded in Warm Canvas and soft white surfaces.
- Use Carbon Ink for headings and readable body text.
- Reserve violet links and blue-lilac gradients for accents or media.
- Make the hero photographic, full-bleed, and text-led.
- Use repeated two-column feature sections to explain each product.
- Separate major brand moments with Deep Teal or Oxblood Footer bands.

## Don't

- Do not let decorative gradient colors take over the core interface.
- Do not use heavy shadows as the primary source of depth.
- Do not pack feature blocks with long, unbroken copy.
- Do not replace the warm canvas with cold white throughout.
- Do not make every section a centered hero layout.
- Do not use the dark brand bands as generic card backgrounds.

## Agent prompt

Build a new Superhuman-style productivity landing page with a warm, restrained interface and cinematic product storytelling. Use Warm Canvas (#f2f0eb) as the main page ground, Gallery White (#ffffff) and Linen Surface (#f7f5f2) for content panels, Carbon Ink (#292827) for primary text, and Muted Slate (#636360) for supporting copy. Keep Superhuman Violet (#714cb6) to links and small accents; use Electric Indigo (#554dcb), Sky Blue (#86cbf9), and Lilac Glow (#f7dbff) mainly in artwork. Start with a full-bleed photographic hero, then a customer logo strip, suite navigation, and alternating two-column feature sections. Use thin borders, rounded controls, restrained shadows, spacious media, and consistent sans-serif typography. Punctuate the page with a Deep Teal (#0c4243) brand section and an Oxblood Footer (#421d24) link-rich footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed photographic hero with centered headline and CTA overlaid on the image. | Primary conversion CTA, Product UI storytelling | Cinematic background photography, Floating translucent interface panels, Centered white typography |
| 2 | logo-cloud | A compact full-width strip of company logos beneath the opening hero. | Social proof | Evenly divided logo cells, Warm neutral background, Subtle separators |
| 3 | category-nav | Left-aligned suite heading above a horizontal four-product selector. | Product category switching, Suite discovery | Compact horizontal tabs, Subtle borders, Warm canvas |
| 4 | feature-split | Two-column feature section with product copy and large media. | Learn-more link, Scannable benefits list | Product label, Headline and copy, Violet text link, Large media panel |
| 5 | feature-split | Two-column product feature block matching the preceding section’s rhythm. | Learn-more link, Scannable benefits list | Product label, Editorial headline, Short copy, Media area |
| 6 | feature-split | Two-column product feature block with copy aligned opposite its media. | Learn-more link, Scannable benefits list | Product label, Headline, Short copy, Subtle section separation |
| 7 | feature-split | Two-column product feature section pairing explanatory copy with a large visual. | Learn-more link, Scannable benefits list | Product label, Headline, Short copy, Interface and nature imagery |
| 8 | feature-split | Full-width deep-teal split band with artwork on one side and text on the other. | Read-announcement link, Brand narrative | Deep teal surface, Layered artwork, White heading and copy |
| 9 | cta | Full-bleed blue-lilac media band with a headline and CTA. | Final conversion CTA | Full-width gradient imagery, High-contrast headline, Light CTA |
| 10 | footer | Deep burgundy footer organized into multiple link columns. | Destination discovery, Social links, Legal navigation | Burgundy background, Grouped link lists, White and muted text |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/superhuman-com