25 lines
768 B
Markdown
25 lines
768 B
Markdown
---
|
|
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`.
|