A CSS design system
Two color tokens. Two type knobs. Composition over configuration. Theming, dark mode, hue rotation, and contrast are automatic.
Setup
Add the stylesheet to your <head>. That's it.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Deufel/toolbox@latest/css/style.css">Set data-ui-theme="light" or "dark" on <html> to lock a theme. Omit it to follow the system preference.
The system
Six sections. Each builds on the ones above it.
Color
Surface presence, ink contrast, and hue — three knobs that produce every color on the page.
--bg · --fg · --hue
Scale
A local step for an element, a regional multiplier for a section. Padding and gaps follow.
--type · --scale
Stage
Painted regions with depth that auto-cascades. Nested stages render progressively forward.
.stage · .glass
Layout
Stateless primitives for flow, distribution, and spatial composition. Plus the page-level grid.
.row · .column · .grid · .page
Components
Buttons, tags, tabs, cards, inputs, navbars, drawers, modals — composed from the tokens above.
.btn · .tag · .navbar · …
Code blocks
Syntax-highlighted code in a CRT-glass frame. Drop in <pre><code class="lang"> and you're done.
<pre><code> · .crt