Spacings — Natalia Koldaeva Design System

§01 Spacing Scale — 4px Base Unit

Every spacing value is a multiple of 4px — the base unit. This creates a consistent spatial rhythm across all components, layouts, and platforms. The scale maps 1:1 to iOS HIG points and Android dp units at standard density.

--sp-00px0

Reset · no spacing

--sp-14px0.25rem

Icon nudge · tight label gap · divider offset

--sp-28px0.5rem

Inline element gap · tag margin · badge padding

--sp-312px0.75rem

Compact list gap · small card inner padding

--sp-4 ★16px1rem
Base unit · mobile margin · body paragraph gap

--sp-520px1.25rem

Card inner padding (mobile) · form field gap

--sp-624px1.5rem

Desktop gutter · card padding · section header gap

--sp-832px2rem

Card inner padding (desktop) · group spacing

--sp-1040px2.5rem

Large card padding · between feature blocks

--sp-1248px3rem

Section padding (mobile) · H2 top margin

--sp-1664px4rem

Hero content padding · between page sections

--sp-2080px5rem

Desktop outer margin (1440px) · hero bottom

--sp-2496px6rem

Page section vertical padding · major layout gaps

--sp-32128px8rem

Full-bleed section divider · landing page hero

§02 Spacing in Practice

Padding · Component Interior

SM Button · 8 × 20px

Label

MD Button · 12 × 28px

Label

Card · 32px all sides

Card content area

SM button--sp-2 × --sp-5

MD button--sp-3 × --sp-7

Card (desktop)--sp-8 · 32px

Card (mobile)--sp-5 · 20px

Gap · Between Components

Tag row · gap 8px

iOSSwiftUIWCAG AA

List items · gap 16px

Card grid · gap 24px

Inline tags--sp-2 · 8px

List items--sp-4 · 16px

Card grid--sp-6 · 24px

Section blocks--sp-12 · 48px

Margin · Section & Layout

Vertical section rhythm · 96px

96px · --sp-24

Horizontal margin · 16px mobile

16

content area

16

Page sections--sp-24 · 96px

Mobile margin--sp-4 · 16px

Tablet margin--sp-6 · 24px

Desktop margin--sp-12 · 48px

§03 Layout Grid · Web

All web layouts use a 12-column grid at tablet and above, collapsing to 4 columns on mobile. The container is capped at 1240px and centered horizontally.

XL Desktop≥ 1440px

Columns12

Gutter24px

Margin80px

Max Width1240px

natalia.design · 1440px · 12 columns · 24px gutter · 80px margin

Outer margin80px--sp-20 each side

Gutter24px--sp-6 · 11 gutters

Column~78pxfluid · 12 cols

Container1240pxmax-width capped

Desktop1280px

Columns12

Gutter24px

Margin48px

Container1184px

natalia.design · 1280px · 12 columns · 24px gutter · 48px margin

Outer margin48px--sp-12 each side

Gutter24px--sp-6 · 11 gutters

Column~78pxfluid · 12 cols

Container1184pxviewport − margins

Laptop1024px

Columns12

Gutter20px

Margin32px

Container960px

natalia.design · 1024px · 12 columns · 20px gutter · 32px margin

Outer margin32px--sp-8 each side

Gutter20px--sp-5 · 11 gutters

Column~60pxfluid · 12 cols

Container960pxviewport − margins

Tablet768px

Columns8

Gutter16px

Margin24px

Container720px

natalia.design · 768px · 8 columns · 16px gutter · 24px margin

Outer margin24px--sp-6 each side

Gutter16px--sp-4 · 7 gutters

Column~72pxfluid · 8 cols

Container720pxviewport − margins

Mobile375px

Columns4

Gutter16px

Margin16px

Container343px

natalia.design · 375px · 4 columns · 16px gutter · 16px margin

Outer margin16px--sp-4 each side

Gutter16px--sp-4 · 3 gutters

Column~70pxfluid · 4 cols

Container343pxviewport − 32px

§04 Layout Grid · Mobile — iOS & Android

Native mobile layouts follow platform-specific grid guidelines. Both iOS HIG and Android Material Design 3 use a 4-column baseline at phone sizes with 16pt/dp margins and gutters. The 4px spacing base maps 1:1 to iOS points and Android dp at standard display density.

iOS Grid System

Apple HIG — UIKit & SwiftUI

iOS · iPadOS

iPhone SE

375 × 667pt
4 col · 16pt

iPhone 14

390 × 844pt
4 col · 16pt

iPhone 14 PM

430 × 932pt
4 col · 20pt

iPad (portrait)

810 × 1080pt
6+ col · 20pt

Device

Width (pt)

Margin (pt)

iPhone SE@2x · 750px

375pt4 cols · 16pt gutter

16pt--sp-4 equivalent

iPhone 14@3x · 1170px

390pt4 cols · 16pt gutter

16pt--sp-4 equivalent

iPhone 14 Plus@3x · 1284px

428pt4 cols · 16pt gutter

20pt--sp-5 equivalent

iPhone 14 Pro Max@3x · 1290px

430pt4 cols · 16pt gutter

24pt--sp-6 equivalent

iPad portrait@2x

810pt6–8 cols · 20pt gutter

20–24pt--sp-5/6 equivalent

Android Grid System

Material Design 3 — dp units

Android

Compact <600dp

360dp · 4 cols
16dp margin

Medium 600–840dp

600dp · 8 cols
16dp margin

Expanded ≥840dp

840dp · 12 cols
24dp margin

Window class

Width (dp)

Cols / Margin

CompactPhone portrait

< 600dp360dp typical

4 cols · 16dp--sp-4 equivalent

MediumTablet portrait · foldable

600–840dpPixel Tablet, Fold

8 cols · 16dp--sp-4 equivalent

ExpandedTablet landscape

≥ 840dpPixel Tablet landscape

12 cols · 24dp--sp-6 equivalent

All classesComponent base grid

8dp gridAlignment baseline

4dp base= --sp-1 · 1:1 px

§05 Responsive Breakpoints

Viewport width range320px → 1440px+

320

375

768

1024

1280

1440+

xs

Mobile (sm)

Tablet (md)

Laptop (lg)

xl

2xl

--bp-xs

320px

4 columns

Minimum supported width · 12px outer margin

--bp-sm

375px

4 columns

iPhone baseline · iOS HIG default · 16pt margin · --sp-4

--bp-md

768px

8 columns

iPad portrait · Android medium · 24px margin · --sp-6

--bp-lg

1024px

12 columns

iPad landscape · laptop baseline · 32px · --sp-8

--bp-xl

1280px

12 columns

Desktop standard · 48px margin · --sp-12

--bp-2xl

1440px

12 columns

XL desktop · 80px margin · --sp-20 · centered

breakpoints.css — mobile-first min-width queries

/* Mobile-first — min-width approach. Never use max-width. */
/* xs default  */ /* No query — base styles apply from 320px up     */
@media (min-width: 375px)  { /* sm — phone baseline                  */ }
@media (min-width: 768px)  { /* md — tablet / iPad portrait          */ }
@media (min-width: 1024px) { /* lg — laptop / iPad landscape         */ }
@media (min-width: 1280px) { /* xl — desktop standard                */ }
@media (min-width: 1440px) { /* 2xl — XL desktop                     */ }

§06 CSS Design Tokens

spacing-tokens.css

/* ── SPACING SCALE — 4px base unit ─────────────────────── */
:root {
  --sp-0:    0px;           /*   0px — None                    */
  --sp-1:    4px;           /*   4px — Icon nudge, tight gap   */
  --sp-2:    8px;           /*   8px — Inline gap, tag margin  */
  --sp-3:    12px;          /*  12px — Compact list gap        */
  --sp-4:    16px;          /*  16px — Base ★ · mobile margin  */
  --sp-5:    20px;          /*  20px — Card padding (mobile)   */
  --sp-6:    24px;          /*  24px — Desktop gutter          */
  --sp-8:    32px;          /*  32px — Card padding (desktop)  */
  --sp-10:   40px;          /*  40px — Feature block gap       */
  --sp-12:   48px;          /*  48px — Section padding (mob)   */
  --sp-16:   64px;          /*  64px — Hero padding            */
  --sp-20:   80px;          /*  80px — Desktop outer margin    */
  --sp-24:   96px;          /*  96px — Page section padding    */
  --sp-32:   128px;         /* 128px — Landing hero divider    */

  /* ── LAYOUT GRID — WEB ─────────────────────────────── */
  --container-max:    1240px;
  --container-prose:  720px;
  --container-card:   480px;
  --gutter-desktop:   24px;
  --gutter-tablet:    16px;
  --gutter-mobile:    16px;
  --margin-2xl:       80px;
  --margin-xl:        48px;
  --margin-lg:        32px;
  --margin-md:        24px;
  --margin-sm:        16px;
  --margin-xs:        12px;

  /* ── BREAKPOINTS ──────────────────────────────────── */
  --bp-xs:   320px;
  --bp-sm:   375px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;
  --bp-2xl:  1440px;
}

§07 Usage Rules

4

Always Use the 4px Scale

Every spacing value must be a multiple of 4px. Never use arbitrary values like 7px, 13px, or 19px. The 4px grid maps directly to iOS points and Android dp at 1× density, keeping web and native layouts numerically consistent.

★

16px is the Spatial Base

--sp-4 (16px) is the spatial base — the minimum comfortable touch padding, the default mobile margin, and the baseline gutter on small screens. Everything scales from here: --sp-2 for tight UI, --sp-8 for comfortable cards, --sp-24 for page sections.

↔

Never Touch Screen Edges

Always apply horizontal margins. Content must never touch viewport edges. On mobile, 16px minimum each side. On desktop use the .container utility — it applies the correct margin per breakpoint automatically up to the 1240px max-width cap.

12

Column Span Guidelines

Desktop 12-col: full-width = 12, body prose = 8, sidebar = 4. Tablet 8-col: main = 6, aside = 4. Mobile 4-col: most content = 4, simple grids stack to 2. Minimum meaningful span is 2 columns at any breakpoint.

⬆

Mobile-First · Min-Width Only

Design and code from the smallest breakpoint upward using min-width media queries exclusively. Default styles target 320px. Overrides layer on at 375 → 768 → 1024 → 1280 → 1440px. Never use max-width queries — they conflict with progressive enhancement.

♿

Touch Targets & Accessibility

Interactive elements on mobile must meet 44×44pt (iOS HIG) or 48×48dp (Android MD3) minimum tap target — that's --sp-12 (48px). Use padding to expand small visual elements. Apply --sp-2 (8px) minimum padding to all tappable text links.