Spacing - Usage

Basic Guidelines

Baseline grid

Sky UI uses a 4px baseline grid. This value controls the vertical alignment every component. All elements should be aligned to this unit.

Spacing around text

When working with typography, the line height will change depending on the font style, i.e. larger fonts have more spacing already built in. This means, the spacing between blocks of texts will likely need to stay the same on different breakpoints.

Spacing between components

Refer to the individual component documentation when stacking multiple components of the same kind, e.g. Radio Cards, Accordions, Feature Lists, etc.

Spacing to create a section

To create a section within a page, use the following spacing values above the top element, and below the bottom element —

• Mobile & Tablet: 32px
• Desktop: 48px

Example: Rail component prepared as a section by adding top and bottom padding of 32px for mobile.

Variants Usage

Any spacer size can be used on any breakpoint. The size of the spacer might need to be increased when designing for larger viewports.

The below list provides recommendations for the most common combination of elements. These aren’t hard and fast rules, but guidelines that give an indication on what will be appropriate for most layouts. The list is available as a Figma component, so it can easily be added as a reference to any design file.

;