Flexible density for all the UI

Short summary

Design systems often lock spacing to fixed pixels, limiting brand variation. This post explains a flexible density system that scales all spacing with a single CSS variable (0.8×–1.2× range for users, 0.7×–1.35× for brand customization), while preserving accessibility minimums for touch and mouse controls. The approach lets dozens of brands share components without forking code while still feeling distinct.

• •Semantic spacing variables scaled by a single --density CSS variable enable flexible UI adaptation across density presets
• •5 discrete density presets (0.8–1.2×) let users choose between data-dense and spacious layouts without breaking layouts
• •Accessibility floors ensure touch controls stay hittable (min 44px) and desktop controls remain precise (min 32px) even at Compact density

Generated with AI, which can make mistakes.