Foundations

Layout

Fixed max-width containers, a two-column working grid, and sticky chrome — collapsing to a single column at one deliberate breakpoint.

Max-widths

Three container ceilings keep line lengths and surfaces composed: --ds-maxw-page (1440px) for the outer shell, --ds-maxw-content (1180px) for reading and dense content, and --ds-maxw-modal (860px) for dialogs.

Two-column grid

Main 1fr · aside 380px

Main (1fr)

Aside (380px)

<div style="display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px">
  <div>Main (1fr)</div>
  <div>Aside (380px)</div>
</div>

Sticky & responsive

The application header is sticky at top:0 with z-index:var(--ds-z-header) (40); the aside column sticks alongside the scrolling main. A single breakpoint at --ds-bp-md (940px) collapses the two-column grid down to one column.