#Spacing

The spacing system uses a 4px base unit. Dense application chrome uses 4–12px gaps; content and page regions use 16–32px gaps.

Live previewHTML · CSS · JavaScript

4pxspace-1

8pxspace-2

12pxspace-3

16pxspace-4

24pxspace-6

32pxspace-8

#Scale

#Layout parameters

Application components expose continuous values as CSS variables:

Use these parameters instead of overriding internal grid selectors.

#Office density contract

The A3S style pack applies the same compact chrome rhythm used by A3S Office. Override these semantic tokens only when the entire product needs a different density:

Keep the 4px baseline when changing a token and validate the complete shell at desktop and compact widths.