W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Superhuman
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.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/superhuman/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/superhuman/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Superhuman
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Superhuman
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Superhuman
A clear hierarchy in Superhuman's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Superhuman
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ purple-60 #714CB6 accent-hover
→ purple-80 #533192 background-dark
→ mulberry-black #241013 background-light
→ neutral-0 #FCFAF7 border-light
→ neutral-30 #BFBCB6 error
→ red-60 #CD0037 identity
→ mulberry-black #241013 mark
→ purple-60 #714CB6 on-identity
→ white #FFFFFF primary
→ purple-60 #714CB6 primary-hover
→ purple-80 #533192 success
→ green-60 #148072 surface-dark
→ mulberry-100 #421D24 surface-light
→ neutral-5 #F7F5F2 text-primary-dark
→ white #FFFFFF text-primary-light
→ neutral-90 #292827 text-secondary-light
→ neutral-60 #73716D text-tertiary-light
→ neutral-30 #BFBCB6 warning
→ gold-pro-60 #E57300 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from superhuman)
Light mode (16 roles)
accent
→ purple-60 accent-hover
→ purple-80 background
→ neutral-0 border
→ neutral-30 error
→ red-60 focus-ring
→ sky-60 primary
→ purple-60 primary-hover
→ purple-80 success
→ green-60 surface
→ neutral-5 surface-elevated
→ white text-primary
→ neutral-90 text-secondary
→ neutral-60 text-tertiary
→ neutral-30 warning
→ gold-pro-60 warning-hover
→ orange-40 Dark mode (16 roles)
accent
→ purple-20 accent-hover
→ purple-30 background
→ mulberry-black border
→ neutral-80 error
→ red-40 focus-ring
→ sky-60 primary
→ purple-20 primary-hover
→ purple-30 success
→ green-40 surface
→ mulberry-100 surface-elevated
→ neutral-80 text-primary
→ white text-secondary
→ neutral-10 text-tertiary
→ neutral-30 warning
→ orange-40 warning-hover
→ gold-pro-60 Rules (8 typed constraints)
error · 4 rules
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 rule
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 rules
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.