Spacing

Space variables are defined in the Figma library and exposed through CSS variables. All CSS variables are prefixed with cim, so for example space-8 becomes --cim-space-8. These variables can be used directly in your CSS:

.title {
  margin-bottom: var(--cim-space-8);
}

Or through the component API available on nearly all components:

<div>
  <Text as="h1" variant="title-1" marginBottom={24}>
    Title text
  </Text>
  <Text as="p">Commodo proident dolor cillum ea sint.</Text>
</div>

Lastly, the Stack component provides an easy way to create consistent spacing between elements. It uses the same spacing tokens and allows you to stack elements vertically or horizontally with a specified gap between them:

<Stack gap={24}>
  <Text as="h1" variant="title-1">
    Title text
  </Text>
  <Text as="p">Commodo proident dolor cillum ea sint.</Text>
</Stack>

Tokens

Token	Value	Size	Example
space-0	0px	Extra small
space-2	2px	Extra small
space-4	4px	Extra small
space-8	8px	Small
space-12	12px	Small
space-16	16px	Small
space-24	24px	Medium
space-32	32px	Medium
space-40	40px	Medium
space-48	48px	Large
space-64	64px	Large
space-96	96px	Large

Designing with space

In isolation, spacing variables don’t provide much value. It is the way spacing is used to create visual relationships between elements in a page that creates visual hierarchy. The way variables are used should be purposeful to shape the page’s layout.

Our spacing system is broken down into four sizes for our spacing variables: extra small, small, medium, large.

Extra small variables - 0px to 4px

These units are used within components between elements that have only a slight gap between them. Outside of individual component design, they should not be used as they are too small to be impactful for most elements.

Examples:

• Space between lines in an icon

Small variables - 8px to 16px

These units are used within components and smaller composed UI elements. They are used for elements that are directly related to each other.

Examples:

• Space between elements within a card
• An information icon directly following a piece of text
• Space between related buttons next to each other (Save and Cancel, Next and Back)
• Horizontal and vertical space between related form elements

Medium variables - 24px to 40px

The units are used to separate UI blocks that might be related or follow each other in a flow, but do not share the same information or function.

Examples:

• Space between sections in a form
• Space between a header and following content

Large variables - 40px to 96px

These units are used to separate large page areas or provide vertical or horizontal page margins.

Examples

• The bottom margin of a page’s content area