Design system
Theming
Every public surface resolves through neutral --4ui-* semantic tokens, with light and dark themes from the first release.
Switch themes
document.documentElement.dataset.theme = 'dark';Override semantics
:root { --4ui-accent: #b8ff3d; --4ui-surface: #ffffff; --4ui-radius-lg: 12px;}[data-theme='dark'] { --4ui-surface: #171b18;}Token groups
Canvas and surfaces, borders, text, accent, semantic states, focus, chart palette, radii, spacing, motion, shadows, and z-index are all represented. Numeric readouts use tabular numerals through the fourui-tnum helper.