ds
Overview
Getting started

Getting started

Add ds.css, set a theme, use the tokens.

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.0.0/ds.css" />

It is 11.0 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>

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.

File	Size	Use it for
`/tokens.css`	1.1 KB	CSS custom properties for both themes, nothing else.
`/tokens.json`	JSON	Colors for both themes, type scale, space, radius, durations. For tools, charts and canvas code.
`/v/1.0.0/ds.css`	11.0 KB	The pinned, immutable build. Cached for a year.
`/ds.css`	11.0 KB	Latest. Cached for an hour.

Naming

Pattern	Example	Meaning
`.name`	.btn, .chip, .seg	A component.
`.name.mod`	.btn.primary, .chip.warm	A variant or size. Modifiers never work alone.
`[aria-*]`	aria-pressed, aria-selected, aria-current	State. `.on` is accepted where there is no ARIA equivalent.
`.name-part`	.panel-head, .dlg-foot, .stat-v	A part that only makes sense inside its component.
`--token`	--accent, --rule, --radius-lg	A design token. Use these in your own CSS instead of raw values.