Why
Most of what makes a website feel considered is not its components. It is the type, the space between things, and where things sit on the page. This file handles only that, and leaves buttons, forms, and everything else to you.
Typography
Text uses the system's own sans serif: Helvetica Neue on Mac, Segoe UI on Windows, and Nimbus Sans or Liberation Sans on Linux. Nothing downloads, so the page never shifts while fonts load.
Almost all text is set at 16px, at a single weight. Hierarchy comes from color, order, and space rather than size, so pages read calmly and nothing shouts.
There are no sizes to pick. Headings look like body text, slightly heavier, and line spacing follows the element: tight for single lines like names and labels, more open for paragraphs, and most open for long-form writing.
Spacing
Every gap comes from one scale built on 4px, and each one is picked by context rather than by hand. Blocks on a page are 32px apart. Items in a group are 12px apart, groups of groups 24px, and a label sits 8px above what it labels. In long-form writing, paragraphs are 16px apart and a heading gets four times more space above it than below, so it always groups with the text it introduces.
Layout
Every page is the same width: one centered column of 512px, about 70 characters per line, so headers, text, and grids all share the same edges. A simple header holds the site name, a short description, and a breadcrumb.
Columns respond to the space they have, not to a choice. A grid is two equal columns, or one on a phone, and its columns keep the same width however many items it holds. An aside puts a date or label beside its content when there is room and above it when there isn't. See the demo for every element.
How to use it
Add the file to any page. There is nothing to install.
<link rel="stylesheet" href="ds.css">To build with an agent, give it the file and ask it to follow the rules at the top. They spell out the page structure, which class to use for what, and what to avoid.
To change the colors, override the variables in :root. This page does that to swap the default orange accent for neutral grays:
:root {
--ds-primary: light-dark(#0a0a0a, #fafafa);
--ds-muted: light-dark(#f5f5f5, #262626);
}