Component reference

Layout

Container, Stack, Cluster, Grid, Section and Surface primitives that compose any page without custom layout CSS.

Text

Tone (muted, subtle, human, digital) and reading measure for running copy — combine with the .type-* size classes instead of writing inline color or max-width.

Prose

One class that styles long-form HTML — articles, Markdown output, CMS content — with the full typographic system.

Button

Pill-shaped action trigger. Primary is terracotta (one per view), secondary is a teal outline, ghost is quiet, danger is destructive.

Link

Text links — inline, quiet and standalone call-to-action — plus the skip link every page should start with.

Field

Wraps one form control with its label, hint and error message; Fieldset groups related controls under a legend.

Input

One class for text inputs, textareas and selects, with a ≥3:1 control boundary, visible focus ring, and invalid/disabled/read-only states.

beta

Combobox

A text input that suggests options as you type — accent-insensitive filtering, arrow-key navigation and a result count for screen readers, via membrane.js.

Choice

Checkbox and radio controls drawn in the brand style, inside a clickable .mp-choice label row with optional description.

Switch

An on/off toggle for settings that take effect immediately — a native checkbox with role="switch".

Card

A contained unit — overline, serif title, body, footer, optional media — with standard, featured and flat variants and an accessible whole-card link.

Tag

A pill that names a topic or category, colored by register — human (terracotta), digital (teal) or neutral. Can be a link, a toggle, or removable.

Badge

A compact, uppercase, non-interactive label for status and metadata — info, success, warning, error, or a register tone.

Avatar

A person as a warm-filtered photo or Fraunces initials; digital tone uses monospace for bots and systems. Groups overlap.

Quote

Blockquote with attribution in Fraunces italic; the pull variant renders the brand's signature phrases large and centered.

Code

Inline code, keyboard keys, and always-dark code blocks with gate-checked syntax colors that also style Prism and highlight.js output.

Divider

A fading hairline between sections — or a full-width solid rule inside panels. Prefer whitespace first.

Table

Data tables with a quiet uppercase header, tabular numerals, end-aligned numbers, compact/striped/interactive variants and a scrolling frame.

Stat

A headline metric — label, Fraunces numeral, and a delta whose arrow (trend) and color (sentiment) are set independently.

beta

Chart

A figure shell (title, legend, caption) and a CSS bar list — single, multi-series or stacked — colored by the validated --color-chart-* palette, with every value printed.

Icon

Sizes and colors an inline line-icon SVG from the --size-icon-* tokens (20/24/32/48px) and the register/status text colors.

Alert

An inline message about state — info, success, warning, error — or a human-register editorial note, with optional icon and actions.

Progress

Native <progress> bars (determinate or indeterminate, three sizes, register tones) and a spinner for short unmeasured waits.

Skeleton

Placeholder text lines, circles and blocks that hold a layout's shape while content loads; they pulse in place under reduced motion.

Empty state

What a view shows before it has content — icon on a warm wash, Fraunces title, one sentence of guidance and the next action.

beta

Toast

A brief, polite confirmation of something the person just did — one live region per page, MembranePalette.toast() or a data-mp-toast button, auto-dismissed unless it's an error.

Tooltip

A short inverse-colored hint shown on hover and keyboard focus — CSS-only, hoverable, Escape-dismissible with membrane.js.

Dialog

A modal built on native <dialog> — focus trapping, Escape and the backdrop come from the browser; header, body and footer slots.

Navbar

Sticky translucent site header with brand, uppercase links (aria-current marks the active page) and an actions slot; collapses by its own width.

Breadcrumb

The path from site root to the current page, as an ordered list with decorative separators and aria-current on the last item.

Tabs

WAI-ARIA tabs — underline or pill (segmented) style; aria-selected drives the visuals, membrane.js adds click and arrow-key behavior.

Accordion

Expandable sections on native <details>/<summary> — no script, keyboard-ready, exclusive with a shared name, animated where supported.

Pagination

Numbered page links with previous/next; aria-current marks the current page (teal pill), and narrow containers collapse to previous · current · next.

Steps

Progress through an ordered sequence — course modules, onboarding, a multi-page form — vertical or horizontal, with complete, current and upcoming steps.

beta

Menu

A list of actions in a native popover — opened by a popovertarget button, light-dismissed by the browser, arrow-key navigable with membrane.js.