Desktop Layout

Side Navigation

Desktop top-level navigation moves to a persistent left-hand sidebar, freeing the content area and enabling hierarchical structures that a hamburger menu buries. Use a collapsed rail for space-constrained layouts and an expanded drawer when there is enough horizontal room.

Responsive strategy

• →Auto-collapse the drawer to a rail at 1024px. Expose a hamburger toggle only below 640px (full overlay drawer).
• →Never hide the sidebar entirely on desktop — persistent navigation is a core desktop advantage.
• →Collapsed rail icons must be 44×44px touch targets minimum, even on desktop (mouse pointer can be imprecise).
• →Use a CSS transition of 200ms ease-out for sidebar expand/collapse. Avoid layout shift on content area — slide the sidebar, reflow the content.
• →Store the user's preference in localStorage. Respect it across sessions.
• →On the Global Header, ⌘K should open a command palette modal, not a standard input. Map Ctrl+K on Windows.

Global Header

A persistent top bar anchors global actions that don't belong to any single section — search, notifications, and account. Keep it under 56px tall. Don't put navigation here on desktop; that belongs in the sidebar.

12-Column Grid

A 12-column grid gives maximum compositional flexibility: it divides evenly into halves (6), thirds (4), quarters (3), and sixths (2). All desktop layouts are built from these column spans. Gutter and margin values scale with the viewport.

Density Modes

Desktop users tolerate higher information density than touch users. Provide two CSS variable sets — default (mobile-inherited) and compact (desktop-optimised). A density toggle lets power users choose.

:root {
  /* Touch / default */
  --spacing-row:    40px;
  --spacing-cell-y: 12px;
  --spacing-cell-x: 16px;
}

[data-density="compact"] {
  --spacing-row:    32px;
  --spacing-cell-y: 6px;
  --spacing-cell-x: 12px;
}

[data-density="comfortable"] {
  --spacing-row:    48px;
  --spacing-cell-y: 18px;
  --spacing-cell-x: 20px;
}