FOUNDATION
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 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.
- Columns
- Gutters
- 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.
| Breakpoint | Viewport (px) | Cols | Compact | Standard | Spacious |
|---|---|---|---|---|---|
| margin / gutter | margin / gutter | margin / gutter | |||
| X-small | 360 - 599 | 6 | 8px / 8px | 16px / 8px | 16px / 12px |
| Small | 600 - 767 | 12 | 8px / 8px | 16px / 16px | 24px / 16px |
| Medium | 768 - 1023 | 12 | 16px / 8px | 24px / 16px | 32px / 24px |
| Large | 1024 - 1279 | 12 | 16px / 8px | 32px / 24px | 40px / 32px |
| X-Large | 1280 - 1439 | 12 | 16px / 8px | 32px / 24px | 40px / 32px |
| XX-Large | 1440 - 1599 | 12 | 16px / 8px | 32px / 24px | 40px / 32px |
| XXX-Large | 1600+ | 12 | 16px / 8px | 32px / 24px | 40px / 32px |
The Goldman Sachs Design System has three different layout densities available — compact, standard and spacious.
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.
Below are two examples showing how a layout would respond and adapt to different screen sizes using the Goldman Sachs Design System.
CONTENTS