- Every padding, gap and margin comes from the spacing scale. There are no in-between values.
- The scale is built on 5px:
1= 5px,2= 10px,4= 20px. It's the rhythm Wikicasa already uses most (10px, 20px, 15px and 5px make up most of today's spacing). - Space is set on the container (padding and gaps), not on the children (margins).
- Spacing adapts to context: tighter inside components and on phones, looser between sections and on desktop.
The scale
The steps you'll use most are 2 (10px) inside components, 4 (20px) between related blocks, and 8 (40px) or more between sections. Larger steps (10–24) are for page-level rhythm.
Parts of spacing
Spacing has three parts:
- Padding: space inside an element, between its edge and its content.
- Gap: space between elements in a stack, row or grid.
- Margin: space outside an element. Use it only for page layout, never to push siblings apart.
✓ Do
Set the gap on the parent (DsStack gap="4", tw-grid tw-gap-4) so every child is spaced the same way.
✕ Don't
Add tw-mt-* or tw-mb-* to individual children to fix spacing. Margins on children drift apart over time.