# Clerk Soft Futurism

## Overview
A light-first developer/SaaS aesthetic extracted from Clerk's marketing site. An off-white canvas carries near-black, tightly-tracked display headings, white cards, and a single refined purple brand accent. Gentle futurism lives in the details — soft pastel gradients on product cards, a low-opacity cyan/purple glow behind the hero, and near-black full-bleed sections stacked in rhythm against the light ones. Hierarchy comes from type size, weight, and brightness steps, not color.

## Colors & Roles
Off-white `background` (oklch 0.976 / #f7f7f8) with pure-white `card` surfaces separated by a faint tonal step and a 1px hairline `border` (#d9d9de). `foreground` is a near-black (oklch 0.188 / #131316), used for the bold headings. The one chromatic brand color is a purple (`primary` = `accent` = `ring`, oklch 0.557 0.254 283.7 / #6c47ff) — measured as the hero CTA — reserved for primary buttons, focus rings, category labels, and emphasis. `muted-foreground` is a cool gray (#5e5f6e) for body/secondary text. Chart/status slots hold cyan (from the hero glow), red (destructive #ef4444), and green — signals only, never brand. Dark mode is authored on the measured near-black section background (#131316) with the measured dark border (#2f3037), keeping the same purple slightly brightened for contrast.

## Typography Rules
One sans family, Suisse Int'l (Inter fallback), display included. Signature move: oversized headings with tight negative tracking — measured H1 64px / 700 / −1.6px ≈ −0.025em, applied to display and H1. Weights are the measured 400 body / 500 labels & small headings / 600 headings / 700 display. Body sits at 1rem / 1.6 line-height with neutral tracking. Mono (Soehne → JetBrains Mono) is for code, API snippets, and numeric badges only. Modular scale ≈ 1.25.

## Layout Principles
Max content width ~1200px on a 12-column / 24px-gutter grid. Hero is centered — large heading, short subtext, purple CTA — then feature sections in a left-copy / right-product-mockup pattern. The defining structure is full-bleed sections alternating between light (off-white) and near-black. Vertical rhythm is large: section gaps `clamp(5rem, 10vw, 9rem)`.

## Depth & Elevation
Soft, not flat. Floating surfaces (auth card, popovers, dropdowns) get layered low-opacity shadows (0 1px 3px + 0 5px 15px, ~8%). Section cards rely on 1px borders and tonal steps instead. Product cards and the hero carry soft pastel radial gradients and a low-opacity (~10–20%) cyan/purple aurora glow with a faint circuit-line pattern; the base background stays flat off-white.

## Shapes
Medium radii: 8px on fields and buttons, 16px on cards and larger panels. Nav and pills go fully rounded (9999px). No sharp-corner rule — everything is gently rounded.

## Component Stylings
- **Button**: primary = solid purple fill, white text, 8px radius, 14–15px / 500, padding ~11px 19px. Hover shifts fill one step + optional translateY(−1px). Focus = 2px purple ring, 2px offset. Secondary = white/transparent fill, 1px border, near-black text. Ghost = transparent nav link, muted→foreground on hover.
- **Card**: white fill, 1px border, 16px radius, 24–32px padding, optional soft shadow. Demo/product cards may use pastel gradient backgrounds.
- **Input**: white fill, 1px border, 8px radius, 10–12px padding; focus border → purple + 2px ring.
- **Nav**: sticky, backdrop-blurred translucent white pill container with a thin border. Wordmark left, dropdown links center (muted → foreground), `Sign in` text + purple `Start building` pill right.
- **Badge**: 8px or pill, 12–13px. Category labels use purple text; status badges tint chart colors (cyan/red/green) at ~10% with matching text.

## Motion
Smooth and restrained: opacity fades + 8–12px slides, 150–250ms standard easing; hover does subtle background/border transitions and tiny translateY. Gradient glows drift slowly at low opacity. No bounce, spring overshoot, or heavy parallax.

## Responsive Behavior
The 12-column grid collapses to a single column on mobile; display type scales via `clamp()`. Left-copy/right-mockup feature blocks stack vertically. The sticky pill nav condenses to a hamburger on narrow widths.

## Agent Prompt Guide
> Build this in the 'Clerk Soft Futurism' style: light-first off-white canvas (#f7f7f8) with near-black headings, white cards, and a single purple brand accent (#6c47ff) for primary CTAs, focus rings, category labels, and emphasis. Suisse/Inter throughout with tight −0.025em tracking on large headings (weights 400/500/600/700). Medium radii (8px fields, 16px cards), thin 1px borders (#d9d9de), soft low-opacity shadows. Add pastel gradients on product cards and a low-opacity cyan/purple glow behind the hero; alternate light and near-black full-bleed sections. Cyan/red/green are status signals only. Restrained fades, no bounce. Author a dark mode on near-black (#131316) keeping the purple.

## Known Gaps / Confidence
Colors, typography metrics, and radii are `computed-css` (measured, light mode). Color-role assignment, taxonomy, motion, layout, and effects are `vision-inferred` from the screenshots. **Family judgment call:** Clerk blends `corporate-clean` structure (high-contrast black headings, clean white marketing layout) with genuinely soft-futurist accents (purple brand, pastel gradients, cyan/purple hero glow, circuit pattern, alternating dark sections). `soft-futurism` was chosen as the honest primary because those gradient/glow/purple traits are the site's distinguishing signature; a `corporate-clean` reading is defensible. The site had **no native dark mode** — the dark set is synthesized from the measured near-black section (#131316) and dark border (#2f3037), so treat dark tokens as approximate. Fonts (Suisse Int'l, Soehne Mono) are commercial; Google-Fonts fallbacks (Inter, JetBrains Mono) are the practical reproduction defaults.