Layout

Layout decides where things sit and how much room they get. Take widths from the grid and gaps from the spacing scale, and a screen holds together at any size.

The page grid

At 1440 px: 12 columns of 92.7 px, 24 px gutters and 32 px of padding at each side.

Pages sit in a frame with a fixed maximum width that stays centered on wide screens. Inside it, content lines up on columns separated by gutters, with side padding that keeps text off the edge of the window.

A reading page is a heading, running text and a figure or a table. The heading, the figure and the table may span every column. Running text keeps to its line length.

Below 1024 px the page is one column wide. In WerkOS, a board or a list fills the window up to 1600 px, and a form or a document stops at 768 px.

Frame, maximum width: 1440 px; --frame
Columns: 12
Gutter: 24 px; --gutter
Side padding: 24 px; 32 px from 1024 px; --pad
Product board or list: up to 1600 px
Product form or document: up to 768 px

Spacing scale

Gaps come from one scale. It moves in steps of 4 px at the small end and in larger jumps as distances grow, so neighboring values stay easy to tell apart.

Measure a gap from the edge of one element’s box to the edge of the next. Half steps of 2, 6 and 10 px are allowed only inside a component, to center an icon optically. They do not set the space between components.

--space-14 px
--space-28 px
--space-312 px
--space-416 px
--space-520 px
--space-624 px
--space-832 px
--space-1040 px
--space-1248 px
--space-1664 px
--space-2496 px
--space-32128 px

Space shows what belongs together

People read things that sit close as one group, and more space as a weaker bond. Inside a control, use 4 to 12 px, such as the 8px between a button’s icon and its label.

Between items of the same kind, such as a label and its field or the cards of a grid, use 8 to 16 px. Between groups inside a section, use 24 to 48 px.

Between the sections of a reading page, use 96 px, or 64 px on a phone. Draw no line there: the space already separates them.

Breakpoints

The layout changes at a few widths and holds between them. Choose by the width the window gives you, not by the device: a desktop window can be as narrow as a phone.

Below 640 px a board shows its rows as cards. From 1024 px the navigation rail appears, and the side padding grows.

On a touch screen, whatever its width, a target is at least 44 px and text you can edit is at least 16 px.

Small--breakpoint-sm640 px
Medium--breakpoint-md768 px
Large--breakpoint-lg1024 px
Extra large--breakpoint-xl1280 px
This window

Line length

Keep running text between 45 and 75 characters a line. On a longer line the eye loses its place on the way back, and on a shorter one phrases break apart.

Inside the measure

Keep running text between 45 and 75 characters a line. On a longer line the eye loses its place on the way back, and on a shorter one phrases break apart.

Too long to follow

On a wide screen, a figure or a table may take the full width, but running text never does. A statement set large can, since its size keeps the line short.

On a narrow screen a paragraph holds its own measure.

Density

Work screens are dense, so people see more rows without scrolling. Reading pages are open, so long text stays comfortable.

Heights are minimums, so a row or a control grows when the reader enlarges text.

Board row: 36 px compact, 52 px comfortable, 76 px tall
Toolbar control: 36 px
Form control: 44 px
Gap between cards: 16 px; --space-4
Space between page sections: 96 px; 64 px below 768 px; --space-24

Permitted and not permitted

Permitted

Set widths in columns of the grid
A block spans columns, and the grid adapts at each breakpoint.
Take gaps from the spacing scale
Pick the step that matches how closely the items belong together.
Let a wide table scroll inside its own box
The page itself does not scroll sideways.

Not permitted

A fixed width on a paragraph inside a wide column
It squeezes the text into a strip and leaves the rest of the row empty.
Gaps off the scale, such as 18 or 22 px
They break the rhythm and drift from screen to screen.
A second vertical scroll area inside the page
Two scroll areas on one axis fight over the mouse wheel and trap keyboard users.

NextShape

Layout

Places content on a 12 column grid inside a 1440 px frame and takes gaps from one spacing scale.

Kind: foundation
Page: https://design.werklist.com/foundations/layout
Version: 2.1.2

Rules

Set the width of a block in columns of the grid. No fixed width on a paragraph inside a wide column.
A reading page is a heading, running text and a figure or a table. The heading, the figure and the table may span every column. Running text keeps to its line length.
Take margins, padding and gaps from --space-1 to --space-32. No gaps off the scale, such as 18 or 22 px.
Space inside a control: 4 to 12 px. Between items of one kind: 8 to 16 px. Between groups in a section: 24 to 48 px.
Between the sections of a reading page: 96 px, and 64 px below 768 px. No line between them.
Half steps of 2, 6 and 10 px appear only inside a component, to center an icon optically.
Running text holds 45 to 75 characters a line and never spans the full width. A statement set large may.
Change the layout only at the breakpoints: 640 px, 768 px, 1024 px, 1280 px. Choose by the width of the window, not by the device.
Below 640 px a board shows its rows as cards. From 1024 px the navigation rail appears, and the side padding grows.
On a touch screen, whatever its width, a target is at least 44 px and editable text at least 16 px.
Row and control heights are minimums, so a row grows when the reader enlarges text.
The page never scrolls sideways. A wide table scrolls inside its own box.
One vertical scroll area per view. No second vertical scroll area inside the page.

Anatomy

Frame: 1440 px, centered (--frame)
Gutter: 24 px (--gutter)
Side padding: 24 px, 32 px from 1024 px (--pad)
Columns: 12 from 1024 px, 1 below
Product board or list: fills the window up to 1600 px, centered
Product form or document: up to 768 px, centered

Sizes

Board row, compact (default): height 36 px
Board row, comfortable: height 52 px
Board row, tall: height 76 px
Toolbar control: height 36 px
Form control: height 44 px
Target on a touch screen: height 44 px

Tokens

--frame
--gutter
--pad
--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-8
--space-10
--space-12
--space-16
--space-24
--space-32
--breakpoint-sm
--breakpoint-md
--breakpoint-lg
--breakpoint-xl

JSON

{
  "title": "Layout",
  "path": "/foundations/layout",
  "url": "https://design.werklist.com/foundations/layout",
  "text": "https://design.werklist.com/agent/foundations/layout",
  "summary": "How the page grid, the spacing scale and the breakpoints place content, from a dense board to a reading page.",
  "version": "2.1.2",
  "kind": "foundation",
  "name": "Layout",
  "purpose": "Places content on a 12 column grid inside a 1440 px frame and takes gaps from one spacing scale.",
  "anatomy": [
    {
      "part": "Frame",
      "measure": "1440 px, centered",
      "token": "--frame"
    },
    {
      "part": "Gutter",
      "measure": "24 px",
      "token": "--gutter"
    },
    {
      "part": "Side padding",
      "measure": "24 px, 32 px from 1024 px",
      "token": "--pad"
    },
    {
      "part": "Columns",
      "measure": "12 from 1024 px, 1 below"
    },
    {
      "part": "Product board or list",
      "measure": "fills the window up to 1600 px, centered"
    },
    {
      "part": "Product form or document",
      "measure": "up to 768 px, centered"
    }
  ],
  "sizes": [
    {
      "name": "Board row, compact (default)",
      "height": "36 px"
    },
    {
      "name": "Board row, comfortable",
      "height": "52 px"
    },
    {
      "name": "Board row, tall",
      "height": "76 px"
    },
    {
      "name": "Toolbar control",
      "height": "36 px"
    },
    {
      "name": "Form control",
      "height": "44 px"
    },
    {
      "name": "Target on a touch screen",
      "height": "44 px"
    }
  ],
  "tokens": [
    "--frame",
    "--gutter",
    "--pad",
    "--space-1",
    "--space-2",
    "--space-3",
    "--space-4",
    "--space-5",
    "--space-6",
    "--space-8",
    "--space-10",
    "--space-12",
    "--space-16",
    "--space-24",
    "--space-32",
    "--breakpoint-sm",
    "--breakpoint-md",
    "--breakpoint-lg",
    "--breakpoint-xl"
  ],
  "rules": [
    "Set the width of a block in columns of the grid. No fixed width on a paragraph inside a wide column.",
    "A reading page is a heading, running text and a figure or a table. The heading, the figure and the table may span every column. Running text keeps to its line length.",
    "Take margins, padding and gaps from --space-1 to --space-32. No gaps off the scale, such as 18 or 22 px.",
    "Space inside a control: 4 to 12 px. Between items of one kind: 8 to 16 px. Between groups in a section: 24 to 48 px.",
    "Between the sections of a reading page: 96 px, and 64 px below 768 px. No line between them.",
    "Half steps of 2, 6 and 10 px appear only inside a component, to center an icon optically.",
    "Running text holds 45 to 75 characters a line and never spans the full width. A statement set large may.",
    "Change the layout only at the breakpoints: 640 px, 768 px, 1024 px, 1280 px. Choose by the width of the window, not by the device.",
    "Below 640 px a board shows its rows as cards. From 1024 px the navigation rail appears, and the side padding grows.",
    "On a touch screen, whatever its width, a target is at least 44 px and editable text at least 16 px.",
    "Row and control heights are minimums, so a row grows when the reader enlarges text.",
    "The page never scrolls sideways. A wide table scrolls inside its own box.",
    "One vertical scroll area per view. No second vertical scroll area inside the page."
  ]
}

Raw file: https://design.werklist.com/agent/foundations/layout