Design tokens

The shared vocabulary: surfaces, text, the forge accent, and the status line palette.

Top nav

.topnav is the family bar: a .brand lockup on the left, then .navlinks. The link for the current page takes .active, and a real nav pairs that class with aria-current="page". The specimen below is a real nav.topnav, so this page carries two.

Hero

.hero centers a .logo mark, an h1, and a .tagline - see the real thing on the home page. The dashed frame is demo furniture; the heading inside it is a real h1 so the specimen exercises the core rule itself, at the cost of a second h1 on this page.

Hero heading

A centered, balanced tagline with a link and some inline code to exercise the descendant styles.

Terminal window

.terminal: a windowed dark surface with a titlebar and traffic-light dots, for demoing CLI output or other terminal-styled content. .screen sizes to its own container via container-type: inline-size, not the viewport. .demo is the plain margin wrapper around a standalone block like this one.

Nav cards

A .cards grid of .nav-card tiles. Hover for the ember border.

Buttons

.btn is the outline default; .btn-primary adds a filled ember variant for the primary action in a group.

Chips

.chip takes its accent from --chip and derives its fill and ring via color-mix; with no accent set it falls back to muted.

Rule

A bare hr is a hairline divider in --border, matching the footer's top rule.

Footer

.foot is the family footer: the three family links, then the .creed. Every anvil site ships that markup unchanged. A project site adds its repo and license in a .colophon row above the footer, as a sibling, never inside it. The colophon carries the hairline and the top gap that .foot owns on its own, so the two read as one band. The specimen below is a real footer.foot, so this page carries two.

github.com/urda/some-project ♦ Apache 2.0 ♦ v1.2.3

Reference table

The .kv key/value table for reference material. A code span never wraps, so a key column stays on one line. In the last column it wraps instead, so a long value cannot force the table wide. The last row below carries a long value that exercises that override.

.glyph keeps an emoji/icon column fixed-width so it doesn't jitter next to variable-width text, meant for a .kv cell.

Tabbed panel

.tabgroup: pure-CSS tabs, hidden radios plus adjacent-sibling selectors, zero JS. The group's own heading is .visually-hidden so it doesn't add a visible label.

Code block

.codeblock for fenced configuration and shell samples, highlighted by the vendored Prism bundle (../res/js/prism.js) using the token theme below. Currently supported: json, bash, and toml.

{
  "forge": {
    "accent": "#ff8c2f",
    "radius": "10px"
  }
}

riff-fable() { _riff_shell claude 248 205 002 --model "fable" --effort "high" "/color yellow"; }

[mcp_servers.grep]
# the theme has no table or key rule; their class-name and property aliases color them
enabled = true
url = "https://mcp.grep.app"
enabled_tools = [
  "searchGitHub",
]

Lede

.lede: the intro paragraph under a left-aligned h1, e.g. a document's opening line. Same code treatment as .tagline but without the centering.

A short lede paragraph, the kind that opens a document with inline code in the flow of the sentence.

Divider heading & subhead

.divider-heading: a mono, uppercase heading with a rule above it, for breaking a long document into major parts. .subhead is the smaller mono subheading beneath it, with an optional muted .note span inline.

Example divider heading

Bulleted list

.ulist: a bulleted list with an optional bold lead-in, for a takeaways box or a plain-prose bill of rights.

• Bold lead-in. The rest of the line stays muted.
• Another lead-in. Same treatment, second item.
• A plain item with no lead-in at all.

Footnote aside

.flow-aside: a small muted footnote under a table or code block, e.g. an asterisked caveat.

*A footnote-sized aside, capped to a comfortable reading width.

Data table: reference

A plain .datatable inside its .datatable-wrap panel, no shape modifier: the base bordered, striped-on-hover grid.

Data table: availability matrix

.datatable.grid: a centered matrix with .rowlabel-col / .rowlabel and a colored .rail per row, td.c mark cells, and tr.group divider rows (one tbody per group) carrying a .glabel and .gdot. A .datalegend of .legend-swatch pills keys the marks; each cell pairs a .datamark with a .marklabel in a .markstack. The .gdot has no color in core - each page sets it inline from its own rail tokens, done here directly from core's status colors since this is a demo, not a real vendor row.

Data table: numeric

.datatable.numeric: right-aligned tabular figures. th.labelcol and th.widecol are opt-in width utilities for any fixed-layout table, and tr.total bolds a summary row.