Browse Learn

Layout

Balanced spacing makes an interface feel considered. Use shared layout primitives to keep alignment, rhythm, and responsive behavior consistent across every screen.

Grid / adapt to the space

Research

Design

Build

<div class="grid">
  <div class="panel">Research</div>
  <div class="panel">Design</div>
  <div class="panel">Build</div>
</div>

Stack / create a rhythm

A vertical flex layout with a shared gap. Override --space locally when a component needs a different density.

<section class="stack" style="--space: 1rem">
  <h2>Project overview</h2>
  <p>Everything in one place.</p>
  <a class="btn" href="/projects/">View projects</a>
</section>

Cluster / let a row wrap

Get Started AI Guide No dependencies

<div class="cluster">
  <a class="btn" href="/docs">Get Started</a>
  <a class="btn secondary" href="/docs/ai">AI Guide</a>
</div>

Keep the escape hatch

These classes are conveniences, not a layout language. Use native CSS Grid or Flexbox for specialized compositions. Keep reusable spacing and colors connected to the tokens.

A grid with room to breathe

Start with the shared container: a 1200px maximum width and responsive gutters of 32px, 24px, and 16px. Keep headings, cards, and section boundaries aligned to those edges.

Rhythm: use a 4px spacing scale. Start with 24px component gaps, 48px major column gaps, and 80px desktop section padding; reduce spacing on smaller screens.
Proximity: keep a label close to its field and a heading close to its content. Leave more space between separate groups.
Hierarchy: distinguish page titles, section headings, and supporting copy. Keep paragraphs near 65 characters per line.
Repetition: reuse card padding and component shapes. Let stack gaps control internal spacing rather than adding margins to each child.
Flexibility: collapse columns before text or controls become cramped. Grids organize content; they should not dictate fixed heights.

The spacing scale applies to layout, not every pixel. Type sizes, borders, icon strokes, and deliberate optical adjustments can use other values.

Decorative canvas surfaces

Use data-canvas="dots" or data-canvas="grid" for a quiet drafting background. Add data-ruler for a decorative tick-mark edge. These use theme colors and CSS only, with no packages or JavaScript.

A little structure for your next idea.

<div class="panel" data-canvas="grid" data-ruler>…</div>

Give content enough padding to clear the ruler. Set --canvas-step to change grid spacing (24px by default). These decorations reserve the container’s pseudo-elements; keep them sparse and never use them to communicate essential measurements.

Surface treatments

Set data-finish="flat", data-finish="gradient", or data-finish="glass" on a page or section. Panels, filled buttons, and custom surface containers inherit the treatment. Flat is the default; use a nested flat setting to quiet a particular area. Form fields and semantic status colors stay solid.

Flat

Clean, solid surfaces.

Gradient

Directional shading, raised edges, and soft shadows.

Glass

Translucent surfaces, frosted blur, and light-catching edges.

<main data-finish="gradient">
  <div class="panel">…</div>
  <div class="panel" data-finish="flat">…</div>
</main>

Use text-gradient selectively on short accent headings. Glass falls back to solid when blur is unavailable and respects reduced transparency. Check contrast over your actual background; avoid stacking glass layers.