Tokens

Layout shares the global spacing surface and exposes a small set of gap and rhythm tokens.

Layout uses the shared spacing surface.

CSS

:root {
  --gap: 0.75rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
}

Most layout primitives should read --gap and allow local overrides.

CSS

.settings-form {
  --gap: var(--space-5);
}

Prefer a local custom property over adding many one-off utility classes. Use inline styles only for demos, prototypes, or truly dynamic values.