Premium productivity brand: a soft lavender-blue-mauve gradient hero over a photographic portrait, glassy blur(12px) cards floating AI chat and workspace UI, Super Sans VF at soft optical weights, a deep-indigo CTA with a purple arrow chip, and warm off-white content sections.
Browse Superhuman in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: superhuman.com (live DOM, computed styles), 2026-07-13 (desktop 1512px). Coverage: public homepage (dark gradient hero + glass AI/workspace cards + light sections). Dashboard: paid product, pending login (needs-dashboard). Responsive: breakpoints from stylesheets only; mobile rendering not verified.
Premium, cinematic productivity brand that opens on a soft lavender-to-blue-to-mauve gradient wash behind a photographic portrait, then resolves into calm warm-off-white content sections. Recognition comes from three signatures: the dreamy multi-stop purple gradient hero, glassy blur(12px) cards that float AI-chat and workspace UI over the imagery, and a deep-indigo "Get Superhuman" pill carrying a small purple-gradient arrow chip. It is set in a bespoke variable typeface (Super Sans VF) at soft optical weights (~460–540), giving a rounded, humane feel rather than a hard tech one. It deliberately avoids flat solid slabs and hard borders — depth is glass, blur and gentle shadow. Feels: premium, dreamy, calm, refined.
| Token | Hex | Role / usage |
|---|---|---|
| indigo-deep | #1b1938 | Primary "Get Superhuman" button fill |
| indigo-ring | #353088 | Inset ring / glow on primary button |
| plum-banner | #421d24 | Top promo banner tint |
| ink-900 | #141412 | Deepest warm near-black |
| ink-800 | #292827 | Primary text on light (dominant text color) |
| Hex | Role |
|---|---|
#a8a4d8 | Lavender (top) |
#6ba5e8 | Sky blue |
#b070c0 | Mauve / orchid |
#9088d0 | Periwinkle |
Recipe: linear-gradient(to left bottom, rgba(168,164,216,.5), rgba(107,165,232,.5), rgba(176,112,192,.6), rgba(144,136,208,.5)) over the portrait.
| Token | Hex | Role / usage |
|---|---|---|
| purple | #714cb6 | Brand purple — icons, arrow chip, highlights |
| lavender | #d4c7ff | "Sign up" button fill, soft accent |
| teal | #027e6f / #0c4243 | Secondary accent (feature/section) |
| Token | Hex | Role / usage |
|---|---|---|
| canvas-warm | #f7f5f2 / #f6f5f1 | Light section background |
| surface-2 | #f2f0eb / #ece9e2 | Inset panels, cards |
| white | #ffffff | Hero text, glass card content |
| muted | #73736e | Secondary text on light |
Rule: purple/lavender is the identity accent; teal is a rare secondary. Chrome alternates dark-gradient hero ↔ warm-off-white content.
"Super Sans VF", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif (bespoke variable font; single family).#292827 (light) or #ffffff (hero).| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 61.4 (0.96) | 540 | normal |
| Section (h2) | 36–44 | 540 | normal |
| Subhead | 20–24 | 460 | normal |
| Body | 16 / 24 | 460 | normal |
| Nav / UI | 16 | 460 | normal |
| Button (lavender) | 14 | 600 | normal |
Patterns: tight display line-height (0.96) on the 64px headline; soft fractional variable weights rather than 400/700 steps — the type reads rounded and warm.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.