Spacing

Forge uses a single spacing scale for every padding, margin, and gap. If a value isn’t on the scale, it doesn’t belong in a Forge design. Developers build with these tokens directly (--forge-spacing-medium, --forge-spacing-large), so off-scale values in a mockup either get rounded to the nearest token or end up as one-off CSS.

The guidance here comes from the patterns repeated across Forge’s blocks, the reference implementations developers start from. When your design follows the same rhythm, the handoff is close to one-to-one.

The scale

Set these up as number variables (or a spacing collection) in Figma, named to match the tokens. The full list is on the spacing tokens page.

Medium is the default

Across all blocks, --forge-spacing-medium (16px) is used more than every other spacing value combined. If you’re unsure, start at --forge-spacing-medium and only move off it with a reason.

Spacing by relationship

Pick spacing based on how closely two things are related, not on how much room is available. The closer the relationship, the smaller the gap.

Container padding

Every surface that holds content uses the same inset, so edges line up from the app shell down to the smallest card.

• Page body: --forge-spacing-medium on all sides. The body region of forge-app-layout is padded with it in every app layout block.
• Cards, dialogs, drawers, and sheets: --forge-spacing-medium. This is the built-in default for forge-card, and blocks use the same padding for dialog and drawer bodies.
• Toolbars: --forge-spacing-medium horizontal, 0 vertical. Height is fixed at 56px, so contents center vertically.
• Compact nested surfaces: --forge-spacing-small. Use this for a tonal card inside another card, like a settings row inside a form or the context switcher in a nav drawer.
• Standalone, centered content: --forge-spacing-large. Used around content that floats on a page background, like a login card or a centered grid of cards.

Don’t stack padding. When a card sits in a padded body, the card’s padding is measured from the card’s edge, not added to the body’s padding. When content needs to go edge to edge, like a table in a card, remove the card’s padding entirely so the table’s own cells provide the inset.

Forms

Forms produce most of the spacing questions, and blocks follow a consistent rhythm:

• Simple, single-column forms: --forge-spacing-medium between every field.
• Two-column forms: --forge-spacing-medium between columns and between rows. Collapse to one column below 768px.
• Long forms on a 6-column grid: --forge-spacing-medium between columns, --forge-spacing-large between rows. The larger vertical gap keeps labels from reading as part of the field above.
• Section heading to first field: --forge-spacing-medium.
• Between sections: --forge-spacing-xlarge, with a divider centered in that space.
• Checkbox and radio groups: stacked with no extra gap (the controls include their own touch target), with the group label --forge-spacing-xsmall to --forge-spacing-small above.
• Form actions: in a footer toolbar, end-aligned, --forge-spacing-medium between buttons.

Labels sit above fields (label-position="block-start") in every form block. The space between label and input is built into the field, so don’t add your own.

Built-in component sizes

These sizes are fixed by the components. Draw them exactly, and lay out other content around them.

Don’ts

For how these values come together in a full application, see Layout.