The spacing scale

The Design System uses a spacing scale with a 16px base value to be used within layout spacing and spacing within components. See spacing for more information.

Breakpoints

Default breakpoint sizing for different viewport widths are as follows:

Margins

Default margin

Margins provide a visual buffer between a view's content and any content outside of the view's bounds. These inset values create a space between the edges of the view's bounds rectangle and the content inside the view.

Common layouts

Basic form layout

See Public form pattern for more information.

The default layout for a form page uses a maximum page width of 960px. This ensures optimal line length (50-75 characters) and simplifies the content for the user. This layout is often used for public-facing forms.

Basic form layout example

This layout is recommended for public-facing forms where the content needs to be simple, accessible, and often broken down into simple one-question pages.

Side navigation layout

A 2-column layout that has a fixed side navigation and a fluid content container.

When designing for large screens, consider a maximum content width to prevent the content from getting too wide.

Side navigation layout example

A 2-column layout is often used for internal applications where there is a need for side navigation.

Side navigation and side bar layout

A 3-column layout that has a fixed side navigation as well as a second side panel on the right side. The third column is often used to show tertiary information, comments, or other documents alongside the main content area. Depending on your content, for large viewports it is recommended to use a maximum content width of 1176px on the main content area.