Tone panel

data-tone turns any block into a colour panel. The six tones carry meaning: go for allowed, stop for denied, info for a notice, earth for a result, soft for a quiet accent and ink for the darkest.

Basic

<div data-grid="3">
  <div data-tone="go"><h3>Deployed</h3><p>182 pages went live at 14:31.</p></div>
  <div data-tone="stop"><h3>Link check failed</h3><p>Three pages point at <code>/guide/old</code>.</p></div>
  <div data-tone="info"><h3>Watching files</h3><p>atlas rebuilds whenever a source file is saved.</p></div>
</div>

Each tone pairs with its own -fg, so the text on it clears 4.5:1 without being set.

A card tone

<article data-tone="card">
  <small>Build</small>
  <h3>atlas 1.4.0</h3>
  <p>Last run at 14:02 from <code>~/code/atlas</code>, 1.94 seconds.</p>
</article>

card is the neutral tone: the card colour, the page ink and no accent.

Notes

• The tones are soft, go, stop, info, earth, ink and card.
• A panel also sets --s72-tone and --s72-tone-fg, which the ticket stub and the pattern edge read.
• A panel is a flat colour field: no gradient, no shadow, no rounded corner.
• Inside a tone panel, buttons, inline code and <pre> blocks switch to shades of the panel instead of the page colours.