Skip to content

# Spacing

Consistency and visual alignment across our products

# Spacing Grid

We use a 4px increment system rather than hard coded values for padding and margin. This creates rhythm between elements, is easier to maintain and saves time during QA.

Skyline spacing units and their usage.
Skyline ValuePixelsExample
1004px
2008px
30012px
40016px
50020px
60024px
70028px
80032px
90036px
100040px
120048px
140056px
240096px
4000160px

# Component Scales

Used for spacing within individual components. Smaller units are included to provide more control over spatial relationships.

Skyline spacing units and their usage.
Skyline ValuePixelsExample
1004px
2008px
30012px
40016px
50020px
60024px
70028px
80032px
90036px
100040px

# Layout Scales

Used for spacing components at the page level. Larger increments are included to allow for appropriate use of whitespace within a layout.

Skyline spacing units and their usage.
Skyline ValuePixelsExample
60024px
80032px
120048px
240096px
4000160px

# Breakpoints

We use the sass-mq (opens new window) mixin so that you can easily reuse breakpoints across our products.

Example of typography styles commonly used in Skyline.
NameSassMQ Variable NameValue
Portrait Phoneportrait-phone0px
Landscape Phonelandscape-phone550px
Portrait Tabletportrait-tablet768px
Landscape Tablelandscape-tablet990px
Small Desktopsmall-desktop1025px
Desktopdesktop1280px
Large Desktoplarge-desktop1440px
Very Large Desktopvery-large-desktop1850px

# Design Best Practices

Aim To

Avoid

Don't

Need help?

Send us a message in the #skyline-design-system Slack channel.

Have an idea to help us improve?