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