# Spacing.

## Responsive.

| CSS custom property | zero | small | large | ultra |
| --- | --- | --- | --- | --- |
| `--sbb-spacing-responsive-xxxs` | 12px | 12px | 16px | 16px |
| `--sbb-spacing-responsive-xxs` | 16px | 16px | 24px | 24px |
| `--sbb-spacing-responsive-xs` | 20px | 20px | 24px | 24px |
| `--sbb-spacing-responsive-s` | 24px | 24px | 32px | 32px |
| `--sbb-spacing-responsive-m` | 32px | 32px | 40px | 48px |
| `--sbb-spacing-responsive-l` | 32px | 40px | 56px | 64px |
| `--sbb-spacing-responsive-xl` | 32px | 48px | 80px | 96px |
| `--sbb-spacing-responsive-xxl` | 48px | 72px | 96px | 120px |

## Fixed

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-spacing-fixed-1x` | 4px |
| `--sbb-spacing-fixed-2x` | 8px |
| `--sbb-spacing-fixed-3x` | 12px |
| `--sbb-spacing-fixed-4x` | 16px |
| `--sbb-spacing-fixed-5x` | 20px |
| `--sbb-spacing-fixed-6x` | 24px |
| `--sbb-spacing-fixed-7x` | 28px |
| `--sbb-spacing-fixed-8x` | 32px |
| `--sbb-spacing-fixed-9x` | 36px |
| `--sbb-spacing-fixed-10x` | 40px |
| `--sbb-spacing-fixed-12x` | 48px |
| `--sbb-spacing-fixed-14x` | 56px |
| `--sbb-spacing-fixed-16x` | 64px |
| `--sbb-spacing-fixed-18x` | 72px |
| `--sbb-spacing-fixed-19x` | 76px |
| `--sbb-spacing-fixed-20x` | 80px |
| `--sbb-spacing-fixed-24x` | 96px |
| `--sbb-spacing-fixed-30x` | 120px |

---

Source: https://digital.sbb.ch/en/design-system/lyne/design-tokens/spacing/