One narrow centered column on a clean canvas. No grid, no dividers, no chrome — the entire rhythm comes from generous vertical spacing between blocks. The most disciplined layout in the catalog.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
What sets a pattern apart from a system: a defined grid, divider rhythm, and section composition. Everything below uses the same tokens that power the kitchen sink — applied to a real page skeleton.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.
1---2name: "Centered Single Column"3description: "One narrow centered column on a clean canvas. No grid, no dividers, no chrome — the entire rhythm comes from generous vertical spacing between blocks. The most disciplined layout in the catalog."4tags: [layout, minimal, centered, "long-read"]5type: pattern6container: centered7content_max_width: 640px8page_padding: 120px9grid:10 columns: 011 max_columns: 012 line_color: transparent13 line_width: 0px14 line_style: solid15 edge_lines: false16sections:17 padding_y: 96px18 divider_color: transparent19 divider_width: 0px20 divider_style: solid21intersections:22 style: none23 color: transparent24 size: 0px25design:26 colors:27 ink: "#1a1614"28 surface: "#fbf8f3"29 accent: "#b8422e"30 muted: "#857d76"31 hairline: "#e8e2d8"32 fonts:33 display: Fraunces34 body: "Source Serif 4"35 mono: "JetBrains Mono"36 radius: 999px37 google_fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&family=JetBrains+Mono:wght@400;500&display=swap"38---39 40# Centered Single Column41 42## AI Build Instructions43 44> **Read this section before writing any code.** The rules below45> are non-negotiable. Every value used in the UI must come from this46> file's frontmatter — never substitute, approximate, or invent new47> colors, fonts, radii, or shadows. If a value is missing, ask the48> user before adding one.49 50### 1 · Your role51 52You are building UI for a project that has adopted **Centered Single Column** as its53design system. Treat `PATTERN.md` as the single source of truth.54Your job is to translate the user's product requirements into55components and pages that look like they were designed by the same56person who authored this file.57 58### 2 · Token compliance59 60- Pull every color, font family, radius, shadow, and spacing value61 from the frontmatter at the top of this file.62- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never63 hard-code hex values that bypass the system.64- When a token can be expressed as a CSS variable, declare it once65 in your global stylesheet and reference it everywhere downstream.66- The Google Fonts `<link>` is provided in the Typography section.67 Add it to `<head>` before any component renders.68 69### 3 · Build recipes70 71#### Page skeleton (the layout contract)72 73- Container: `centered`74- Content max-width: `640px` (typography respects this even when the page is full-bleed).75- Vertical grid: **0 column hairlines**, drawn with `0px solid transparent`.76- Section padding: `96px` top + bottom inside every section.77- Section divider: `0px solid transparent` between sections.78 79#### Primary CTA80 81Exactly **one** primary CTA per page or section. The pattern's discipline depends on this.82 83- Background: `#b8422e` · Color: `#ffffff`84- Padding: `12px 22px` · Weight: `500`85- Shape: `pill` (radius: `999px`)86 87#### Headlines88 89- Family: `Fraunces` · Size: `clamp(2.25rem, 4vw, 3.25rem)` · Leading: `1.06` · Weight: `600`90- Tracking: `-0.02em`91- The pattern's signature: split the headline so the **second clause is italic in the accent color**. Example: "A clearer way to *say less.*"92 93#### Body copy94 95- Family: `Source Serif 4` · Size: `1.0625rem` · Leading: `1.7` · Color: `#857d76`96- Max line length: 60–66 characters. Never let prose stretch the full content width.97 98#### Eyebrows / metadata99 100- Family: `JetBrains Mono` · Size: `0.6875rem` · Letter-spacing: `0.18em`101- Uppercased. Color: `#b8422e`.102 103### 4 · Hard constraints104 105Never do any of the following without explicit instruction from the user:106 107- Introduce a new color, font, radius, or shadow that isn't declared above.108- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).109- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.110- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.111- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.112- Break the layout contract: the column count, divider rhythm, and content max-width are part of the pattern.113 114### 5 · Before you finish — verify115 116Run through this checklist for every screen you produce:117 118- [ ] Every color used appears in the Colors table above.119- [ ] Headlines use the display font; body copy uses the body font.120- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).121- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.122- [ ] Cards and dividers use the declared border + shadow tokens.123- [ ] The page respects the pattern's grid (column count + content max-width).124- [ ] Section dividers use the declared color, width, and style.125- [ ] Exactly one primary CTA per section — never duplicate.126- [ ] No values were invented; if you needed something missing, you stopped and asked.127 128---129 130## Overview131 132The centered single column is the most disciplined layout pattern in the133catalog. One narrow column — 640px max-width — sits centered on the page.134There is no vertical grid, no horizontal divider, no surface fill, no chrome135of any kind. Every block of content (heading, paragraph, image, quote)136stacks vertically with generous space between them. The rhythm of that137spacing is the entire layout.138 139This pattern works because removing every visual scaffold forces the140typography and the spacing to carry the page. If the type scale is wrong or141the vertical spacing is timid, the layout collapses. When both are right, the142result reads as the most premium thing on the screen.143 144## When to use it145 146- Long-form writing: essays, manifestos, announcements, release notes.147- Author pages, single-purpose landing pages, "now" pages.148- Brand stories where the prose is the entire product.149- Documentation index pages (not nested doc bodies — those want marginalia).150 151## When to avoid it152 153- Marketing homepages with multiple parallel arguments — the single column154 cannot carry side-by-side comparison.155- Pricing pages, feature grids, anything that needs columns.156- Dashboards or any application surface.157 158## Do159 160- Hold the column at 600–680px max-width. Past 720px the line length161 becomes uncomfortable; below 560px the prose feels cramped.162- Use 96px+ vertical padding between major sections. The whitespace IS the163 divider.164- Set body line-height to 1.65–1.75. Tight leading kills this layout.165- Allow images and pull-quotes to break out of the column to a wider band166 (~880px) for visual rhythm — but never to full-bleed.167 168## Don't169 170- Don't add any divider — hairline, dotted line, decorative rule, or171 background fill. The discipline IS the brand.172- Don't introduce a second column for sidenotes or asides. Use Marginalia173 Notes if you need that.174- Don't shrink the section padding below 64px. The rhythm dies immediately.175- Don't justify the body text. Left-aligned, ragged right — always.176 177## Notes178 179- Pair with serif body for editorial register, or sans body for modern feel.180 Either works; what matters is that one face carries the entire page.181- The pattern composes with any color system. The canvas should be solid —182 no gradient, no glass, no texture. The page is the type and the space.183- For dates, authors, metadata: stack them above the title in a single184 small line of mono caps — never in a sidebar.185 186---187 188## Tokens189 190> Generated from the same source the live preview renders from.191> Treat the values below as the contract — never substitute approximations.192 193### Container194 195| Property | Value |196|----------|-------|197| container | `centered` |198| contentMaxWidth | `640px` |199| pagePadding | `120px` |200 201### Vertical Grid202 203| Property | Value |204|----------|-------|205| columns | `0` |206| maxColumns | `0` |207| lineColor | `transparent` |208| lineWidth | `0px` |209| lineStyle | `solid` |210| edgeLines | `false` |211 212### Section Dividers213 214| Property | Value |215|----------|-------|216| paddingY | `96px` |217| dividerColor | `transparent` |218| dividerWidth | `0px` |219| dividerStyle | `solid` |220 221### Intersections222 223| Property | Value |224|----------|-------|225| style | `none` |226| color | `transparent` |227| size | `0px` |228 229## Design Identity230 231> This pattern ships with its own typography, color, and CTA tokens.232> Use the values below verbatim — they are the system, not a starting point.233 234### Colors235 236| Token | Value |237|-------|-------|238| ink (primary text) | `#1a1614` |239| surface (page background) | `#fbf8f3` |240| accent (single moment per page) | `#b8422e` |241| muted (metadata, captions) | `#857d76` |242| hairline (rules and dividers) | `#e8e2d8` |243 244### Typography245 246Load via Google Fonts:247 248```html249<link rel="preconnect" href="https://fonts.googleapis.com">250<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>251<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">252```253 254| Role | Family |255|------|--------|256| display (headlines) | `Fraunces` |257| body (prose) | `Source Serif 4` |258| mono (metadata, numerals) | `JetBrains Mono` |259 260### Type Scale261 262| Role | Size | Leading | Weight | Tracking |263|------|------|---------|--------|----------|264| Hero / H1 | `clamp(2.25rem, 4vw, 3.25rem)` | `1.06` | `600` | `-0.02em` |265| Body | `1.0625rem` | `1.7` | `400` | — |266| Eyebrow | `0.6875rem` | — | `500` | `0.18em` |267 268> The hero pairs roman + italic — split the headline so the secondary clause renders italic in the accent color.269 270### Primary CTA271 272| Property | Value |273|----------|-------|274| shape | `pill` |275| background | `#b8422e` |276| color | `#ffffff` |277| padding | `12px 22px` |278| fontWeight | `500` |279| radius | `999px` |280 281> One CTA per page. The pattern's discipline depends on this — never duplicate.282 283---284 285## Reference Implementation286 287Copy-paste-ready HTML + CSS that renders this pattern with the exact token288values declared above. Theme the colors against your system's hairline tone.289 290### HTML291 292```html293<article class="page">294 <header class="block">295 <p class="meta">April 2026 · 6 min read</p>296 <h1>The title sits at the top of the column.</h1>297 </header>298 299 <section class="block">300 <p>The body paragraphs sit in the same 640px column. There is no grid,301 no divider, no chrome of any kind. The vertical spacing between blocks302 carries the entire rhythm of the page.</p>303 304 <p>A second paragraph follows naturally. Line height is generous so the305 prose has air. Left-aligned, ragged right.</p>306 </section>307 308 <section class="block">309 <h2>A subheading.</h2>310 <p>Subheadings get the same column. They use a slightly larger leading311 above to mark the section break — there is no rule, no hairline.</p>312 </section>313 314 <figure class="block break-out">315 <img src="image.jpg" alt="" />316 <figcaption>Images may break out to a wider 880px band, but never to317 full bleed.</figcaption>318 </figure>319</article>320```321 322### CSS323 324```css325:root {326 --col: 640px;327 --break-out: 880px;328 --gap: 96px;329 --gap-tight: 48px;330 --page-pad: 120px;331}332 333.page {334 max-width: var(--col);335 margin: 0 auto;336 padding: var(--page-pad) 24px;337}338 339/* Every block stacks in the same column with generous space between. */340.block + .block {341 margin-top: var(--gap);342}343 344/* Headings get slightly more air above than paragraphs do. */345h1 { font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.1; }346h2 { font-size: 1.5rem; line-height: 1.3; margin-top: var(--gap-tight); }347p { line-height: 1.7; max-width: 100%; }348 349.meta {350 font-family: ui-monospace, "JetBrains Mono", monospace;351 font-size: 0.75rem;352 text-transform: uppercase;353 letter-spacing: 0.10em;354 opacity: 0.55;355 margin-bottom: 16px;356}357 358/* Optional break-out for images and pull-quotes — wider than the column,359 never full-bleed. */360.break-out {361 width: var(--break-out);362 max-width: calc(100vw - 48px);363 margin-left: 50%;364 transform: translateX(-50%);365}366.break-out img { width: 100%; display: block; }367.break-out figcaption {368 font-size: 0.875rem;369 opacity: 0.6;370 margin-top: 12px;371 text-align: center;372}373 374/* Mobile: tighter padding, same single column. */375@media (max-width: 768px) {376 .page { padding: 64px 20px; }377 .block + .block { margin-top: 64px; }378}379```380 <article class="page"> <header class="block"> <p class="meta">April 2026 · 6 min read</p> <h1>The title sits at the top of the column.</h1> </header> <section class="block"> <p>The body paragraphs sit in the same 640px column. There is no grid, no divider, no chrome of any kind. The vertical spacing between blocks carries the entire rhythm of the page.</p> <p>A second paragraph follows naturally. Line height is generous so the prose has air. Left-aligned, ragged right.</p> </section> <section class="block"> <h2>A subheading.</h2> <p>Subheadings get the same column. They use a slightly larger leading above to mark the section break — there is no rule, no hairline.</p> </section> <figure class="block break-out"> <img src="image.jpg" alt="" /> <figcaption>Images may break out to a wider 880px band, but never to full bleed.</figcaption> </figure></article>A narrow left margin carries mono caps section numbers, dates, and inline footnotes alongside a wide reading column. Inspired by scholarly typesetting — perfect for documentation, case studies, and long-form essays.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.
A 12-column bento grid where every module shares the same radius, the same hairline, and the same surface tone. Variation comes only from module size and content — never from styling. The discipline is the design.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.