# Radical Subtraction

풀뷰포트 시네마틱 사진 위 짧은 중앙 헤드라인과 외곽선/솔리드 버튼 한 쌍만 남긴, 장식을 전부 걷어낸 순수 무채 클린 화이트 스타일.

- taxonomy: editorial-minimalism · radical-minimal, monochrome, full-viewport, section-snap, centered, cinematic-photo · complexity=low
- page types: landing, marketing, portfolio, editorial
- best for: 시네마틱 제품 사진이 주인공인 랜딩, 프리미엄 제품·자동차 마케팅 페이지, 사진 한 장으로 말하는 포트폴리오
- avoid for: 데이터·텍스트 밀도가 높은 대시보드, 장식과 컬러가 필요한 소비자 앱, 고품질 사진을 준비할 수 없는 프로젝트
- provenance: authored (design-diversity 팩 'web-radical-subtraction-white' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual

## Design rules

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


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Radical Subtraction — theme.css (generated, do not edit) */
:root {
  --radius: 4px;
  --radius-selector: 4px;
  --radius-field: 4px;
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --spacing: 8px;
  --shadow: 0px 0px 0px 0px color-mix(in oklab, oklch(0.217 0.013 264.3) 0%, transparent);
  --ks-display-weight: 500;
  --ks-display-tracking: -0.01em;
  --background: oklch(1.000 0 0);
  --foreground: oklch(0.217 0.013 264.3);
  --card: oklch(0.967 0 0);
  --card-foreground: oklch(0.217 0.013 264.3);
  --popover: oklch(1.000 0 0);
  --popover-foreground: oklch(0.217 0.013 264.3);
  --primary: oklch(0.217 0.013 264.3);
  --primary-foreground: oklch(1.000 0 0);
  --secondary: oklch(0.967 0 0);
  --secondary-foreground: oklch(0.217 0.013 264.3);
  --muted: oklch(0.967 0 0);
  --muted-foreground: oklch(0.482 0.007 264.5);
  --accent: oklch(0.217 0.013 264.3);
  --accent-foreground: oklch(1.000 0 0);
  --destructive: oklch(0.217 0.013 264.3);
  --destructive-foreground: oklch(1.000 0 0);
  --border: oklch(0.217 0.013 264.3);
  --input: oklch(0.217 0.013 264.3);
  --ring: oklch(0.217 0.013 264.3);
  --chart-1: oklch(0.217 0.013 264.3);
  --chart-2: oklch(0.355 0.010 260.7);
  --chart-3: oklch(0.482 0.007 264.5);
  --chart-4: oklch(0.639 0.005 258.3);
  --chart-5: oklch(0.858 0 0);
}

.dark {
  --background: oklch(0.177 0.007 258.4);
  --foreground: oklch(0.945 0 0);
  --card: oklch(0.239 0.014 267.0);
  --card-foreground: oklch(0.945 0 0);
  --popover: oklch(0.239 0.014 267.0);
  --popover-foreground: oklch(0.945 0 0);
  --primary: oklch(0.945 0 0);
  --primary-foreground: oklch(0.177 0.007 258.4);
  --secondary: oklch(0.276 0.016 264.3);
  --secondary-foreground: oklch(0.945 0 0);
  --muted: oklch(0.276 0.016 264.3);
  --muted-foreground: oklch(0.692 0.006 264.5);
  --accent: oklch(0.945 0 0);
  --accent-foreground: oklch(0.177 0.007 258.4);
  --destructive: oklch(0.945 0 0);
  --destructive-foreground: oklch(0.177 0.007 258.4);
  --border: oklch(0.336 0.015 264.3);
  --input: oklch(0.336 0.015 264.3);
  --ring: oklch(0.945 0 0);
  --chart-1: oklch(0.945 0 0);
  --chart-2: oklch(0.692 0.006 264.5);
  --chart-3: oklch(0.482 0.007 264.5);
  --chart-4: oklch(0.355 0.010 260.7);
  --chart-5: oklch(0.276 0.016 264.3);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<!-- Golden snippet for "Radical Subtraction". Fragment — assumes the style's CSS variables
     (--background, --foreground, --primary, --border, --font-sans, --radius, --muted-foreground, ...)
     are in scope. Tokens only; no literal colors or images. Signature: a clean full-viewport
     canvas, one short centered headline, an outline+solid button pair, and nothing else. -->
<section style="background:var(--background); color:var(--foreground); font-family:var(--font-sans);
                min-height:100vh; display:flex; flex-direction:column; align-items:center;
                justify-content:center; text-align:center; padding:clamp(2rem,6vw,5rem);
                scroll-snap-align:start;">
  <div style="max-width:680px; display:flex; flex-direction:column; align-items:center;">
    <h1 style="margin:0; font-weight:500; font-size:clamp(2rem,3.4vw,3.4rem); line-height:1.15; letter-spacing:-0.01em;">
      Everything unnecessary, removed.
    </h1>

    <p style="margin:16px 0 0; font-size:1rem; line-height:1.6; color:var(--muted-foreground); max-width:52ch;">
      One image. One line. One choice — the rest is silence.
    </p>

    <div style="display:flex; gap:16px; margin-top:32px;">
      <a href="#" style="border:1px solid var(--foreground); border-radius:var(--radius);
                         background:var(--primary); color:var(--primary-foreground);
                         padding:11px 26px; font-size:0.82rem; font-weight:500; letter-spacing:0.02em;
                         text-decoration:none;">
        Order Now
      </a>
      <a href="#" style="border:1px solid var(--foreground); border-radius:var(--radius);
                         background:transparent; color:var(--foreground);
                         padding:11px 26px; font-size:0.82rem; font-weight:500; letter-spacing:0.02em;
                         text-decoration:none;">
        Learn More
      </a>
    </div>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/radical-subtraction.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 `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.