Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Inter| Mono:JetBrains Mono- Font stack (CSS):font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Superhuman's website feels like opening a luxury envelope — predominantly white, immaculately clean, with a single dramatic gesture of color that commands attention. The hero section is a cinematic purple gradient, a deep twilight wash of #1b1938 that evokes the moment just before dawn, overlaid with confident white typography. Below this dramatic entrance, the rest of the site is almost entirely white canvas with dark charcoal text, creating a stark but refined reading experience.
The typography is the true signature: Super Sans VF, a custom variable font with unconventional weight stops (460, 540, 600, 700) that sit between traditional font weight categories. Weight 460 — slightly heavier than regular but lighter than medium — is the workhorse, creating text that feels more confident than typical 400-weight but never aggressive. The tight line-heights (0.96 on display text) compress headlines into dense, powerful blocks, while generous 1.50 line-height on body text provides airy readability. This tension between compressed power and breathing room defines the Superhuman typographic voice.
The design philosophy is maximum confidence through minimum decoration. Warm cream buttons (#e9e5dd) instead of bright CTAs, a near-absence of borders and shadows, and lavender purple (#cbb7fb) as the sole accent color. It's a productivity tool that markets itself like a luxury brand — every pixel earns its place, nothing is merely decorative. The brand naming convention extends to colors: the primary purple is called "Mysteria," straddling blue and purple with deliberate ambiguity.
Key Characteristics:
- Deep purple gradient hero (#1b1938) contrasting against a predominantly white content body
- Super Sans VF variable font with non-standard weight stops (460, 540, 600, 700) — sits between conventional weight categories
- Ultra-tight display line-height (0.96) creating compressed, powerful headlines
- Warm Cream (#e9e5dd) buttons instead of bright/saturated CTAs — understated luxury
- Lavender Purple (#cbb7fb) as the singular accent color — a soft, approachable purple
- Minimal border-radius scale: only 8px and 16px — no micro-rounding, no pill shapes
- Product screenshots dominate the content — the UI sells itself with minimal surrounding decoration
#1b1938): Hero gradient background, deep purple that straddles blue-purple — the darkest expression of the brand#cbb7fb): Primary accent and highlight color — soft purple used for emphasis, decorative elements, and interactive highlights#292827): Primary text and heading color on light surfaces — warm near-black with faint brown undertone#714cb6): Underlined link text — mid-range purple that connects to the brand palette while signaling interactivitycolor(srgb 1 1 1 / 0.95)): Hero overlay text — near-white at 95% opacity for depth layering on dark surfacescolor(srgb 1 1 1 / 0.8)): Secondary text on dark surfaces — 80% opacity white for hierarchy on the hero gradient#ffffff): Primary page background — the dominant canvas color for all content sections#e9e5dd): Button background — a warm, neutral cream that avoids the coldness of pure gray#dcd7d3): Card and divider borders — warm light gray with slight pink undertone#292827): Primary heading and body text on white surfaces#714cb6): In-content links with underline decorationcolor(srgb 1 1 1 / 0.95)): Primary text on dark/purple surfacescolor(srgb 1 1 1 / 0.8)): Secondary text on dark/purple surfaces#cbb7fb) is the only true accent#1b1938, transitioning through purple-to-twilight tones across the hero section — the most dramatic visual element on the entire siteSuper Sans VF — custom variable font with non-standard weight axis. Fallbacks: system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica NeueMessina Sans / Messina Serif / Messina Mono from Luzi Type — used in the product itself for sans-serif-to-serif transitions| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero | Super Sans VF | 64px | 540 | 0.96 | 0px | Maximum compression, powerful block headlines |
| Section Display | Super Sans VF | 48px | 460 | 0.96 | -1.32px | Lighter weight for section introductions |
| Section Heading | Super Sans VF | 48px | 460 | 0.96 | 0px | Alternate section heading without tracking |
| Feature Title | Super Sans VF | 28px | 540 | 1.14 | -0.63px | Feature block headlines, tighter |
| Sub-heading Large | Super Sans VF | 26px | 460 | 1.30 | 0px | Content sub-sections |
| Card Heading | Super Sans VF | 22px | 460 | 0.76 | -0.315px | Card title with extreme compression |
| Body Heading | Super Sans VF | 20px | 460 | 1.20 | 0px | Bold content intros |
| Body Heading Alt | Super Sans VF | 20px | 460 | 1.10 | -0.55px | Tighter variant for emphasis |
| Body Heading Relaxed | Super Sans VF | 20px | 460 | 1.25 | -0.4px | More breathing room variant |
| Emphasis Body | Super Sans VF | 18px | 540 | 1.50 | -0.135px | Medium-weight body for callouts |
| Body | Super Sans VF | 16px | 460 | 1.50 | 0px | Standard reading text — generous line-height |
| Button / UI Bold | Super Sans VF | 16px | 700 | 1.00 | 0px | Bold UI elements |
| Button / UI Semi | Super Sans VF | 16px | 600 | 1.00 | 0px | Semi-bold navigation and labels |
| Nav Link | Super Sans VF | 16px | 460 | 1.20 | 0px | Navigation items |
| Caption | Super Sans VF | 14px | 500 | 1.20 | -0.315px | Small labels, metadata |
| Caption Semi | Super Sans VF | 14px | 600 | 1.29 | 0px | Emphasized small text |
| Caption Body | Super Sans VF | 14px | 460 | 1.50 | 0px | Small body text |
| Micro Label | Super Sans VF | 12px | 700 | 1.50 | 0px | Smallest text — badges, tags |
#e9e5dd background, Charcoal Ink (#292827) text, subtle rounded corners (8px radius), no visible border. The signature CTA — warm, muted, luxurious rather than aggressive#292827 background with white text, 8px radius — inverse of the warm cream for contrast sections#714cb6) or Charcoal Ink color depending on context#1b1938#dcd7d3) 1px border, 16px border-radius — clean and minimal#292827 border on dark sections, maintaining warm-neutral tonergba(255, 255, 255, 0.2)) on purple gradient — ghostly containment#e9e5dd) pill in the nav — subtle, not attention-grabbingspan, button, div) — the universal small radiusa, card elements) — the universal large radius| Level | Treatment | Use |
|---|---|---|
| Level 0 (Flat) | No shadow, white background | Primary page canvas, most content surfaces |
| Level 1 (Border) | 1px solid #dcd7d3 (Parchment Border) |
Card containment, section dividers |
| Level 2 (Dark Border) | 1px solid #292827 |
Header elements, dark section separators |
| Level 3 (Glow) | Subtle shadow (from 6 shadow definitions detected) | Product screenshot containers, elevated cards |
| Level 4 (Hero Depth) | rgba(255, 255, 255, 0.2) transparent border |
Elements on the dark purple gradient hero |
Superhuman's elevation system is remarkably restrained on the marketing site. Depth is primarily communicated through:
- Border containment: Warm-toned borders (#dcd7d3) at 1px create gentle separation
- Color contrast: The hero gradient creates massive depth through color shift rather than shadows
- Product screenshots: Screenshots themselves create depth by showing a layered UI within the flat page
- Opacity layering: Semi-transparent whites on the hero gradient create atmospheric depth layers
#1b1938 → white gradient transition is the primary depth device — a cinematic curtain effect#cbb7fb Lavender Glow elements float above the dark gradient, creating a stellar/atmospheric effect#e9e5dd) for primary buttons — not white, not gray, specifically warm cream#cbb7fb) as the only accent color — it's the sole color departure from the neutral palette#000000) for text — Charcoal Ink (#292827) is warmer and softer| Name | Width | Key Changes |
|---|---|---|
| Mobile | <768px | Single column, hero text reduces to ~36px, stacked feature cards, hamburger nav |
| Tablet | 768px–1024px | 2-column feature grid begins, hero text ~48px, nav partially visible |
| Desktop | 1024px–1440px | Full layout, 64px hero display, multi-column feature grid, full nav |
| Large Desktop | >1440px | Max-width container centered, generous side margins |
#1b1938)#292827)color(srgb 1 1 1 / 0.95) — use rgba(255,255,255,0.95))#cbb7fb)#e9e5dd)#dcd7d3)#714cb6)#ffffff)When refining existing screens generated with this design system: 1. Verify font weight is 460 (not 400 or 500) for body and 540 for display — the non-standard weights are essential 2. Check that display line-height is 0.96 — if headlines look too spaced, they're wrong 3. Ensure buttons use Warm Cream (#e9e5dd) not pure white or gray — the warmth is subtle but critical 4. Confirm the only accent color is Lavender Glow (#cbb7fb) — no other hues should appear 5. The overall tone should feel like a luxury product presentation — minimal, confident, with one dramatic color gesture in the hero