768 B
768 B
category
| 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.
<Surface tone="paper">
<Section>…</Section>
</Surface>
In the Astro site this is the body element, styled in src/styles/base.css.