Search...
Welcome to Octopus Design System
Get Started
Our Principles
Set Up for Designers
Set Up for Engineers
Tools We Use
Brand
Brand
Writing
Illustrations
Foundations
Overview
Design Tokens
Color
Typography
Icons
Shadows
Border Radius
Spacing
Breakpoints and Screen Sizes
Layout Anatomy
Components
Overview
Component Lifecycle
Component Status
Actions
Data
Form Elements
Images & Icons
Layout
Navigation
Messaging
Overlays
Status Indicators
Patterns
Overview
UI Patterns
Microcopy Patterns
Updates
Under Review
Decision Log
Contribute
Overview
Design
Engineering
Contributing to Figma
Proposing a Design Token
Proposing a Component
Proposing a UI Pattern
Proposing an Icon
Communicating Changes
Deprecation Guidelines
Learning Resources
Books
Courses
Spacing
Predictable spacing model for laying out interface elements
Guidelines
Spacing Scales
Live Tokens
Live Tokens
Spacing /
space
1
2
4
6
8
12
16
24
32
40
48
56
64
72
80
Spacing
Spacing Scales
Foundations
Breakpoints and Screen Sizes
On this page
Live Tokens