ds
Foundations
Backdrops

Backdrops

Square grid, dot grid and the gradient phrase.

Square grid

A 3.5rem grid behind the home hero and every page head, full-bleed and masked with a radial fade so it falls away from the headline. It is a pseudo-element, so it costs nothing to lay out.

Work log

Three years of making data systems faster

Code

<header class="page-head grid-bg-demo">
  <p class="label">Work log</p>
  <h1>Three years of making data systems faster</h1>
</header>

.page-head gets the grid automatically. Put .grid-bg on any other block. Use .grid-box for a contained, unmasked grid inside a card or demo.

Dot grid

A 1rem dot grid is the canvas: under every diagram figure and the whole topo editor. It says "this is a working surface".

Code

<div class="dot-grid" style="height:9rem;border-radius:var(--radius-lg)"></div>

Gradient phrase

Purple into pink into amber. One phrase per page, on a headline, never on body text or buttons.

I make data systems faster and smaller.

Code

<p style="font-size:2.25rem;font-weight:620;font-stretch:112%;letter-spacing:-0.03em">
  I make data systems <span class="grad-text">faster and smaller</span>.
</p>

Class	On	What it does
`.page-head`	header	Page head spacing plus the masked square grid.
`.grid-bg`	any block	The masked square grid, full-bleed.
`.grid-box`	any block	Square grid inside the box, no mask.
`.dot-grid`	any block	Dot grid canvas on --bg.
`.grad-text`	span	Gradient text. Wraps across lines cleanly.