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.

Status palette text

These utilities apply the shared status colors to text. A page rider can override them for a specific surface.

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

Use .codeblock for fenced configuration and shell samples. The vendored Prism bundle highlights json, bash, and toml, and adds a language label beside Copy. Anvil core styles the tokens, language labels, and copy status.

{
  "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",
]

Compact blocks keep Copy beside the text and can use a specific button label.

https://anvil.urda.com/forge/rules/raw/ste.md

Add .accent to give the code the ember color.

https://anvil.urda.com/

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.

Page rail

.pagerail: the "On this page" outline. Inside .withpagerail it is a sticky 178px column beside the content, and below 1024px it stacks above it. a.totop in the first li sits above a divider, a.sub indents a child entry, li.ruled opens a new run, and a.on marks the section in view. anvil-pagerail.js sets .on as the reader scrolls.

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.

Metadata and labels

example_prefixReference

Example configuration

Three items

Ready

This aside uses the full content width.

A vendor label inherits its group accent.

➚ Raised ➘ Lowered = Unchanged

Inline examples use a shared legend: FirstSecond

Disclosures

A .disclosure uses native details and summary elements. The optional content script loads plain text when the reader opens the panel.

Open the source file if the document does not load.

Bookmark directory

The directory components accept ordinary links and shared accent tokens.

Data table: vendor rows

A vendor class on a row sets its accent: .g-anthropic, .g-openai, .g-google, or .g-jetbrains. The rail, the group dot, and a .vendor-label row label take that accent with no inline style. A row label with rowspan stays highlighted while any row of its group has hover.

Table scroll

.table-scroll gives a wide table plain horizontal overflow without the data table frame. Give the region a label and tabindex="0" so a keyboard can scroll it.

Automatic outline

The rail derives its labels from the headings beside it. Heading chips and permalink symbols stay outside the labels.