Getting started

1. Add the stylesheet

One file holds the tokens, the base layer, every component and the diagram layer. Pin the version in production; /ds.css always points at the latest release.

<link rel="stylesheet" href="https://ds.fin1te.com/v/1.3.0/ds.css" />

It is 43.9 KB gzipped. Everything sits in cascade layers (tokens, base, components, diagram), so any unlayered rule in your own CSS wins without !important.

2. Load the fonts

ds.css names the fonts but does not download them, so you only pay for the subsets you use. Self-host them from npm:

npm i @fontsource-variable/mona-sans @fontsource/ibm-plex-mono

import '@fontsource-variable/mona-sans/wdth.css'; // variable weight and width
import '@fontsource/ibm-plex-mono/400.css';
import '@fontsource/ibm-plex-mono/500.css';

Preload the Latin file of Mona Sans; it is the one every page needs first. Without the fonts the system falls back to the platform sans and mono, and nothing breaks.

3. Set the theme before first paint

Themes are a data-theme attribute on <html>. Set it in an inline script in <head> so the page never flashes the wrong colours.

<script>
  (() => {
    let t = null;
    try { t = localStorage.getItem('theme'); } catch {}
    document.documentElement.dataset.theme =
      t || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  })();
</script>

The fin1te products default to dark unless the visitor has chosen a theme.

4. Write markup

Components are plain classes. Modifiers are extra classes, and state uses ARIA attributes where one exists, so the styling and the accessibility come from the same place.

<div class="seg" role="group" aria-label="Range">
  <button aria-pressed="true">Week</button>
  <button aria-pressed="false">Month</button>
</div>
<button class="btn primary">Save</button>
<span class="chip warm">Rust</span>

Tokens only

If you want the palette and scale without any components, use the tokens directly. Both files are generated from the same source as ds.css.

Only the parts you use

ds.css is everything. Since 1.2 the same build is also published in parts, so a blog does not download chart and cluster styles. Load core.css first, then any of the others in any order; they share the cascade layers, so the result is the same as the full file.

<link rel="stylesheet" href="https://ds.fin1te.com/v/1.3.0/core.css" />
<link rel="stylesheet" href="https://ds.fin1te.com/v/1.3.0/charts.css" />

Some Operations components borrow from the others: deploys use .avatar from ui.css, and the SLO card draws its burn-down with charts.css. Each page under Operations says what it needs in its markup; when in doubt, load all four.

Released versions stay published: /v/1.0.0/ds.css is still there, byte for byte. 1.x only adds, so moving from 1.0 to 1.3.0 changes nothing you already use.

New in 1.1

The parts ack and lab need: a range and slider, a drop zone, a code editor surface, a heatmap with the --heat-* scale, and three patterns: the playback bar, the workbench and the product header. The theme toggle cross-fades where the browser supports it.

New in 1.2

The parts the next products need. Eighteen interface components, from the avatar to the data table. A data colour foundation with six series checked for colour-vision deficiency, and fourteen new pages under Data display, from lines to flame graphs and trace waterfalls. Seventeen components under Operations for status pages, pipelines, logs, schemas and clusters. The app shell, and six templates built from all of it. The stylesheet is also published in parts.

Nothing from 1.1 was renamed or removed. Three 1.1 fixes ride along: a switch inside a .chk label keeps its size, .inp.lg no longer collapses (a diagram rule was too broad), and filtered menu items hide.

Vendoring

Products that build on their own (each Cloudflare build sees one repo) keep a copy of the built file, public/ds.css or similar, and a scripts/sync-ds.mjs that copies it from a checkout of ds next to them. Put product CSS in its own file after ds.css, and use the tokens rather than raw values.

Naming