Layout Tokens

Layouts within the HUB Design System use a standardized grid and spacing system based on multiples of five. This creates consistent interfaces across the myriad screen sizes available today.

Baseline Grid

Layouts use a baseline 5-pixel grid. The 5-pixel grid should be used for overall page layouts to define page sections and component placements.

Breakpoints

Containers

Containers are the outer layer that hold the contents of an application. The HUB Design System supports fluid and fixed containers. A fluid container spans the entire width of the screen throughout all breakpoints. A fixed container has a maximum width set (typically 1440px) to contain designs on very large screens and are typically fluid at smaller breakpoints. Containers should always be used in conjunction with breakpoints and layout columns.

Grid & flexbox

Margins & gutters

More to come