# Spacing and size

## Overview

Vera uses comprehensive size, spacing and border radius scales.

As much as possible, Vera tries to make use of this scales rather than generating custom sizing rules to ensure more harmonious and organized visual layout.

All our sizing values are set in rem.

<Callout variant="tip">

If you need to translate `rem` sizes to pixel sizes, multiply `rem` value by
`16`.

</Callout>

## Size tokens

Size tokens are anchored around base spacing unit of `0.25rem`, which translates to `4px` by default in browsers.
Size tokens follow one base unit increments for smaller dimensions, and up to four base unit increments for larger dimensions.

<SizeTable data={sizingTokens.base} />

### Usage

Size scale values can be applied to common CSS dimensions properties such as `width`, `height`, `maxWidth` or `maxHeight`.

```jsx
<Box
  css={{
    width: '$64',
    height: '$64',
    display: 'grid',
    placeItems: 'center',
    border: '1px solid $colorBlue70'
  }}
>
  64x64
</Box>
```

## Spacing tokens

Spacing tokens are selection of values from the size tokens above. Values on the scale are non-linear with a progressively larger increment each step.
Spacing tokens can be used inside of components and between components for layout spacing.

<SizeTable
  data={sizingTokens.spacing}
  nameFormatter={token => `spacing${capitalizeFirstLetter(token)}`}
  previewCss={size => ({ width: size, height: theme.sizes['24'] })}
/>

### Usage

Spacing scale values can be applied to common CSS layout spacing properties such as `margin`, `padding` or `gap`. To create the space around components, it's recommended to use [Flex layout component](/components/layout/flex).

```jsx
<Flex gap="spacingM">
  <Box
    padding="spacingL"
    css={{
      border: '1px solid $colorBlue70'
    }}
  >
    spacingL
  </Box>
  <Box
    padding="spacingM"
    css={{
      border: '1px solid $colorBlue70'
    }}
  >
    spacingM
  </Box>
  <Box
    padding="spacingS"
    css={{
      border: '1px solid $colorBlue70'
    }}
  >
    spacingS
  </Box>
</Flex>
```

## Radius tokens

Border radius tokens define the standard corner radius of the components.

Different sizes of border radius are used according to the component size.
Smallest radius is used for small components such as [input fields](/components/forms/text-input), while medium radius is used
for more prominent elements such as large [buttons](/components/button) or [dialogs](/components/dialog).

<SizeTable
  data={sizingTokens.borderRadius}
  previewCss={size => ({
    width: theme.sizes['48'],
    height: theme.sizes['48'],
    borderRadius: size
  })}
/>

### Usage

Border radius values can be applied to `borderRadius` CSS property.

```jsx
<Box
  padding="spacingM"
  css={{
    width: 'fit-content',
    border: '1px solid $colorBlue70',
    borderRadius: '$m'
  }}
>
  Medium radius
</Box>
```

---

<Grid
  columns={{
    '@initial': '1',
    '@mqLargeAndUp': '2'
  }}
  columnGap="spacingL"
>
  <GridItem>
    <Card
      href="https://github.com/Volue/vera/tree/next/design-primitives/design-sizing"
      title="See sizing tokens repo"
      actionIcon="arrowRight"
    />
  </GridItem>
  <GridItem>
    <Card
      href="/components/layout/flex"
      title="See Flex layout component"
      actionIcon="arrowRight"
    />
  </GridItem>
</Grid>