EmilyUI

Spacing

Use a stable spacing scale for layout rhythm, component consistency, and predictable utility output.

Scale configuration

The spacing scale powers margin, padding, gap, inset, width, and height utilities. Keep the scale tight and intentional. 

{
  "spacing": {
    "scale": {
      "0": "0",
      "1": "0.25rem",
      "2": "0.5rem",
      "3": "0.75rem",
      "4": "1rem",
      "6": "1.5rem",
      "8": "2rem",
      "12": "3rem"
    }
  }
}

Common patterns

p-4 px-6 py-3
m-4 mt-8 mx-auto
gap-3 gap-6
inset-0 top-4
w-12 h-12 min-h-8

Practical rules

  • Use 1-2 base steps for tight controls.
  • Use 4-8 steps for section spacing.
  • Prefer gap utilities over ad hoc child margins in layouts.
  • Introduce new token steps only when reuse is clear.

Choosing new spacing tokens

  1. Check if an existing step solves 80 percent of the cases.
  2. If not, add one new step and test across at least two components.
  3. Regenerate utilities and confirm class names remain understandable.
  4. Document the new step with examples to avoid future drift.

Do not do this

  • Hardcode one-off pixel values in page CSS when token steps exist.
  • Mix multiple spacing systems inside one feature area.
  • Use different spacing logic between docs and production components.

Next step

Continue to Typography to define readable type scales and line heights.