Scale
Use the numbered Layer 2 scale for layout. The scale is based on a 4px rhythm and has eight positive steps plus zero.
| Token | Value | Use |
|---|---|---|
--hui-space-0 | 0 | Explicit reset or no gap. |
--hui-space-1 | 4px | Tight control/label spacing. |
--hui-space-2 | 8px | Default inline or stacked component gap. |
--hui-space-3 | 12px | Comfortable internal spacing. |
--hui-space-4 | 16px | Standard section or container padding. |
--hui-space-5 | 20px | Large component separation. |
--hui-space-6 | 24px | Touch-oriented or section spacing. |
--hui-space-7 | 28px | Large layout rhythm. |
--hui-space-8 | 32px | Page-level separation. |
--hui-space-negative-1 | -1px | The screen-reader-only utility offset only. |
Rules
- Use
gapfor relationships between flex/grid children. - Prefer logical properties such as
margin-block-startandpadding-inlinefor component layout. - Do not introduce a one-off pixel value. Use the closest scale step or add a documented upstream primitive first.
--hui-space-100,--hui-space-200, and--hui-space-300remain compatibility aliases for the original public API; new CSS should use the numbered aliases.