styles

Spacing

Spacing is the distance inside, between and around components and layout elements.

In components

Components use padding for the space between their edge and content, and gaps between their parts (icon and label, title and price).

  • Card body: padding 3 (15px) on phones, 4 (20px) from md:.
  • Icon and label: gap 1 (5px).
  • Stacked text in a card (price, title, place): gap 1 (5px).
  • Buttons and inputs: use the library components as they are. Their padding is part of the component.

In page layouts

  • Page side margins: tw-px-4 (20px), within tw-max-w-xl (1280px), centered with tw-mx-auto.
  • Between sections of a page: gap 8–12 (40–60px).
  • Between a section title and its content: gap 4 (20px).
  • Grids of cards: gap 4 (20px).

✓ Do

Use DsStack for vertical rhythm, and nest stacks: a column of sections, each a column of blocks, each a row of parts.

✕ Don't

Pick a value because it "looks right" in one place. If the scale really lacks a step, propose one with /ds-add.