Layouts

Consistent set of margins, padding, spacing, and alignments for various sections of the product will create an organized layout system.

Spacing Scale

Use these units for detail-level designs when building individual elements.

Unit Measurement Example
space-xxs (minimum) 4px
space-xs 8px
space-s 12px
space-m 20px
space-l 32px
space-xl 40px
space-xxl 64px

Alignments

Align indented elements to text, not to icons. Icons will vary in widths for them to be optically similar in size, so aligning by text will look more consistent.



Padding and Margin

Dialogs

Dialog main content area has uniform space-xl padding around the perimeter of the text. Title bar padding has uniform space-m. Bottom action bar has non-uniform space-s and space-xl padding.



Launch Pads

Launch pads have uniform space-l padding around the perimeter of the text and space-l margin space between them.