Typefaces next/font — no external requests, subsetting/preload. Starter: next/font/google in layout.tsx → CSS variables on <html>.
Geist (example) Example sans + mono roles — Geist for body/CMS titles, Geist Mono for headings, buttons, tags, inline emphasis. --font-family-sans / --font-family-mono → @theme → font-text / font-mono. Swap Google families in layout.tsx only.
Self-hosting WOFF2 in web/src/assets/fonts/, next/font/local, same variable names — utilities, rich text, Studio previews unchanged. See web/src/assets/fonts/README.md.
Type scale Seven token steps (xs–xl). RT headings use md–3lg utilities (heading-1 … heading-4, big-text, text) — not xl.
Fluid Below lg (1440px): 16px root, fixed tokens. From lg: larger tokens + html { clamp(1rem, 1.111111vw, 1.5rem) } — root 16–24px fluid. Intentional step at 1440px.
Font sizes (token → utility) — left < lg, right ≥ lg; from lg also fluid, effective px may exceed table.
- xs — 10 / lh 12.5 —
tag(constant) - sm — 10→12 / lh 12.5→15 —
text-small - md — 14→16 / lh 18.9→21.6 —
text,text-button - lg — 18→20 / lh 24.3→27 —
quote-paragraph,big-text,heading-3(RT H3, mono semibold) - 2lg — 24→26 / lh 32.4→35.1 —
heading-2(RT H2, sans) - 3lg — 28→42 / lh 37.8→56.7 —
heading-1(RT H1),page-title,content-title(sans) - xl — 51→96 / lh 68.85→129.6 — token only (not used by current RT utilities)
Rich text richTextMedia → RichTextMedia, .rich-text. Studio: portableTextStylePreviews.css.
Styles (Studio → frontend)
Studio labels in portableTextStyles map to @utility classes in RichTextMedia (see typography.css comments).
- normal (Text md) →
text—<p>, md - bigText (Big text lg) →
big-text—<p>, lg - h1 (Heading 1, 3lg) →
heading-1—<h2>(not page<h1>), 3lg - h2 (Heading 2, 2lg) →
heading-2—<h2>, 2lg - h3 (Heading 3, lg) →
heading-3—<h3>, lg - h4 (Heading 4, md) →
heading-4—<h4>, md
Other elements — blockquote quote-paragraph (lg, sans italic) · lists md · body strong/em → Geist Mono semibold · heading strong/em inherit · code code-inline · link link/linkResolver · embeds module.media/module.carousel (.rich-text-embed) · spacing --space-* · plain richText in schema, not wired in frontend yet.
Portable Text editor richTextMedia / internationalizedArrayRichTextMedia (e.g. module.text). Live font previews.
Editor: block styles (md–xl) · lists · strong/em/code · links (internal/external/cookie) · insert module.media, module.carousel.
Stack vs. editor: four modules total; body embeds media + carousel only. Text + Content Refs in modules[] stack.
Dark mode — toggle sets data-theme on <html>; no prefers-color-scheme. Boot script in layout.tsx before paint. @custom-variant dark in theme.css aligns Tailwind dark: with the same attribute.
Breakpoints — xs 780px … wide 2000px in breakpoints.css @theme; drives md:, lg:, etc. Custom variants: portrait, landscape, touch-coarse, fine-pointer, tall, short-viewport.
Variable fonts — optional. Axes wght/wdth/slnt/opsz/GRAD; headline opsz 24→28→32→36.