Superhuman: Docs, Mail, and AI That Work Everywhere

Design Specification — Superhuman: Docs, Mail, and AI That Work Everywhere

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FCFAF7), ink text (#1B1938), a vivid accent (#027E6F). Display headings use a distinct face ("Super Serif VF") over the body stack (var(--font-family-sans)). Detected font weights: 100. Detected style signatures: technical / mono accents.

Logo asset(s): https://superhumanstatic.com/vwfkeyj6n9ac/799zeTC1GdyqsVV6KwWtyk/145b2a86547662c31577568d920e85ec/logo-alpha-figma__2__1__1_.svg · https://superhumanstatic.com/vwfkeyj6n9ac/6x1pzWgPoEKybdMtROyg0f/56980897f7c7b3c3eb6e5f4d58fb6d72/logo-alpha-zapier.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(135deg,#8861ca 0%,#bf6193 100%)
• linear-gradient(90deg,rgb(from r g b/0%) 0%,rgb(from r g b/6%) 10%,rgb(from r g b/6%) 100%)

> 3 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: var(--font-family-sans) — stack: var(--font-family-sans)

Display / heading typeface: "Super Serif VF" (used for large headings; body uses the primary stack)

Font stacks (most used first)

• var(--font-family-sans)
• "Super Sans VF"
• "Super Serif VF"
• "Super Sans Mono VF"
• var(--font-family-serif)
• var(--font-family-mono)
• var(--_button-font-family,var(--font-family-sans))

Font sizes (by frequency)

Weights in use: 100

Line heights (by frequency)

Spacing

Borders & Radius

Shadows

Derived elevation

All detected shadows

• inset 0 0 0 1px
• inset 0 0 0 2px
• 0 -4px 8px .5px rgb(from r g b/16%)

Layout

Container max-width: 1080px

Grid columns (largest detected grid): 4

Breakpoints

• 640px
• 640.02px
• 1080px
• 1080.02px
• 1280.02px
• 1440.02px

Animation & Motion

Transitions

• border-color .15s ease-in-out,background-color .15s ease-in-out
• color .2s ease
• rotate ease
• translate .3s ease-in-out
• opacity .3s ease
• none
• transform ease
• grid-template-rows .3s cubic-bezier(.215,.61,.355,1),visibility .3s

Easing curves

• cubic-bezier(0.16,1,0.3,1)
• ease-in-out
• cubic-bezier(.7,0,.84,0)
• cubic-bezier(.215,.61,.355,1)

Keyframes

@keyframes agents_fade__IWB2T { 0%{opacity:0;scale:.8}50%{opacity:.8;scale:1} }
@keyframes loader_rotate__0ZM8V { to{transform:rotate(1turn)} }
@keyframes loader_dash__uTjf9 { 0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124} }
@keyframes multi-product-signin_multi-product-menu-reveal__pnoP6 { 0%{opacity:0;transform:translateY(-6px) scale(.95)} }
@keyframes multi-product-signin_multi-product-row-in__BcjhY { 0%{opacity:0;transform:translateY(5px)} }
@keyframes header_slide-in__BMc_Z { 0%{transform:translateX(100%)} }
@keyframes header_slide-out__9yK7v { to{transform:translateX(100%)} }
@keyframes header_backdrop-fade-in__1kdX_ { 0%{opacity:0} }
@keyframes header_backdrop-fade-out__o6Inf { to{opacity:0} }
@keyframes asset-grid_asset-grid-fade-in__VxhEj { 0%{opacity:0} to{opacity:1} }
@keyframes page_header-fade-in__8qyII { to{--header-opacity:100%;color-scheme:light} }
@keyframes text-components_fade-up__DCQjC { 0%{opacity:0;transform:translateY(var(--space-4x))}to{opacity:1;transform:translateY(0)} }
@keyframes text-components_bounce__pwIU0 { 0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(calc(-10 / var(--rem) * 1rem))}60%{transform:translateY(calc(-5 / var(--rem) * 1rem))} }
@keyframes tooltip_fade-in__VPk01 { 0%{opacity:0}to{opacity:1} }
@keyframes media-block_play-button-spin__BSrk7 { to{transform:rotate(1turn)} @media (min-width:1080.02px){--_hanging-quote-offset:calc(var(--font-size-24) * 0.5)} @media (max-width:640px){flex-direction:column;align-items:flex-start;gap:var(--space-3x)} @media (max-width:640px){flex-direction:column;gap:var(--space-2_5x)} @media (prefers-reduced-motion:reduce){opacity:1} @media (prefers-reduced-motion:reduce){stroke-dashoffset:0} }
@keyframes handwritten-word_draw__F1_Uc { to{stroke-dashoffset:0} }
@keyframes tooltip_blink__U9rxA { 0%,to{opacity:1} 50%{opacity:0} @media (prefers-reduced-motion:no-preference){animation:section-hero_fade-in__WtcCX .8s ease-out forwards;animation-play-state:paused; } @media (prefers-reduced-motion:reduce){opacity:1} @media (prefers-reduced-motion:no-preference){animation:section-hero_fade-in-up__Ml6Af .8s ease-out forwards;animation-play-state:paused; } @media (prefers-reduced-motion:reduce){opacity:1;transform:none} }
@keyframes section-hero_fade-in-up__Ml6Af { to{opacity:1;transform:translateY(0)} @media (min-width:640.02px) and (max-width:1080px){width:calc(var(--_asset-width) * .67)} }

Animations

• multi-product-signin_multi-product-row-in__BcjhY var(--motion-duration-slow) var(--motion-ease-out-expo) both
• header_slide-in__BMc_Z .3s ease-out
• header_backdrop-fade-in__1kdX_ .3s ease-out
• header_slide-out__9yK7v .3s ease-out
• header_backdrop-fade-out__o6Inf .3s ease-out
• asset-grid_asset-grid-fade-in__VxhEj .5s ease-in-out
• page_header-fade-in__8qyII cubic-bezier(.7,0,.84,0) forwards,page_header-remove-blur__aUK5_ step-end forwards
• media-block_play-button-spin__BSrk7 7s linear infinite
• none
• tooltip_blink__U9rxA 1s step-end infinite

CTA labels found on page

• Products
• Solutions
• AI
• Resources
• Pricing
• Contact sales
• Sign in

Effects

• backdrop-filter: blur(12px)

Source Design Tokens (CSS custom properties)

:root {
  --rem: 16;
  --ON: initial;
  --theme-superhuman: var(--ON);
  --theme-grammarly: var(--OFF);
  --cutout-on: var(--OFF);
  --cutout-off: var(--ON);
  --cutout-horizontal-on: var(--OFF);
  --cutout-horizontal-off: var(--ON);
  --base-font-family-sans: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  --base-font-family-serif: Georgia,Times,serif;
  --base-font-family-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --font-family-sans: "Super Sans VF",var(--base-font-family-sans);
  --font-family-serif: "Super Serif VF",var(--base-font-family-serif);
  --font-family-mono: "Super Sans Mono VF",var(--base-font-family-mono);
  --neutral-0: #fcfaf7;
  --neutral-5: #f7f5f2;
  --neutral-10: #f2f0eb;
  --neutral-20: #dedbd5;
  --neutral-30: #bfbcb6;
  --neutral-40: #8d8a86;
  --neutral-60: #73716d;
  --neutral-80: #474543;
  --neutral-90: #292827;
  --neutral-95: #1f1e1d;
  --neutral-100: #141413;
  --mulberry-0: #fff2fa;
  --mulberry-10: #ffdcf3;
  --mulberry-20: #f6aadd;
  --mulberry-30: #da7cb4;
  --mulberry-40: #bf6193;
  --mulberry-60: #8d3d62;
  --mulberry-80: #792d4b;
  --mulberry-90: #602639;
  --mulberry-100: #421d24;
  --mulberry-black: #241013;
  --purple-0: #f7f5ff;
  --purple-10: #e8e0ff;
  --purple-20: #d4c7ff;
  --purple-30: #bea1f5;
  --purple-40: #9e7be0;
  --purple-50: #8861ca;
  --purple-60: #714cb6;
  --purple-80: #533192;
  --purple-90: #3f256f;
  --purple-100: #281647;
  --blue-0: #eff8fd;
  --blue-10: #daedfb;
  --blue-20: #bbdff7;
  --blue-30: #8dcaf2;
  --blue-40: #4198d2;
  --blue-60: #1173a8;
  --blue-80: #0c5683;
  --blue-90: #0a476d;
  --blue-100: #16293d;
  --green-0: #f4fdfa;
  --green-10: #d5f7eb;
  --green-20: #98ebcd;
  --green-30: #3ac7a1;
  --green-40: #26a28b;
  --green-60: #148072;
}

Do's and Don'ts

Do

• Do reserve the accent #027E6F for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FCFAF7; surfaces should stay within the detected neutral ramp.
• Do set large headings in "Super Serif VF", and body copy in the primary stack.
• Do stick to the detected font weight(s): 100.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add heavier font weights; the page uses only weight 100 for its entire hierarchy.

Design Tokens (copy-paste)

:root {
  --color-primary: #D4C7FF;
  --color-accent: #027E6F;
  --color-background: #FCFAF7;
  --color-surface: #F7F5F2;
  --color-text-primary: #1B1938;
  --color-secondary: #1B1938;
  --color-text-secondary: #DEDBD5;
  --color-border: #BFBCB6;
  --color-on-primary: #1B1938;
  --color-on-secondary: #FCFAF7;
  --color-on-accent: #FCFAF7;
  --color-surface-container-lowest: #F7F5F2;
  --color-surface-container-low: #F2F0EB;
  --color-surface-container: #DEDBD5;
  --font-sans: var(--font-family-sans);
  --shadow-md: 0 -4px 8px .5px rgb(from r g b/16%);
  --font-display: "Super Serif VF";
  --container-max: 1080px;
}