Elements

Foundation

Spacing

Spacing tokens separate elements inside components and layout blocks, horizontally and vertically. The 4px grid keeps product UI consistent; marketing layouts use the same scale at larger steps. For internal inset, see Padding.

Rules

  • Use semantic tokens in components. Map to foundational size-N values, not arbitrary pixels.
  • Application spacing stays tight: component-default (16px) is the usual fallback.
  • Website spacing breathes more: scale up between sections, columns, and CTAs.
  • Horizontal and vertical tokens are named separately. Do not reuse a vertical value for horizontal layout.
  • Section gutters come from Container. Do not stack duplicate horizontal inset on children.
  • When in doubt, add vertical space on marketing pages, not less.

Foundational Tokens

All spacing builds on a 4px grid. Foundational tokens (size-N) are the base layer. Semantic tokens below reference these values so you do not need to remember that component-default is size-16.

size-44px1--space-1
size-88px2--space-2
size-1212px3--space-3
size-1616px4--space-4
size-2424px6--space-6
size-3232px8--space-8
size-4848px12--space-12
size-6464px16--space-16
size-9696px24--space-24
size-128128px32--space-32
Foundational scale visualised

size-4 · gap-1 · 4px

size-8 · gap-2 · 8px

size-16 · gap-4 · 16px

size-24 · gap-6 · 24px

size-32 · gap-8 · 32px

size-48 · gap-12 · 48px

Application

Dashboard and product UI spacing. Dense by default: 16px component gaps, 24px content insets. Form fields and panel stacks use the vertical tokens below.

Horizontal

Elements placed next to each other: toolbars, grid columns, inline controls.

between-inlinesize-8 · 8pxgap-2

Icon to label in buttons, badge icon gaps, compact toolbar items.

Button · Badge · AppShell header actions

between-controlssize-12 · 12pxgap-3

Widget header trailing gap, list row icon to text, sidebar menu items.

WidgetListItem · WidgetHeader · SidebarMenu

component-defaultsize-16 · 16pxgap-4

Default horizontal gap when no specific token applies. Dashboard widget grid.

WidgetGrid · FieldSet internal · Dialog action row

screen-insetsize-24 · 24pxpx-6

App content area horizontal inset, page header padding.

AppShell content · DocumentPage · PageHeader

Vertical

Stacked elements within a panel, form, or page region.

between-textsize-8 · 8pxgap-2 · space-y-2

Label to hint, title to metadata in compact rows.

Field · WidgetListItem meta · Notification title to body

form-fieldssize-20 · 20pxgap-5

Vertical gap between form fields in a set.

FieldGroup · Authentication forms

text-to-componentsize-16 · 16pxgap-4 · mt-4

Section label to first control, panel header to content.

FieldSet legend to fields · TaskQueue section header

content-to-actionsize-24 · 24pxgap-6 · mt-6

Form body to submit row, widget body to footer link.

Auth form · WidgetContent to WidgetFooter

between-panelssize-16 · 16pxgap-4

Gap between stacked dashboard panels in a grid column.

WidgetGrid rows · Inbox section groups

Application · form field stack (gap-5)
Scheme details

FieldGroup uses gap-5 (20px) between fields. Field label to input uses gap-1.5 (6px).

Application · widget grid (gap-4)

Open items

12

Overdue

3

WidgetGrid uses gap-4 (16px) between panels. component-default horizontal token.

Application · vertical stack (gap-2 / gap-6)

between-text · gap-2 · 8px

content-to-action · gap-6 · 24px

Website

Marketing and landing page spacing. Larger gaps between columns and sections. Eyebrow-to-heading and heading-to-body rhythms are consistent across every section type.

Horizontal

Site gutter, card grids, two-column feature layouts, footer columns.

between-chipssize-12 · 12pxgap-3

Badge groups, CTA button pairs, inline tag rows.

Hero actions · Pricing tier badges

between-cardssize-16 · 16pxgap-4

Compact card grids: pricing columns, icon feature tiles.

MarketingSection icon grid · FAQ columns (mobile stack)

between-columnssize-32 · 32pxgap-8 md:gap-10

Two-column feature layouts, footer link columns at md+.

FeatureSplit · Footer grid · MarketingSection split

screen-mobilesize-24 · 24pxpx-6

Site horizontal gutter on mobile. Managed by Container.

Section · SiteHeader · Hero · Footer

screen-desktopsize-48 · 48pxmd:px-12

Site horizontal gutter from tablet breakpoint up.

Container · SiteHeader md:px-10

Vertical

Section rhythm, typography stacks, copy to CTA, feature row separation.

eyebrow-to-headingsize-12 · 12pxmb-3

Eyebrow label to Young Serif heading. Built into section patterns.

MarketingSection · Card · Bento · Hero

heading-to-bodysize-16 · 16pxmb-4 · mb-5

Display or H2 heading to body copy.

MarketingHeading · FeatureSplit · PageHeader

between-textsize-8 · 8pxspace-y-2

Paragraph spacing within a text block. Prefer type line-height first.

Body copy · Footer link lists · Testimonial attribution

text-to-componentsize-24 · 24pxmt-6 · gap-6

Copy block to visual, heading block to card grid.

MarketingSection header to grid · Bento intro to grid

content-to-buttonsize-32 · 32pxmt-8 · gap-8

Body copy or form to primary CTA when not in a sticky footer.

Hero subtext to actions · CTA band copy to buttons

between-sectionssize-96 · 96pxpy-24 md:py-32

Vertical rhythm between full-bleed page sections. Section spacing prop.

Section spacing=lg · Feature row gap (96px)

between-feature-rowssize-96 · 96pxgap-24 · py-24

Alternating feature rows on landing pages.

FeatureSplit stack · MarketingSection blocks

Website · eyebrow + heading stack

For strata managers

Everything in one place

Body copy follows the heading with mb-4 (16px). Eyebrow uses mb-3 (12px).

Website · card grid (gap-4 / gap-8)

Levies

Feature tile

Compliance

Feature tile

Correspondence

Feature tile

between-columns · gap-8 · 32px

Website · section vertical rhythm

Section spacing=sm · py-12 md:py-16

Section spacing=lg · py-24 md:py-32 (between-sections)

Quick Reference

Application defaults

Inline icon + labelgap-28px
Widget gridgap-416px
Form fieldsgap-520px
Content to actiongap-624px
Content insetpx-624px

Website defaults

Eyebrow to headingmb-312px
Heading to bodymb-416px
Card gridgap-416px
Two-column splitgap-8 md:gap-1232–48px
Section vertical (lg)py-24 md:py-3296–128px
Feature row gap96px96px