---
title: "Layout"
description: "Author General layout rules for the grids and stacks AI tools compose with."
label: "Layout"
date: "2026-08-19"
---

Layout is about the grids and stacks AI tools compose with: how a page is divided, how sections stack, and where content is allowed to sit. UI Rules serves your layout guidance to your AI coding tools over MCP, so generated screens are arranged the way your brand arranges them.

## General rules

The layout page is built around General rules groups. A rule captures a single guideline, with:

- Text, the guideline itself.
- Guidance: Do, Don't, Caution, or Info.
- Importance: Required, Recommended, or Optional.

Rules live in named groups so related guidance stays together. Use layout rules to express intent, for example a maximum content width, how many columns a dashboard may use, or that marketing pages stack sections with generous vertical rhythm.

<Callout type="info">
Author rules in the composer. Deleted rules go to Trash, where you can restore them. AI Enhance tightens the wording for you.
</Callout>

## Where Layout comes from

Layout is a rules-only page, and it exists once the **Agent-ready starter rules** pack has been added to the brand. Add it from **Load starter rules** in the setup guide on the brand overview, or from **Add starter rules** on any rules page. Until then the page is not listed in the sidebar.

## Related

For the gaps between elements, see [Spacing](/docs/styles/spacing). For dimensions, see [Sizing](/docs/styles/sizing).