Spacing, as a standard in this guide, refers to the vertical spacing between elements. Horizontal spacing is determined by factors such as the grid, column width, gutters, and so on.
Default vertical spacing is built in to each individual component. To accommodate various design scenarios, each component also has a tighter and looser option available.
Default font spacing
Segoe UI has prebuilt spacing of roughly ⅓ above and ¼ below. Margin-bottom gets added AFTER this spacing. If two adjacent items have margin, those margins will overlap each other and the larger of the two will be the perceived spacing.
In addition to the default margin-bottom (values in the chart below) there are tighter and looser spacing options. These are acheived by placing the class
.looser in the element container.
Ramp & weight
Section & element spacing
By default, stacked grid elements (rows, grids, or columns) have no built in spacing. In this way, vertical elements/containers will touch unless a helper class is applied at some parent level.
There are six options for vertical element/container spacing: sp1, sp2, sp3, sp4, sp5, and yep, you guessed it, sp6. These are seperate from typography spacing and are not prebuilt into the element/container.
To mirror the responsive behavior of the Picchu grid and typography, these numbers are dynamic and will change from device to device.
Optically measured as white-space, the six values from desktop to mobile are roughly…