> For the complete documentation index, see [llms.txt](https://guide.techfleet.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.techfleet.org/resources/brand-guide/brand-visuals/grid-and-spacing.md).

# Grid and Spacing

## The 4px Spacing System

Every margin, padding, and spacing value must be a multiple of 4px. Do not use arbitrary values like 10px or 15px.

| Name     | Value (px) | Value (rem) | Common Usage                                                |
| -------- | ---------- | ----------- | ----------------------------------------------------------- |
| space-1  | 4px        | 0.25rem     | Tiny adjustments, spacing inside small components.          |
| space-2  | 8px        | 0.5rem      | Spacing between an icon and text, or inside a button.       |
| space-3  | 12px       | 0.75rem     | Padding inside small cards or alerts.                       |
| space-4  | 16px       | 1rem        | Standard margin between paragraphs or form fields.          |
| space-6  | 24px       | 1.5rem      | Padding inside standard content cards.                      |
| space-8  | 32px       | 2rem        | Spacing between distinct sections within a container.       |
| space-12 | 48px       | 3rem        | Margin between major page components.                       |
| space-16 | 64px       | 4rem        | Padding between major page sections (e.g., above a footer). |

## The 12-Column Layout Grid

Our layout grid adapts to the screen size while maintaining a 12-column structure.

| Size          | Gutters | Outer Margins | Max Container Widt |
| ------------- | ------- | ------------- | ------------------ |
| Above 1400px  | 32px    | 48px          | 1440px             |
| 1024 - 1399px | 24px    | 32px          | 1399px             |
| 768 - 1023px  | 16px    | 24px          | 1023px             |
| Below 768px   | 16px    | 12px          | 768px              |