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.
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: "Asymmetric Editorial Split"3description: "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."4tags: [layout, editorial, split, asymmetric]5type: pattern6container: "full-bleed"7content_max_width: 1280px8page_padding: 0px9grid:10 columns: 211 max_columns: 212 line_color: "rgba(15, 15, 15, 0.10)"13 line_width: 1px14 line_style: solid15 edge_lines: false16sections:17 padding_y: 120px18 divider_color: "rgba(15, 15, 15, 0.08)"19 divider_width: 1px20 divider_style: solid21intersections:22 style: none23 color: "rgba(15, 15, 15, 0.10)"24 size: 4px25design:26 colors:27 ink: "#0c1a2c"28 surface: "#f7f8fa"29 accent: "#1f4ed8"30 muted: "#6b7585"31 hairline: "#e3e6ec"32 fonts:33 display: "Inter Tight"34 body: Inter35 mono: "JetBrains Mono"36 radius: 8px37 google_fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"38---39 40# Asymmetric Editorial Split41 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 **Asymmetric Editorial Split** 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: `full-bleed`74- Content max-width: `1280px` (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.10)`.76- Section padding: `120px` top + bottom inside every section.77- Section divider: `1px solid rgba(15, 15, 15, 0.08)` between sections.78 79#### Primary CTA80 81Exactly **one** primary CTA per page or section. The pattern's discipline depends on this.82 83- Background: `#0c1a2c` · Color: `#ffffff`84- Padding: `12px 24px` · Weight: `600`85- Shape: `rounded` (radius: `8px`)86 87#### Headlines88 89- Family: `Inter Tight` · Size: `clamp(2.5rem, 4.5vw, 3.75rem)` · Leading: `1.02` · Weight: `700`90- Tracking: `-0.035em`91 92#### Body copy93 94- Family: `Inter` · Size: `1rem` · Leading: `1.6` · Color: `#6b7585`95- Max line length: 60–66 characters. Never let prose stretch the full content width.96 97#### Eyebrows / metadata98 99- Family: `JetBrains Mono` · Size: `0.6875rem` · Letter-spacing: `0.16em`100- Uppercased. Color: `#1f4ed8`.101 102### 4 · Hard constraints103 104Never do any of the following without explicit instruction from the user:105 106- Introduce a new color, font, radius, or shadow that isn't declared above.107- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).108- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.109- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.110- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.111- Break the layout contract: the column count, divider rhythm, and content max-width are part of the pattern.112 113### 5 · Before you finish — verify114 115Run through this checklist for every screen you produce:116 117- [ ] Every color used appears in the Colors table above.118- [ ] Headlines use the display font; body copy uses the body font.119- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).120- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.121- [ ] Cards and dividers use the declared border + shadow tokens.122- [ ] The page respects the pattern's grid (column count + content max-width).123- [ ] Section dividers use the declared color, width, and style.124- [ ] Exactly one primary CTA per section — never duplicate.125- [ ] No values were invented; if you needed something missing, you stopped and asked.126 127---128 129## Overview130 131The asymmetric editorial split is the oldest layout in print — and still the132strongest for marketing pages that have something to say. A single vertical133hairline runs the full page height at the 33.33% mark, dividing every section134into a narrow left column (metadata, eyebrow, captions, dates) and a wide right135column (lead headline, body, the actual argument).136 137Unlike a symmetric two-column split, the asymmetry forces hierarchy. The138narrow column reads as instrument panel; the wide column reads as voice. The139eye lands on the wide column first every time.140 141## When to use it142 143- Editorial landing pages where copy is the protagonist.144- Long-form launches, manifestos, brand pages.145- Pricing pages where the narrow column carries plan name + price and the wide146 column carries the feature argument.147- Article and case-study templates.148 149## When to avoid it150 151- Dashboards or app surfaces — the asymmetry wastes screen real estate.152- Heavily illustrated pages where each section needs the full bleed.153- Mobile-first builds where the 1/3 column collapses to nothing useful. Stack154 vertically below 768px and treat the eyebrow as a leading label.155 156## Do157 158- Anchor the narrow column to the top of every section so the eye scans down a159 consistent spine.160- Use the narrow column for typographic discipline: eyebrow caps, dates,161 authors, section numbers, mono labels.162- Keep the hairline at 8–12% foreground alpha so it reads as architecture,163 never as a border.164- Allow the wide column to break the grid for hero imagery or pull-quotes —165 the asymmetry tolerates one bold violation per page.166 167## Don't168 169- Don't put body paragraphs in the narrow column. The line length is wrong.170- Don't move the split line between sections — it must be a single continuous171 hairline from the top of the page to the bottom.172- Don't add a second vertical hairline. The whole point is the single split.173- Don't widen the narrow column past 40%. Past that, the hierarchy collapses174 and the layout reads as a weak two-up.175 176## Notes177 178- The hairline color should be derived from the foreground at ~10% alpha so it179 sits inside the system rather than on top of it.180- Pair with serif display + sans body for maximum editorial register, or with181 sans display + mono captions for a quieter modern feel.182- The pattern is composable with any color system in the catalog.183 184---185 186## Tokens187 188> Generated from the same source the live preview renders from.189> Treat the values below as the contract — never substitute approximations.190 191### Container192 193| Property | Value |194|----------|-------|195| container | `full-bleed` |196| contentMaxWidth | `1280px` |197| pagePadding | `0px` |198 199### Vertical Grid200 201| Property | Value |202|----------|-------|203| columns | `2` |204| maxColumns | `2` |205| lineColor | `rgba(15, 15, 15, 0.10)` |206| lineWidth | `1px` |207| lineStyle | `solid` |208| edgeLines | `false` |209 210### Section Dividers211 212| Property | Value |213|----------|-------|214| paddingY | `120px` |215| dividerColor | `rgba(15, 15, 15, 0.08)` |216| dividerWidth | `1px` |217| dividerStyle | `solid` |218 219### Intersections220 221| Property | Value |222|----------|-------|223| style | `none` |224| color | `rgba(15, 15, 15, 0.10)` |225| size | `4px` |226 227## Design Identity228 229> This pattern ships with its own typography, color, and CTA tokens.230> Use the values below verbatim — they are the system, not a starting point.231 232### Colors233 234| Token | Value |235|-------|-------|236| ink (primary text) | `#0c1a2c` |237| surface (page background) | `#f7f8fa` |238| accent (single moment per page) | `#1f4ed8` |239| muted (metadata, captions) | `#6b7585` |240| hairline (rules and dividers) | `#e3e6ec` |241 242### Typography243 244Load via Google Fonts:245 246```html247<link rel="preconnect" href="https://fonts.googleapis.com">248<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>249<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">250```251 252| Role | Family |253|------|--------|254| display (headlines) | `Inter Tight` |255| body (prose) | `Inter` |256| mono (metadata, numerals) | `JetBrains Mono` |257 258### Type Scale259 260| Role | Size | Leading | Weight | Tracking |261|------|------|---------|--------|----------|262| Hero / H1 | `clamp(2.5rem, 4.5vw, 3.75rem)` | `1.02` | `700` | `-0.035em` |263| Body | `1rem` | `1.6` | `400` | — |264| Eyebrow | `0.6875rem` | — | `600` | `0.16em` |265 266### Primary CTA267 268| Property | Value |269|----------|-------|270| shape | `rounded` |271| background | `#0c1a2c` |272| color | `#ffffff` |273| padding | `12px 24px` |274| fontWeight | `600` |275| radius | `8px` |276 277> One CTA per page. The pattern's discipline depends on this — never duplicate.278 279---280 281## Reference Implementation282 283Copy-paste-ready HTML + CSS that renders this pattern with the exact token284values declared above. Theme the colors against your system's hairline tone.285 286### HTML287 288```html289<div class="page">290 <!-- Single hairline at the 1/3 mark, full viewport height -->291 <div class="split-line" aria-hidden="true"></div>292 293 <header class="section">294 <aside class="col-narrow">295 <p class="eyebrow">01 — Intro</p>296 <p class="meta">April 2026 · 4 min read</p>297 </aside>298 <div class="col-wide">299 <h1>The argument starts here.</h1>300 <p>Lead paragraph in the wide column. The narrow column carries metadata.</p>301 </div>302 </header>303 304 <section class="section">305 <aside class="col-narrow">306 <p class="eyebrow">02 — Detail</p>307 </aside>308 <div class="col-wide">309 <h2>Section heading.</h2>310 <p>Body copy lives in the wide column only.</p>311 </div>312 </section>313</div>314```315 316### CSS317 318```css319:root {320 --content-max: 1280px;321 --split-line: rgba(15, 15, 15, 0.10);322 --divider: rgba(15, 15, 15, 0.08);323 --section-y: 120px;324 --gap: 48px;325}326 327.page { position: relative; min-height: 100vh; }328 329/* Single full-height hairline at 33.33%. */330.split-line {331 position: absolute;332 top: 0; bottom: 0;333 left: 33.3333%;334 width: 1px;335 background: var(--split-line);336 pointer-events: none;337 z-index: 0;338}339 340/* Sections are two-column grids that align to the split line. */341.section {342 position: relative;343 z-index: 1;344 display: grid;345 grid-template-columns: 1fr 2fr;346 column-gap: var(--gap);347 max-width: var(--content-max);348 margin: 0 auto;349 padding: var(--section-y) 32px;350 border-bottom: 1px solid var(--divider);351}352 353.col-narrow {354 /* Metadata, eyebrows, captions only — never body copy. */355 font-size: 0.8125rem;356}357.eyebrow {358 text-transform: uppercase;359 letter-spacing: 0.10em;360 font-family: ui-monospace, "JetBrains Mono", monospace;361}362 363.col-wide h1 { font-size: clamp(2.25rem, 4vw, 4rem); line-height: 1.05; }364.col-wide p { max-width: 64ch; line-height: 1.65; }365 366/* Mobile: collapse to a single column, eyebrow becomes a leading label. */367@media (max-width: 768px) {368 .split-line { display: none; }369 .section {370 grid-template-columns: 1fr;371 row-gap: 16px;372 padding: 64px 24px;373 }374}375```376 <div class="page"> <!-- Single hairline at the 1/3 mark, full viewport height --> <div class="split-line" aria-hidden="true"></div> <header class="section"> <aside class="col-narrow"> <p class="eyebrow">01 — Intro</p> <p class="meta">April 2026 · 4 min read</p> </aside> <div class="col-wide"> <h1>The argument starts here.</h1> <p>Lead paragraph in the wide column. The narrow column carries metadata.</p> </div> </header> <section class="section"> <aside class="col-narrow"> <p class="eyebrow">02 — Detail</p> </aside> <div class="col-wide"> <h2>Section heading.</h2> <p>Body copy lives in the wide column only.</p> </div> </section></div>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.
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.