homepage_relaunch/.design-sync/ds-src/Section.md

category

category
Layout

Section

One horizontal band of the page. It carries the vertical air above and below its content, which is the single biggest reason the site reads as composed rather than busy. Put a Container inside it; never put page margins on the Section itself.

spacing="tight" for a subordinate band, spacing="intro" for a page head, where the air above is full and the air below is reduced so the content follows the title.

tone="night" makes this band a night surface and flips the ink tokens inside it.

<Section tone="night" spacing="tight">
  <Container>
    <Heading>Verifiable, not asserted.</Heading>
  </Container>
</Section>

Astro equivalent: <section class="section section--tight night">.