FOUNDATIONS

Spacing

4-pixel grid from Figma SCDC node 76:7723. Layout, padding, and gaps snap to this scale. Web values are rem at a 16px root: pixels ÷ 16.

Open in Figma

Grid

4px

All steps except space-2. Avoids half-pixels.

Web unit

rem

Root 16px. 16px = 1rem. Scales with the user font size.

Hairline

space-2

2px / 0.125rem for tight icon and label gaps.

Primitive scale

Use these tokens. Do not invent 6px, 10px, or 28px. The bar width is the token itself.

space-00px0rem

space-22px0.125rem

space-44px0.25rem

space-88px0.5rem

space-1212px0.75rem

space-1616px1rem

space-2020px1.25rem

space-2424px1.5rem

space-3232px2rem

space-4040px2.5rem

space-4848px3rem

space-6464px4rem

space-8080px5rem

space-9696px6rem

space-128128px8rem

space-160160px10rem

space-192192px12rem

space-256256px16rem

Token table

Figma	Token	CSS	px	rem	Legacy alias
space-0	spacing.0	--nitro-space-0	0px	0rem	—
space-2	spacing.2	--nitro-space-2	2px	0.125rem	—
space-4	spacing.4	--nitro-space-4	4px	0.25rem	spacing.100
space-8	spacing.8	--nitro-space-8	8px	0.5rem	spacing.200
space-12	spacing.12	--nitro-space-12	12px	0.75rem	spacing.300
space-16	spacing.16	--nitro-space-16	16px	1rem	spacing.400
space-20	spacing.20	--nitro-space-20	20px	1.25rem	spacing.500
space-24	spacing.24	--nitro-space-24	24px	1.5rem	spacing.600
space-32	spacing.32	--nitro-space-32	32px	2rem	spacing.800
space-40	spacing.40	--nitro-space-40	40px	2.5rem	spacing.1000
space-48	spacing.48	--nitro-space-48	48px	3rem	spacing.1200
space-64	spacing.64	--nitro-space-64	64px	4rem	—
space-80	spacing.80	--nitro-space-80	80px	5rem	—
space-96	spacing.96	--nitro-space-96	96px	6rem	—
space-128	spacing.128	--nitro-space-128	128px	8rem	—
space-160	spacing.160	--nitro-space-160	160px	10rem	—
space-192	spacing.192	--nitro-space-192	192px	12rem	—
space-256	spacing.256	--nitro-space-256	256px	16rem	—

Semantic tokens

Prefer these when the intent is padding or gap, not a raw step.

Vertical padding SM

padding-vertical-sm

spacing.paddingVerticalSm

--nitro-space-padding-vertical-sm

8px · 0.5rem · space-8

Horizontal padding MD

padding-horizontal-md

spacing.paddingHorizontalMd

--nitro-space-padding-horizontal-md

16px · 1rem · space-16

Grid gap LG

grid-gap-lg

spacing.gridGapLg

--nitro-space-grid-gap-lg

24px · 1.5rem · space-24

Implementation

html {
  font-size: 16px;
}

.small-spacing {
  padding: var(--nitro-space-8); /* 0.5rem = 8px */
}

.medium-spacing {
  margin-bottom: var(--nitro-space-16); /* 1rem = 16px */
}

.large-spacing {
  gap: var(--nitro-space-32); /* 2rem = 32px */
}