Spacing
20251124
Spacing 01
Overview
101
LEVEL
01 – Beginner
INFO
Spacing is a quiet but critical part of product design. HUX uses spacing tokens to remove guesswork, keep rhythm steady, and support clear, functional layouts. The system gives teams a reliable structure so space works with intent rather than intuition.
Introduction
Spacing is the negative space between elements and components, managed in code through margin and padding. The HUX system provides spacing tokens and layout structures that make implementation straightforward, predictable, and consistent across the product.
Spacing
The HUX spacing scale sits alongside the grid and type scale, built from steady steps that keep layouts clear and balanced. It covers small increments for fine-detail work and larger steps for controlling overall density. Each level has its own token. These tokens apply both inside components and between them, so spacing stays consistent from micro-detail to full-page structure.
Spacing scale
Use the spacing scale when building individual components. It provides the small increments needed to set clear spatial relationships at detail level. This scale applies across all HUX components so internal spacing stays predictable and consistent.
Token
rem
px
example
$spacing--01
0.125
2
$spacing--02
0.25
4
$spacing--03
0.5
8
$spacing--04
0.75
12
$spacing--05
1
16
$spacing--06
1.5
24
$spacing--07
2
32
$spacing--08
2.5
40
$spacing--09
3
48
$spacing--10
4
64
$spacing--11
5
80
$spacing--12
6
96
$spacing--13