Grid

Standard 12-column grid with responsive gutters and margins. Content width constraints from narrow (640px) to full (1440px).

12-Column Grid

1

2

3

4

5

6

7

8

9

10

11

12

COLUMNS 12

GUTTER 16px / 24px Mobile / Desktop

MARGIN 16px / 48px Mobile / Desktop

Content Widths

--content-width-narrow 640px

--content-width 960px

--content-width-wide 1200px

--content-width-full 1440px

--content-width-narrow 640px Prose, single-column content

--content-width 960px Standard content area

--content-width-wide 1200px Dashboard, multi-column layouts

--content-width-full 1440px Maximum content width

Breakpoints

TOKEN VALUE DESCRIPTION

--breakpoint-sm 640px Mobile landscape / large phone

--breakpoint-md 768px Tablet portrait

--breakpoint-lg 1024px Tablet landscape / small desktop

--breakpoint-xl 1280px Desktop

Responsive Behavior

MOBILE (<1024px)

16

16

16

Gutter: --space-md (16px), Margin: --space-md (16px)

DESKTOP (≥1024px)

48

24

48

Gutter: --space-lg (24px), Margin: --space-2xl (48px)