# Superhuman 따뜻한 오프화이트 지면 위에 시네마틱 바이올렛 그라디언트 히어로를 얹은 프리미엄 프로덕티비티 스타일 — 빠르고 정제되고 값비싸 보인다. - taxonomy: soft-futurism · premium-saas, violet-gradient, warm-light, cinematic-hero, productivity · complexity=medium - page types: landing, marketing, app - best for: 프리미엄 SaaS·프로덕티비티 제품 랜딩, AI 도구 마케팅 페이지, 브랜드 히어로가 강한 제품 소개 - avoid for: 데이터 밀도 높은 대시보드, 장난스러운 소비자 앱, 예산·저가 포지셔닝 제품 - provenance: website (Superhuman: Docs, Mail, and AI That Work Everywhere) — confidence: colors_measured=computed-css, color_roles=vision-inferred, dark_mode=vision-inferred, typography=computed-css, radius=computed-css, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred ## Design rules # Superhuman ## Overview Premium productivity-app marketing aesthetic. The body is a calm, warm off-white paper (#f2f0eb) with quiet near-black text, so the page reads fast and expensive. Drama is rationed: a cinematic violet-to-blue gradient appears only in the centered hero and CTA bands, over photographic light. Corners are softly rounded, shadows are barely there, and the signature is a near-black pill button wearing a subtle violet glow ring. Color never shouts — whitespace and gradient light carry the luxury-tech feel. ## Colors & Roles Warm-light by default: `background` off-white (measured #f2f0eb, dominant by ~20x weight), `foreground` warm near-black #292827 (the actual body/heading text — *not* the white measured on the hero gradient). `primary` is the near-black pill button; `primary-foreground` white. The brand `accent` is violet — oklch(0.511 0.161 296.3), #714cb6 — low frequency but unmistakable; it drives `ring`, links, and icon highlights, never large fills. Surfaces separate by a faint near-white `card` tonal step or a low-contrast `border`, plus a very shallow shadow. Maroon (#421d24) and teal (#0c4243) are section-band colors, mapped only to `chart`/support roles. Dark mode is authored (no native dark existed): a plum-tinted near-black base with near-white text and a brightened violet accent. ## Typography Rules One sans family — Super Sans VF (commercial variable font) → Inter fallback. Weights follow the measured non-standard mids: 460 for body, 540 for headings and display (approximate with Inter 450–500 / 600). Display is large and slightly tracking-tight (clamp up to 4rem, letter-spacing −0.01em, line-height ~0.96); body is a comfortable 1rem / line-height 1.5. Hierarchy is size + weight, not color. ## Layout Principles Centered container, max ~1200px. The hero is symmetric and airy: oversized display headline, one subhead line, a single CTA, with product/chat mockup cards floating over the gradient. Below, the product suite runs as left-text / right-card sections. Rhythm comes from alternating bright paper sections with dark color bands (maroon, teal, a bright gradient CTA). ## Depth & Elevation Mostly flat with one shallow layer. Cards get 0 1px 2px shadows at 8–24% warm near-black. The hallmark elevation is the primary button's violet glow — an inset 1px rgb(113,76,182) ring plus a faint purple shadow. Gradients (violet→blue→lilac) are a deliberate device for hero/CTA only, never on body cards. ## Shapes Soft, rounded. Cards 16px, buttons and inputs 12px, tags/chat bubbles fully pill (999px, some asymmetric 999px 999px 0px speech bubbles). Nothing is hard-cornered. ## Component Stylings - **Button (primary)**: near-black pill (`primary`), white text, a round arrow chip on the right, violet glow ring; asymmetric padding (e.g. 6px 6px 6px 16px). Hover intensifies the glow (150ms). - **Button (secondary)**: white outline/card button on light paper (thin border + micro shadow); translucent white on dark bands. - **Card**: radius 16px, very shallow shadow or thin border; near-white on paper. Overlay cards over the hero are translucent white. - **Input**: radius 12px, thin border, violet focus ring. - **Nav**: slim top bar, white text over the hero; logo left, links center, right-side Log in + a lilac Sign up pill. ## Motion Fast and precise. Opacity + translateY(12px) fade-ups, gradients drifting slowly, button glow strengthening on hover. Restrained on bounce/parallax. ## Do's and Don'ts **Do:** keep the paper body quiet with near-black text; concentrate the violet gradient in hero/CTA; make the CTA a near-black pill with a violet glow; round corners 12–16px. **Don't:** put white text on the off-white body (white belongs only on the hero gradient); flood the whole page with gradient; use 0-radius UI; introduce a loud multi-color palette — keep one violet brand accent. ## Responsive Behavior Two-column suite sections stack to one column on mobile; the hero stays centered and display type scales via clamp(). Floating overlay cards reflow below the hero image on small screens. ## Agent Prompt Guide > Build this in the 'Superhuman' style: a warm off-white (#f2f0eb) paper body with quiet near-black text, reserving a cinematic violet-to-blue gradient for a centered hero and CTA bands. Use a single violet brand accent (oklch 0.51 0.16 296) for rings, links, and icon highlights; make the primary CTA a near-black pill button with a rounded arrow chip and a subtle violet glow ring. Rounded 12-16px corners, very shallow shadows, airy spacing, large medium-weight display type. Alternate light paper sections with dark maroon/teal color bands for rhythm. ## Known Gaps / Confidence Colors, typography, and radius are `computed-css` (measured via Playwright). Color-role assignment is `vision-inferred` from screenshots — notably, the naive frequency scaffold mislabeled hero-gradient white as `foreground`; corrected to measured #292827. The violet accent is real but low-frequency. Dark mode is authored (`vision-inferred`), not measured — the site ships no native dark theme; the plum near-black base is a design choice grounded in the site's maroon/footer hue. `destructive` is a conventional red (manual), not present in the extraction. Super Sans VF is commercial; Inter is the practical reproduction fallback and will not match the exact 460/540 weights. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Superhuman — theme.css (generated, do not edit) */ :root { --radius: 16px; --radius-selector: 12px; --radius-field: 12px; --font-sans: "Super Sans VF", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --spacing: 8px; --shadow: 0px 2px 8px 0px color-mix(in oklab, oklch(0.20 0.01 90) 12%, transparent); --ks-display-weight: 540; --ks-display-tracking: -0.01em; --background: oklch(0.955 0.007 88.6); --foreground: oklch(0.278 0.002 67.7); --card: oklch(0.988 0.004 88.6); --card-foreground: oklch(0.278 0.002 67.7); --popover: oklch(0.988 0.004 88.6); --popover-foreground: oklch(0.278 0.002 67.7); --primary: oklch(0.191 0.002 106.6); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.925 0.006 88.6); --secondary-foreground: oklch(0.278 0.002 67.7); --muted: oklch(0.935 0.005 88.6); --muted-foreground: oklch(0.50 0.007 78); --accent: oklch(0.511 0.161 296.3); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.58 0.22 27); --destructive-foreground: oklch(1 0 0); --border: oklch(0.88 0.005 85); --input: oklch(0.88 0.005 85); --ring: oklch(0.511 0.161 296.3); --chart-1: oklch(0.511 0.161 296.3); --chart-2: oklch(0.532 0.096 180.6); --chart-3: oklch(0.40 0.08 9.5); --chart-4: oklch(0.72 0.12 295); --chart-5: oklch(0.35 0.01 90); } .dark { --background: oklch(0.165 0.018 330); --foreground: oklch(0.95 0.005 88.6); --card: oklch(0.215 0.020 330); --card-foreground: oklch(0.95 0.005 88.6); --popover: oklch(0.215 0.020 330); --popover-foreground: oklch(0.95 0.005 88.6); --primary: oklch(0.95 0.005 88.6); --primary-foreground: oklch(0.165 0.018 330); --secondary: oklch(0.26 0.020 330); --secondary-foreground: oklch(0.90 0.005 88.6); --muted: oklch(0.26 0.020 330); --muted-foreground: oklch(0.66 0.020 320); --accent: oklch(0.62 0.170 296); --accent-foreground: oklch(0.985 0.005 300); --destructive: oklch(0.62 0.20 27); --destructive-foreground: oklch(0.985 0.005 300); --border: oklch(0.30 0.020 330); --input: oklch(0.30 0.020 330); --ring: oklch(0.62 0.170 296); --chart-1: oklch(0.62 0.170 296); --chart-2: oklch(0.62 0.10 180); --chart-3: oklch(0.52 0.11 9.5); --chart-4: oklch(0.78 0.10 295); --chart-5: oklch(0.80 0.006 88.6); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Superpowers,
everywhere you work

Mail, Docs, and AI that works in every app and tab.

Get Superhuman →

Your Superhuman suite

Mail

The most productive email app ever made

Fly through your inbox twice as fast and save hours every week.

Docs

The best place for teams and AI to work together

Build projects, knowledge, and workflows in the doc that goes beyond writing.

Go

AI that actually works in every app you use

The proactive AI assistant that knows what you know.

Book it for Monday? yes!
``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/superhuman.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `