fin1te/dsv1.0.0

Design system · v1.0.0

Quiet surfaces, one accent, and diagrams that explain themselves.

The tokens, components and diagram language behind fin1te.com and topo. One stylesheet, no framework, 11.0 KB gzipped.

Stylesheet
11.0 KBgzipped, 49.5 KB raw
Components
29each with states and code
Foundations
8color to layout
JavaScript
0 KBrequired to use it

What is in it

Three lines to start

<link rel="stylesheet" href="https://ds.fin1te.com/v/1.0.0/ds.css" />
<html data-theme="light">  <!-- or "dark" -->
<button class="btn primary">Deploy</button>

The same figure, everywhere

Diagrams on fin1te.com, in topo's editor and in its exports all draw from the diagram layer of this system. This one is rendered by topo's own renderer at build time.

Fig. 01Order pipeline5 components · 5 links
HTTPSreadsKubernetes · prodCustomersweb · mobileAPIFastAPI · 3 podsOrder workerconsumes orders.v1Kafkaorders.v1PostgreSQLorders, payments