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
Foundations
Color, type, space, motion
Color, Tones and status, Typography, Spacing and shape, Backdrops, Motion and more.
Components
Buttons to incident replays
Button, Input, Checkbox and switch, Segmented control, Tabs, Chip, badge and pill and more.
Patterns
Pages the sites are built from
Page head, Post list, Site header, Footer, 404, Charts.
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.