design.md
Back to directory
Pattern · layout · editorial · split · asymmetric

Asymmetric Editorial Split.

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.

01 · Preview

The kitchen sink.

Asymmetric.app
ProductPricingDocsAbout
Sign inGet started
layout · editorial · split

Build with Asymmetric Editorial Split.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#0C1A2C
secondary
#6B7585
tertiary
#1F4ED8
neutral
#F7F8FA
surface
#F7F8FA
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
4px
md
8px
lg
12px
pill
999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · Layout

The structural backbone.

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.

Asymmetric.
WorkJournalIndex
layout · editorial

A clearer way to say less.

The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.

6 min · April 2026
01 — Foundation
02 — Rhythm
03 — Restraint
03 · Pro

The production contract.

What a real product needs once the layout ships: scroll behaviour, breakpoint strategy, vertical rhythm rules, accessibility promises — plus the full system tier (states, density, motion, elevation, content, contrast).

ArchetypeAsymmetric split
The promise

Two unequal tracks side-by-side — one carries the argument, the other the evidence.

Scroll behaviour
Parallel scroll

Both tracks scroll together at body cadence. Optional sticky on the narrower track when its content is shorter.

Vertical rhythm
section · desktop
96px between split blocks
section · mobile
64px between stacked blocks
Separator

The gutter IS the divider. No vertical rule between tracks — the asymmetry carries the structure.

Rule

The narrower track is for ONE thing per row: a title, a quote, a stat, an image. Never a paragraph.

Responsive strategy
≥1280
Two columns: ~5/12 + ~7/12, 64px gutter. Optional sticky on the narrow side.
≥1024
Same split, gutter shrinks to 48px. Sticky disabled below 1024.
<1024
Stack vertically. Argument first, evidence second — never reverse.
Accessibility contract
Reading order

DOM order = argument → evidence per row. CSS columns position; they do not reorder.

Landmarks

`<section>` per row pair. Each side gets a meaningful element (`<header>`, `<figure>`, `<aside>`).

Focus flow

Tab follows DOM order, which is reading order. Sticky narrow tracks remain reachable as the body scrolls.

Use when
  • Editorial features
  • Case studies (claim + evidence)
  • Author + work pairings
  • Manifesto + proof
Avoid when
  • App surfaces
  • Anything below 1024px as the primary target
  • Symmetric content (use bento or columns)
04 · The file

PATTERN.md

markdown
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: pattern
6container: "full-bleed"
7content_max_width: 1280px
8page_padding: 0px
9grid:
10  columns:     2
11  max_columns: 2
12  line_color:  "rgba(15, 15, 15, 0.10)"
13  line_width:  1px
14  line_style:  solid
15  edge_lines:  false
16sections:
17  padding_y:      120px
18  divider_color:  "rgba(15, 15, 15, 0.08)"
19  divider_width:  1px
20  divider_style:  solid
21intersections:
22  style: none
23  color: "rgba(15, 15, 15, 0.10)"
24  size:  4px
25design:
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:    Inter
35    mono:    "JetBrains Mono"
36  radius: 8px
37  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 Split
41 
42## AI Build Instructions
43 
44> **Read this section before writing any code.** The rules below
45> are non-negotiable. Every value used in the UI must come from this
46> file's frontmatter — never substitute, approximate, or invent new
47> colors, fonts, radii, or shadows. If a value is missing, ask the
48> user before adding one.
49 
50### 1 · Your role
51 
52You are building UI for a project that has adopted **Asymmetric Editorial Split** as its
53design system. Treat `PATTERN.md` as the single source of truth.
54Your job is to translate the user's product requirements into
55components and pages that look like they were designed by the same
56person who authored this file.
57 
58### 2 · Token compliance
59 
60- Pull every color, font family, radius, shadow, and spacing value
61  from the frontmatter at the top of this file.
62- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
63  hard-code hex values that bypass the system.
64- When a token can be expressed as a CSS variable, declare it once
65  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 recipes
70 
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 CTA
80 
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#### Headlines
88 
89- Family: `Inter Tight` · Size: `clamp(2.5rem, 4.5vw, 3.75rem)` · Leading: `1.02` · Weight: `700`
90- Tracking: `-0.035em`
91 
92#### Body copy
93 
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 / metadata
98 
99- Family: `JetBrains Mono` · Size: `0.6875rem` · Letter-spacing: `0.16em`
100- Uppercased. Color: `#1f4ed8`.
101 
102### 4 · Hard constraints
103 
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 — verify
114 
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## Overview
130 
131The asymmetric editorial split is the oldest layout in print — and still the
132strongest for marketing pages that have something to say. A single vertical
133hairline runs the full page height at the 33.33% mark, dividing every section
134into a narrow left column (metadata, eyebrow, captions, dates) and a wide right
135column (lead headline, body, the actual argument).
136 
137Unlike a symmetric two-column split, the asymmetry forces hierarchy. The
138narrow column reads as instrument panel; the wide column reads as voice. The
139eye lands on the wide column first every time.
140 
141## When to use it
142 
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 wide
146  column carries the feature argument.
147- Article and case-study templates.
148 
149## When to avoid it
150 
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. Stack
154  vertically below 768px and treat the eyebrow as a leading label.
155 
156## Do
157 
158- Anchor the narrow column to the top of every section so the eye scans down a
159  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't
168 
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 continuous
171  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 collapses
174  and the layout reads as a weak two-up.
175 
176## Notes
177 
178- The hairline color should be derived from the foreground at ~10% alpha so it
179  sits inside the system rather than on top of it.
180- Pair with serif display + sans body for maximum editorial register, or with
181  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## Tokens
187 
188> Generated from the same source the live preview renders from.
189> Treat the values below as the contract — never substitute approximations.
190 
191### Container
192 
193| Property | Value |
194|----------|-------|
195| container | `full-bleed` |
196| contentMaxWidth | `1280px` |
197| pagePadding | `0px` |
198 
199### Vertical Grid
200 
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 Dividers
211 
212| Property | Value |
213|----------|-------|
214| paddingY | `120px` |
215| dividerColor | `rgba(15, 15, 15, 0.08)` |
216| dividerWidth | `1px` |
217| dividerStyle | `solid` |
218 
219### Intersections
220 
221| Property | Value |
222|----------|-------|
223| style | `none` |
224| color | `rgba(15, 15, 15, 0.10)` |
225| size | `4px` |
226 
227## Design Identity
228 
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### Colors
233 
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### Typography
243 
244Load via Google Fonts:
245 
246```html
247<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 Scale
259 
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 CTA
267 
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 Implementation
282 
283Copy-paste-ready HTML + CSS that renders this pattern with the exact token
284values declared above. Theme the colors against your system's hairline tone.
285 
286### HTML
287 
288```html
289<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### CSS
317 
318```css
319: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
05 · Reference implementation

Copy-paste ready.

html
<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>
06 · Keep browsing

Try another pattern.

Pattern

Full-bleed Grid with Dividers

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.

layoutgrideditorialminimal
Full-bleed.
WorkJournalIndex
layout · grid

A clearer way to say less.

The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.

6 min · April 2026
01 — Foundation
02 — Rhythm
03 — Restraint
Pattern

Marginalia Notes

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.

layoutdocslong-readeditorial
Marginalia.
WorkJournalIndex
layout · docs

A clearer way to say less.

The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.

6 min · April 2026
01 — Foundation
02 — Rhythm
03 — Restraint