PADDING
Padding is the internal spacing within components that separates content from their boundaries.
It provides breathing room for elements, preventing cluttered layouts and making information easier to read and engage with.
TOKENS
Use tokens coming from the design system.
Use semantic tokens instead of token values.
Don’t use custom or hard-coded values.
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
COMPACT DATA
Components that appear in groups and need to display clear, distinct information within a limited space.
Tokens:
— 16px
Button
Health trends card
VARIABLE
HEIGHT
CONTENT
Components with varying content use padding to provide breathing space, improving readability and making information easier to scan and understand.
Tokens:
— 16px
Alert
Tooltip
File upload
CARD-BASED
CONTENT
Content without a background may use minimal padding when space is limited, ensuring information fits neatly while remaining clear and easy to read.
Tokens:
— 12px
Doctor listing card
FOOTERS
Footers include padding to separate their elements from surrounding content. On mobile, padding is reduced to accommodate smaller screen sizes while maintaining clarity.
Tokens:
— 20px
2 buttons
1 button