A design system without a framework.

Opening: the system presents itself - 219 components, every tick along the bottom edge is one of them.

From ATM to TPL

Every dot is one building block: 62 atoms, 22 molecules, 128 blocks, five organisms and 54 templates (two template components + 52 template pages - the decks and the website templates). Behind them: 50 design tokens and 1,312 live examples in the docs.

Features

The feature areas, in sidebar order: Primitives, Actions, Forms & Inputs, Data Display, Charts, Feedback & Status, Overlays, Navigation, Application, Presentations, Marketing.

of the components need no JavaScript at all.

77% of the components need no JavaScript - 168 of 219 run as plain HTML and CSS.

CSS-only vs JavaScript

The
ratio

As little JavaScript as possible - as much as necessary.

The ratio: 77% CSS-only against 23% with JavaScript - 117 more components without than with.

The whole system:
307.9 KiB.

Minified + gzip - measured from dist/stats.json

The whole system weighs 307.9 KiB minified and gzipped - the bundle 190.3, the core 24.2, 1.4 KiB per component on average.

What the system
is made of

219 components and 52 template pages in five taxonomy classes.

What the system is made of: 62 atoms, 22 molecules, 128 blocks, 5 organisms, 54 templates - 219 components plus 52 template pages; underneath, 50 design tokens and 1,312 live examples.

The verification

The agent runs all of them itself, in an automated verification loop - a human reviews the result at the end.

The full verification runs in about four minutes: 281 tests, 204 screenshots, 83 e2e files, around 70 verify gates - all executed by the agent in an automated verification loop; the human reviews the result at the end.

Four
setup variants

Four ways in: via the jsDelivr CDN, self-hosted from dist/, via npm - or straight through SKILL.md for agents.

Discussion

What will you build with it?

Start building a prototype now.

Open discussion: what will you build with it? Start building a prototype now.