About
This is the design system used by the Delivery engineering team. The goal of our design system is to create meaningful experiences that work for everyone, regardless of ability. Our documentation and tools streamline collaboration so developers and designers can create consistent experiences, iterate quickly and reduce cycle time.
Grid
A grid is a group of columns that help organize layouts. They provide structure to pages and ensure optimal viewing experiences. When used thoughtfully, they also allow content to scale responsively based on screen size. A grid also can help to create consistent layouts that reduces the need for unnecessary boxes and lines, which can pages more difficult for users to scan.
The Delivery Design System uses an 8 column grid with 24px gutters and 24px margins.
Keep layouts simple. Most layouts will only have one or two blocks.
Don’t use percentages for blocks unless you actually want them to scale. In this design system, components often have max-width guidelines so that the optimal size can be used and then only scaled down when necessary.
Spacing between components and blocks is key. See spacing for more on customizing the grid.
Spacing
Large, medium, small; dividible by 4. This section in progress.
Typography
The system uses two freely available typefaces, each with three weights.
Nunito Sans Black for titles
Nunito Sans Bold for section headings and labels
Nunito Sans Regular section text in headings and navigation
Inter Regular for the majority of body text
Inter Semi Bold for emphasized text
Inter Medium for emphasis in tightly grouped text
Scale
| Style | Font / weight | Size / Line height | Delivery classname |
|---|---|---|---|
| Display md | Nunito Sans Semibold | 28pt / 37 (1.3) | .title--md |
| Display sm | Nunito Sans Semibold | 24pt / 31 (1.3) | .title--sm |
h1 Heading |
Nunito Sans Black | 40pt / 54 (1.35) | h1 |
h2 Heading |
Nunito Sans Bold | 32pt / 43 (1.35), -0.6px | h2 |
h3 Heading |
Nunito Sans Bold | 28pt / 38 (1.35), -0.6px | h3 |
h4 Heading |
Nunito Sans Bold | 24pt / 32 (1.3) | h4 |
| Label | Inter Medium (Uppercase) | 16pt / 20 (1.25) | .label |
| Body copy, lg | Inter Regular | 18pt / 27 (1.5) | .text--lg |
| Body copy, normal | Inter Regular | 16pt / 24 (1.5), -0.3px | |
| Body copy, sm | Inter Medium | 12pt / 15 (1.25) | .text--sm |
Colors
The color palette was chosen to be usable by those with the most common forms of colorblindness.