Layout and grid

Breakpoints

Screens are designed at three widths: 390, 1024 and 1440 px. In code, these widths are selected with Tailwind’s breakpoint prefixes.

Range	Tailwind prefix	Design width	Columns	Gutter and margin	Side menu
0-767 px	(no prefix)	390	4	16 px	Drawer
768-1023 px	md:	1024	8	24 px	Drawer
1024-1279 px	lg:	1024	12	24 px	Collapsed (72 px)
1280 px and up	xl:	1440	12	32 px	Expanded (264 px)

• Design starts from the small screen; wide-screen rules are added with the md:, lg: and xl: prefixes.
• The layout does not break between widths: columns stretch and content flows.
• At the 390 px breakpoint, primary controls grow to 48 px high.

Grid

12

6

6

3

3

3

3

• Column width is fluid; the gutter (space between columns) and the margin are fixed.
• The content area is at most 1104 px wide. On wider screens the content is centred, or full width is chosen for wide content such as tables.
• Regions sit on columns; spacing inside a region comes from the spacing tokens.
• The grid is never used for tabular data; tables are built with Data table.

App shell

Region	Size	Behaviour
Top bar	64 px high	Sticky; content scrolls under it and it never covers the focused element.
Side menu, expanded	264 px	At 1280 px and up.
Side menu, collapsed	72 px	Between 1024 and 1279 px; icons only, with tooltips.
Side menu, drawer	Full-height overlay	Below 1024 px; opens with the menu button, closes with Esc.
Content	Remaining space, at most 1104 px	Scrolls inside itself; the page heading is its first element.

The user’s choice to collapse the side menu is stored; when the breakpoint changes, the menu returns to that breakpoint’s default.

Dashboard grid

Dashboards place cards on the 12-column grid at standard widths. Cards in the same row have the same height.

Card	1280 px and up	1024 px	768 px	390 px
Stat tile (single number)	3 columns	4 columns	4 columns (of 8)	Full width
Chart	6 or 8 columns	6 columns	Full width	Full width
List or summary	4 or 6 columns	6 columns	Full width	Full width
Table	12 columns	12 columns	Full width, scrolls horizontally inside itself	Full width, scrolls horizontally inside itself

• The gap between cards equals the grid gutter.
• Importance runs left to right and top to bottom; on narrow screens cards stack in that order.
• A row holds at most four stat tiles.

Density

Density is selected with the data-density attribute and changes spacing and control heights together. Screens never write their own sizes for density. Details are on the Spacing page.

Scrolling and reflow

• The page scrolls only vertically. At 320 CSS px width there is no horizontal scrolling (WCAG 1.4.10).
• Two-dimensional content such as tables and charts scrolls horizontally inside its own container; the container has a name and can take keyboard focus.
• Sticky headers and bottom bars together cover no more than a third of the screen height.
• Scroll containers get scroll-padding equal to their sticky regions, so the focused element is never covered.

Tokens

Layout sizes:

Token (proposed)	Value
layout.content.max-width	1104 px
layout.gutter	16 px (390), 24 px (1024), 32 px (1440)
app-shell.sidebar.width (exists)	256 px
app-shell.sidebar.width-collapsed (exists)	48 px
layout.topbar.height	64 px

Guidelines

Place regions on the grid

DoCards sit on columns; edges line up.

Don'tHand-set widths break alignment and overflow on narrow screens.