ds
Foundations
Layout

Layout

Max width, gutter, prose measure and the rem scaling.

Token	Value	Use
`--max`	80rem	Page content width. `.wrap` centres it.
`--gutter`	clamp(1.25rem, 4vw, 2.5rem)	Side padding. Grows from 20px on phones to 40px.
`--prose`	68ch	Measure for long-form text.

Root scaling

The root font size is 100% below 1400px, 112.5% from 1400px and 125% from 1800px. Because every size is in rem, the whole page scales together on big monitors instead of leaving a narrow column in a sea of background.

Section rhythm

Pages are a stack of .section blocks, each with a rule on top and generous padding. A .section-head puts the kicker in a 13.75rem left column and the heading next to it on wide screens, and stacks them on phones.

Selected work

Things that got faster

Each one started as a slow dashboard.

Code

<section class="section" style="padding:2rem 1.75rem;border-top:0">
  <header class="section-head" style="margin:0">
    <p class="label">Selected work</p>
    <div>
      <h2>Things that got faster</h2>
      <p>Each one started as a slow dashboard.</p>
    </div>
  </header>
</section>

Rows before cards

Lists of work, projects and posts are rows: a rule above each item, a meta column on the left. Reach for .card only when items are peers in a grid.

2026 · Rust

DataCraft

A Spark-compatible runtime in Rust.

2025 · ClickHouse

IPDR analytics

Two trillion rows, queried in seconds.

Code

<div class="rows">
  <div><p class="mono muted" style="font-size:.75rem">2026 · Rust</p><div><h3 class="accent">DataCraft</h3><p class="muted">A Spark-compatible runtime in Rust.</p></div></div>
  <div><p class="mono muted" style="font-size:.75rem">2025 · ClickHouse</p><div><h3 class="accent">IPDR analytics</h3><p class="muted">Two trillion rows, queried in seconds.</p></div></div>
</div>