> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Spacing

![Foundations spacing
overview](https://mintcdn.com/servicetitan/KE7wVYXA9MgEh_Ye/images/docs/web/foundations/shared/foundations-spacing-overview.png?fit=max\&auto=format\&n=KE7wVYXA9MgEh_Ye\&q=85\&s=f69edd36f6049763b929b7ab31319e07)

## Overview

spacing-playground

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/spacing-playground?file=src/App.tsx)

```tsx lines theme={null}
import { Flex, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex gap={4} justifyContent="center" alignItems="flex-end" wrap="wrap">
      {["quarter", "half", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14].map(
        (sizeValue, i) => (
          <Flex key={i} direction="column" alignItems="center">
            <div
              style={{
                height: `var(--size-${sizeValue})`,
                width: `var(--size-${sizeValue})`,
                background: `hsl(${25 * i}, 50%, 80%)`,
              }}
            />
            <Text size="small" color="subdued">
              {sizeValue}
            </Text>
          </Flex>
        ),
      )}
    </Flex>
  );
}

export default App;
```

Anvil2 uses partial increments of a base-`0.5rem` spacing scale. Quarter and half values of `0.0625rem` and `0.125rem` are also included.

## Spacing tokens

Anvil2 exposes spacing values as CSS custom properties. These tokens power spacing utility classes such as `a2-m-4` and `a2-p-inline-start-2`. See the [CSS Utilities reference](https://anvil.servicetitan.com/docs/utilities/web/css-utilities.md) for class naming and setup.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.