> For the complete documentation index, see [llms.txt](https://docs.shopstory.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopstory.app/design-tokens/page-containers.md).

# Page containers

One of the most important design token that should be unified across the website is a page container. Page container determines the container in which page sections are displayed. There are two design tokens defining page container size:

* margin
* max width

## Margin

In most cases max width is not necessary and you only need a container margin (selected with red dotted line): 

<figure><img src="https://1906827321-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4j4BoYKV0GXMySXRws9n%2Fuploads%2FANMqO2zT7rmSU3IDOxm4%2FScreenshot%202022-11-21%20at%2011.45.43.png?alt=media&amp;token=b270cff9-f604-48e5-99f2-5566fb94e3e2" alt=""><figcaption></figcaption></figure>

## Max width

Sometimes the page layout requires both container margin and max width:

<figure><img src="https://1906827321-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4j4BoYKV0GXMySXRws9n%2Fuploads%2FQdsfGhNHYtNoD3ZNSh3O%2FFrame%201%20(2).png?alt=media&amp;token=87b18e52-12af-4942-9eb5-4117d3c450e2" alt=""><figcaption></figcaption></figure>