foundations / spacing

Spacing

Spacing in DK is part of the theme contract, so internal rhythm and external layout stay related.

Representative components
4
Tool routes
3
Token notes
2

Principles

Core principles

These are the design-system rules this foundation should reinforce.

  • Spacing is not decoration; it is part of readability, grouping, and tap-target design.
  • Component internals and page layout should come from the same step system.
  • Dense systems should compress intelligently rather than uniformly.

Model

How DK models it

This section connects the concept to the actual DK math and token pipeline.

  • Spacing tokens derive from the same scale family as typography.
  • Layout and composition tools evaluate whether spacing decisions hold up when content changes.
  • Component recipes compile padding, gap, and block sizes from shared steps.

Practice

How to use it in product work

These are the decisions designers and engineers should make with this foundation in mind.

  • Use named spacing steps for stacks, section spacing, and control internals.
  • Prefer vertical rhythm that matches the selected density instead of one-off gap overrides.
  • Audit tables, cards, and overlays as spacing systems rather than isolated surfaces.

Interactive route

scale

Use the interactive route to explore this foundation live.

Interactive route

layout

Use the interactive route to explore this foundation live.

Interactive route

compose

Use the interactive route to explore this foundation live.

Proofs

What the proof layer guarantees

These are the reliability claims DK makes about this foundation today.

  • Components can be checked for containment at constrained widths.
  • Dense presets do not silently reduce targets below the expected floor.
  • Spacing changes still feed the same proof and snapshot surface.

Token notes

  • Spacing affects control heights, shell padding, section rhythm, and responsive containment.
  • Preset density influences spacing throughout the component registry.