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.
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: "Marginalia Notes"3description: "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."4tags: [layout, docs, "long-read", editorial]5type: pattern6container: centered7content_max_width: 1080px8page_padding: 64px9grid:10 columns: 211 max_columns: 212 line_color: "rgba(15, 15, 15, 0.06)"13 line_width: 1px14 line_style: solid15 edge_lines: false16sections:17 padding_y: 72px18 divider_color: "rgba(15, 15, 15, 0.06)"19 divider_width: 1px20 divider_style: solid21intersections:22 style: none23 color: "rgba(15, 15, 15, 0.10)"24 size: 4px25design:26 colors:27 ink: "#1c1815"28 surface: "#f5efe4"29 accent: "#9a3a1a"30 muted: "#7a7068"31 hairline: "#ddd4c5"32 fonts:33 display: "Source Serif 4"34 body: "Source Serif 4"35 mono: "JetBrains Mono"36 radius: 2px37 google_fonts_url: "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=JetBrains+Mono:wght@400;500&display=swap"38---39 40# Marginalia Notes41 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 **Marginalia Notes** 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: `1080px` (typography respects this even when the page is full-bleed).75- Vertical grid: **2 column hairlines** (capped at 2 on wide viewports), drawn with `1px solid rgba(15, 15, 15, 0.06)`.76- Section padding: `72px` top + bottom inside every section.77- Section divider: `1px solid rgba(15, 15, 15, 0.06)` between sections.78 79#### Primary CTA80 81Exactly **one** primary CTA per page or section. The pattern's discipline depends on this.82 83- Background: `#1c1815` · Color: `#f5efe4`84- Padding: `10px 20px` · Weight: `500`85- Shape: `rounded` (radius: `2px`)86 87#### Headlines88 89- Family: `Source Serif 4` · Size: `clamp(2rem, 3.5vw, 2.75rem)` · Leading: `1.12` · Weight: `600`90- Tracking: `-0.015em`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: `1rem` · Leading: `1.7` · Color: `#7a7068`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.14em`101- Uppercased. Color: `#9a3a1a`.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 132Marginalia Notes borrows from scholarly typesetting: a narrow column on the133left carries mono caps section numbers, dates, source references, and short134inline footnotes; the wide column on the right carries the reading material.135The two columns share a baseline grid so that every margin annotation aligns136to the heading or paragraph it annotates.137 138Unlike the Asymmetric Split, this pattern has no hairline between columns —139the separation is purely typographic. The mono caps in the margin do all the140work; they read as instrument labels next to the prose.141 142## When to use it143 144- Documentation pages, technical references, API docs.145- Long-form essays and case studies where source citations and side notes146 belong next to the paragraph rather than at the end.147- Changelogs where each entry needs a date stamp in the margin.148- Brand stories and manifestos that benefit from a "studied" feel.149 150## When to avoid it151 152- Marketing landing pages where the lead needs the full width.153- Pages without a strong reason to use the margin — empty marginalia reads as154 a layout mistake.155- Mobile views below 768px. Collapse to a single column and inline the margin156 notes as small caps eyebrows above each paragraph.157 158## Do159 160- Use mono caps at 0.10–0.12em tracking for every margin label. The caps voice161 is the entire visual signature.162- Keep the reading column line length between 60–75ch. The pattern only works163 if the prose is comfortable to read.164- Align margin notes to the top of the paragraph they reference, never165 centered vertically.166- Use margin labels for: section numbers (01, 02), dates, source refs,167 glossary terms, footnote markers.168 169## Don't170 171- Don't put paragraphs of body copy in the margin. Maximum 2 lines per note.172- Don't draw a hairline between the columns. The separation is typographic.173- Don't mix mono caps with sans caps in the margin — pick one and hold it.174- Don't let the margin column exceed 220px. Past that, the wide column175 narrows past comfortable reading width.176 177## Notes178 179- Pair with a serif body face for the strongest scholarly register, or with a180 modern sans for documentation feel.181- The mono in the margin should be the same family used everywhere else mono182 appears in the system — consistency is what makes the marginalia read as183 intentional rather than decorative.184- The pattern composes with any color system; use foreground at ~50% alpha185 for the margin labels so they recede from the prose.186 187---188 189## Tokens190 191> Generated from the same source the live preview renders from.192> Treat the values below as the contract — never substitute approximations.193 194### Container195 196| Property | Value |197|----------|-------|198| container | `centered` |199| contentMaxWidth | `1080px` |200| pagePadding | `64px` |201 202### Vertical Grid203 204| Property | Value |205|----------|-------|206| columns | `2` |207| maxColumns | `2` |208| lineColor | `rgba(15, 15, 15, 0.06)` |209| lineWidth | `1px` |210| lineStyle | `solid` |211| edgeLines | `false` |212 213### Section Dividers214 215| Property | Value |216|----------|-------|217| paddingY | `72px` |218| dividerColor | `rgba(15, 15, 15, 0.06)` |219| dividerWidth | `1px` |220| dividerStyle | `solid` |221 222### Intersections223 224| Property | Value |225|----------|-------|226| style | `none` |227| color | `rgba(15, 15, 15, 0.10)` |228| size | `4px` |229 230## Design Identity231 232> This pattern ships with its own typography, color, and CTA tokens.233> Use the values below verbatim — they are the system, not a starting point.234 235### Colors236 237| Token | Value |238|-------|-------|239| ink (primary text) | `#1c1815` |240| surface (page background) | `#f5efe4` |241| accent (single moment per page) | `#9a3a1a` |242| muted (metadata, captions) | `#7a7068` |243| hairline (rules and dividers) | `#ddd4c5` |244 245### Typography246 247Load via Google Fonts:248 249```html250<link rel="preconnect" href="https://fonts.googleapis.com">251<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>252<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">253```254 255| Role | Family |256|------|--------|257| display (headlines) | `Source Serif 4` |258| body (prose) | `Source Serif 4` |259| mono (metadata, numerals) | `JetBrains Mono` |260 261### Type Scale262 263| Role | Size | Leading | Weight | Tracking |264|------|------|---------|--------|----------|265| Hero / H1 | `clamp(2rem, 3.5vw, 2.75rem)` | `1.12` | `600` | `-0.015em` |266| Body | `1rem` | `1.7` | `400` | — |267| Eyebrow | `0.6875rem` | — | `500` | `0.14em` |268 269> The hero pairs roman + italic — split the headline so the secondary clause renders italic in the accent color.270 271### Primary CTA272 273| Property | Value |274|----------|-------|275| shape | `rounded` |276| background | `#1c1815` |277| color | `#f5efe4` |278| padding | `10px 20px` |279| fontWeight | `500` |280| radius | `2px` |281 282> One CTA per page. The pattern's discipline depends on this — never duplicate.283 284---285 286## Reference Implementation287 288Copy-paste-ready HTML + CSS that renders this pattern with the exact token289values declared above. Theme the colors against your system's hairline tone.290 291### HTML292 293```html294<article class="doc">295 <section class="block">296 <aside class="margin">297 <p class="label">01 — Intro</p>298 <p class="date">Apr 2026</p>299 </aside>300 <div class="prose">301 <h1>The reading column carries the lead.</h1>302 <p>Body paragraphs stay between 60 and 75 characters per line. The margin303 column on the left carries section numbers, dates, and short inline304 footnotes that align to the paragraph they annotate.</p>305 </div>306 </section>307 308 <section class="block">309 <aside class="margin">310 <p class="label">02 — Detail</p>311 <p class="note">See: §3.4 of the spec for the canonical algorithm.</p>312 </aside>313 <div class="prose">314 <h2>Subsection heading.</h2>315 <p>Margin notes never exceed two short lines. Anything longer belongs in316 the prose itself.</p>317 </div>318 </section>319</article>320```321 322### CSS323 324```css325:root {326 --content-max: 1080px;327 --margin-w: 180px;328 --gap: 48px;329 --divider: rgba(15, 15, 15, 0.06);330 --margin-fg: rgba(15, 15, 15, 0.55);331}332 333.doc {334 max-width: var(--content-max);335 margin: 0 auto;336 padding: 64px 32px;337}338 339/* Two-column block: narrow margin + wide prose. No hairline between them. */340.block {341 display: grid;342 grid-template-columns: var(--margin-w) 1fr;343 column-gap: var(--gap);344 padding: 72px 0;345 border-bottom: 1px solid var(--divider);346}347 348/* Margin column — mono caps voice for every label. */349.margin {350 font-family: ui-monospace, "JetBrains Mono", monospace;351 font-size: 0.75rem;352 color: var(--margin-fg);353 line-height: 1.5;354}355.margin .label {356 text-transform: uppercase;357 letter-spacing: 0.12em;358 margin-bottom: 6px;359}360.margin .date,361.margin .note {362 font-size: 0.6875rem;363}364 365/* Reading column — comfortable line length. */366.prose {367 max-width: 65ch;368}369.prose h1 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; }370.prose h2 { font-size: 1.5rem; line-height: 1.3; }371.prose p { line-height: 1.7; }372 373/* Mobile: collapse to single column, margin labels become eyebrows. */374@media (max-width: 768px) {375 .block {376 grid-template-columns: 1fr;377 row-gap: 12px;378 padding: 48px 0;379 }380 .margin .date,381 .margin .note { display: none; }382}383```384 <article class="doc"> <section class="block"> <aside class="margin"> <p class="label">01 — Intro</p> <p class="date">Apr 2026</p> </aside> <div class="prose"> <h1>The reading column carries the lead.</h1> <p>Body paragraphs stay between 60 and 75 characters per line. The margin column on the left carries section numbers, dates, and short inline footnotes that align to the paragraph they annotate.</p> </div> </section> <section class="block"> <aside class="margin"> <p class="label">02 — Detail</p> <p class="note">See: §3.4 of the spec for the canonical algorithm.</p> </aside> <div class="prose"> <h2>Subsection heading.</h2> <p>Margin notes never exceed two short lines. Anything longer belongs in the prose itself.</p> </div> </section></article>Vertical column hairlines that span the entire viewport height, paired with horizontal section dividers. Content sits inside a centered max-width while the grid lives in the page background.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.
A 1/3 + 2/3 vertical split with a single hairline running the full page height. The narrow column carries metadata and eyebrow type; the wide column carries the lead. Classic magazine architecture for landing pages.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.