chrisinterface UI-Kit

The idea

Good interfaces need two things: design care down to the last detail and an engineering foundation that carries that care across many applications. I developed the UI Kit to bring both together. Colors, spacing, typography and behavior are decided once and live in one source; every application receives a verified copy.

A new frontend is ready in a short time. Header, tables, forms, dialogs, messages, sign-in and print are done, light and dark included. Work starts with what the application is for, not with the button.

Better together

In a product line, every improvement benefits all applications, wherever it comes from.

1. Discover. An application shows what could work better: a contrast, a spacing, a behavior.
2. Improve. The fix goes into the kit’s source. If someone changed a copy directly inside an application, the sync reports the deviation so nothing gets lost.
3. Distribute. One command brings the new state to every application. Before that, the sync checks the sources and stops on an error instead of spreading it everywhere.
4. Build on. All applications share the same state, and the next one starts there.

Independent and timeless

The kit needs neither React nor any other framework, no package manager and no build step. It is made of what every browser understands: HTML, CSS and JavaScript.

Every application carries its own copies and runs without a connection to the kit; the sample application even runs with a double click, without a server. There is no framework to go out of date and no dependency to force an update; only charts use Apache ECharts. That keeps the applications stable and the kit light: copy a folder, list the blocks, run one command.

By the numbers

• 36CSS and JavaScript blocks
• 71tokens
• 2themes: light and dark
• 4languages
• 0frameworks
• 86 KBthe entire kit, compressed

What makes the engineering special

• Light and dark from one token set. The blocks only know roles such as text, surface and line; the dark theme gives the same roles different values. modus.js decides in the page head before anything is drawn, so nothing flashes light.
• The sync as a guard. A Python script without third-party packages distributes only what an application subscribes to and reports every deviation between copy and source. Before every commit, it shows whether all applications are up to date.
• Errors stay in the kit. An open brace, a color without a dark value, a block that doesn’t exist: the sync stops before anything is distributed.
• Tests with built-in traps. Automated tests check the blocks and the sample application in a simulated browser. For a counter-check, errors can be planted on purpose; the tests have to catch them.
• Every file explains itself. The header states purpose, integration and options, every rule its reason. Changing the kit never means reconstructing a decision.
• Print included. Cmd+P produces a clean sheet with the table header on every page, even from the dark theme.

Gallery

Every block live, switchable between light, dark and system, in German and English. The gallery is built from the kit itself and shows exactly the state the sync distributes.

Open the gallery →

Releases

• 2.1.0 · September 13, 2026 · Print block
• 2.0.0 · February 1, 2026 · First release