Spacing and layout

The 4px spacing ladder, the shell frame (240px nav, 64px top bar, 24px content gutter), card grids, density and breakpoints.

Saga screens are dashboards: a fixed navy nav, a fixed top bar, and a white content area holding cards and tables. Spacing is a short ladder on a 4px grid (DS-008) and nearly every gap on a screen is one of three values: 8, 16 or 24.

Scale#

Rules:

• Spacing comes from the ladder. 13px, 20px and 1.3rem are not on it.
• Spacing is in px tokens, so it does not grow with the text-size preference; text does. That is intentional: a user who wants bigger text does not want bigger gaps, and a 1.7× gutter would eat the screen.
• Padding inside a container is uniform (24px all round on a card), not "a bit more at the top".
• Use gap on flex and grid rather than margins on children, so the last item needs no exception.

Page layout#

The shell is three fixed regions and one scrolling one (DS-007):

┌──────────┬────────────────────────────────────────┐
│          │ top bar  64px  (page title, clock, ⋯)  │
│ nav      ├────────────────────────────────────────┤
│ 240px    │ content: padding 24px                  │
│ navy     │   tab strip (optional)                 │
│ fixed    │   action row                           │
│          │   cards / table (scrolls)              │
│ district │                                        │
└──────────┴────────────────────────────────────────┘

<div class="saga-shell">
  <nav class="saga-nav">…</nav>
  <div class="saga-shell__main">
    <header class="saga-topbar"><h1 class="saga-topbar__title">Demo Program 08/17</h1>…</header>
    <main class="saga-page">
      <div class="saga-tabs" role="tablist">…</div>
      <div class="saga-page__toolbar">…</div>
      <div class="saga-card">…</div>
    </main>
  </div>
</div>

.saga-shell is a 100vh grid of --nav-width plus the rest; .saga-page is the padded scroll region. When the shell has to live inside something else (a decision-board scene, a preview panel, a tutorial frame) add .saga-shell--framed: it fills its positioned parent's height instead of the viewport, and overlays inside it use .saga-scrim--local and .saga-toast-stack--local so they stay in the frame (DS-118). The full markup is in shell-navigation.

Content width (DS-026):

• Data pages (rosters, schedules, reports) are fluid. A table uses the whole width and scrolls horizontally inside its card when it must.
• Forms and settings cap at max-width: 720px; a form wider than that has fields the eye cannot connect to their labels.
• Reading content (help, onboarding, empty states) caps at 72ch.
• Nothing is centred in the content area except an empty state.

The top bar holds the page title (h1, blue), an optional context crumb ("Schedule"), and a right cluster of clock, icon buttons and the user menu with --space-md between them. It never holds page actions; those go in the content's action row.

Cards#

Cards are the unit of layout (see Elevation and surfaces for their look). .saga-grid is the grid: --space-md gaps, one column by default, --2 / --3 / --4 for fixed columns, --stats (alias .stat-grid) for an auto-fit row of stat cards that reflows without breakpoints, --lg to widen the gap to --space-lg for content cards:

<div class="saga-grid saga-grid--stats">…three .saga-card--stat…</div>
<div class="saga-grid saga-grid--2 saga-grid--lg">…two content cards…</div>

Inside a card: heading, then --space-md steps (the rhythm rule), with the card's 24px padding doing the framing. Cards in a grid share a height row; put variable content at the bottom so the tops line up.

A card never contains another card. A card may contain a table, a list of rows with hairline dividers, or a sub-grid of option cards.

Density#

Two densities, chosen per surface, never mixed inside one table (DS-027):

The Rosters grid is dense: 37px rows, 13px text in #444, a sticky header row on --color-bg-secondary. The Schedule "All Periods" list is comfortable. Dense is for reading many rows, comfortable is for acting on one.

Density is a container class, not a global setting:

<table class="saga-table saga-table--dense">…</table>

Breakpoints#

The root font size steps up at two widths (DS-010), so the type and every rem measurement grows on big monitors while the pixel spacing ladder stays put:

Under 1024px (DS-026): the nav becomes an overlay drawer opened from a menu button in the top bar, at --z-overlay with --modal-scrim behind it; the top bar stays 64px; tables keep their columns and scroll horizontally inside the card rather than reflowing into stacked cells. Saga products are used on laptops and Chromebooks, not phones, so there is no phone layout to design; the drawer rule exists so a half-width window still works.

@media (max-width: 1023px) {
  .saga-nav { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); z-index: var(--z-overlay); }
  .saga-nav[data-open] { transform: none; }
  .saga-page { padding: var(--space-md); }
}

Do not add breakpoints for card grids; auto-fill handles them. Do not change the spacing ladder at any width.

Alignment#

• Labels sit above their controls, left-aligned, --space-sm below the label. Side labels (the legacy fixed-width-labels form) are for dense settings panels only.
• Action rows: primary action first on the left in content, last on the right in a modal footer. Buttons in a row are --space-sm apart.
• Icons align to the text baseline at 1.333em (the legacy icon size) with a -0.075em vertical offset, and sit --space-xs from their label.
• Everything on a page snaps to the 4px grid. If a measurement is odd, it is wrong.