# Radical Subtraction

## Overview
Radical reduction taken to its clean-white extreme. A full-viewport cinematic photograph, one short centered headline, and a single outline/solid button pair — everything else is stripped away. No badges, no tags, no decorative icons, no accent color. Hierarchy is built only from centering, whitespace, and the sheer weight of the full-bleed image. If a section feels thin, the fix is a stronger photo — not more UI.

## Colors & Roles
Pure achromatic. `background` is white, `foreground` is near-black (#171A20, a faintly cool neutral). Panels such as pricing cards separate by a light tonal fill (`secondary`/`card` = #F4F4F4), never by border or shadow. Secondary text (`muted-foreground`) is a mid grey (#5C5E62). There is **no chromatic accent** — `accent` and `destructive` deliberately map to the same near-black as `foreground`, because color is never used to build hierarchy or signal state. `border`, `input`, and `ring` all use #171A20 (the outline-button stroke). The dark palette is authored by inverting this identity (near-black canvas, near-white text), staying strictly monochrome.

## Typography Rules
One sans-serif family (Inter → Helvetica Neue fallback), two weights only: 400 for body and captions, 500 for display, headings, and button labels. Display type is deliberately restrained — `clamp(2rem, 3.4vw, 3.4rem)`, weight 500, letter-spacing −0.01em, line-height 1.15 — a light geometric minimal, never oversized or heavy. Body is 1rem/1.6 with a short 50–62 character measure. Button labels are 0.82rem/500 with 0.02em tracking. Modular scale ratio ≈ 1.2.

## Layout Principles
Two layout modes. Photo sections are full-viewport (100vw × 100vh). Text-only sections (pricing, footer) center their content in a 680px column. Everything sits on a single center axis — asymmetry, multi-column collages, and left/right alignment are banned. Sections stack with `scroll-snap-type: y mandatory` and `scroll-snap-align: start`, so each 100vh section snaps decisively into place. Whitespace is filled by the cinematic photo, not by empty flat panels.

## Depth & Elevation
Completely flat. No shadows at all — depth is never expressed. No gradients (a single faint darkening overlay on photos for text legibility is the only exception), no glass, no noise.

## Shapes
Near-square corners: buttons, cards, and panels use a 4px radius — just softened, not rounded. Photos have 0 radius. Nothing exceeds 4px.

## Component Stylings
- **Button**: only two kinds — (1) solid `primary` fill with `primary-foreground` text, (2) 1px `foreground` outline with transparent fill. Padding 11px 26px, radius 4px, Inter 500/0.82rem. Solid hover brightens slightly (#171A20 → #393C41); outline hover fills solid. They always appear as a pair, 16px apart, centered.
- **Card** (pricing): `secondary` (#F4F4F4) fill, no border, radius 4px, 36px padding. Centered: option name + large price (500) + a bullet-less spec list (`muted-foreground`) + button pair.
- **Nav**: 56px tall, transparent or filled, no border or shadow. Wordmark left (500), menu links (400/0.82rem, 24px apart). Text flips white/black over photos depending on image luminance. Hover drops to opacity 0.7. Mobile uses a 1px-line hamburger opening a full-screen white overlay with centered links.
- **Icon**: minimized to essentials only (e.g. a nav arrow), 1px stroke. No generic icon sets, badges, or emoji.

## Motion
Snappy and decisive. Snap-scroll settles into the next full-viewport section in 200ms. Entrances are opacity 0→1 over 200ms with minimal transform. No parallax, bounce, or slow drift. `prefers-reduced-motion` keeps snap-scroll but drops the fades.

## Do's and Don'ts
**Do:** center every element on one axis; fill each section with a 100vh cinematic photo and snap between them; use exactly one solid+outline button pair; keep color pure monochrome.
**Don't:** introduce an accent color; add badges, tags, decorative icons, or emoji; use shadows, gradients, or radius > 4px; use oversized heavy display type; break the center axis with asymmetry; fill a photo slot with a flat dead-color void.

## Responsive Behavior
Photo sections stay full-viewport at every breakpoint (768px, 1100px). The 680px text column fluidly narrows on mobile; display type scales via `clamp()`. Nav collapses to a 1px-line hamburger that opens a full-screen centered overlay.

## Agent Prompt Guide
> Build this in the 'Radical Subtraction' style: strip every decorative UI element — no badges, tags, icons, or accent color. Pure achromatic, white background with near-black (#171A20) text. Every section is a full-viewport (100vh) cinematic photo with scroll-snap-type:y mandatory. All content centered on a single axis: a short Inter-500 headline, one line of sub-copy, and exactly one button pair — a solid near-black button plus a 1px outline button, 4px radius, 16px apart. No shadows, no gradients (except a faint darkening overlay for legibility), no heavy type. Motion is snappy 200ms only.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-radical-subtraction-white` (an authored spec, Tesla-inspired). All tokens are `manual` confidence — no live URL was measured. Colors are the pack's own specified achromatic values; the dark palette and chart/mid-neutral steps are faithfully derived from them. The commercial reference typeface is replaced by Inter (OFL) as the reproduction default.