Article patterns

Callouts

Four flags for a trap, a tip, a caution or a neutral note, each with its own colour and icon. They pull a single important point out of the flow without breaking it.

Blockquote

A pulled quote, set off by a green left rule on a tinted panel. Used for a real quotation, not for emphasis — emphasis is what bold is for.

Code

Inline code sits in a tinted chip. Blocks get a header with the language and Copy and Expand controls, syntax-highlighted with Shiki in a light and a dark theme, and they run full-bleed to the screen edges on a phone so a wide line has room.

const tokens = getDesignTokens();
renderTable(tokens.colors);

A code block can also carry a file-path header: a mono strip above the code naming the file it belongs to. On phones a third control joins Copy and Expand: Wrap, which soft-wraps long lines instead of scrolling them.

Tables

An article never uses a bare HTML table. A classic table ships inside a bordered card with a sticky first column and a monospace header strip; and where rows would fight the phone column, the data becomes a bespoke card instead. All five patterns, rendered from the real classes:

Simple table

The docs’ own light table: a mono uppercase header strip on the badge tint, hairline row dividers, wrapped in a rounded scrollable card. For token-and-value data that fits three or four columns; anything wider belongs to the bespoke table patterns above. The table-mini classes.

When a row carries more than three or four columns, do not let it scroll sideways: add table-stack and give every cell a data-label. From 700 pixels it is the same table; on a phone the header row hides and each row stacks into label-value pairs — the type scale on the Typography page reads this way. Mark the row’s title cell stack-lead and a trailing note stack-end. And when even pairs are too wide, give up the table: the colour swatches render as a wrapping list instead.

<div class="table-mini-wrap">
  <table class="table-mini table-stack">
    <thead>…</thead>
    <tbody>
      <tr>
        <td class="stack-lead"><code>--fs-h1</code></td>
        <td data-label="Desktop">34px</td>
        <td data-label="Mobile">30px</td>
      </tr>
    </tbody>
  </table>
</div>

Advice cards

Born in these docs and promoted to the site: a Do and a Don’t card pair for giving advice without a wall of text. Each card is a figure with a labelled head, an example stage and a caption. Available to articles as plain HTML with the dodont classes.

<div class="dodont-grid">
  <figure class="dodont dodont-do">
    <p class="dodont-head">Do</p>
    <div class="dodont-stage">…example…</div>
    <figcaption class="dodont-caption">Why this works.</figcaption>
  </figure>
  …
</div>

Compare columns

Two bordered columns, green-topped for the favoured side and neutral for the other: what translates against what stays verbatim, what a library does against what it costs. The compare classes, available to articles.

• Do

  • compare-yes

• Don’t

  • compare-no

Dividers & dot lists

A horizontal rule in an article renders as a short centred green bar, the section divider. And the green-dot list — the bullet used by role descriptions and the booking page — is available to articles as dot-list.

• Dividers & dot lists
• Compare columns

Diagrams

Architecture diagrams are static images drawn in the site's own tokens — no diagram library ever ships to the reader. The tokens theme the result (green nodes, neutral arrows), so it re-colours with the theme like everything else, and the corner control opens it full screen. This is a real diagram from a published article:

Contents

A long article carries its table of contents: the real Toc component renders as a sticky sidebar card from 1024 pixels, and the same headings feed the contents sheet behind the reading bar's progress ring below that.

Series navigation

A post that belongs to a series opens with a horizontal shelf of numbered part cards — the current part outlined green, the rest linking across the series. Mobile scrolls the shelf freely; desktop adds arrow controls.

Subscribe

The newsletter band that closes a post: a short pitch, one email field, and a note about double opt-in. This is the real component, rendered live.

Where it lives

global.css: .prose blockquote.callout-*, .code-block-* and .prose pre, the .dt-card family, plus SubscribeForm.astro.