- ds
- Overview
- Introduction
Introduction
One visual language for fin1te.com, topo, ack and lab.
ds is the tokens, components and diagram language behind fin1te.com, topo, ack and lab. It is one stylesheet in cascade layers, 31.8 KB gzipped, with light and dark themes and no framework. This site is built with it.
- Stylesheet
- 31.8 KBgzipped, 170.6 KB raw
- Components
- 82each with states and code
- Patterns and templates
- 16pages and tools built from them
- JavaScript
- 0 KBrequired to use it
What is in it
Foundations
Colour, type, space, motion
Color, Tones and status, Data color, Typography, Spacing and shape, Backdrops and more.
Components
Buttons to data tables
Button, Input, Drop zone, Checkbox and switch, Range and slider, Segmented control and more.
Data display
Every chart a dashboard needs
Stat tiles and metrics, KPI and sparkline, Chart frame, Line and area, Bar charts, Meter and bars and more.
Operations
Status pages, pipelines, logs
Uptime bar, Service health, Incident history, SLO and error budget, Alerts, CI pipeline and more.
Patterns
Pages and tools built from them
Page head, Post list, Site header, Product header, Footer, App shell and more.
Templates
Whole pages, ready to copy
All templates, Status page, Ops dashboard, Service detail, Pipeline run, Settings and more.
Three lines to start
<link rel="stylesheet" href="https://ds.fin1te.com/v/1.2.0/ds.css" />
<html data-theme="light"> <!-- or "dark" -->
<button class="btn primary">Deploy</button>The rest is in getting started: fonts, the theme script, and the tokens on their own.
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.