# Grand Serif Statement

오프화이트 화면을 초대형 디스플레이 세리프 한 단어가 풀블리드로 가득 채우는 빅타이포 웹 스타일 — 활자가 곧 콘텐츠다.

- taxonomy: big-type · grand-serif, big-type-statement, full-bleed, monochrome, typographic, editorial-display · complexity=medium
- page types: landing, portfolio, editorial, marketing
- best for: 브랜드 매니페스토·선언 페이지, 한 단어가 주인공인 히어로 랜딩, 패션·문화 포트폴리오
- avoid for: 데이터 밀도가 높은 대시보드, 본문 분량이 많은 문서 사이트, 카드 그리드 중심의 소비자 앱
- provenance: authored (design-diversity 팩 'web-grand-serif-statement' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual

## Design rules

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


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

```css
/* Grand Serif Statement — theme.css (generated, do not edit) */
:root {
  --radius: 0px;
  --radius-selector: 0px;
  --radius-field: 0px;
  --font-sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --spacing: 8px;
  --shadow: 0px 0px 0px 0px color-mix(in oklab, oklch(0.188 0.009 84.6) 0%, transparent);
  --ks-display-weight: 600;
  --ks-display-tracking: -0.04em;
  --background: oklch(0.971 0.006 84.6);
  --foreground: oklch(0.188 0.009 84.6);
  --card: oklch(0.971 0.006 84.6);
  --card-foreground: oklch(0.188 0.009 84.6);
  --popover: oklch(0.971 0.006 84.6);
  --popover-foreground: oklch(0.188 0.009 84.6);
  --primary: oklch(0.188 0.009 84.6);
  --primary-foreground: oklch(0.971 0.006 84.6);
  --secondary: oklch(0.944 0.009 84.6);
  --secondary-foreground: oklch(0.188 0.009 84.6);
  --muted: oklch(0.944 0.009 84.6);
  --muted-foreground: oklch(0.618 0.019 88);
  --accent: oklch(0.914 0.012 84.6);
  --accent-foreground: oklch(0.188 0.009 84.6);
  --destructive: oklch(0.188 0.009 84.6);
  --destructive-foreground: oklch(0.971 0.006 84.6);
  --border: oklch(0.880 0.015 84.6);
  --input: oklch(0.880 0.015 84.6);
  --ring: oklch(0.188 0.009 84.6);
  --chart-1: oklch(0.188 0.009 84.6);
  --chart-2: oklch(0.400 0.014 86);
  --chart-3: oklch(0.618 0.019 88);
  --chart-4: oklch(0.780 0.015 84.6);
  --chart-5: oklch(0.900 0.012 84.6);
}

.dark {
  --background: oklch(0.165 0.008 84.6);
  --foreground: oklch(0.945 0.006 84.6);
  --card: oklch(0.165 0.008 84.6);
  --card-foreground: oklch(0.945 0.006 84.6);
  --popover: oklch(0.165 0.008 84.6);
  --popover-foreground: oklch(0.945 0.006 84.6);
  --primary: oklch(0.945 0.006 84.6);
  --primary-foreground: oklch(0.165 0.008 84.6);
  --secondary: oklch(0.240 0.008 84.6);
  --secondary-foreground: oklch(0.900 0.006 84.6);
  --muted: oklch(0.240 0.008 84.6);
  --muted-foreground: oklch(0.620 0.015 88);
  --accent: oklch(0.285 0.009 84.6);
  --accent-foreground: oklch(0.945 0.006 84.6);
  --destructive: oklch(0.945 0.006 84.6);
  --destructive-foreground: oklch(0.165 0.008 84.6);
  --border: oklch(0.300 0.008 84.6);
  --input: oklch(0.300 0.008 84.6);
  --ring: oklch(0.945 0.006 84.6);
  --chart-1: oklch(0.945 0.006 84.6);
  --chart-2: oklch(0.780 0.012 84.6);
  --chart-3: oklch(0.620 0.015 88);
  --chart-4: oklch(0.450 0.010 86);
  --chart-5: oklch(0.300 0.008 84.6);
}
```

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

```html
<!-- Golden snippet for "Grand Serif Statement". Fragment — assumes the style's CSS variables
     (--background, --foreground, --muted-foreground, --border, --font-serif, --font-sans, --radius, ...)
     are in scope. Tokens only; no literal colors, no images. -->
<section style="background:var(--background); color:var(--foreground); font-family:var(--font-sans); min-height:92vh; position:relative; padding:clamp(20px,4vw,64px); box-sizing:border-box; overflow:hidden;">

  <!-- corner micro-label (kicker) -->
  <p style="position:absolute; top:clamp(20px,4vw,64px); right:clamp(20px,4vw,64px); margin:0; font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-foreground);">
    01 — Statement
  </p>

  <!-- the protagonist: one colossal display-serif word filling the width -->
  <h1 style="font-family:var(--font-serif); font-weight:600; font-size:clamp(4.5rem,17vw,16rem); line-height:.92; letter-spacing:-.04em; margin:0; position:absolute; left:clamp(20px,4vw,64px); top:38%; transform:translateY(-50%);">
    Silence.
  </h1>

  <!-- tiny sans body column tucked into the bottom-left corner, above a hairline -->
  <div style="position:absolute; left:clamp(20px,4vw,64px); bottom:clamp(20px,4vw,64px); max-width:420px; border-top:1px solid var(--border); padding-top:1rem;">
    <p style="margin:0; font-size:.8125rem; line-height:1.6; color:var(--muted-foreground);">
      One word fills the screen and becomes the content. Hierarchy is built from type size, weight, and a single hairline — never color.
      <a href="#" style="color:var(--foreground); text-decoration:underline; text-underline-offset:3px;">Read on</a>.
    </p>
  </div>
</section>

<!-- next section: the giant word has moved corner and the previous word crossfades to this one -->
<section style="background:var(--background); color:var(--foreground); font-family:var(--font-sans); min-height:92vh; position:relative; padding:clamp(20px,4vw,64px); box-sizing:border-box; overflow:hidden;">
  <p style="position:absolute; top:clamp(20px,4vw,64px); left:clamp(20px,4vw,64px); margin:0; font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-foreground);">
    02 — Scale
  </p>
  <h1 style="font-family:var(--font-serif); font-weight:600; font-size:clamp(4.5rem,17vw,16rem); line-height:.92; letter-spacing:-.04em; margin:0; position:absolute; right:clamp(20px,4vw,64px); bottom:clamp(20px,4vw,64px); text-align:right;">
    Scale.
  </h1>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/grand-serif-statement.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.