# Superhuman

> `superhuman@1.0.0`

Superhuman is a premium email-and-productivity product positioned around speed, keyboard-first interaction, and AI-assisted triage. The visual identity is dark-first, dramatic, and unapologetically chromatic — a deep Mulberry-Black hero canvas (#241013) is the brand's signature marketing surface, paired with a warm off-white Neutral-0 (#FCFAF7) for light contexts. The primary accent is Purple-60 (#714CB6) on light surfaces and Purple-20 (#D4C7FF) on dark surfaces — a deliberate, theatrical purple that distinguishes Superhuman from the corporate-blue email field. Typography uses the proprietary "Super Sans VF" / "Super Serif VF" family, with Inter as the open-source rendering substitute.


**Tags:** `superhuman`, `email`, `productivity`, `brand`, `purple`, `dark-first`, `premium`

## Atoms

### Palette

**Superhuman** · `superhuman@1.0.0` · Proprietary — All Rights Reserved

> Superhuman's brand palette, captured directly from the live marketing site (superhuman.com) where the design system exposes named color tokens on the document root. The brand is built around a deliberate purple — Purple-60 (#714CB6) as the primary identity hue — paired with a Mulberry-Black hero canvas (#241013) for the dramatic dark-first marketing surface, a warm off-white Neutral-0 (#FCFAF7) for light contexts, and supporting natural-world chromatics (Gold-Pro, Orange, Mulberry, Sky, Green, Yellow, Red). 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `purple-60` | Purple 60 | `#714CB6` |
| `purple-80` | Purple 80 | `#533192` |
| `purple-90` | Purple 90 | `#3F256F` |
| `purple-40` | Purple 40 | `#9E7BE0` |
| `purple-30` | Purple 30 | `#BEA1F5` |
| `purple-20` | Purple 20 | `#D4C7FF` |
| `purple-10` | Purple 10 | `#E8E0FF` |
| `mulberry-black` | Mulberry Black | `#241013` |
| `mulberry-100` | Mulberry 100 | `#421D24` |
| `mulberry-80` | Mulberry 80 | `#792D4B` |
| `neutral-0` | Neutral 0 | `#FCFAF7` |
| `neutral-5` | Neutral 5 | `#F7F5F2` |
| `neutral-10` | Neutral 10 | `#F2F0EB` |
| `neutral-30` | Neutral 30 | `#BFBCB6` |
| `neutral-60` | Neutral 60 | `#73716D` |
| `neutral-80` | Neutral 80 | `#474543` |
| `neutral-90` | Neutral 90 | `#292827` |
| `neutral-100` | Neutral 100 | `#141413` |
| `gold-pro-60` | Gold Pro 60 | `#E57300` |
| `orange-40` | Orange 40 | `#F18333` |
| `red-40` | Red 40 | `#F72A42` |
| `red-60` | Red 60 | `#CD0037` |
| `green-60` | Green 60 | `#148072` |
| `green-40` | Green 40 | `#26A28B` |
| `sky-60` | Sky 60 | `#0163C6` |
| `yellow-30` | Yellow 30 | `#F9D255` |
| `white` | White | `#FFFFFF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `neutral-0` | `#FCFAF7` |
| `surface` | `neutral-5` | `#F7F5F2` |
| `surface-elevated` | `white` | `#FFFFFF` |
| `text-primary` | `neutral-90` | `#292827` |
| `text-secondary` | `neutral-60` | `#73716D` |
| `text-tertiary` | `neutral-30` | `#BFBCB6` |
| `primary` | `purple-60` | `#714CB6` |
| `primary-hover` | `purple-80` | `#533192` |
| `accent` | `purple-60` | `#714CB6` |
| `accent-hover` | `purple-80` | `#533192` |
| `warning` | `gold-pro-60` | `#E57300` |
| `warning-hover` | `orange-40` | `#F18333` |
| `error` | `red-60` | `#CD0037` |
| `success` | `green-60` | `#148072` |
| `border` | `neutral-30` | `#BFBCB6` |
| `focus-ring` | `sky-60` | `#0163C6` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `mulberry-black` | `#241013` |
| `surface` | `mulberry-100` | `#421D24` |
| `surface-elevated` | `neutral-80` | `#474543` |
| `text-primary` | `white` | `#FFFFFF` |
| `text-secondary` | `neutral-10` | `#F2F0EB` |
| `text-tertiary` | `neutral-30` | `#BFBCB6` |
| `primary` | `purple-20` | `#D4C7FF` |
| `primary-hover` | `purple-30` | `#BEA1F5` |
| `accent` | `purple-20` | `#D4C7FF` |
| `accent-hover` | `purple-30` | `#BEA1F5` |
| `warning` | `orange-40` | `#F18333` |
| `warning-hover` | `gold-pro-60` | `#E57300` |
| `error` | `red-40` | `#F72A42` |
| `success` | `green-40` | `#26A28B` |
| `border` | `neutral-80` | `#474543` |
| `focus-ring` | `sky-60` | `#0163C6` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `mulberry-black` | `#241013` |
| `on-identity` | `white` | `#FFFFFF` |
| `primary` | `purple-60` | `#714CB6` |
| `primary-hover` | `purple-80` | `#533192` |
| `accent` | `purple-60` | `#714CB6` |
| `accent-hover` | `purple-80` | `#533192` |
| `mark` | `purple-60` | `#714CB6` |
| `success` | `green-60` | `#148072` |
| `warning` | `gold-pro-60` | `#E57300` |
| `error` | `red-60` | `#CD0037` |
| `text-primary-light` | `neutral-90` | `#292827` |
| `text-primary-dark` | `white` | `#FFFFFF` |
| `background-light` | `neutral-0` | `#FCFAF7` |
| `background-dark` | `mulberry-black` | `#241013` |
| `surface-light` | `neutral-5` | `#F7F5F2` |
| `surface-dark` | `mulberry-100` | `#421D24` |
| `text-secondary-light` | `neutral-60` | `#73716D` |
| `text-tertiary-light` | `neutral-30` | `#BFBCB6` |
| `border-light` | `neutral-30` | `#BFBCB6` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (4)

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast requirement for body text. Neutral-90 (#292827) on Neutral-0 (#FCFAF7) clears AA at ~13:1 in light mode; White on Mulberry-Black clears AA at ~17:1 in dark mode. 

#### `colorChoice` → `roles.colors.primary`

- **allowed:** purple-60, purple-20
- **forbidden:** mulberry-80, red-60, gold-pro-60, sky-60

> Superhuman's primary action color is Purple-60 on light surfaces and Purple-20 on dark surfaces — this is the brand's single most distinguishing visual decision. Substituting any other chromatic erases the brand's intentional separation from the corporate-blue email field. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo

> Superhuman's mark is rendered as a single-color wordmark or monogram. Recolored, gradient-filled, or skewed treatments conflict with the brand's restrained, premium voice. 

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `3`
- **standard:** `WCAG-AA-large`

> Purple-60 on Neutral-0 must remain perceptible at link / large-text sizes. Below 3:1 the affordance for "clickable" collapses on the warm-off-white canvas. The brand's dark-mode pairing (Purple-20 on Mulberry-Black) clears 3:1 by a much larger margin. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.body.fontWeight`

- **allowed:** 200, 460, 540, 600, 700

> The live superhuman.com stylesheet declares Super Sans at five custom weights — book (200), regular (460), medium (540), semibold (600), bold (700). The non-standard intermediate values are deliberate brand choices; other weights are not in the licensed variable-font cut. 

### 💡 recommendation (3)

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** body-text-background
- **allowedContexts:** marketing-site, hero, dark-surface

> Mulberry-Black (#241013) is the marketing-hero canvas and dark-mode page background — it is NOT suitable as a surface-elevated card-fill or as the immediate background behind dense reading text (use Mulberry-100 #421D24 or Neutral-80 #474543 as the elevated dark surface instead). 

#### `fontPairing` → `typography.display`

- **requires:** `prose`
- **minSizeRatio:** `1.5`

> The Super Sans display face pairs with Super Serif for long-form prose on superhuman.com marketing surfaces. A 1.5× minimum display-to-prose size ratio preserves typographic hierarchy when the serif renders alongside the sans headlines. 

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** neutral-0, mulberry-black, white
- **doesNotPairWith:** gold-pro-60, red-60, sky-60

> Purple-60 reads cleanest against the warm-white canvas or the mulberry-black hero. Pairing it adjacent to Gold-Pro, Red, or Sky introduces a chromatic conflict that fights for attention without resolving into hierarchy — the supporting chromatics belong in illustration and data-viz contexts only. 

## Provenance

- **Source:** <https://superhuman.com/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Superhuman, the Superhuman wordmark, and the Super Sans / Super Serif / Super Sans Mono typefaces are property of Superhuman Labs, Inc. Brand colors and identity guidance documented here are derived from the deployed stylesheet on superhuman.com (--purple-*, --mulberry-*, --neutral-*, --color-* token families). 
- **Imported:** `2026-05-18`
- **Notes:** Derived from live site CSS at https://superhuman.com on 2026-05-18; no public brand guide located. The proprietary brand typefaces (Super Sans VF, Super Serif VF, Super Sans Mono VF) are declared on superhuman.com via @font-face but are not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles. The brand is intentionally dark-first on the marketing surface — the Mulberry-Black canvas (#241013) is the brand's hero state, not a "dark mode" of a lighter design. 

---

*Generated by the brand-atoms converter. Source: `superhuman@1.0.0` from the encyclopedia.*