Styleguide

This is the reading surface. Every element below is rendered by the same theme a reader sees, so the styleguide shows the real prose output rather than an imitation of it.

You write in markdown, and the surface binds each element to the theme tokens. Change one token and the whole surface, this article included, re-skins in lockstep.

A second-level heading

A heading on the display face, bound to the text it introduces with a large space above and a tight space below.

A third-level heading

Inside a section. Reach for it when a section grows long enough to want its own parts.

Inside a paragraph you can make a word bold or italic, and link to the cairn project. Bold reads on a skim; italic is a lighter stress.

• An unordered list with a small accent diamond marker.
• Each item one line, parallel in shape.
• The marker reads the brand accent.

1. An ordered list for steps in sequence.
2. The numbers render in the display face.
3. They pick up the accent color.

• A done item in a task list
• Another finished step
• An open item still to do
• One more left

A blockquote, set apart with a left accent rule and italic type, for a passage worth slowing down for.

A pull-quote hangs into the margin on a wide screen and reads in the display face.

For a short snippet inside a sentence, wrap it in backticks so a filename like cairn.config.ts reads as code. For anything longer, a fenced block turns on the highlighter:

// A render adapter is the one seam the engine asks each site to fill.
export function render(markdown) {
  const trimmed = markdown.trim();
  return renderMarkdown(trimmed);
}

The highlighting colors come from the same token set as the rest of the page, so a re-skin recolors code with no edit:

:root {
  --color-primary: oklch(45% 0.1 248); /* the brand accent */
  --font-display: 'Fraunces Variable', serif; /* headings and pull-quotes */
}

A table handles its own alignment, the header rule, and the zebra striping:

A figure holds a picture and its caption together, placed in the text column:

The horizontal rule above renders as a centered cairn mark. Below are the directive components, dropped into the text with a fenced block syntax.

Islands

An island is a directive that renders a static, no-JavaScript fallback on the server, then a small client runtime mounts a live Svelte component over it. The banner below shows its fallback first, then becomes interactive once the page hydrates, re-checking its own expiry rather than trusting the server's render. The second banner has already expired, so it renders nothing, on the server and again independently once the page hydrates.