For the complete documentation index, see llms.txt. This page is also available as Markdown.

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

Last updated