ds
Overview
fin1te and topo

fin1te and topo

What the two products share and where they differ.

fin1te.com is a portfolio you read. topo is an editor you work in. They share every token, the diagram layer and most components. The differences come from that one fact.

What differs

	fin1te.com	topo
`Base size`	16px root, rem everywhere	14px UI text; chrome scales with a zoom factor, the canvas never does
`Primary button`	<code>.btn.primary</code>: ink on paper	`.btn.accent`: purple, one per screen (Present)
`Buttons`	2.375rem, bordered	2rem, ghost inside islands
`Layout`	Document flow, sticky header, rows	Full-screen canvas with floating islands
`Surfaces`	Rules, almost no shadow	Islands and panels carry `--shadow` to float over the canvas
`Backdrop`	Square grid behind heads	Dot grid under the whole canvas
`Segmented`	<code>.seg</code>, inline, sunk	`.seg.fill`, equal columns, in panels
`Chips`	<code>.chip</code>, square mono tags	`.pill`, rounded suggestions

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>

Names in the codebases

A few parts were renamed here so the system has one name for each thing. Both codebases keep their current names until they move to ds.css.

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