Foundation
Foundation
Spacing
Grids, margins, gutters, and vertical rhythm for PDS Health pages. Everything is built on an 8-pixel scale — spacing values snap to the scale so layouts stay consistent across brands and breakpoints.
8-Pixel Scale
Each token maps a pixel value to a scale number (8px = 100, 16px = 200, and so on). Bars below are rendered at actual height.
Padding Tokens
T-shirt sizes resolve to different values on mobile vs desktop from s upward; xxxs through xs are the same everywhere.
| Token | Mobile | Desktop |
|---|---|---|
padding-xxxs | 4px | 4px |
padding-xxs | 8px | 8px |
padding-xs | 16px | 16px |
padding-s | 24px | 32px |
padding-m | 32px | 48px |
padding-l | 48px | 72px |
padding-xl | 56px | 80px |
padding-xxl | 72px | 96px |
padding-xxxl | 96px | 112px |
Grid
Pink areas are margins and gutters; white areas are columns. Rendered proportionally to each design width.
Vertical Rhythm
| Padding type | Desktop | Tablet | Mobile |
|---|---|---|---|
| Exterior Padding (xl) | 80px | 80px | 56px |
| Section Padding (lg) | 72px | 64px | 48px |
| Element Padding (sm) | 32px | 32px | 24px |
| Text Padding (xs) | 16px | 16px | 16px |
Exterior: Vertical padding at the beginning and end of a container. Section: Vertical padding for section breaks within a container — when more space is needed between two groups of related content. Element: Vertical padding between elements such as text and buttons, icons and text, pictures and text. Text: Vertical padding between text blocks.
Source of truth: O2 Design System Figma — Spacing (node 26-69). Two flags for Figma cleanup: (1) the Gutters section header reads "Desktop: 48px" but the drawn guides and callouts are 40px — documented as 40px here; (2) the 2px scale token is labeled "25" — verify intent.
© 2026 PDS Health — Oxygen Design System