G
Tokens
TypographySpacingColorRadiusShadowMotion
Foundational
FieldMenuTextbox

Spacing

Sizes

xs
--grn-space-xs
s
--grn-space-s
s2
--grn-space-s2
m
--grn-space-m
l
--grn-space-l
l2
--grn-space-l2
xl
--grn-space-xl
xl2
--grn-space-xl2
xxl
--grn-space-xxl

Utilities

betweenFormTitleAndContent
--grn-space-betweenFormTitleAndContent
betweenFormContents
--grn-space-betweenFormContents
betweenFormContentAndActions
--grn-space-betweenFormContentAndActions
betweenFormControlAndLabel
--grn-space-betweenFormControlAndLabel
fieldPaddingX
--grn-space-fieldPaddingX

Design guidelines

For smaller spacings (up to ~80px)
Whenever possible use one of the preset spaces.
If more granular control is needed, use a number multiple of 8.

For larger spacings
Use a number multiple of 8.

Don't use the preset spaces to size elements (like width and height), instead use a number multiple of 8.