In Forma 36, we built our components independent of any styling outside of them. This means that you will need to manage spacing between elements using our spacing tokens in any CSS solution you chose. The only exception to this rule is our layout components: Flex, Stack, Grid, Box.
Tokens
| Token | Value in px | Value in rem | Example |
|---|---|---|---|
| spacing2Xs | 4px | 0.25rem | |
| spacingXs | 8px | 0.5rem | |
| spacingS | 12px | 0.75rem | |
| spacingM | 16px | 1rem | |
| spacingL | 24px | 1.5rem | |
| spacingXl | 32px | 2rem | |
| spacing2Xl | 48px | 3rem | |
| spacing3Xl | 64px | 4rem | |
| spacing4Xl | 80px | 5rem |
Tokens with inline styles
import tokens from '@contentful/f36-tokens';<div style={{ padding: tokens.spacingM }} />;
Tokens with emotion
import tokens from '@contentful/f36-tokens';import { css } from 'emotion';css({ padding: tokens.spacingM });