1. Setup
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Deufel/toolbox@<commit>/css/style.css">2. API
Color
--bg: 0; /* [ 0, 1] surface chroma */
--fg: -1; /* [-1, 0] ink contrast */
/* [ 0, 1] ink chrmoa */
--hue: 18; /* [ 0, 360] set on :root for brand */
--hue-shift: 0; /* [ 0, 360] local rotation off the brand hue */
--hue-lock: 145; /* [ 0, 360] absolute hue, ignores brand */
Type
--type: 0; /* integer steps; 0 = body; does not cascade */ Space
--gap: clamp(...); /* fluid token; used by layout primitives */
Surfaces.
.surface /* paints; depth cascades on nesting */
Layout primitives.
.row .column .split .spread
.lcr .tmb .flank .flank-end
.grid .stack .frame .read
.hud .hud-grid .hero
Page.
body.page /* eleven slots: */
.pg-banner /* site-wide announcements */
.pg-header /* primary chrome */
.pg-subheader /* secondary chrome */
.pg-navigation /* nav column (internal header/footer) */
.pg-main /* main column (internal header/footer) */
.pg-aside /* secondary context */
.pg-footer /* dock */
Viewport.
.mobile .tablet .desktop /* gate participation; cover full range */