# Big Type Statement 초대형 디스플레이 타이포가 콘텐츠 그 자체 — 음수 자간으로 밀착된 clamp 12vw 글자가 화면을 압도하는 무채 + 강조 1색 스타일. - taxonomy: big-type · big-typography, statement, full-bleed, monochrome, typographic, oversized-display · complexity=low - page types: landing, portfolio, marketing, editorial - best for: 에이전시·스튜디오 포트폴리오, 브랜드 매니페스토·캠페인 랜딩, 한 문장이 주인공인 이벤트·론칭 페이지 - avoid for: 데이터 밀도가 높은 대시보드·관리 도구, 긴 본문 위주의 문서·블로그, 카드 그리드가 필요한 커머스 목록 - provenance: authored (design-diversity 팩 'web-big-type-statement' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # Big Type Statement ## Overview The oversized display type IS the content. A viewport holds only a few words, set in an ultra-condensed heavy face at `clamp(3.5rem, 12vw, 14rem)` with negative tracking so the letters press against each other. Almost no images, no cards, no boxes — a monochrome page with a single orange-red accent, where hierarchy is built entirely from letter size, deliberate cropping, and empty space. The test: "the type overwhelms the screen." ## Colors & Roles Light mode is canonical: `background` off-white (#f4f4f2 → oklch 0.967), `foreground` near-pure black (#0e0e0e → oklch 0.164) for the weight of giant type, `muted-foreground` a warm gray (#7c7c78) for small captions. The single chromatic `accent` is an intense orange-red (#ff3b00 → oklch 0.652/0.236/33.7) — used on 1–2 words or small elements (a highlighted word, a link, a tiny label), never on whole giant headlines. `border` equals `foreground` on purpose: dividers are bold solid rules, not hairlines. Gradients are banned; gradient text is banned. Dark mode is an adaptation of the pack's inverted footer (near-black ground, off-white giant type, orange links) extended to a full scheme. ## Typography Rules - **Display**: `Anton` (Google Fonts; fallback Archivo Black, Impact) — already heavy, so weight stays 400. Statement size `clamp(3.5rem, 12vw, 14rem)`, letter-spacing `-0.04em`, line-height `0.9`. Statements must reach the 10rem+ end of the clamp on desktop. - **H2-level**: `clamp(2rem, 5vw, 4rem)`, line-height 0.95. - **Body**: `Inter` 1.0625rem / 1.6 — kept short; body copy is only a supporting voice for the giant type. - **Caption/label**: 0.8125rem, weight 600, uppercase, letter-spacing `0.08em` — the tiny counterpoint that makes the display feel even bigger. - Giant text often overflows the viewport width and is deliberately cropped at the edges (`overflow: hidden`). ## Layout Principles No grid. Giant text blocks use the full `100vw` with no max-width; only body/caption columns are capped at `680px`. Horizontal padding `clamp(20px, 4vw, 64px)`. Full-bleed sections each occupy at least one viewport (`min-height: 90vh`) filled with giant type, separated by 120px+ of air. Alternate text alignment per section — left, then right, then edge-to-edge — to avoid monotony. ## Depth & Elevation None. Zero shadows, zero gradients, zero glass. The page is flat ink on paper; scale and whitespace do all the work of hierarchy. ## Shapes Radius 0 everywhere. Boxes and cards are barely used at all. Dividers are thick rules (`4px solid` foreground) or simply the empty space between giant text blocks. Images, when unavoidable, are square-cornered, monochrome, and small — an accessory to the type. ## Component Stylings - **Statement (hero)**: off-white ground, `min-height: 95vh`. Left-aligned 2–3 lines of display type overflowing the viewport width; exactly one word in accent orange. One small uppercase caption at the bottom. - **Button**: radius 0, transparent with a bold foreground border or solid foreground fill, uppercase caption type; hover inverts colors over 200ms. - **Link**: body links are underlined; only emphasized links take the accent. Hover = underline or color inversion. - **Divider**: `4px solid` foreground rule — or omit it and let whitespace divide. - **Footer**: full color inversion — near-black ground, off-white giant type (one contact/CTA sentence), orange links. ## Motion Subtle. Base transition `400ms cubic-bezier(0.16, 1, 0.3, 1)`. On scroll, giant text reveals from `translateY(40px)` + opacity 0→1 over 600ms. Hovers underline or invert at 200ms. Slow horizontal drift of giant text on scroll (light parallax) is allowed — as long as it never feels dizzy. ## Do's and Don'ts **Do:** fill each 90vh section with just a few giant words; hit the clamp's 10rem+ ceiling; keep tracking negative and leading at 0.9; alternate alignment per section; crop letters at the viewport edge on purpose; restrict the accent to 1–2 words or tiny labels. **Don't:** use purple/indigo gradients or any gradient text — giant type stays solid black; shrink the statement; center-align every section; fall back to card grids or three-box repetition; use rounded corners, soft shadows, emoji, or blob shapes; fill the screen with images; let body copy grow as long as the display type. ## Responsive Behavior `clamp()` handles most breakpoints by itself. Below 768px, relax the display line-height slightly to 0.95; everything else (padding via `clamp(20px, 4vw, 64px)`, viewport-scaled type) adapts continuously. The intentional edge-cropping should survive on mobile — the type still touches the edges. ## Agent Prompt Guide > Build this in the 'Big Type Statement' style: the oversized display type IS the content — set statements in Anton at clamp(3.5rem, 12vw, 14rem) with letter-spacing -0.04em and line-height 0.9, a few words per viewport, each section min-height 90vh with 120px+ gaps; near-black on off-white with exactly one orange-red accent limited to 1-2 words or tiny uppercase labels; no cards, no grids, zero border-radius, zero shadows, dividers only as 4px solid rules; alternate text alignment per section, crop letters at the viewport edge via overflow:hidden, and invert to a dark footer with off-white giant type. ## Known Gaps / Confidence Adapted from the MIT-licensed design-diversity pack `web-big-type-statement` (authored spec, not measured from a live site) — all confidence fields are `manual`. Light mode is canonical per the pack's tokens.json; the dark map extrapolates the pack's inverted-footer treatment, with intermediate neutrals (secondary/popover steps) derived rather than sourced. Fonts are open Google Fonts (Anton, Inter), so no commercial substitution is needed. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Big Type Statement — theme.css (generated, do not edit) */ :root { --radius: 0px; --radius-selector: 0px; --radius-field: 0px; --font-sans: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-display: 'Anton', 'Archivo Black', Impact, sans-serif; --spacing: 8px; --shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent); --ks-display-weight: 400; --ks-display-tracking: -0.04em; --background: oklch(0.967 0.003 106.4); --foreground: oklch(0.164 0 0); --card: oklch(0.967 0.003 106.4); --card-foreground: oklch(0.164 0 0); --popover: oklch(0.967 0.003 106.4); --popover-foreground: oklch(0.164 0 0); --primary: oklch(0.164 0 0); --primary-foreground: oklch(0.967 0.003 106.4); --secondary: oklch(0.93 0.003 106.4); --secondary-foreground: oklch(0.164 0 0); --muted: oklch(0.93 0.003 106.4); --muted-foreground: oklch(0.585 0.006 106.6); --accent: oklch(0.652 0.236 33.7); --accent-foreground: oklch(0.967 0.003 106.4); --destructive: oklch(0.652 0.236 33.7); --destructive-foreground: oklch(0.967 0.003 106.4); --border: oklch(0.164 0 0); --input: oklch(0.164 0 0); --ring: oklch(0.164 0 0); --chart-1: oklch(0.164 0 0); --chart-2: oklch(0.652 0.236 33.7); --chart-3: oklch(0.585 0.006 106.6); --chart-4: oklch(0.78 0.004 106.4); --chart-5: oklch(0.40 0.003 106.4); } .dark { --background: oklch(0.164 0 0); --foreground: oklch(0.967 0.003 106.4); --card: oklch(0.164 0 0); --card-foreground: oklch(0.967 0.003 106.4); --popover: oklch(0.21 0.002 106.4); --popover-foreground: oklch(0.967 0.003 106.4); --primary: oklch(0.967 0.003 106.4); --primary-foreground: oklch(0.164 0 0); --secondary: oklch(0.25 0.002 106.4); --secondary-foreground: oklch(0.967 0.003 106.4); --muted: oklch(0.25 0.002 106.4); --muted-foreground: oklch(0.66 0.006 106.6); --accent: oklch(0.652 0.236 33.7); --accent-foreground: oklch(0.164 0 0); --destructive: oklch(0.652 0.236 33.7); --destructive-foreground: oklch(0.164 0 0); --border: oklch(0.967 0.003 106.4); --input: oklch(0.967 0.003 106.4); --ring: oklch(0.967 0.003 106.4); --chart-1: oklch(0.967 0.003 106.4); --chart-2: oklch(0.652 0.236 33.7); --chart-3: oklch(0.66 0.006 106.6); --chart-4: oklch(0.45 0.003 106.4); --chart-5: oklch(0.82 0.004 106.4); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html
Studio Statement Est. 2026 — Seoul

Type is the only content.

A few words per viewport. No cards, no grids, no decoration — hierarchy is letter size, crop, and air.

Scroll
``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/big-type-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 `