Layout and spacing

A shared unit keeps spacing, rows, and page regions aligned. Design system 1 starts with a 20px base unit and derives larger and smaller values from it.

The spacing scale

Token	Value at the default scale	Example use
--half	10px	A small gap
--unit	20px	A row or standard gap
--double	40px	Section padding
--triple	60px	A larger separation

The --ds-grid-unit token multiplies the base unit by the scale factor, --sf.

.project-layout {
  display: grid;
  gap: var(--ds-grid-unit);
  padding: calc(2 * var(--ds-grid-unit));
}

Name the page areas

Give meaningful regions a name with data-ds-area. This makes a layout easier to inspect and discuss.

<aside data-ds-area="Projects">...</aside>
<article data-ds-area="Documentation">...</article>

Inspect this site

Press G three times to toggle the grid. Press L three times to show named layout regions. Press Escape to hide both overlays. Shortcuts are ignored while typing in an input.

These helpers are included locally in this site. Their availability in the published package can differ; see the full grid reference.