F-03 · Foundation

Spacing

4pt grid, 12 кроків. Між компонентами — мультиплі 4. Container — 1240 wide, 880 narrow.

Grid4pt
Steps12
Containers3

Scale

CSS-змінні --space-*. Tailwind mapping mirrored.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px
--space-12
48px
--space-16
64px
--space-20
80px
--space-24
96px

Containers

container-narrow · 880px max

Лонг-форма: статті, login, public verify. Optimum line length для читання (~70ch).

container · 1240px max

Default. Усі marketing + cabinet content area.

container-wide · 1440px max

Admin tables, calendar views. Рідко.

Бічні відступи

BreakpointContainer paddingGutter
mobile (< 768)16px16px
tablet (768-1024)24px20px
desktop (≥ 1024)32px24px

Композиційні правила

Внутрішнє

Padding у компонентах

  • Card: 24 (compact 16-20)
  • Modal: 32
  • Button: 12 / 22 (med), 16 / 28 (lg)
  • Input: 13 / 16
  • Section vertical: 64-80
Зовнішнє

Margins між блоками

  • Між картками: 16-24
  • Між секціями: 64
  • Між підсекціями: 32-48
  • Title → body: 8-12
  • Title → meta-row: 4-8