# Spacings

## Built-in scale

Shopstory comes with a built-in battle-tested spacings scale:

```
0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160
```

It provides consistency, flexibility and doesn't overload users with too many options.

## Custom spacings

However, if you want to add your own custom spacings, you can do this by adding `space` property in `shopstory/config.ts`:

```typescript
export const shopstoryConfig = {
  //...
  space: [
    {
      id: 'my_custom_space',
      label: 'My Custom Space',
      value: 30 // 30px custom space
    },
  ],
}
```

## Responsive spacing tokens

Sometimes you might want to define responsive tokens. For example, if you have a unified system of spacings between content blocks that might be large on desktop and smaller on mobile you can easily achieve this with a single responsive token:

```typescript
export const shopstoryConfig = {
  //...
  space: [
    {
      id: 'my_responsive_token',
      label: 'Responsive token',
      value: {
        "@xs": 80,
        "@lg": 100,
        "@xl": 300,
      },
    },
  ],
}
```

What about the resolution ranges that are not defined? Like `@md`? They always inherit value from the higher resolutions. It means that `@md` will have value `100` inherited from `@lg`. If higher resolution is not defined (like for `@2xl`) then it takes a value from the closest lower resolution (`@xl` in the example).

## Allowed units

Spacing values in Shopstory can be defined in `px` or `vw`.