Spacing
Spacing sets the gap between two elements by how closely they belong together.
Ladder
Four steps set the space between elements. The closer two elements belong together, the smaller the step.
| Step | Class | Purpose |
|---|---|---|
| 4px | gap-1 | The icon and the label of a Badge, a Toggle, or an xs or sm Button |
| 8px | gap-2 | A label and its control, and the Buttons in a row |
| 16px | gap-4 | The parts of a Card, a Dialog, or a Sheet, and the Cards in a grid |
| 24px | gap-6 | The sections of a page |
Inside a component, Summit also uses half steps such as 2px, 6px, and 10px. Keep the half steps for the components, and use the four steps to space a layout.
Padding
A surface sets its own padding, so the content inside it needs none.
| INV-2026-014 | $4,200.00 |
| Surface | Padding | Gap Between Parts |
|---|---|---|
Button at default and lg | 12px at each end, or 10px next to an icon | 6px |
| Input and Textarea | 10px at each end | None |
| Table cell | 8px | None |
| Menu | 4px around the list and 6px in each item | None |
| Popover | 10px | 10px |
| Card | 16px, or 12px at size="sm" | The same |
| Sheet | 16px in its header and its footer | 16px |
| Toast | 16px | 12px |
| Dialog and Alert Dialog | 24px | 16px |
Rules
Apply these rules to the layout that the product builds around the components.
Gaps
Set gap-* on the parent, as a Card, a Dialog, and a Field do. A gap is applied only between children, so the first and the last child are flush with the parent’s padding. A margin on each child adds to that padding at one end.
gap-4 on the parent; the fields are 16px apart and 16px from each edge.mb-4, the last margin adds to the Card’s padding, and the space under the fields grows to 32px.Logical Properties
Use ps-, pe-, ms-, me-, start-, and end- in place of pl-, pr-, ml-, mr-, left-, and right- so that the layout mirrors with no second class. Use a physical class only for a physical side, such as a Sheet that opens from the left. See Right-to-Left for dir and Base UI’s DirectionProvider.
Density
Summit has one density, and no setting tightens a whole screen. For a dense row, use the sm or xs size for its controls. Avoid lowering --spacing, as every height, padding, and gap is a multiple of it.
Accessibility
--spacing is set in rem, so every height and padding grows with the font size that users set in the browser. This addresses WCAG 2.2 SC 1.4.4 Resize Text, which requires that text can be resized to 200% without loss of content.
In Code
The size is the class number times 4px: gap-2 is 8px, and p-6 is 24px.
<main className="flex flex-col gap-6">
<section className="grid gap-4 sm:grid-cols-2">
<Card />
<Card />
</section>
<div className="flex justify-end gap-2">
<Button variant="outline">Cancel</Button>
<Button>Save</Button>
</div>
</main>