Spacing

Consistent spacing enables us to build the Ryte interface and makes it easier for our users to scan. The basic unit of measurement for spacing is 4px. All spacing for layouts is done in increments of these 4 pixels.

$space-xl: 32px;
$space-l: 24px;
$space-m: 16px;
$space-s: 8px;
$space-xs: 4px;

Grid

In our layouts we use an 8px base grid. Padding of the card elements and table cells, as well as margins between block elements are 16px. The height of a table cell is set to 40px or 72px.