Our system targets 3 screen sizes: Mobile, Tablet, and Desktop.
All user experiences, actions, and behaviors need to function across these screen sizes.
Our product and use cases are diverse and wide ranging. As such, we do not have set recommendations on specific page layouts. Instead we provide guidelines and guardrails that allow designers to decide how best to display their content, while still adhering to our overall system.
The number of columns should reduce in conjuction with available screen real estate. Margins and gutters remain constant while the width of content scales within each viewport
(eg: A 4 column Desktop layout, should reduce to a 2 column Tablet layout, and a 1 column Mobile layout)
Page Margins: 0px
Page Margins: 16px
Page Margins: 32px