Spacing — Petanque Life Design

4-pixel base — matches Tailwind's scale so there is no cognitive overhead when switching between shadowed and semantic values. Minimum touch target is spacing[11] (44px, per WCAG 2.5.5).

Scale visualised

0

px

1px

0.5

0.125rem

1

0.25rem

1.5

0.375rem

2

0.5rem

2.5

0.625rem

3

0.75rem

3.5

0.875rem

4

1rem

5

1.25rem

6

1.5rem

7

1.75rem

8

2rem

9

2.25rem

10

2.5rem

11

2.75rem

12

3rem

14

3.5rem

16

4rem

20

5rem

24

6rem

28

7rem

32

8rem

Semantic spacing roles

Prefer these over raw scale values — they convey intent.

ts · packages/shared/src/design/tokens/spacing.mjs

import { space } from '@petanque-life/shared/design/tokens/spacing';

space.hairline    // 1px
space.xxs         // 2px
space.xs          // 4px
space.sm          // 8px
space.md          // 16px  — default gutter
space.lg          // 24px
space.xl          // 32px
space.section     // 96px  — between major sections
space.gutter      // 24px  — default container gutter
space.container   // 1280px — editorial max width
space.containerNarrow // 672px — optimal line length