Skip to content
Telescope

Spacing

Spacing is an important — and often overlooked — part of product design. We provide tokens to take the guesswork out of spacing and help deliver clear, functional layouts.

Our spacing system currently follows a rather extensive incremental pattern. We will most likely trim it down and add contextual naming.

TokenValueExample
spacing22px
spacing44px
spacing66px
spacing88px
spacing1010px
spacing1212px
spacing1414px
spacing1616px
spacing1818px
spacing2020px
spacing2424px
spacing2828px
spacing3232px
spacing3636px
spacing4040px
spacing4444px
spacing4848px
spacing5252px
spacing5656px
spacing6060px

Usage

import {tokens} from '@pleo-io/telescope'


const element = styled.div`
    margin: ${tokens.spacing8};
`