Made, not drawn.
One lamp, above left, lights everything. Raised parts catch it on their top edge; recesses are dark under their upper wall; a pressed key drops below the plate. No images — box-shadows and a lamp.
Tactile UI Kit · for the web · Tactile Modernism
Software that behaves like hardware.
35 interface parts — keys, switches, knobs, faders, fields, displays, meters — made the way Braun made radios. Aluminium or graphite, printing instead of decoration, and no brand colour: colour appears only where a lamp is lit. With a brain that teaches Claude or Cursor to build with them.
$89 once, in the Founder Pass with every object and block in the library. After the founder seats, the kit is sold on its own.
Parts35each with its own page
Finishes2aluminium, graphite
Brain files34for Claude and Cursor
Dependencies0one CSS file, one module
TUI-1 · Receiver
Power
Seek
Station
FM · stereo
87.5MHz
Signal
Output
Band
Turn the tuning knob until the Station lamp lights — drag it, scroll over it, or Tab to it and use the arrow keys.
01 · Why
Less, but better. Then built properly.
Dieter Rams asked for less, but better, and Braun answered with aluminium, printing and one lamp. This kit brings that discipline to the screen: parts you can read as objects, which behave exactly the way they look.
Inverter onlineCharging at 1.9 kW
Colour is information.
There is no brand colour. Green means on, amber means waiting, red means recording or failing, and a display is lit because it shows a value. Every lamp sits next to words.
Native underneath.
Switches are checkboxes, selectors are radio groups, faders are ranges, dialogs are <dialog>. Forms post them, keyboards reach them, screen readers name them. One custom element, and it is form-associated.
02 · Two finishes
Aluminium and graphite. The same markup.
One attribute, data-finish, on any element. Pages follow the visitor’s system before the first paint, and every state of every part is designed in both — here they are, live, side by side.
03 · Everything inside
35 parts, each with its own page.
Every part below is the real thing, running. Open one for its variants, every state in both finishes, the full API, markup to copy, accessibility notes and an honest account of how it is built.
04 · Templates
Two finished screens, built only from the kit.
A dashboard and a product site, each one HTML file you can copy and fill with your own words. Both pass the verify tool as shipped.
Hearth · a dashboard
A home-energy console: rail, readouts, a plot in glass, a battery with its LCD and ladder, a knob, a selector, a table of circuits with switches.
Quiet · a product site
An uptime-monitoring site: a hero beside a device panel, figures, features shown as working parts, pricing, questions and a graphite call to action.
05 · 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, every part’s rules, two skills and a tool that checks their work. It comes with the Pass — here is every file in it, by name.
Opening the cabinet…
- 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 violations06 · Install
Three things to copy, one script in the head.
No build step, no framework, no package manager. It works anywhere HTML does — a static site, a Rails view, a React app.
- 1
Copy the files
kit.css,kit.mjsand thefonts/folder, side by side. - 2
Keep the fonts
Instrument Sans and Geist Mono ship as WOFF2 under the OFL. Nothing is fetched from a font service.
- 3
Set the finish
A two-line script first in the head picks the finish before the first paint.
- 4
Print a part
A class on a native element. That is the whole API.
<button class="tui-key"> Save preset </button>
07 · With the Founder Pass
The whole kit, its brain, and everything made after.
The Founder Pass is $89 once for the whole Tactile UI library — every object, every block — and this kit with its brain. After the founder seats are gone, the kit is sold on its own.
- Parts
- 35 · kit.css and kit.mjs
- Templates
- Hearth · Quiet
- The brain
- 34 files · laws, part rules, 2 skills, verify
- Fonts
- Instrument Sans · Geist Mono · OFL
- Finishes
- Aluminium · Graphite
- Licence
- Lifetime · personal and client projects
- Refunds
- 14 days, if nothing was downloaded
- Updates
- Every part made after
08 · Questions
Asked before buying.
The kit
Do I need React, Tailwind or a build step?
No. It is one stylesheet and one small ES module with no dependencies. Every part is a class on a native element, so it works in plain HTML and inside any framework that renders HTML.
Which browsers?
Current Chrome, Edge, Safari and Firefox. It relies on color-mix(), :has() and container queries, so browsers from 2023 onward. Every change is checked in Chromium at desktop and phone widths, in both finishes.
Can I add my brand colour?
You can, but the kit has no token for one, and the verify tool flags purple and orange literals. Colour here means state. Your brand lives in your wordmark, your words and the finish you choose.
Is there a Figma file?
No. The kit is code; these pages are its specimen, with every part live in both finishes and every state.
The brain
What does the brain actually do?
It gives an agent the laws, an inventory of parts to reuse, one rules file per part, a building skill, a reviewing skill and a verify tool. The agent reads them before it writes UI, and runs verify before it calls the work done.
Does it work outside Claude?
Yes. The files are Markdown and one Node script. Claude Code picks up the skills as they are; Cursor or any other agent can be pointed at rules.md with one project rule.
Why can’t I read the rules here?
They are the part of the kit you pay for. Every file is listed by name above, each part page quotes a line from its rules, and the foundations pages summarise the laws in plain words.
Buying
What does the Founder Pass include?
Every object and block in the Tactile UI library, this kit with its brain and templates, and everything added later. $89 once.
What happens after the founder seats?
The Pass covers the library of objects and blocks, and the kit is sold on its own. The founder price does not come back.
Can I get a refund?
Yes, within 14 days of buying, as long as nothing has been downloaded with your key.
Is this made with Braun or Dieter Rams?
No. It is an independent kit that takes its discipline from their work. No Braun names, marks or designs are used.