Spacing & Layout

Spacing follows the Tailwind scale defined in @perido/tailwind-config, with a focus on even rhythm and predictable component density.

Spacing scale

Use multiples of 4px (1rem == 16px) for predictable layouts.

Token	Value
`1`	4px
`2`	8px
`3`	12px
`4`	16px
`6`	24px
`8`	32px
`12`	48px
`16`	64px

Layout tips

Keep form group spacing to mt-4 or mt-6.
Use max-w-6xl and mx-auto for wide sections.
In dense tables, use px-3 and py-2 for legibility.

Example

<section class="max-w-6xl mx-auto px-6 py-12">
  <div class="grid gap-6 md:grid-cols-2">
    <article class="bg-white p-6 rounded-lg shadow">...</article>
  </div>
</section>