Baseline grid

Adhering to a baseline grid allows us to be more efficient by removing decision making while maintaining a consistent rhythm between components and typography.

Components

Using a baseline grid of 8px allows flexibility when scaling and defining our measures without overloading the system with options. By using multiples of 8 to define dimensions, padding, and margins of components, we ensure every UI element aligns to the pixel grid.

When text is used within a UI element, set the line-height to be consistent with the baseline grid and use padding to define the size of the component.

Text

Typography

All typography aligns to a 4px baseline grid. This allows for readable line heights at all sizes. See our typography styles for more information about how to use our type scale.

UI typography

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Paragraph

Label

Markdown

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Paragraph

Compact markdown

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Paragraph