Layout

The frame

Layout begins with two fixed edges and one flexible canvas. On desktop, navigation owns the left edge and the page uses the remaining width. On mobile, navigation moves to the bottom and the page becomes one continuous reading order. The coloured guides below reveal the geometry; they are not product surfaces.

Spacing scale

A 4px base produces seven named steps. Page margins, region gaps and component spacing use this shared scale so layouts keep a consistent rhythm instead of introducing one-off values.

Responsive grid

The grid changes at the same boundaries as the product. It adds alignment opportunities as space appears; it never makes existing content smaller just to preserve a column count.

• The 1600px cap belongs to the canvasIt is room for operational UI — tables, timelines and parallel work — not a target line length for prose.
• Text keeps its own measureLong-form copy should normally occupy 5–7 desktop columns, even when its section spans the full canvas.
• Gutters stay emptyBackgrounds may span regions; text, icons and controls align to column edges and do not sit in the 16px gap.

Distribute content by job

Choose spans from the work the page must support. These are the three default desktop compositions. On mobile, every one becomes a single four-column sequence in HTML order.

• Width follows importanceThe primary task gets the widest span. A narrow panel is supporting by definition.
• One region, one jobIf two areas have different actions or update at different times, they are separate regions and usually separate widgets.
• Do not fill space for symmetryEmpty columns are allowed. Stretching a form or paragraph across the canvas only creates longer eye travel.

Responsive reflow

The same three regions change arrangement below 768px. Desktop uses width to keep the primary task and its supporting context visible together. Mobile keeps their priority but turns the layout into one vertical sequence. The numbered regions make the preserved reading order explicit.

• What changesPosition and span: the 8 + 4 desktop pair becomes two full-width mobile regions.
• What staysPriority, content, and HTML order: 1 → 2 → 3 at every width.
• NavigationThe desktop rail becomes the product tab bar at the bottom; it does not enter the content sequence.

Layout primitives

These classes arrange related content inside a region. Choose the primitive that matches the relationship between its children.

Rules that keep layout usable

• Align related edgesPage titles, section titles and the first object in a region begin on the same column line.
• Reflow before content becomes crampedRows wrap whole items, splits stack, and grids reduce their column count before text or controls become unreadable.
• Preserve the HTML reading orderThe sequence in the page markup must remain logical for keyboard and screen-reader users at every width, even when columns move visually.
• Let zoom collapse the layoutRegions reflow instead of forcing horizontal page scroll.
• Do not rely on colour aloneDiagrams also name margins, columns and content regions in text.

Markup

<main class="page">
  <header>…12 columns…</header>

  <div class="mk-grid" style="--mk-grid-min: 320px">
    <section class="mk-widget">…primary work…</section>
    <aside class="mk-widget">…support…</aside>
  </div>
</main>

The page frame owns max-width:var(--mk-content-max) and padding-inline:var(--mk-page-pad). Inside it, use the named layout primitive or a documented composite; do not recreate the same geometry per page.