Status
PublishedElement can be used in production | |
PublishedElement can be used in production | |
Documentation | PublishedElement can be used in production |
The grid is the structural foundation of all visual elements, from typography to columns, boxes, icons, and illustrations. It provides guidance for all creative decision-making, supporting content, and creating a consistent, repeatable, and responsive framework for design.
PublishedElement can be used in production | |
PublishedElement can be used in production | |
Documentation | PublishedElement can be used in production |
The new grid system establishes a more responsive and versatile 12-column grid, built upon a 4 by 4 pixel baseline. This grid allows the flexibility to divide content into 1, 2, 3, 4, and 6 columns, with options to make layouts more symmetrical, while also remaining responsive.
The 4-pixel grid is the Dell Design System standard. The recommended space between every element should be a multiple of 4 pixels, horizontally and vertically. Designing with a 4-pixel grid provides more flexibility and granularity for things like spacing text and icons.
By using multiples of 4 (8 and 12 pixels) in the baseline grid, a designer will have the flexibility to size margins and padding for a variety of elements, like typography and components.
Most breakpoints are designed using the 12-column grid, except for XS (extra small) breakpoint ranges of 320 to 479 pixels and S (small) breakpoints of 480 to 767 pixels, which use the 2 and 6-column grid below.
Standard 12-column grid with margins and placeholder content spaced across the columns and gutters of the grid.
The number of columns displayed in a grid is determined by the viewport range. When designing for breakpoint ranges of 479 pixels and below (XS), the grid automatically adjusts to 2-columns.
An example of an XS, 2-column grid and how content might appear across the screen.
When designing for a breakpoint range of 480 to 767 pixels (S), the grid automatically adjusts to a 6-column grid.
A 6-column grid for S breakpoints, featuring an example of how content might be spaced across the screen.
There are four elements that make up the grid:
Column widths are percentage-based and defined by viewport size, allowing content to adapt to the screen size. Columns may vary in width at different points within each breakpoint range but are always equal to each other. Content should be contained within the columns, but effects like shadows and hovers can expand into the margins or gutters.
Mix and match column widths by spanning multiple columns for a wide variety of layout options.
An example of how a designer may vary columns of content or containers across a 12-column grid layout within a page.
Make sure the content spans all of the columns in the layout (whether it is 2, 6, or 12 columns), rather than using columns as margins or padding. Following this methodology will keep layouts uniform and prevent unreliable responsive behavior.
In this example, a designer has spaced content in the center of the page, relying on grid columns for margins, instead of the actual margins. This will disrupt the responsiveness of the content on screen.
Gutter widths are fixed within each breakpoint range. This provides a consistent visual order and prevents content overlap. Do not extend content into the gutters to keep spacing consistent. If additional horizontal space is needed between elements, increase the padding, not the gutter-width, or choose the “comfortable density” grid.
A sample design, showing how the designer might use gutters in the 12-column grid to layout and create margins between columns of content.
Margins provide the white space beyond the content area and contribute to the comfort of the page. Margins provide a visual frame and prevent content from spilling over the viewable regions. Each breakpoint and density level has specific margin widths and scale as the viewport shifts from one breakpoint to the next.
Some experiences require different grids and margins for side navigation or other fixed elements that live outside the main content area. Remember, fixed element widths must have a pixel width divisible by 4. Margin examples are featured below.
Side navigation in its collapsed and expanded state pushes the grid and margins to the right so all content is visible.
Density describes the overall proximity of page elements to each other. Margins and gutters expand or contract based on density level. Likewise, as windows increase and decrease in size, content density is also impacted. For example, more white space or legibility is needed but there are space constraints, choose the “comfortable” grid. Use any of the three density levels, but for consistency it is recommended to use the same density grid across the entire experience.
Grid density options: The compact grid has smaller margins and narrower gutters than the default grid. The comfortable grid has the widest gutters and margins.
There are a few primary units in the vertical spacing guidelines:
All of these values should be multiples of 4 pixels. Vertical spacing between all other elements, such as text objects and form inputs, should also be in multiples of 4 pixels.
An example of how using a multiple of 4 pixels (12 pixels) can be used for vertical margins between typography and buttons.
In responsive design, a breakpoint is the mark at which a website’s content and design will change to provide the optimal user experience within a given viewport range.
The responsive grid adjusts margin, body widths, and the number of columns when scaling a layout for different viewport ranges. The breakpoints have been designed “up” for larger viewport ranges, rather than “down” to accommodate the smallest viewports.
Viewport range: 320 to 479 pixels, T-shirt size: XS, Grid: 2-columns
Density | Gutters | Margins |
---|---|---|
Compact | 8px | 16px |
Default | 16px | 16px |
Comfy | 24px | 24px |
Viewport range: 480 to 767 pixels, T-shirt size: S, Grid: 6-columns
Density | Gutters | Margins |
---|---|---|
Compact | 8px | 16px |
Default | 16px | 16px |
Comfy | 24px | 24px |
Viewport range: 768 to 1023 pixels, T-shirt size: M, Grid: 6-columns
Density | Gutters | Margins |
---|---|---|
Compact | 16px | 24px |
Default | 16px | 32px |
Comfy | 24px | 40px |
Viewport range: 1024 to 1365 pixels, T-shirt size: L, Grid: 12-columns
Density | Gutters | Margins |
---|---|---|
Compact | 16px | 32px |
Default | 16px | 40px |
Comfy | 24px | 48px |
Viewport range: 1366 to 1583 pixels, T-shirt size: XL, Grid: 12-columns
Density | Gutters | Margins |
---|---|---|
Compact | 16px | 32px |
Default | 16px | 48px |
Comfy | 24px | 56px |
Viewport range: 1584 to 1919 pixels, T-shirt size: 2XL, Grid: 12-columns
Density | Gutters | Margins |
---|---|---|
Compact | 16px | 48px |
Default | 24px | 64px |
Comfy | 32px | 80px |
Viewport range: 1920 to 2549 pixels, T-shirt size: 3XL, Grid: 12-columns
Density | Gutters | Margins |
---|---|---|
Compact | 24px | 48px |
Default | 32px | 72px |
Comfy | 46px | 96px |
Viewport range: 2550 to 3839 pixels, T-shirt size: 4XL, Grid: 12-columns
Density | Gutters | Margins |
---|---|---|
Compact | 32px | 64px |
Default | 40px | 96px |
Comfy | 56px | 128px |
Viewport range: 3840+ pixels, T-shirt size: 5XL, Grid: 12-columns
Density | Gutters | Margins |
---|---|---|
Compact | 40px | 96px |
Default | 48px | 128px |
Comfy | 64px | 160px |