| Base Unit | 4px | |
| Column Gap (Row) | 8px (2 base units) | This is for the space between related components horizontally. For instance, the distance between an email address input and a "send" button |
| Row Gap (Gutter) | 4px top and bottom (1 base unit) | This is for the space between related components vertically. For instance, an email address input below a name input. |
| Grid Column Gap | 24px (6 base units) | This is for the space between major layout areas. For instance a title and description may be in column 1, while assignee and status are in column 2. The distance between the two would be 24px |
| Grid Row Gap | 24px (6 base units) | This is for the space between major layout areas. For instance a title and description may be in row 1, while a comment section may be in row two. The distance between the two would be 24px |
Developers have access to a native tool known as CSS Grid which allows us to layout our content in a specific but responsive manner. Designers should be familiar with the strengths and weaknesses of this approach at a high level to ensure that we are building things that work well within this system.