Studio
Studio
The Superhuman design system uses a light-themed visual language. The primary brand color is Iris (#714cb6); text is Ink (#292827) on a Parchment Canvas (#f2f0eb) background. Typography is set in Super Sans VF. This DESIGN.md contains 11 color tokens and a 8-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Superhuman.
Independent Style Review
Cinematic cockpit behind warm parchment — a productivity instrument panel where atmospheric photography meets structured cream-toned UI surfaces.
Superhuman feels like a cinematic productivity cockpit — moody atmospheric photography bleeds behind glassmorphic UI panels while the page itself stays anchored in warm parchment neutrals. The hero is a full-viewport dusk photograph with overlapping product panels floating at various depths, then the page snaps to a warm off-white (#f2f0eb) canvas for feature content. Custom variable font 'Super Sans VF' is the entire typographic system — tight negative tracking at display sizes (-0.028em at 64px) makes headlines feel compressed and urgent. Violet (#714cb6) is the sole chromatic system accent, appearing as outlined ghost buttons and focus rings against otherwise achromatic surfaces. The dark muted-red (#421d24) surfaces only in the announcement banner and footer, creating a bracketed frame around the entire page.
| Color | HEX | CSS token | Usage |
|---|---|---|---|
| Parchment Canvas | #f2f0eb | --color-parchment-canvas | Primary page background below the hero; the warm, slightly toasted off-white that distinguishes this from sterile white SaaS canvases |
| Ink | #292827 | --color-ink | Primary text, borders, nav labels — near-black with a warm brown undertone instead of pure black |
| Bone | #ffffff | --color-bone | Card surfaces, hero text, button text on dark backgrounds |
| Fog | #e3e3e2 | --color-fog | Subtle UI dividers, light button borders, tab backgrounds |
| Driftwood | #dcd7d3 | --color-driftwood | Secondary dividers and section rule lines |
| Graphite | #666666 | --color-graphite | Secondary body text — feature descriptions and supporting copy beneath headings |
| Aubergine | #421d24 | --color-aubergine | Announcement banner background, footer background — deep muted red that brackets the page top and bottom |
| Aubergine Deep | #4e242c | --color-aubergine-deep | SVG icon fills and border accents within dark brand surfaces |
| Iris | #714cb6 | --color-iris | Ghost/outlined action borders, link text, focus rings — the only chromatic accent across light UI surfaces; outlined ghost 'Get the suite' button uses this as its border and text |
| Indigo Glow | #353088 | --color-indigo-glow | Focus shadow on primary CTA links (inset ring depth cue) |
| Lavender Chip | #d4c7ff | --color-lavender-chip | Sign-up button fill on dark hero — soft violet chip against dark photography |
| Font | Weights | Fallback |
|---|---|---|
| Super Sans VF | 460, 500, 540, 600, 700 | Inter Variable or Neue Haas Grotesk |
| Role | Size | Line height | Token |
|---|---|---|---|
| caption | 12px | 1.5 | --text-caption |
| body-sm | 14px | 1.5 | --text-body-sm |
| body | 16px | 1.5 | --text-body |
| subheading | 18px | 1.3 | --text-subheading |
| heading-sm | 22px | 1.25 | --text-heading-sm |
| heading | 28px | 1.2 | --text-heading |
| heading-lg | 48px | 1 | --text-heading-lg |
| display | 64px | 0.96 | --text-display |
