@@ -0,0 +1,26 @@
+---
+category: Layout
+---
+
+# Stack
+
+Vertical rhythm between blocks. Nothing in this system carries its own margins, so two
+headings placed next to each other sit flush; Stack is what separates them.
+
+`gap` is a step on the space scale, 1 to 9. It is never a raw pixel value: hard-coded
+spacing is a defect in this system, and this component is how you avoid one.
+
+`align="start"` keeps children at their natural width, which is what a button or a link
+wants. The default stretches them to the column.
+
+```jsx
+<Stack gap={6}>
+  <Heading>Four stages. One method.</Heading>
+  <Text measure>Threat analysis, engineering, verification and monitoring.</Text>
+  <Stack gap={4} align="start">
+    <Button href="/contact">Talk to us</Button>
+  </Stack>
+</Stack>
+```
+
+Astro equivalent: `<div style="display: grid; gap: var(--space-6);">`.