@@ -0,0 +1,24 @@
+---
+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.
+
+```jsx
+<Section tone="night" spacing="tight">
+  <Container>
+    <Heading>Verifiable, not asserted.</Heading>
+  </Container>
+</Section>
+```
+
+Astro equivalent: `<section class="section section--tight night">`.