---
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`.