# Superhuman — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Dark / hero
| 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) |

### Hero gradient stops (lavender wash)
| 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.

### Accent
| 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) |

### Light surfaces
| 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.

## 3. Typography Rules

- Font stack: `"Super Sans VF", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif` (bespoke variable font; single family).
- Optical weights: ~460 (UI/body), ~540 (display), 600 (small accents like the lavender button label).
- Body: ~16px / 1.5 / `#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.

## 4. Component Stylings

### Buttons
- **Primary ("Get Superhuman")**: bg deep-indigo `#1b1938`, text `#ffffff`, radius 12px, height 50px, padding `6px 6px 6px 16px` (leaves room for a trailing chip), weight 460. Shadow: `0 1px 2px rgba(20,20,19,.24)` + an inset indigo `#353088` ring glow. A small rounded arrow chip with a purple gradient sits at the right.
- **Lavender ("Sign up")**: bg `#d4c7ff`, text `#292827`, radius 8px, height 36px, padding `6px 16px`, weight 600, no shadow.
- **Ghost ("Log in" / "Contact sales")**: transparent, text `#ffffff` on hero / `#292827` on light, no radius fill.
- **Learn-more (banner)**: pill on the plum banner with a leading logo and trailing arrow.

### Cards / panels
- **Glass card (hero)**: transparent bg, `backdrop-filter: blur(12px)`, radius 16px, faint white hairline; floats AI chat, scheduling chips and a "Team workspace" doc over the portrait.
- **Light card**: warm `#f2f0eb`/`#ece9e2` surface, radius ~16px, soft shadow, hairline.

### Chips / inline UI
- Scheduling/time chips (e.g. "Monday at 3:00 PM"), channel tags (`#launch-project-chat`), and a rounded "Tailor this language for executives" pill — all small, rounded ~999px, glassy on the hero.

### Inputs
- Chat composer field inside the glass card: rounded, subtle fill, trailing send button; hero fields inherit the glass treatment. Focus: soft purple ring (variable).

### Nav
- Promo banner (plum `#421d24` with bg image) above; nav row with logo + wordmark (uppercase, tracked) left, dropdown links (Products/Solutions/AI/Resources) center, right `Contact sales` + `Log in` ghost + lavender `Sign up` pill.

## 5. Layout Principles

- Centered hero: 64px display headline → subhead → single primary CTA, over a full-bleed gradient portrait with glass cards flanking it left/right.
- Content below shifts to warm-off-white sections with generous whitespace and floated product cards.
- Vertical rhythm is spacious; components rely on glass/shadow depth, not hairline grids.

## 6. Depth & Elevation

- Radii: lavender button 8px, primary button 12px, cards/glass 16px, chips ~full.
- Control heights: 36px (secondary), 50px (primary CTA).
- Elevation: layered and soft — `backdrop-filter: blur(12px)` glass cards, gentle drop shadows (`0 1px 2px rgba(20,20,19,.24)`) and an inset indigo ring on the primary button. Depth is the design language, not borders.

## 7. Motion

- Restrained, premium micro-transitions on hover; the glass cards and portrait compose the "moment" rather than aggressive scroll animation. Variable-font weight allows subtle weight shifts. No heavy scroll-jacking library observed on the chrome (exact durations not captured).

## 8. Backgrounds, Effects & WebGL

- Signature is the **hero gradient wash**: `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))` layered over a photographic portrait. Extensive `backdrop-filter: blur(12px)` glass. Warm-off-white flat sections below. No canvas/WebGL or background video observed on the chrome; grain/noise not captured.

## 9. Do's and Don'ts

### Do
- Open on the soft lavender→blue→mauve gradient over photographic imagery; float glass `blur(12px)` cards (radius 16px) over it.
- Use deep-indigo `#1b1938` for the primary CTA (radius 12px, 50px, white text, trailing purple arrow chip); lavender `#d4c7ff` for the secondary pill.
- Keep the identity accent purple/lavender (`#714cb6`, `#d4c7ff`); use teal `#027e6f` only rarely.
- Set type in Super Sans VF at soft optical weights (~460 body, ~540 display) with tight display line-height (0.96).
- Alternate the dark gradient hero with warm-off-white `#f7f5f2` content sections; ink text `#292827`, muted `#73736e`.
- Build depth from glass, blur and soft shadow — not hairline borders.

### Don't
- Don't use hard 400/700 weight steps — weights are soft/variable (~460–540).
- Don't replace glass/blur depth with flat bordered slabs.
- Don't spread teal widely or add a third accent — purple/lavender is the identity.
- Don't use pure white `#ffffff` section backgrounds — light sections are warm off-white `#f7f5f2`.
- Don't make the hero flat — the gradient + portrait + glass cards are the brand.

## 10. Responsive Behavior

- Breakpoints in stylesheets (typical 768 / 1024 / 1280). Nav collapses to a menu; the flanking glass cards stack under the hero and the 64px headline scales down.
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas (light) `#f7f5f2` · Text `#292827` · Muted `#73736e` · Hero gradient lavender/blue/mauve · Accent purple `#714cb6` / lavender `#d4c7ff`
- Font: `Super Sans VF, system-ui, sans-serif` · Body: 16px/~460 · Radius: 8px/12px/16px · Control height: 36–50px
- Primary CTA: indigo `#1b1938`, radius 12px, 50px, white, trailing purple arrow chip · Glass: `backdrop-filter: blur(12px)`, radius 16px

<superhuman_design_language>
Use the Superhuman design language: a premium, dreamy productivity brand that opens on a soft multi-stop gradient wash — 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 a photographic portrait, with glassy backdrop-filter blur(12px) cards (radius 16px, faint white hairline) floating AI-chat and workspace UI on top. Content below shifts to calm warm-off-white sections (#f7f5f2/#f2f0eb) with ink text #292827 and muted #73736e. Type is Super Sans VF, a rounded variable face at soft optical weights (~460 body, ~540 display, tight 0.96 line-height on the 64px headline) — never hard 400/700 steps. The identity accent is purple/lavender: the primary CTA is a deep-indigo #1b1938 pill (radius 12px, 50px tall, white label, subtle 0 1px 2px rgba(20,20,19,.24) shadow + inset #353088 ring) with a small purple-gradient arrow chip; the secondary is a lavender #d4c7ff pill (radius 8px, weight 600). Teal #027e6f appears only rarely. Depth comes from glass, blur and gentle shadow, not hairline borders. Feels: premium, dreamy, calm, refined. Avoid: hard weight steps, flat bordered slabs replacing glass, pure-white section backgrounds, a third accent color, and a flat hero without the gradient + portrait + glass cards.
</superhuman_design_language>