Spacing

19 tokens

Semantic gap and margin steps, plus the primitive scale they draw from. The Source column is the number as authored in Figma; the Value column is what the build script emits into CSS.

Gap

7 tokens

Scale	Token	CSS variable	Value	Source	Description
				0px	No spacing, used when elements should sit flush against each other, with no gap.
				25px	Smallest spacing step, for tight groupings. This is the primary spacing between grouped components.
				50px	Small gap between related elements.
				75px	Medium gap for standard content separation.
				100px	Large gap between content groups.
				150px	Extra-large gap between major content groups or sections.
				200px	Maximum standard gap for large-scale composition and section separation.

Margin

3 tokens

Scale	Token	CSS variable	Value	Source	Description
				100px	Default outer composition margin for 16:9, 1:1 and 4:5 formats.
				75px	Default outer composition margin for wide 1.91:1 formats.
				25px	Reduced margin used for containers or compositions requiring tighter spacing.

Primitive spacing scale

9 tokens

Scale	Token	CSS variable	Value	Source	Description
				0px	Zero spacing, no gap.
				25px	Lean's base spacing unit.
				50px	A step in Lean's spacing scale.
				75px	A step in Lean's spacing scale.
				100px	A step in Lean's spacing scale.
				125px	A step in Lean's spacing scale.
				150px	A step in Lean's spacing scale.
				175px	A step in Lean's spacing scale.
				200px	A step in Lean's spacing scale.