Chips

<mark> is a chip: small uppercase text on a flat colour. data-tone picks which colour, and each tone already pairs with text that reaches 4.5:1 on it.

Basic

<p>
  <mark>Draft</mark>
  <mark data-tone="go">Deployed</mark>
  <mark data-tone="stop">Link missing</mark>
  <mark data-tone="info">Review</mark>
  <mark data-tone="earth">182 pages</mark>
</p>

Without data-tone a chip takes the soft tone, the quietest of the six.

In a table cell

<table>
  <thead><tr><th>Entry</th><th>Kind</th><th>Record</th></tr></thead>
  <tbody>
    <tr><td data-mono>00001</td><td><mark data-tone="soft">page</mark></td><td>Rendered <code>guide/index.md</code></td></tr>
    <tr><td data-mono>00002</td><td><mark data-tone="stop">missing</mark></td><td>Link not found: <code>/guide/old</code></td></tr>
  </tbody>
</table>

A chip in a <td> is given a fixed width, so a column of them lines up down the table.

Notes

• The tones are soft, go, stop, info, earth and ink; each has a -fg partner for its text.
• Chips are the one place besides <small> where s72 uses uppercase.
• Inside a hero, chips switch to the solid fill and lose the uppercase, so the eyebrow row stays quiet under the heading.