Spacing

Note

Primitive tokens are are fixed values that will not differ between brands. Semantic tokens are mapped to primitive tokens and can differ between brands. Use whichever is more appropriate for your use case.

Primitive

--tng-spacing-00px

 

--tng-spacing-022px

 

--tng-spacing-044px

 

--tng-spacing-066px

 

--tng-spacing-088px

 

--tng-spacing-1010px

 

--tng-spacing-1212px

 

--tng-spacing-1616px

 

--tng-spacing-2020px

 

--tng-spacing-2424px

 

--tng-spacing-3232px

 

--tng-spacing-4040px

 

--tng-spacing-4444px

 

--tng-spacing-4848px

 

--tng-spacing-5656px

 

--tng-spacing-6464px

 

--tng-spacing-7272px

 

--tng-spacing-8080px

 

--tng-spacing-8888px

 

--tng-spacing-9696px

 

--tng-spacing-104104px

 

--tng-spacing-120120px

 

--tng-spacing-140140px

 

--tng-spacing-160160px

 

--tng-spacing-240240px

 

--tng-spacing-00px

 

--tng-spacing-022px

 

--tng-spacing-044px

 

--tng-spacing-066px

 

--tng-spacing-088px

 

--tng-spacing-1010px

 

--tng-spacing-1212px

 

--tng-spacing-1616px

 

--tng-spacing-2020px

 

--tng-spacing-2424px

 

--tng-spacing-3232px

 

--tng-spacing-4040px

 

--tng-spacing-4444px

 

--tng-spacing-4848px

 

--tng-spacing-5656px

 

--tng-spacing-6464px

 

--tng-spacing-7272px

 

--tng-spacing-8080px

 

--tng-spacing-8888px

 

--tng-spacing-9696px

 

--tng-spacing-104104px

 

--tng-spacing-120120px

 

--tng-spacing-140140px

 

--tng-spacing-160160px

 

--tng-spacing-240240px

 

Semantic

--tng-spacing-none0px

 

--tng-spacing-3xs2px

 

--tng-spacing-2xs4px

 

--tng-spacing-xs6px

 

--tng-spacing-sm8px

 

--tng-spacing-md10px

 

--tng-spacing-lg12px

 

--tng-spacing-xl16px

 

--tng-spacing-2xl20px

 

--tng-spacing-3xl24px

 

--tng-spacing-4xl32px

 

--tng-spacing-5xl40px

 

--tng-spacing-6xl44px

 

--tng-spacing-7xl48px

 

--tng-spacing-8xl56px

 

--tng-spacing-9xl64px

 

--tng-spacing-10xl72px

 

--tng-spacing-11xl80px

 

--tng-spacing-12xl88px

 

--tng-spacing-13xl96px

 

--tng-spacing-14xl104px

 

--tng-spacing-15xl120px

 

--tng-spacing-16xl140px

 

--tng-spacing-17xl160px

 

--tng-spacing-18xl240px

 

--tng-spacing-none0px

 

--tng-spacing-3xs2px

 

--tng-spacing-2xs4px

 

--tng-spacing-xs6px

 

--tng-spacing-sm8px

 

--tng-spacing-md10px

 

--tng-spacing-lg12px

 

--tng-spacing-xl16px

 

--tng-spacing-2xl20px

 

--tng-spacing-3xl24px

 

--tng-spacing-4xl32px

 

--tng-spacing-5xl40px

 

--tng-spacing-6xl44px

 

--tng-spacing-7xl48px

 

--tng-spacing-8xl56px

 

--tng-spacing-9xl64px

 

--tng-spacing-10xl72px

 

--tng-spacing-11xl80px

 

--tng-spacing-12xl88px

 

--tng-spacing-13xl96px

 

--tng-spacing-14xl104px

 

--tng-spacing-15xl120px

 

--tng-spacing-16xl140px

 

--tng-spacing-17xl160px

 

--tng-spacing-18xl240px