Grid System

All spacing and heights align to the 8px grid.

Default

row-1 (16px)

row-2 (32px)

row-3 (48px)

<div style="background: var(--ui-color-primary); color: var(--ui-color-text-inverse); height: var(--ui-row-1); display: flex; align-items: center; padding: 0 var(--ui-space-2)">row-1 (16px)</div>
<div style="background: var(--ui-color-primary); color: var(--ui-color-text-inverse); height: var(--ui-row-2); display: flex; align-items: center; padding: 0 var(--ui-space-2)">row-2 (32px)</div>
<div style="background: var(--ui-color-primary); color: var(--ui-color-text-inverse); height: var(--ui-row-3); display: flex; align-items: center; padding: 0 var(--ui-space-2)">row-3 (48px)</div>