Spacing

One 4 px grid for padding, gaps and sizes, seven corner radii and five breakpoints. The Figma Spacing, Radius and Layout variable collections hold the same numbers as the Tailwind classes the components are built with, so spacing/6 in a design is p-6 in code.

How to use

• Spacing is Tailwind v4's scale: --spacing is 0.25rem (4 px) and every step is a multiple of it. WunderUI's styles.css does not change it, so p-4, gap-4, size-4 and mt-4 are all 16 px.
• Lay out with the fifteen steps below. Tailwind also builds the steps in between (p-7, p-9 …), but Figma has no variable for them, so stay on the scale wherever a layout comes from the Figma library.
• Radii are named, not numbered: rounded-md for controls, rounded-xl for cards and dialogs. A surface should have a larger radius than the controls inside it.
• Change a radius once in an @theme block and every component follows; see Theming.

// spacing/6 padding, spacing/4 gap, radius/xl corners: the Figma card, in classes
<div className="flex flex-col gap-4 rounded-xl border border-border bg-card p-6">
  <h3 className="text-base font-semibold">Usage this month</h3>
  <div className="flex gap-2">
    <Button variant="plain" size="sm">Export</Button>
    <Button size="sm">Upgrade</Button>
  </div>
</div>

Figma cannot put a dot in a variable name, so the half steps are spacing/0_5 and spacing/1_5.

Two more steps exist only in code: rounded-3xl (26.4px) and rounded-4xl (31.2px). They are derived from --radius (0.75rem), have no Figma variable and no component uses them, so prefer the seven steps above.

Tailwind's container class caps the width at the current breakpoint, which makes it 1536 px at 2xl, not the 1400 px of container/2xl. For the Figma frame, set the width yourself:

// container/2xl, grid/margin and grid/gutter: a 12-column page
<main className="mx-auto w-full max-w-[1400px] px-6">
  <div className="grid grid-cols-4 gap-6 md:grid-cols-12">
    <section className="col-span-4 md:col-span-8">…</section>
    <aside className="col-span-4">…</aside>
  </div>
</main>

.panel {
  padding: --spacing(6);              /* 24px */
  gap: calc(var(--spacing) * 4);      /* 16px, without the Tailwind function */
  border-radius: var(--radius-xl);    /* 16px */
}

The components do the same. A Card sets its padding as --card-spacing: --spacing(5) (20 px), and size="sm" switches it to --spacing(3) (12 px), so header, content and footer stay aligned at either size.