Layout

Consistent layout principles allow designers and developers to efficiently build user-friendly products across devices and screen sizes.

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

Layouts Intro

Layouts can use a baseline 4-pixel or 8-pixel grid. The 8-pixel grid should be used for overall page layouts to define page sections and component placements. The 4-pixel grid should be used for more detailed elements within components including input labels, buttons, and icons.

Layout Baseline Grid
Layouts Columns Margins and Gutters
  1. Columns
  2. Gutters
  3. Margins

The Goldman Sachs Design System uses the following breakpoints to optimize layouts across screen sizes. Not all breakpoints need to be used in a product. Breakpoints only need to be referenced when the design needs to be changed for a particular breakpoint range.

BreakpointViewport (px)ColsCompactStandardSpacious
margin / guttermargin / guttermargin / gutter
X-small360 - 59968px / 8px16px / 8px16px / 12px
Small600 - 767128px / 8px16px / 16px24px / 16px
Medium768 - 10231216px / 8px24px / 16px32px / 24px
Large1024 - 12791216px / 8px32px / 24px40px / 32px
X-Large1280 - 14391216px / 8px32px / 24px40px / 32px
XX-Large1440 - 15991216px / 8px32px / 24px40px / 32px
XXX-Large1600+1216px / 8px32px / 24px40px / 32px

The Goldman Sachs Design System has three different layout densities available — compact, standard and spacious.

Layout Columns Padding and Density

Containers are the outer layer that hold the contents of an application. The Goldman Sachs 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.

Layouts Container

Below are two examples showing how a layout would respond and adapt to different screen sizes using the Goldman Sachs Design System.

Layouts Example
Layouts Example