Consistent scale for padding, margins, gaps, and layout across all components and frameworks.
A consistent scale for padding, margins, gaps, and other spatial relationships. All values use rem units for scalability and accessibility.
import { css } from "@pindoba/styled-system/css";
<div className={css({ padding: "md" })}>Uniform padding</div>
<div className={css({ paddingX: "lg", paddingY: "sm" })}>
Asymmetric padding
</div>
<div className={css({ marginX: "auto", marginY: "lg" })}>
Centered with vertical margin
</div><div className={css({ display: "flex", gap: "md" })}>
<div>Item 1</div>
<div>Item 2</div>
</div>
<div className={css({
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gap: "lg",
})}>
<div>Grid item</div>
<div>Grid item</div>
<div>Grid item</div>
</div><div
className={css({
padding: { base: "sm", md: "md", lg: "lg" },
})}
>
Responsive padding
</div>4xs–2xs: Fine-tuning, icon gaps, compact elementsxs: Tight spacing between related elementssm: Close relationships, form field gapsmd: Standard spacing, comfortable defaultlg–xl: Generous spacing, component separation2xl–11xl: Major layout spacing, hero sections