Spacing

Consistent spacing creates rhythm and structure. Every spacing value in the Frequency system maps to a Mantine token — no arbitrary pixel values.

Spacing Scale

The Frequency theme defines five spacing tokens. Use these via Mantine’s p, m, gap, and related props.

xs

8px

Icon gaps, tight element pairs

sm

12px

Related inline elements, compact padding

md

16px

Default component padding, standard gaps

lg

24px

Section spacing, card padding

xl

32px

Major sections, page-level spacing

Radius Scale

Border radius tokens control roundness across components. The default is md (8px).

Token	Value	Usage
`xs`	4px	Small elements, tags
`sm`	6px	Inputs, compact components
`md`	8px	Default — cards, Paper, buttons
`lg`	12px	Modals, larger containers
`xl`	16px	Pills, full-rounding effects

Using Spacing Props

Mantine components accept spacing tokens as prop values. Always use tokens — never raw pixel values.

Padding


<Paper p="md">          {/* 16px all sides */}
<Paper p="lg">          {/* 24px all sides */}
<Paper px="lg" py="md"> {/* 24px horizontal, 16px vertical */}

Margin


<Text mb="md">          {/* 16px bottom margin */}
<Stack mt="xl">         {/* 32px top margin */}

Gap


<Stack gap="md">        {/* 16px between children */}
<Group gap="sm">        {/* 12px between children */}
<SimpleGrid spacing="lg"> {/* 24px grid gap */}

Spacing in Practice

Card Content

Card Title

The card uses p="lg" (24px) for padding and mt="xs" (8px) between title and description.

Form Layout

Name

Inline Elements

Status

Active

New

Guidelines

Don't

Use arbitrary pixel values like padding: 13px or gap: 22px

Use Mantine spacing tokens (xs, sm, md, lg, xl) for all spacing

Symmetrical padding — if top is md, sides and bottom should be md too unless there’s a structural reason
Consistent gaps — use sm for tightly related items, md for standard layouts, lg for section-level separation
Stack for vertical, Group for horizontal — don’t use manual margins when layout components handle spacing
xs is your friend — use it for the tiny gaps between an icon and its label, or between a badge and text