Space
Semantic tokens
Section titled “Semantic tokens”Internal
Section titled “Internal”| Token | screen/sm | screen/md | ||
|---|---|---|---|---|
space.internal.4xs | 0.25rem (4px) | primitive.space.100 | 0.25rem (4px) | primitive.space.100 |
space.internal.3xs | 0.375rem (6px) | primitive.space.150 | 0.375rem (6px) | primitive.space.150 |
space.internal.2xs | 0.5rem (8px) | primitive.space.200 | 0.5rem (8px) | primitive.space.200 |
space.internal.xs | 0.75rem (12px) | primitive.space.300 | 0.75rem (12px) | primitive.space.300 |
space.internal.sm | 1rem (16px) | primitive.space.400 | 1rem (16px) | primitive.space.400 |
space.internal.md | 1.5rem (24px) | primitive.space.600 | 1.5rem (24px) | primitive.space.600 |
space.internal.lg | 2rem (32px) | primitive.space.800 | 2rem (32px) | primitive.space.800 |
space.internal.xl | 2.5rem (40px) | primitive.space.1000 | 2.5rem (40px) | primitive.space.1000 |
space.internal.2xl | 3rem (48px) | primitive.space.1200 | 3rem (48px) | primitive.space.1200 |
| Token | screen/sm | screen/md | ||
|---|---|---|---|---|
space.group.sm | 0.5rem (8px) | primitive.space.200 | 0.5rem (8px) | primitive.space.200 |
space.group.md | 1rem (16px) | primitive.space.400 | 1rem (16px) | primitive.space.400 |
space.group.lg | 1.5rem (24px) | primitive.space.600 | 1.5rem (24px) | primitive.space.600 |
space.group.xl | 2rem (32px) | primitive.space.800 | 2rem (32px) | primitive.space.800 |
| Token | screen/sm | screen/md | ||
|---|---|---|---|---|
space.grid.md | 1rem (16px) | primitive.space.400 | 1rem (16px) | primitive.space.400 |
Section
Section titled “Section”| Token | screen/sm | screen/md | ||
|---|---|---|---|---|
space.section.3xs | 0.5rem (8px) | primitive.space.200 | 0.5rem (8px) | primitive.space.200 |
space.section.2xs | 0.75rem (12px) | primitive.space.300 | 0.75rem (12px) | primitive.space.300 |
space.section.xs | 1rem (16px) | primitive.space.400 | 1rem (16px) | primitive.space.400 |
space.section.sm | 1.5rem (24px) | primitive.space.600 | 1.5rem (24px) | primitive.space.600 |
space.section.md | 2rem (32px) | primitive.space.800 | 2rem (32px) | primitive.space.800 |
space.section.lg | 2.5rem (40px) | primitive.space.1000 | 2.5rem (40px) | primitive.space.1000 |
space.section.xl | 3.5rem (56px) | primitive.space.1400 | 3.5rem (56px) | primitive.space.1400 |
space.section.2xl | 4rem (64px) | primitive.space.1600 | 4rem (64px) | primitive.space.1600 |
space.section.3xl | 5rem (80px) | primitive.space.2000 | 5rem (80px) | primitive.space.2000 |
space.section.4xl | 8rem (128px) | primitive.space.3200 | 8rem (128px) | primitive.space.3200 |
space.section.5xl | 10rem (160px) | primitive.space.4000 | 10rem (160px) | primitive.space.4000 |
space.section.6xl | 12rem (192px) | primitive.space.4800 | 12rem (192px) | primitive.space.4800 |
| Token | screen/sm | screen/md | ||
|---|---|---|---|---|
space.page.md | 1rem (16px) | primitive.space.400 | 2rem (32px) | primitive.space.800 |
Primitive tokens
Section titled “Primitive tokens”| Token | Value | Preview |
|---|---|---|
space.100 | 0.25rem (4px) | |
space.150 | 0.375rem (6px) | |
space.200 | 0.5rem (8px) | |
space.300 | 0.75rem (12px) | |
space.400 | 1rem (16px) | |
space.500 | 1.25rem (20px) | |
space.600 | 1.5rem (24px) | |
space.700 | 1.75rem (28px) | |
space.800 | 2rem (32px) | |
space.900 | 2.25rem (36px) | |
space.1000 | 2.5rem (40px) | |
space.1100 | 2.75rem (44px) | |
space.1200 | 3rem (48px) | |
space.1400 | 3.5rem (56px) | |
space.1600 | 4rem (64px) | |
space.2000 | 5rem (80px) | |
space.2400 | 6rem (96px) | |
space.2800 | 7rem (112px) | |
space.3200 | 8rem (128px) | |
space.3600 | 9rem (144px) | |
space.4000 | 10rem (160px) | |
space.4400 | 11rem (176px) | |
space.4800 | 12rem (192px) | |
space.5600 | 14rem (224px) | |
space.6000 | 15rem (240px) | |
space.6400 | 16rem (256px) | |
space.7200 | 18rem (288px) | |
space.8000 | 20rem (320px) | |
space.9600 | 24rem (384px) |