Skip to content

Spacing

Stable

Spacing scale

The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for GitHub's UI. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px.

VariableScaleValue
$spacer-000
$spacer-114px
$spacer-228px
$spacer-3316px
$spacer-4424px
$spacer-5532px
$spacer-6640px

These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for margin and padding utilities.

Extended spacing scale

These are primarily useful for achieving bigger vertical spacing between sections. This scale first steps up with 8px for spacer 7, then steps in increments of 16px from spacer 8 up to 12.

VariableScaleValue
$spacer-7748px
$spacer-8864px
$spacer-9980px
$spacer-101096px
$spacer-1111112px
$spacer-1212128px

The extended spacing scale is used for margin and padding utilities along the Y-axis, as well as for single side spacing utilities (top, right, bottom, left).

Em-based spacing

Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values (and powers of 2 where possible) so that , in combination with typography and line-height, the total height lands on sensible numbers.

We aim for whole numbers, however, GitHub's body font-size is 14px which is difficult to work with, so we sometimes can't achieve a whole number. Less desirable values are highlighted in red below.

VariableFractionY Padding (em)Total height at 14pxTotal height at 16px
$em-spacer-11/16.062522.7526
$em-spacer-21/8.12524.528
$em-spacer-31/4.252832
$em-spacer-43/8.37531.536
$em-spacer-51/2.53540
$em-spacer-63/4.754248

The variables listed above are preferred for use within components and custom CSS. To calculate values with other font-sizes or em values, we suggest using Formula.

Edit this page on GitHub
5 contributorstobiasahlinjonrohanyailidanchristiancolebemis
Last edited by tobiasahlin on April 30, 2021