Space
Semantic tokens
Section titled “Semantic tokens”Internal
Section titled “Internal”| Token | screen/sm | screen/md | ||
|---|---|---|---|---|
space.internal.3xs | 0.25rem (4px) | primitive.space.1 | 0.25rem (4px) | primitive.space.1 |
space.internal.2xs | 0.5rem (8px) | primitive.space.2 | 0.5rem (8px) | primitive.space.2 |
space.internal.xs | 0.75rem (12px) | primitive.space.3 | 0.75rem (12px) | primitive.space.3 |
space.internal.sm | 1rem (16px) | primitive.space.4 | 1rem (16px) | primitive.space.4 |
space.internal.md | 1.5rem (24px) | primitive.space.6 | 1.5rem (24px) | primitive.space.6 |
space.internal.lg | 2rem (32px) | primitive.space.8 | 2rem (32px) | primitive.space.8 |
space.internal.xl | 2.5rem (40px) | primitive.space.10 | 2.5rem (40px) | primitive.space.10 |
space.internal.2xl | 3rem (48px) | primitive.space.12 | 3rem (48px) | primitive.space.12 |
| Token | screen/sm | screen/md | ||
|---|---|---|---|---|
space.group.sm | 0.5rem (8px) | primitive.space.2 | 1rem (16px) | primitive.space.4 |
space.group.md | 1rem (16px) | primitive.space.4 | 1.5rem (24px) | primitive.space.6 |
space.group.lg | 1.5rem (24px) | primitive.space.6 | 2rem (32px) | primitive.space.8 |
space.group.xl | 2rem (32px) | primitive.space.8 | 2.5rem (40px) | primitive.space.10 |
Section
Section titled “Section”| Token | screen/sm | screen/md | ||
|---|---|---|---|---|
space.section.sm | 4rem (64px) | primitive.space.16 | 5rem (80px) | primitive.space.20 |
space.section.md | 5rem (80px) | primitive.space.20 | 8rem (128px) | primitive.space.32 |
space.section.lg | 8rem (128px) | primitive.space.32 | 10rem (160px) | primitive.space.40 |
| Token | screen/sm | screen/md | ||
|---|---|---|---|---|
space.page.md | 1.5rem (24px) | primitive.space.6 | 2rem (32px) | primitive.space.8 |
Primitive tokens
Section titled “Primitive tokens”| Token | Value | Preview |
|---|---|---|
space.1 | 0.25rem (4px) | |
space.2 | 0.5rem (8px) | |
space.3 | 0.75rem (12px) | |
space.4 | 1rem (16px) | |
space.5 | 1.25rem (20px) | |
space.6 | 1.5rem (24px) | |
space.7 | 1.75rem (28px) | |
space.8 | 2rem (32px) | |
space.9 | 2.25rem (36px) | |
space.10 | 2.5rem (40px) | |
space.11 | 2.75rem (44px) | |
space.12 | 3rem (48px) | |
space.14 | 3.5rem (56px) | |
space.16 | 4rem (64px) | |
space.20 | 5rem (80px) | |
space.24 | 6rem (96px) | |
space.28 | 7rem (112px) | |
space.32 | 8rem (128px) | |
space.36 | 9rem (144px) | |
space.40 | 10rem (160px) | |
space.44 | 11rem (176px) | |
space.48 | 12rem (192px) | |
space.56 | 14rem (224px) | |
space.60 | 15rem (240px) | |
space.64 | 16rem (256px) | |
space.72 | 18rem (288px) | |
space.80 | 20rem (320px) | |
space.96 | 24rem (384px) |