Initial commit 🚀

.design-sync/ds-src/Surface.md

@@ -0,0 +1,24 @@
+---
+category: Foundations
+---
+
+# Surface
+
+The root of every screen. It sets the ground and the base type, so put it outermost and
+put everything else inside it. Without it a design inherits the canvas defaults and none
+of CipherCell's typography.
+
+`tone="paper"` is the base surface for the whole site, a warm paper tone, never pure white.
+`tone="night"` flips the ink tokens as well as the background, so muted text, hairlines and
+buttons inside it correct themselves with nothing to set.
+
+Night is a dramatic device. A page gets the hero and at most one other night band; more than
+that and the move stops working.
+
+```jsx
+<Surface tone="paper">
+  <Section>…</Section>
+</Surface>
+```
+
+In the Astro site this is the `body` element, styled in `src/styles/base.css`.