OpenCloud Design System

Spacings ​

The design system uses predefined spacings to create a predictable and harmonious layout. These tokens can be used for padding, margin, and position.

Available tokens ​

The following tokens are available:

  • oc-space-xsmall (4px)
  • oc-space-small (8px)
  • oc-space-medium (16px)
  • oc-space-large (24px)
  • oc-space-xlarge (48px)
  • oc-space-xxlarge (96px)

Usage ​

You can use these variables in your SCSS files or style blocks:

scss
.element {
  margin: var(--oc-space-medium);
  padding: var(--oc-space-small);
}