Layout

Spectra keeps layout small on purpose: containers for width, stack for rhythm, and a docs grid when cards need to wrap cleanly.

Core layout classes

Class	Used for	Contract
`.sp-container`	Page-width outer shell	Centers content, uses `--sp-container-max`, and adds inline padding with `--sp-4`.
`.sp-content`	Readable inner width	Keeps docs and long content inside `--sp-content-max`.
`.sp-container-narrow`	Compact demos and narrow shells	Uses `--sp-container-narrow` and a padded frame for tighter compositions.
`.sp-stack`	Vertical rhythm between siblings	Adds `margin-top: var(--sp-3)` between direct children.
`.docs-grid`	Docs-only card grid	Auto-fit grid using `--sp-doc-card-min` so manual cards wrap cleanly.

Preview

Outer shell

Container max width + page padding

Vertical rhythm

First block

Second block

Third block

Typical composition

<main class="sp-container sp-content">
  <section class="sp-stack">
    <h1 class="sp-h2">Page title</h1>
    <p class="sp-muted">Readable width, token-driven rhythm.</p>
  </section>
</main>