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