# Grand Serif Statement

## Overview
A full-bleed off-white canvas where one or two colossal display-serif words fill the viewport and become the content itself. You know it on sight: almost everything on screen is type, that type is huge enough to touch the page edges, and it is compressed with negative tracking so the letters nearly kiss. Body copy is an extremely small sans-serif column parked quietly in one corner. There is no accent color — only ink monochrome — and hierarchy is built purely from type size, weight, and hairlines. Scrolling crossfades the giant word into the next.

## Colors & Roles
Monochrome ink on warm off-white. `background` off-white (#f7f5f1 → oklch 0.971), `foreground` near-black ink (#15130f → oklch 0.188), body contrast ≈ 16:1 (WCAG AAA). `muted-foreground` is the meta/caption grey (#8a8579). `secondary`, `accent`, `border` are derived achromatic neutrals stepped from the background (≈ #efece6 / #e6e2da / #dcd7cd) used only for surfaces and hairlines — never as chromatic hierarchy. There is deliberately **no accent color**; `accent` stays achromatic and `destructive` stays ink to honor the pack's rule. Dark mode inverts ink and off-white faithfully.

## Typography Rules
The star is an oversized display serif — Playfair Display, weight 600, `clamp(4.5rem, 17vw, 16rem)`, letter-spacing −0.04em, line-height 0.92 — viewport-scaled to fill the width. A secondary display (Fraunces, italic allowed) covers subheads. For contrast, body and labels are a **tiny** sans-serif (Inter): body 0.8125rem / 1.6, measure 50–62 chars; labels 0.7rem, uppercase, tracking 0.14em, in the meta grey. The extreme jump from giant serif to micro sans is the skeleton of the style.

## Layout Principles
Giant-serif sections are full-bleed — no max width; type reaches the side gutters (`clamp(20px, 4vw, 64px)`). Only the body column is capped at 420px, placed in one corner (bottom-left or top-right) above a 1px rule. Each word section is `min-height: 92–100vh` — one word per screen — and the type shifts position (top-left, center, bottom-right) between sections to break monotony. At most one or two giant words per screen.

## Depth & Elevation
Completely flat. No shadows, gradients, glass, blur, or noise. Depth comes exclusively from the contrast in type scale.

## Shapes
Zero border-radius everywhere. Cards and images are essentially absent; if an image is needed it is a single full-bleed grayscale plate (`filter: grayscale(1) contrast(1.05)`) with the giant serif overlaid. Decoration is banned — type, hairlines, and the small body column are the entire kit.

## Component Stylings
- **Giant word**: the protagonist. Playfair 600, clamp display size, −0.04em tracking, line-height 0.92, radius 0, no hover response (static). Reaches the viewport width.
- **Body column**: ≤420px, Inter 0.8125rem/1.6 in `muted-foreground`, one corner only, with a 1px hairline rule on top.
- **Kicker / number**: label step (0.7rem uppercase, 0.14em tracking, meta grey) in a screen corner.
- **Link**: only body links get an ink underline that fades in — never an accent color.

## Motion
Subtle, crossfade only. The giant serif word fades to the next (`opacity 0 → 1`, 600ms, `cubic-bezier(0.4, 0, 0.2, 1)`) with a slight letter-spacing shift (−0.06em → −0.04em) so the letters seem to unclench. Body columns fade in over 500ms. No slide, bounce, parallax, or rotation. Under `prefers-reduced-motion` the crossfade is removed and words swap statically on scroll.

## Do's and Don'ts
**Do:** make the giant type a display serif, ≥4.5rem, filling the screen; compress with negative tracking and line-height 0.92; build hierarchy from size/weight/hairlines only; keep body to one small sans column; transition by crossfade.
**Don't:** use any accent color, gradient, or gradient text (ink only); use a sans-serif for the big type (the serif is what splits this from a big-type-statement pack); use positive/loose tracking or shrink the serif below 4rem; use card grids, icons, illustrations, emoji, or blobs; use box shadows or rounded corners; put more than two giant words on a screen.

## Responsive Behavior
The giant serif keeps the `clamp` lower bound (4.5rem) so it stays large even on mobile. Body columns drop below the word. Breakpoints at ~700px and ~1100px; the type-as-content principle holds at every width.

## Agent Prompt Guide
> Build this in the 'Grand Serif Statement' style: a full-bleed off-white canvas where one or two colossal display-serif words (Playfair Display, weight 600, clamp(4.5rem,17vw,16rem), letter-spacing -0.04em, line-height 0.92) fill the viewport and ARE the content. Ink monochrome only — no accent color, no gradients, no shadows, zero border-radius. Body copy is a tiny sans-serif (Inter, 0.8125rem) column ≤420px in one corner above a 1px hairline; uppercase tracked micro-labels in the opposite corner. Each section is min-height 92–100vh with one word; scrolling crossfades the giant word to the next (600ms), never slide or parallax. The giant type must be serif, never sans.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-grand-serif-statement` (an authored spec, not extracted from a live URL), so all tokens are `manual` confidence. Display font is Playfair Display (OFL, Google Fonts); secondary serif Fraunces and body sans Inter are also Google Fonts, so the palette and type reproduce faithfully without commercial-font substitution. The `secondary`/`accent`/`border` neutrals are derived tonal steps of the off-white background, declared in the color notes.