@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { cx } from './cx';
+
+export interface SectionProps {
+  /** Paper is the default. Night is a dramatic device: the hero and at most one more. */
+  tone?: 'paper' | 'night';
+  /** `tight` for a subordinate band, `intro` for a page head. */
+  spacing?: 'default' | 'tight' | 'intro';
+  id?: string;
+  children?: ReactNode;
+}
+
+/** One horizontal band of the page, carrying the vertical air around its content. */
+export function Section({ tone = 'paper', spacing = 'default', id, children }: SectionProps) {
+  return (
+    <section
+      id={id}
+      className={cx(
+        'section',
+        spacing === 'tight' && 'section--tight',
+        spacing === 'intro' && 'section--intro',
+        tone === 'night' && 'night',
+      )}
+    >
+      {children}
+    </section>
+  );
+}