ds
Overview
Products

Products

What fin1te.com, topo, ack and lab share and where they differ.

Four products use ds. fin1te.com is a site you read, topo is an editor you work in, ack is a player you watch and scrub, and lab is a set of small tools you paste things into. They share every token, the base layer, the header, the type and the diagram look. The differences come from what each one is for.

What they share

The tokens: warm neutrals, one purple accent, amber for data at rest, both themes set on <html data-theme> before first paint and saved in localStorage.theme.
Mona Sans with its width axis for headings, IBM Plex Mono for labels, numbers and code.
The header: sticky, 3.5rem, blurred, a mono brand with the purple mark. The tools add their name after a slash.
One easing curve, short durations, and prefers-reduced-motion respected.
The CSS itself. ack and lab vendor a copy of ds.css and refresh it with scripts/sync-ds.mjs; fin1te.com and topo carry the same tokens in their own CSS until they move to it. Product CSS sits on top of the tokens.

What differs

	fin1te.com	topo	ack	lab
What it is	A site you read	An editor you work in	A player you watch and scrub	Small tools you paste into
Base size	16px root, rem everywhere	14px UI text; chrome scales with a zoom factor, the canvas never does	16px root; the diagram scales as a picture	16px root, rem everywhere
Header	`.hdr` with the site nav	Islands over the canvas, no header	`.hdr-brand`: fin1te / ack	`.hdr-brand`: fin1te / lab
Primary action	`.btn.primary`: ink on paper	`.btn.accent`: Present	`.btn.accent`: Play	`.btn.primary` or none; the output is the point
Layout	Document flow, sticky header, rows	Full-screen canvas with floating islands	Editor beside a stage, `.playbar` under it	`.workbench`: input left, output right
Surfaces	Rules, almost no shadow	Islands and panels carry `--shadow`	Rules; the stage sits on the dot grid	One framed pair of panes, no shadow
Backdrop	Square grid behind heads	Dot grid under the whole canvas	Dot grid under the diagram	Plain `--bg`
Motion	Short fades on scroll	Links that flow, walkthroughs	The content: messages on a real clock	Almost none

fin1te chrome

Get in touch Résumé (PDF)

SparkRustClickHouse

Code

<div class="btn-row">
  <a class="btn primary" href="#">Get in touch</a>
  <a class="btn" href="#">Résumé (PDF)</a>
</div>
<div class="chips">
  <span class="chip">Spark</span><span class="chip warm">Rust</span><span class="chip">ClickHouse</span>
</div>

topo chrome

Code

<div class="island bar">
  <button class="btn icon on" aria-label="Select"><svg class="i">…</svg></button>
  <button class="btn icon" aria-label="Pan"><svg class="i">…</svg></button>
  <span class="sep"></span>
  …
</div>
<div class="island">
  <button class="btn"><svg class="i">…</svg>AI</button>
  <button class="btn accent"><svg class="i">…</svg>Present</button>
</div>

ack and lab chrome

0:04.8 / 0:12.0

Code

<div class="playbar">…</div>          <!-- ack: see Playback bar -->
<div class="wb-head">…</div>          <!-- lab: see Workbench -->

ack plays: its one accent button is Play, and the playback bar sits under the stage. lab converts and inspects: a workbench with output tabs and a copy button, and no accent button at all, because the output is the point.

Names in the codebases

A few parts were renamed here so the system has one name for each thing. fin1te.com and topo keep their current names until they move to ds.css; ack and lab start with the ds names.

ds	fin1te.com	topo
`.panel-head`	n/a	.ph
`.panel-sec`	n/a	.ps
`.dlg-head`	n/a	.dlg .ph
`.chip`	.chip, .tag	n/a
`.pill`	n/a	.chip
`.stat-tiles, .stat-v`	.tiles, .tv	n/a
`.metrics`	.mt	n/a
`.timeline, .tl-item`	.tl, .en	n/a
`.insp-card`	.card (scoped)	.sd .card
`.stepbar, .irail`	n/a	.pv-steps, .pv-tl
`.hdr-row, .hdr-tools, .ibtn`	.row, .tools, .icon (scoped)	n/a