Design System / 04
Fluid safe-area gutters, fixed reading measures, hairline structure, asymmetric grids, and mobile source order define the page frame.
Page gutter
--gutter-fluid · 20px at the phone floor → 40px at the desktop cap
Safe-area gutter
max(--gutter-fluid, env(safe-area-inset-left/right))
Responsive hinge
md · 768px; compositions stack below it in source order
Section measures
prose 68ch · default 1200px · wide 1440px · full uncapped
Radius
0 for brand surfaces; circles are reserved for circular controls and data marks
Hairlines
--hairline 1px · --hairline-fine 0.5px · --border-interactive 1.5px
Editorial grids
--grid-editorial-a 1fr 1.5fr 0.5fr · -b 0.75fr 1.5fr 0.75fr · --grid-index 1fr 5.75fr
Flush gutter
--gap-flush 3px for image mosaics
Stack gaps
flush 3px · xs 6px · sm 12px · md 24px · lg 48px
Vertical rhythm
--rhythm-sm 7.5svh · -md 10svh · -lg 15svh for hero/section spacing
Grid, gutter, hairline, and rhythm values are defined in tokens.css. The rhythm tiers use small-viewport units (svh), not vh.
--grid-editorial-a · 1fr 1.5fr 0.5fr
--grid-editorial-b · 0.75fr 1.5fr 0.75fr
--grid-index · 1fr 5.75fr
These diagrams stack below the md hinge. The tokens themselves are unresponsive values; consumers choose when to apply their ratio.
--rhythm-sm · 7.5svh
--rhythm-md · 10svh
--rhythm-lg · 15svh
Small-viewport units (svh, not vh) keep mobile browser chrome from reflowing the hero as the address bar hides and shows.
Technical detail
20px to 40px, and yields to display safe areas when they are larger.--gutter-fluid · 1.25–2.5rem
Section measure ladder
--gap-flush · 3px
Technical detail
1px hairline for primary rules and separators.0.5px rule, quieter for dense directories.1.5px token.--hairline · 1px
Structural rules: table rows, section tops, card borders.
--hairline-fine · 0.5px
The finer rule: news-card tops and dense directory rows.
A flex layout primitive that constrains spacing to the system scale — from the 3px mosaic gutter to the viewport-relative rhythm tiers. It spaces children and does nothing else.
Rendered output
Column · gap="sm"
Row · justify="between"
Inputs, types, and behavior
Sections that pin and stack as you scroll. Each panel slides over the last with an escalating z-index and a hairline top rule. Pure CSS positioning, no script — scroll the demo to see the panels stack.
Rendered output
Each panel pins at the shared top offset and is buried by the next on escalating z-index — pure CSS, no script.
Each panel pins at the shared top offset and is buried by the next on escalating z-index — pure CSS, no script.
Each panel pins at the shared top offset and is buried by the next on escalating z-index — pure CSS, no script.
Inputs, types, and behavior
A media-led hero on the editorial grid; an opaque paper caption keeps the title readable without making assumptions about the image.
Layout recipe · Media led
<div className="relative overflow-hidden">
<img alt="…" className="aspect-[16/9] w-full object-cover" src="/hero.jpg" />
<div className="absolute inset-x-0 bottom-0 grid bg-c-white p-6 text-c-black
md:grid-cols-[1fr_1.5fr_0.5fr]">
<div className="md:col-start-1 md:col-end-3">
<p className="font-mono text-[0.62rem] uppercase text-c-black/60">Issue 01</p>
<h1 className="text-[clamp(1.4rem,4vw,2.6rem)] uppercase leading-[0.95]">
Image with anchored copy
</h1>
</div>
</div>
</div>A two-column article header: headline left, dek and meta in the wider right column on the 0.9fr / 1.1fr split.
Feature · Neutral specimen
The dek sits in the wider right column, just below the headline baseline — a two-column article header on the editorial split.
<header className="grid gap-8 md:grid-cols-[0.9fr_1.1fr]">
<h1 className="text-[clamp(1.6rem,4vw,2.4rem)] uppercase leading-[0.95]">
Headline beside a measured standfirst
</h1>
<div className="md:pt-2">
<p className="font-mono text-[0.62rem] uppercase">Feature · Specimen</p>
<p className="max-w-[46ch] leading-[1.4] text-c-black/70">The dek…</p>
</div>
</header>A contents rail that pins while the body scrolls past it — set the sticky top to your fixed-nav height.
This neutral specimen keeps the contents rail beside a measured body column. Source order stays logical when the tracks stack.
This neutral specimen keeps the contents rail beside a measured body column. Source order stays logical when the tracks stack.
This neutral specimen keeps the contents rail beside a measured body column. Source order stays logical when the tracks stack.
<div className="grid gap-6 md:grid-cols-[1fr_2fr]">
<aside className="self-start md:sticky md:top-[var(--site-header-height,20px)]">
<nav aria-label="Article contents">
<Stack gap="xs">{/* section links */}</Stack>
</nav>
</aside>
<article>{/* scrolling body copy */}</article>
</div>Menu-style rows on the --grid-index ratio: a narrow index column beside a wide title column, each row a link.
<IndexTable
columns="var(--grid-index)" /* 1fr 5.75fr */
rows={[
{ cells: ["01", "Editorial grid"], href: "/01" },
{ cells: ["02", "Readable measure"], href: "/02" },
]}
/>A centered prose column capped at the system’s 68ch measure for long-form body copy.
Body copy uses a 68ch measure. This keeps most lines long enough for a complete phrase while making the next line easy to find.
Paragraph spacing is separate from line height, so adjacent blocks remain distinct without extra rules.
<Prose className="mx-auto max-w-[68ch]">
<h2>The readable measure</h2>
<p>Body copy uses the system’s 68ch measure…</p>
</Prose>An image mosaic bound by the 3px flush gutter, so the photographs read as one block rather than separate cards.
--gap-flush · 3px
<div className="grid grid-cols-2 gap-[var(--gap-flush)] md:grid-cols-4"> {/* 3px */}
{images.map((src) => (
<span className="block aspect-square overflow-hidden" key={src}>
<img alt="" className="size-full object-cover" src={src} />
</span>
))}
</div>The collection header the index recipe sits beneath
Container owns measure
Section separates vertical rhythm from width. Choose prose, default, wide, or full; do not recreate those caps with page-specific numbers.
One responsive hinge
The system's own compositions change at md. Below it, source order carries meaning and tracks stack instead of shrinking.
Safe areas are part of the frame
Page gutters use the larger of the fluid token and the device inset. Full-viewport shells also use the packaged safe-area and dynamic-viewport utilities.
Media owns its crop
Media owns its crop, aspect, color, and content. Layout owns sequence and spacing; .photo-bw is an opt-in treatment, never a universal filter.
Capped measure — correct
Section separates vertical rhythm from width, so a paragraph keeps a comfortable line length and the eye finds the start of the next line without hunting back across the whole column on every wrap.
A container cap holds the line length in the comfortable reading band, however wide the viewport gets.
Uncapped measure — avoid
Section separates vertical rhythm from width, so a paragraph keeps a comfortable line length and the eye finds the start of the next line without hunting back across the whole column on every wrap.
Letting text fill the full frame stretches every line, so the eye has to travel back across the whole column to find the next one.