diff --git a/site/_tests/_thumbs/BananaStudio-loop.mp4 b/site/_tests/_thumbs/BananaStudio-loop.mp4 index 821f243..521bd49 100644 Binary files a/site/_tests/_thumbs/BananaStudio-loop.mp4 and b/site/_tests/_thumbs/BananaStudio-loop.mp4 differ diff --git a/site/_tests/_thumbs/Najm-loop.mp4 b/site/_tests/_thumbs/Najm-loop.mp4 new file mode 100644 index 0000000..e0167fb Binary files /dev/null and b/site/_tests/_thumbs/Najm-loop.mp4 differ diff --git a/site/_tests/_thumbs/Soroe-example.mp4 b/site/_tests/_thumbs/Soroe-example.mp4 deleted file mode 100644 index 0ef7bbc..0000000 Binary files a/site/_tests/_thumbs/Soroe-example.mp4 and /dev/null differ diff --git a/site/_tests/_thumbs/Soroe-loop.mp4 b/site/_tests/_thumbs/Soroe-loop.mp4 new file mode 100644 index 0000000..f09c295 Binary files /dev/null and b/site/_tests/_thumbs/Soroe-loop.mp4 differ diff --git a/site/_tests/_thumbs/after-quiet-hour.png b/site/_tests/_thumbs/after-quiet-hour.png new file mode 100644 index 0000000..00f22ae Binary files /dev/null and b/site/_tests/_thumbs/after-quiet-hour.png differ diff --git a/site/_tests/_thumbs/anya-loop.mp4 b/site/_tests/_thumbs/anya-loop.mp4 new file mode 100644 index 0000000..2e84df3 Binary files /dev/null and b/site/_tests/_thumbs/anya-loop.mp4 differ diff --git a/site/_tests/_thumbs/audit-example.png b/site/_tests/_thumbs/audit-example.png new file mode 100644 index 0000000..817136b Binary files /dev/null and b/site/_tests/_thumbs/audit-example.png differ diff --git a/site/_tests/_thumbs/before-quiet-hour.png b/site/_tests/_thumbs/before-quiet-hour.png new file mode 100644 index 0000000..e1c98a1 Binary files /dev/null and b/site/_tests/_thumbs/before-quiet-hour.png differ diff --git a/site/_tests/_thumbs/uractivation-after-loop.mp4 b/site/_tests/_thumbs/uractivation-after-loop.mp4 index 09b4ac9..09afa6d 100644 Binary files a/site/_tests/_thumbs/uractivation-after-loop.mp4 and b/site/_tests/_thumbs/uractivation-after-loop.mp4 differ diff --git a/site/_tests/_thumbs/wayfare-loop.mp4 b/site/_tests/_thumbs/wayfare-loop.mp4 index 3900a58..641b258 100644 Binary files a/site/_tests/_thumbs/wayfare-loop.mp4 and b/site/_tests/_thumbs/wayfare-loop.mp4 differ diff --git a/site/css/components.css b/site/css/components.css index ee5936e..e9cf992 100644 --- a/site/css/components.css +++ b/site/css/components.css @@ -3274,7 +3274,7 @@ body:not(.easter-open) > footer { letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); - text-align: center; + text-align: start; width: 100%; } @@ -3283,7 +3283,6 @@ body:not(.easter-open) > footer { .foot--colophon { gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-xl); } .foot__masthead { flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding-block-end: var(--space-lg); } .foot__grid { grid-template-columns: 1fr; gap: var(--space-2xl); } - .foot__base { text-align: start; } } /* ───────────── SLOT REVEALS ───────────── diff --git a/site/css/sections.css b/site/css/sections.css index d3d1185..521aac6 100644 --- a/site/css/sections.css +++ b/site/css/sections.css @@ -28,9 +28,13 @@ that forced the section label ("ANTI-PATTERNS") to wrap on themes that needed wider title columns. Section titles can grow bigger now since they have full width. */ -.section__head { +/* Single-column always — label sits ABOVE title across every theme. + No theme override should put the label in a left gutter (caused + uncomfortable wrapping + alignment drift between sections). */ +.section__head, +[data-theme] .section__head { display: grid; - grid-template-columns: 1fr; + grid-template-columns: 1fr !important; gap: var(--space-sm); padding-bottom: var(--section-head-gap); border-bottom: var(--rule-hair) solid var(--color-rule-2); @@ -874,26 +878,6 @@ box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-paper) 25%, transparent); } -/* Per-theme captions on editorial-register themes — small italic-mono - note above the demo, like a foundry plate label. */ -[data-theme="atelier"] .skill-row__demo--build::before, -[data-theme="salon"] .skill-row__demo--build::before, -[data-theme="almanac"] .skill-row__demo--build::before, -[data-theme="studio"] .skill-row__demo--build::before, -[data-theme="sport"] .skill-row__demo--build::before { - display: block; - margin: 0 0 var(--space-xs) 0; - font-family: var(--font-label); - font-size: var(--text-xs); - letter-spacing: var(--tracking-label); - text-transform: uppercase; - color: var(--color-muted); -} -[data-theme="atelier"] .skill-row__demo--build::before { content: "Plate I"; } -[data-theme="salon"] .skill-row__demo--build::before { content: "Specimen — i"; font-style: italic; text-transform: none; letter-spacing: 0; font-family: var(--font-serif); } -[data-theme="almanac"] .skill-row__demo--build::before { content: "Fig. 01 — 2026 ed."; } -[data-theme="studio"] .skill-row__demo--build::before { content: "Frame 01"; } -[data-theme="sport"] .skill-row__demo--build::before { content: "Lap 1"; } /* Row III — Audit demo: a CSS-only inline slop hero. Built deliberately to LOOK like every default AI hero — purple-pink gradient, centered, @@ -1171,6 +1155,109 @@ } } +/* — Before / After Hallmark ———————————————————————————— + Two screenshots side by side — the same prompt, run two ways. The + "before" panel is what Sonnet 4.6 alone produces; the "after" is + the same model with Hallmark loaded. The shared prompt sits above. */ +.ba__prompt { + margin: 0 0 var(--space-2xl); + padding: var(--space-md) var(--space-lg); + background: var(--color-paper-2); + border: var(--rule-hair) solid var(--color-rule); + font-family: var(--font-mono); + font-size: var(--text-sm); + color: var(--color-ink-2); + line-height: 1.4; + font-feature-settings: "tnum"; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + border-radius: var(--radius-input, 0); + max-width: 100%; +} +.ba__prompt-mark { + color: var(--color-accent); + font-weight: 500; + margin-inline-end: 0.5em; +} + +.ba { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: var(--space-xl); +} + +@media (max-width: 56rem) { + .ba { grid-template-columns: 1fr; gap: var(--space-2xl); } +} + +.ba__panel { + margin: 0; + display: grid; + gap: var(--space-md); +} + +.ba__panel-label { + margin: 0; + font-family: var(--font-label); + font-size: var(--text-xs); + letter-spacing: var(--tracking-label); + text-transform: uppercase; + color: var(--color-muted); +} + +.ba__panel-tag { + display: inline-block; + padding: 0.3rem 0.75rem; + border: var(--rule-hair) solid var(--color-rule-2); + border-radius: 999px; + background: var(--color-paper); + color: var(--color-ink-2); + letter-spacing: var(--tracking-label); +} + +.ba__panel-tag--accent { + background: var(--color-ink); + color: var(--color-paper); + border-color: var(--color-ink); +} + +.ba__frame { + display: block; + aspect-ratio: 16 / 10; + overflow: hidden; + border: var(--rule-hair) solid var(--color-rule); + background: var(--color-paper-2); + border-radius: var(--radius-card, 0); +} + +.ba__frame img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: top left; + display: block; +} + +.ba__panel-cap { + margin: 0; + font-family: var(--font-serif); + font-size: var(--text-md); + line-height: var(--lh-snug); + color: var(--color-ink-2); + max-width: 48ch; +} + +[data-theme="brutal"] .ba__panel-cap, +[data-theme="manifesto"] .ba__panel-cap, +[data-theme="terminal"] .ba__panel-cap, +[data-theme="sport"] .ba__panel-cap, +[data-theme="almanac"] .ba__panel-cap, +[data-theme="quiet"] .ba__panel-cap, +[data-theme="bloom"] .ba__panel-cap { + font-family: var(--font-body); +} + /* — 07 · Footer ————————————————————————————————————— */ /* The "Powered by" accent dot — used by the editorial colophon. */ .foot__powered-mark { @@ -1233,9 +1320,6 @@ [data-theme="atelier"] .section + .section { padding-block-start: var(--space-3xl); } -[data-theme="atelier"] .section__pull { - border-block-start: 0; -} [data-theme="atelier"] .section__title { max-width: 22ch; } @@ -1479,24 +1563,13 @@ /* Section heads hang the label in a left gutter, title in the body column. Reads like a printed manuscript margin note + heading. */ [data-theme="linen"] .section__head { - grid-template-columns: 12rem 1fr; - gap: var(--space-md); - align-items: baseline; + grid-template-columns: 1fr; + gap: var(--space-sm); border-bottom: 0; padding-bottom: 0; } [data-theme="linen"] .section__title { margin-bottom: var(--space-2xl); } -[data-theme="linen"] .section-label { - margin-bottom: 0; - align-self: baseline; -} -@media (max-width: 56rem) { - [data-theme="linen"] .section__head { - grid-template-columns: 1fr; - gap: var(--space-sm); - } - [data-theme="linen"] .section-label { margin-bottom: var(--space-sm); } -} +[data-theme="linen"] .section-label { margin-bottom: var(--space-sm); } [data-theme="linen"] .foundations { grid-template-columns: 5fr 7fr; gap: var(--space-xl) var(--space-2xl); @@ -1529,7 +1602,8 @@ html[data-theme="almanac"] body { background: var(--color-paper); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-ink); - grid-template-columns: 8rem 1fr; + grid-template-columns: 1fr; + gap: var(--space-sm); } [data-theme="almanac"] .section__title { font-size: var(--text-xl); } /* Almanac calls itself indexed — push the §-number into every section label. */ @@ -1906,76 +1980,6 @@ html[data-theme="almanac"] body { Italic serif label + arrow, biased left or right per section for rhythm. Hover nudges the arrow forward. Pulls the eye into the next section instead of stopping cold. */ -.section__pull { - display: inline-flex; - align-items: baseline; - gap: 0.5em; - margin-block-start: var(--space-xl); - padding-block: var(--space-sm); - font-family: var(--font-serif); - font-size: var(--text-md); - line-height: 1.2; - color: var(--color-ink-2); - text-decoration: none; - border-block-start: var(--rule-hair) solid var(--color-rule); - width: fit-content; - transition: color var(--dur-micro) var(--ease-out); -} - -.section__pull--right { - margin-inline-start: auto; - text-align: end; -} - -/* Specimen — keep all section pulls flush to the left content edge so - they match the page's other CTAs ("Install", section labels, etc.). */ -[data-theme="specimen"] .section__pull--right { - margin-inline-start: 0; - text-align: start; -} - -.section__pull-arrow { - font-style: normal; - font-weight: 400; - color: var(--color-rule-2); - font-feature-settings: "tnum"; - transition: transform var(--dur-short) var(--ease-out), - color var(--dur-micro) var(--ease-out); -} - -@media (hover: hover) and (pointer: fine) { - .section__pull:hover { color: var(--color-ink); } - .section__pull:hover .section__pull-arrow { - transform: translateX(4px); - color: var(--color-accent); - } -} - -.section__pull:focus-visible { - outline: 2px solid var(--color-focus); - outline-offset: 4px; - color: var(--color-ink); -} - -[data-theme="brutal"] .section__pull, -[data-theme="manifesto"] .section__pull, -[data-theme="terminal"] .section__pull, -[data-theme="sport"] .section__pull, -[data-theme="almanac"] .section__pull, -[data-theme="quiet"] .section__pull, -[data-theme="bloom"] .section__pull { - font-family: var(--font-body); - font-style: normal; - text-transform: uppercase; - font-size: var(--text-sm); - letter-spacing: 0.04em; -} - -[data-theme="terminal"] .section__pull-arrow::before { - content: ">"; - margin-inline-end: 0.4em; - color: var(--color-accent); -} /* — Interlude — full-bleed typographic moment between sections — One declarative phrase set in the active theme's display face, diff --git a/site/css/tokens.css b/site/css/tokens.css index 222cd04..7542908 100644 --- a/site/css/tokens.css +++ b/site/css/tokens.css @@ -45,7 +45,7 @@ --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 2.75rem; - --text-display: clamp(3rem, 5.5vw + 1rem, 5.75rem); + --text-display: clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem); --text-display-s: clamp(2rem, 3vw + 1rem, 3rem); --lh-tight: 1.02; @@ -137,7 +137,7 @@ --display-optical: 144; --display-soft: 0; - --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem); + --text-display: clamp(2.75rem, 5.0vw + 1.0rem, 5.25rem); --text-display-s: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); --tracking-display: -0.03em; @@ -175,7 +175,7 @@ --display-weight: 700; --display-soft: 0; - --text-display: clamp(3.5rem, 8vw + 1rem, 8rem); + --text-display: clamp(3.5rem, 6vw + 1.0rem, 6.5rem); --text-display-s: clamp(2.25rem, 4vw + 1rem, 3.75rem); --text-2xl: 2.75rem; --text-xl: 2rem; @@ -226,7 +226,7 @@ --display-optical: 96; --display-soft: 0; - --text-display: clamp(3.25rem, 6vw + 1rem, 6.5rem); + --text-display: clamp(3.25rem, 6.0vw + 1.0rem, 5.75rem); --text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.5rem); --tracking-display: -0.012em; @@ -272,7 +272,7 @@ --display-style: normal; --display-soft: 0; - --text-display: clamp(3.75rem, 7vw + 1rem, 7.5rem); + --text-display: clamp(3.75rem, 5.5vw + 1.0rem, 6.25rem); --text-display-s: clamp(2.5rem, 4vw + 1rem, 4rem); --tracking-display: -0.018em; @@ -325,7 +325,7 @@ --text-lg: 1.375rem; --text-xl: 1.625rem; --text-2xl: 2rem; - --text-display: clamp(2.75rem, 5vw + 1rem, 5rem); + --text-display: clamp(2.75rem, 5.0vw + 1.0rem, 5.0rem); --text-display-s: clamp(2rem, 3vw + 1rem, 2.875rem); --tracking-display: -0.022em; @@ -367,7 +367,7 @@ --display-weight: 500; --display-style: normal; - --text-display: clamp(2.25rem, 4vw + 1rem, 4rem); + --text-display: clamp(2.25rem, 4.0vw + 1.0rem, 4.0rem); --text-display-s: clamp(1.625rem, 2.25vw + 1rem, 2.5rem); --text-xl: 1.5rem; --text-2xl: 1.875rem; @@ -414,7 +414,7 @@ --display-optical: 96; --display-style: normal; - --text-display: clamp(4rem, 12vw + 1rem, 13rem); + --text-display: clamp(4.0rem, 8vw + 1.0rem, 9rem); --text-display-s: clamp(2.75rem, 6vw + 1rem, 5.5rem); --text-2xl: 3rem; --text-xl: 2rem; @@ -462,7 +462,7 @@ --display-weight: 500; --display-style: normal; - --text-display: clamp(2.25rem, 4vw + 1rem, 4rem); + --text-display: clamp(2.25rem, 4.0vw + 1.0rem, 4.0rem); --text-display-s: clamp(1.625rem, 2.5vw + 1rem, 2.5rem); --text-xl: 1.5rem; --text-2xl: 1.875rem; @@ -513,7 +513,7 @@ --display-weight: 300; --display-style: normal; - --text-display: clamp(3rem, 5.5vw + 1rem, 5.75rem); + --text-display: clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem); --text-display-s: clamp(2rem, 3vw + 1rem, 3rem); --tracking-display: -0.018em; @@ -567,7 +567,7 @@ --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; - --text-display: clamp(2.25rem, 3.5vw + 1rem, 3.75rem); + --text-display: clamp(2.25rem, 3.5vw + 1.0rem, 3.75rem); --text-display-s: clamp(1.5rem, 2vw + 1rem, 2.25rem); --tracking-display: -0.014em; @@ -616,7 +616,7 @@ --display-style: italic; --display-optical: 96; - --text-display: clamp(3.5rem, 8vw + 1rem, 8.5rem); + --text-display: clamp(3.5rem, 6vw + 1.0rem, 6.5rem); --text-display-s: clamp(2.25rem, 4vw + 1rem, 4rem); --text-2xl: 2.5rem; --text-xl: 1.875rem; @@ -673,7 +673,7 @@ --display-style: italic; --display-soft: 30; - --text-display: clamp(3.5rem, 7vw + 1rem, 7.5rem); + --text-display: clamp(3.5rem, 5.5vw + 1.0rem, 6.25rem); --text-display-s: clamp(2.25rem, 4vw + 1rem, 4.25rem); --tracking-display: -0.022em; @@ -715,7 +715,7 @@ --display-weight: 600; --display-style: normal; - --text-display: clamp(3rem, 5.5vw + 1rem, 6rem); + --text-display: clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem); --text-display-s: clamp(2rem, 3vw + 1rem, 3.25rem); --tracking-display: -0.035em; @@ -759,7 +759,7 @@ --display-weight: 800; --display-style: normal; - --text-display: clamp(3.25rem, 7vw + 1rem, 7.25rem); + --text-display: clamp(3.25rem, 5.5vw + 1.0rem, 6.25rem); --text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.75rem); --tracking-display: -0.04em; @@ -806,7 +806,7 @@ --display-style: normal; /* A confident, large display — minimalism with conviction, not timidity. */ - --text-display: clamp(2.5rem, 5vw + 0.5rem, 4.75rem); + --text-display: clamp(2.5rem, 5.0vw + 0.5rem, 4.75rem); --text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem); --text-2xl: clamp(1.75rem, 2vw + 0.5rem, 2.5rem); --text-xl: 1.5rem; @@ -863,7 +863,7 @@ --display-weight: 600; --display-style: normal; - --text-display: clamp(3rem, 6vw + 1rem, 6rem); + --text-display: clamp(3.0rem, 6.0vw + 1.0rem, 5.75rem); --text-display-s: clamp(2rem, 3vw + 1rem, 3.5rem); --tracking-display: -0.035em; @@ -907,7 +907,7 @@ --display-weight: 600; --display-style: normal; - --text-display: clamp(2.5rem, 5vw + 0.5rem, 4.5rem); + --text-display: clamp(2.5rem, 5.0vw + 0.5rem, 4.5rem); --text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem); --tracking-display: -0.025em; @@ -947,7 +947,7 @@ --display-weight: 600; --display-style: normal; - --text-display: clamp(2.5rem, 5.5vw + 0.5rem, 5rem); + --text-display: clamp(2.5rem, 5.5vw + 0.5rem, 5.0rem); --text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem); --tracking-display: -0.035em; @@ -988,7 +988,7 @@ --display-weight: 600; --display-style: normal; - --text-display: clamp(3rem, 6vw + 1rem, 5.75rem); + --text-display: clamp(3.0rem, 6.0vw + 1.0rem, 5.75rem); --text-display-s: clamp(2rem, 3vw + 1rem, 3.5rem); --tracking-display: -0.035em; @@ -1032,7 +1032,7 @@ --display-weight: 600; --display-style: normal; - --text-display: clamp(2.75rem, 5vw + 1rem, 5rem); + --text-display: clamp(2.75rem, 5.0vw + 1.0rem, 5.0rem); --text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem); --tracking-display: -0.03em; @@ -1073,7 +1073,7 @@ --display-weight: 700; --display-style: normal; - --text-display: clamp(2.75rem, 5vw + 0.75rem, 5rem); + --text-display: clamp(2.75rem, 5.0vw + 0.75rem, 5.0rem); --text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem); --tracking-display: -0.025em; @@ -1153,7 +1153,7 @@ --display-weight: 800; --display-style: normal; - --text-display: clamp(2.5rem, 5vw + 0.75rem, 4.75rem); + --text-display: clamp(2.5rem, 5.0vw + 0.75rem, 4.75rem); --text-display-s: clamp(1.875rem, 3vw + 0.5rem, 2.875rem); --tracking-display: -0.04em; /* tight, magazine-shaped */ diff --git a/site/index.html b/site/index.html index dc15dbd..b3dcfea 100644 --- a/site/index.html +++ b/site/index.html @@ -188,79 +188,62 @@
-

$ /hallmark build a creative studio with - playful motion

+

$ /hallmark build a SaaS product page, modern-minimal

-

$ /hallmark build a SaaS product page, - modern-minimal

+

$ /hallmark build a travel booking site, atmospheric

-

$ /hallmark build a travel booking site, - atmospheric

+

$ /hallmark build a small-batch coffee subscription page

-

$ /hallmark build a small-batch coffee - subscription page

+

$ /hallmark build a creative studio with playful motion

-

$ /hallmark build an observability - dashboard, dark

+

$ /hallmark build an observability dashboard, dark

- -

$ /hallmark build a software architect - personal site

+ +

$ /hallmark build a software architect personal site

- -

$ /hallmark build a SOC2 compliance - landing page

+ +

$ /hallmark build a Moroccan fashion brand landing page

- -

$ /hallmark build a cohort-based courses - page, stat-led

+ +

$ /hallmark build a small ceramics studio site

- - See the verbs - - @@ -376,12 +359,11 @@
-
-
Specimen — actual AI slop, untouched
+
- A typical AI-default landing hero — purple-pink gradient, generic headline, gradient pill CTA
@@ -446,7 +428,7 @@
- @@ -458,11 +440,6 @@ - - See the named tells - - - -
+ +

- 06⁄Install + 06⁄Before / After +

+

+ Same prompt. Two different outputs. +

+
+ +

$ /hallmark build a landing page for The Quiet Hour — a weekly natural-wine dispatch from Lisbon

+ +
+
+

Sonnet 4.6, no Hallmark

+ + + Generic AI-default landing page — purple-pink gradient hero, generic 'Discover natural wines' headline, ★★★★★ trust strip, 3-column feature cards + +
Default reach for the gradient. Generic stat strip, made-up Trustpilot rating, "10× faster" feature card.
+
+ +
+

Sonnet 4.6 + Hallmark

+ + + A Hallmark output — editorial Lisbon dispatch, italic Fraunces display, real bottle plate with grape + region + tasting notes, no fabricated proof + +
Marquee Hero · Atelier · italic Fraunces. Real bottle, real grape, real region. No fabricated stats.
+
+
+
+ + +
+
+

+ 07⁄Install

Install. @@ -966,7 +972,7 @@

- Powered by Together AI. MIT licensed. + Made by Together AI. MIT licensed.

diff --git a/skill/references/typography.md b/skill/references/typography.md index 1a0aca1..b245c09 100644 --- a/skill/references/typography.md +++ b/skill/references/typography.md @@ -183,10 +183,12 @@ Pick a ratio. The default for Hallmark work is **1.25** (major third). Build the --text-2xl: 2.4414rem; --text-3xl: 3.0518rem; --text-4xl: 3.8147rem; - --text-display: clamp(3rem, 8vw + 1rem, 8rem); + --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem); } ``` +**Display max — keep it ≤ 5.5rem (88 px).** Above that, hero headlines crowd themselves on 1280–1440 px viewports and require multi-line wrapping that almost always reads as drama, not gravity. Even on Manifesto / Brutal display-heavy themes, cap at 6rem (96 px). The exception is a single-line, single-word display (e.g. a stat) that occupies ≤ 12 ch — it can grow to 7rem. **Default emit format is `clamp(2.75rem, 5vw + 1rem, 5.25rem)`.** + Use no more than five sizes on a single page. If you need more hierarchy, use weight and colour, not another size. ## Weights