Dev Tools · 1h ago
CSS density variable lets UI scale from data-dense to airy
A developer describes a UI system that uses a single CSS variable, --density, to scale all spacing tokens from 0.8x to 1.2x, with brand overlays ranging 0.7–1.35. The system preserves accessibility minimums (44px touch targets) and uses five discrete presets for user customization. The approach allows different brand feels without forking components.
Meridian48 take
A neat CSS architecture trick, but the real value is in accessibility guardrails—most density sliders break layouts or ignore touch targets.
cssui-design