> For the complete documentation index, see [llms.txt](https://legacy-docs.aragon.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://legacy-docs.aragon.org/developers/tools/aragonds/guidelines/layout.md).

# Layout

## 8-point Grid System <a href="#id-8-point-grid-system" id="id-8-point-grid-system"></a>

The layout grid is used as a reference to build and position all the components. It also helps to define the spacing between different elements, improving data consumption through better legibility.

All the UI elements and the spacings around them (paddings, margins, and gutters) align to an 8x8 square baseline grid for all viewport sizes, using multiples of 8 (8px / 16px / 24px / 32px / 40px / 48px / 56px and so on) to reach an aesthetically pleasing composition.

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-c61acadb05bd4b8e3e81d1ad00b3a2e70c896dfc%2Fbase-grid.svg?alt=media&amp;token=ce1efd04-6894-407d-ae14-5103811cdf40" alt=""><figcaption></figcaption></figure>

This system will help us create consistency across layouts and also ensure predictability when building and placing new elements.

Grids help us work more efficiently, reducing the number of decisions to make while maintaining a quality rhythm between the elements. It also ensures the entire system shares the same visual language between designers and developers.

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-c11a375885f8462070721db65b013ff32dbaaa8d%2Ftoken-manager.svg?alt=media&amp;token=f10bf225-1720-4931-b420-ad7bbb486616" alt=""><figcaption></figcaption></figure>

## Column system <a href="#column-system" id="column-system"></a>

A 16-column grid is used to distribute the elements evenly and horizontally. With this structure, all layouts will be built on the horizontal axis with an equal amount of white space (16px) separating the columns.

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-5dda4488f1ba0f0d6a2f3ac43eb554e7804d82ac%2Fcolumn-system1.svg?alt=media&amp;token=1d1a688c-867d-4292-be33-f69c83f482f7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-373810aaf2de90f9294c083743746c731c980326%2Fcolumn-system2.svg?alt=media&amp;token=8b54f606-405a-43d4-9f61-3f55ba39ffd7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-c4c8626527d0f04950d40444c8ddd70383b5b235%2Fcolumn-system3.svg?alt=media&amp;token=19dcc38a-c740-4734-acb0-4bb2c7a9eecf" alt=""><figcaption></figcaption></figure>

## Gutters <a href="#gutters" id="gutters"></a>

This is a flexible system that allows for a lot of different combinations. The padding inside the modules matches the outer margin, with a total of 16px. For closely related content, consider a gutterless grid. Apply gutters when content warrants more separation.

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-6abd71c777f72e822ad7176ee817c564341f3ccf%2Fgutters.svg?alt=media&amp;token=6ff84ee2-853f-4c85-b572-0df0fa285837" alt=""><figcaption></figcaption></figure>

## Breakpoint Table <a href="#breakpoint-table" id="breakpoint-table"></a>

In this table we define the values for the different breakpoints we target with our responsive design:

| Breakpoint | Type   | Columns | Padding | Margin |
| ---------- | ------ | ------- | ------- | ------ |
| >= 360px   | small  | 4       | 16px    | 16px   |
| >= 768px   | medium | 8       | 16px    | 16px   |
| >= 1152px  | large  | 16      | 16px    | 16px   |

## Responsive layout <a href="#responsive-layout" id="responsive-layout"></a>

These are the points at which our components and content will respond to provide the user with the best possible layout to consume information and interact with the elements on the screen.

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-398c165093815370a9d9ce114d58a4175ca17387%2Fresponsive1.svg?alt=media&amp;token=f32c7609-9891-4d92-b609-241fbf280c3c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-8f4cf8a673c189fbca8cb05c4e9f1d11e5da6ece%2Fresponsive3.svg?alt=media&amp;token=374b2164-9b9a-4536-b84a-49a3b39c4307" alt=""><figcaption></figcaption></figure>