Spacing

Clear layouts allow users to understand and navigate content quickly and easily. Use these guidelines to create intuitive web layouts.

Overview

Forge uses a 4px system for its layout structure. This means that content and components can be divided by 4 and all fall on a balanced grid. For example, spacing between elements in a layout is typically set to 24px, with more dense pages using 16px.

These are used for spacing inside of elements (padding) as well as spacing around elements (margin).

Example spacing inside and between elements

Spacing	Padding	Example Usage
8px		Default spacing between chips
16px	Default padding for cards, dialogs	Dense spacing between related elements
24px	Roomy padding for cards, dialogs	Default spacing between related elements
32px	n/a	Default spacing between sections
48px	n/a	Default spacing between sections
56px	n/a	App Bar height, Toolbar height, roomy spacing between sections