SPACING
Spacing tokens define the gaps between elements within components and across layout blocks — both horizontally and vertically.
They create visual consistency and rhythm, making content easier to scan and navigate across screens.
TOKENS
We use primitive spacing tokens as the base values for spacing across our system. They ensure consistency and clarity in layouts.
Name
Value
spacing-none
0px
spacing-xxs
2px
spacing-xs
4px
spacing-sm
6px
spacing-md
8px
spacing-lg
12px
spacing-xl
16px
spacing-2xl
20px
spacing-3xl
24px
spacing-4xl
32px
spacing-5xl
40px
spacing-6xl
48px
spacing-7xl
64px
spacing-8xl
80px
spacing-9xl
96px
spacing-10xl
128px
spacing-11xl
160px
Between Cards
Cards are self-contained content blocks that can be placed side by side within the product and scroll off the screen.
Tokens:
— 12px
Track order cards
Product cards
File upload
Between chips
Chips help filter or categorize content and are often placed side by side, scrolling off the screen when the list extends beyond view.
Tokens:
— 8px
Chips
Screen mobile
This defines the overall spacing framework used across our mobile designs.
Tokens:
— 16px
Mobile screens
Between text
This defines the overall spacing framework used across our mobile designs.
Tokens:
— 8px
Accordion
Heading to body
Text to component
This applies to any text style that isn’t using a display type within a component.
Tokens:
— 16px
Title to component
Between sections
Sections are grouped content areas with closer proximity to make their separation from other parts of the interface clear.
Tokens:
— 16px
Cart screen
Between sections