The UI kit: everyday parts, made like hardware.
A design system of 190 parts and 25 templates in plain HTML and CSS. Copy one folder into React, Vue, Svelte or a plain page, then pick one of 12 finishes.
Specimen sheet
Every part here is live, and the same markup you copy.
Selection
Toggles 7Navigation
Navigation 9Three invoices waiting, £2,480 in all.
Twelve paid this month.
One draft, last changed today.
The kit comes with the Founder Pass, with every object and page section. 54 of its parts are free with an account: start free.
One system
Less, but better. Then built properly.
Braun answered Dieter Rams with aluminium, printing and one lamp. Every part here keeps the same three rules, so a page built from them reads as one thing.
Made, not drawn.
One lamp, above left, lights everything: raised parts catch it, recesses fall dark, a pressed key drops below the plate. Light and depth
Colour is information.
No brand colour. Green is on, amber is waiting, red is recording or failing, and every lamp sits next to words. Lamps
Native underneath.
Switches are checkboxes, faders are ranges, dialogs are <dialog>: forms post them, keyboards reach them, screen readers name them. Accessibility
Finishes and volumes
12 finishes. The same markup.
One attribute, data-finish, on the page or on any element. Pages follow the visitor’s light or dark setting before the first paint. Press a finish and the whole page changes.
Tactile
Agent consoles, deploy dashboards, device apps, audio tools, launch pages. Every edge the lamp catches is drawn.
Quiet
Billing, settings, admin and docs: the app someone looks at for eight hours. The shapes, the words and the lamps stay; the depth is nearly off.
Both
Mix them on one page: a quiet app with one loud control where it matters.
Everything inside
190 parts in 50 categories.
Every part has its own page: its variants, every state in every finish, the markup to copy and notes on access.
- Accordions2
- AI chats13
- Alerts3
- Avatars3
- Lit surfaces4
- Badges & tags6
- Buttons9
- Calendars & date pickers4
- Cards & panels10
- Carousels2
- Charts18
- Checkboxes3
- Code & devtools8
- Dialogs5
- Dropdowns & menus3
- Empty states4
- File trees3
- File uploads2
- Forms20
- Icons3
- Inputs22
- Knobs2
- Lists6
- Media frames3
- Loaders5
- Navigation9
- Notifications4
- Numbers5
- Onboarding3
- Paginations2
- Popovers4
- Profile cards2
- Progress6
- Radio groups6
- Receipts & tickets2
- Scroll areas3
- Search bars5
- Selects6
- Sidebars3
- Sign in & sign up3
- Sliders & faders3
- Spec lists2
- Steppers3
- Tables6
- Tabs2
- Text areas5
- Timelines2
- Toasts3
- Toggles & switches7
- Tooltips3
Templates
25 whole screens, built only from the kit.
A dashboard, a product site, sign-in, billing, a shop, a chat app and more. Each is one HTML file you fill with your own words, and each passes the verify tool as shipped.
Hearth · a dashboard
A home-energy console: readouts, a plot in glass, a battery, a knob and a table of circuits with switches.
Quiet · a product site
An uptime-monitoring site: a hero, figures, features shown as working parts, pricing and questions.
The brain
Your agent reads the rules before it builds.
Left alone, Claude or Cursor builds generic UI. The brain is a folder they read first: the ten laws, the rules for every part, two skills and a tool that checks their work. Here is every file in it, by name.
Opening the cabinet…
- In all
- 34 files
- The laws
- rules.md · INVENTORY.md
- Foundations
- 10 files
- Part rules
- 19 files
- Skills
- Build · Review
- Tool
- verify.mjs
$ node kit/brain/tools/verify.mjs draft.html
draft.html: [hue] .hero h1 uses #7c3aed, a purple/violet accent
draft.html: [contrast-key] 2 primary keys on one surface (<section class="tui-panel">); keep one
draft.html: [label] <input name="email"> has no label
draft.html: [ghost] data-ghost "88" is 2 wide but the value "02:52" is 5
$ node kit/brain/tools/verify.mjs page.html
ok: 1 page(s), no violationsInstall
Copy one folder. It works anywhere HTML does.
No build step, no framework and no package to install: one stylesheet, one module and a script in the head, in a static site, a Rails view or a React app. The kit comes with the Founder Pass, with the brain and everything made after.