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.
Information:
Our spacing system currently follows a rather extensive incremental pattern. We will most likely trim it down and add contextual naming.
| Token | Value | Example |
|---|---|---|
spacing2 | 2px | |
spacing4 | 4px | |
spacing6 | 6px | |
spacing8 | 8px | |
spacing10 | 10px | |
spacing12 | 12px | |
spacing14 | 14px | |
spacing16 | 16px | |
spacing18 | 18px | |
spacing20 | 20px | |
spacing24 | 24px | |
spacing28 | 28px | |
spacing32 | 32px | |
spacing36 | 36px | |
spacing40 | 40px | |
spacing44 | 44px | |
spacing48 | 48px | |
spacing52 | 52px | |
spacing56 | 56px | |
spacing60 | 60px |
Usage
import {tokens} from '@pleo-io/telescope'const element = styled.div`margin: ${tokens.spacing8};`
- Usage
On this page