# AppSignal design system — documentation index

> Generated 2026-09-23 by process:tools/build-site.py@1.0.0. 659 tokens and 125
> constructs, measured from `appsignal/appsignal-server` at `25759f6295`.
> Every value on this site is measured from a pinned source.

Every page is markdown. There is also an HTML rendering of the same corpus.

**Links are site-absolute.** `/coverage.md` means the file `coverage.md` in the
directory holding this `llms.txt` — not a path on your filesystem's root.
Reading off disk, prefix every link with that directory; over HTTP they resolve
as written.

## Before you answer

This index says where answers are. It contains none of them. Fetch at least one
page or dataset before you answer. Do not report that the site lacks something
until you have read the page that would hold it: a component page says so when
its guidance has not been written, and that statement is the answer.

## Strategies that work

These approaches have been tested against this site. Start from the one that
fits your question. If you have a better plan for your question, use it.

In the commands below, `BASE` is the URL you fetched this index from, without
`/llms.txt`.

1. **You hold an exact name**, such as the token `--color-surface-error` or the
   component `Button`. Put it into the URL pattern, `/data/tokens/<token>.json`
   or `/data/constructs/<name>.json`, and fetch it. Do not browse for the page
   that prints it.
2. **You know what a thing does but not what it is called here**, such as "a
   switch" or "a progress bar". Read *Components* at the foot of this index:
   every construct is listed there with the words people use for it, including
   the names other design systems give it. The keywords column of
   `/inventory.md` holds the same words, if you would rather grep:

   ```sh
   curl -s "$BASE/inventory.md" | grep -i -E 'switch|on off'
   ```

   Try two or three words for the same idea. A construct's own name often
   shares nothing with them: *switch* finds `Toggle`, and *progress bar* finds
   `Meter`. Then read the component page for the row you found.
3. **Counting or filtering across a whole set.** Check `/coverage.md` and
   `/inventory.md` first, because both are already summed. If neither answers,
   save the dataset to disk and query it with `jq` or Python, as *Datasets*
   below shows. Do not read a large dataset into context.
4. **Whether there is guidance for something.** Fetch the page that would hold
   it: `/components/<slug>.md` for a component, or the index of `/patterns/`,
   `/foundations/` or `/writing/` for anything else. Answer from what that page
   says.

## Route by the SHAPE of your question, not just its subject

| your question | go to | why |
|---|---|---|
| **You already hold the exact name** | **build the URL: `/data/tokens/<token>.json` for a token, `/data/constructs/<name>.json` for a construct.** Do not guess which page carries it | one small JSON object per identifier — the value, the resolution chain, and the names it can be confused with. `/data/tokens/--animate-bounce.json`, `/data/constructs/Table.json`, `/data/constructs/c-table.json` |
| **One token's value, browsing a group** | `/tokens/index.md` names all of them | nine pages hold all 659: colour is split by tier, everything else is `/tokens/typography.md` and `/tokens/other.md` |
| **One construct** | its link under *Components* below | every construct is listed, by the code's name |
| **A construct you can describe but not name** | grep the keywords column of `/inventory.md` | every row lists the words people search for, so a synonym finds a construct whose name it does not share |
| **How one token resolves, light and dark** | the group page holding it — its `resolves through` column | every hop, with `file:line`, and both chains when they differ. You do not need the dataset for this |
| **Counting or filtering across everything** | `/coverage.md` first, then `/inventory.md` | both are pre-summed and each is one fetch. A question of the form *"which X have no Y"* is usually already answered there, with the members named |
| **A query the summed pages do not answer** | `/data/*.json` — **but read *Datasets* below first** | two of the three must be saved to disk, not fetched into context |
| **What is missing** | `/coverage.md`, and `/gaps.md` for what each kind of gap costs | already summed |
| **Judgement — when to use a thing** | `/patterns/`, `/foundations/`, `/writing/` | the only hand-written pages here |
| **Where a page's words come from, or how to add some** | `/colophon.md` | every page also names its own authored file |

## ⚠️ Do not guess which page holds a name — build its URL

**The pages are named for tiers and groups, not for the tokens they hold**, and
two tiers carry names differing only by a `--color-` prefix. A reader that
guesses a page from a tier word lands on the wrong page and finds a token whose
name nearly matches — measured at **0 of 3** correct routes over HTTP against
**3 of 3** with full-text search on disk. Eleven of nineteen replicates answered
off a page that does not contain the token they were asked about.

**If you hold a name, you do not have to guess.** There is one file per
identifier, addressed by the identifier itself:

```
/data/tokens/<token>.json          659 of them, e.g. /data/tokens/--animate-bounce.json
/data/constructs/<name>.json       154 of them, by component name OR CSS class root
```

Each is a single small object: the value on both sides, what it resolves
through, which page prints the same token with the `file:line` of every hop —
and **`not_the_same_as`, the tokens this one is confusable with**, each with its
tier and its light value. `--color-surface-error` and `--surface-error` are
different tokens on different tiers that share a light value today, so a wrong
page returns a right-looking answer and nothing marks it. That field is the
thing that marks it.

These are **data, not pages.** They have no prose, no nav entry and no HTML
twin; they are not in the page lists at the foot of this index. Fetch one
directly, or `jq` it from a shell. If the identifier you hold does not exist you
get a 404, which is the honest answer — a near-miss name is a different token,
not a spelling of yours.

## Datasets

Generated JSON under `/data/`. **They are partitioned by how you should read
them, because size decides that and nothing else does.**

> These three are the *whole* measurement. The 659 + 154
> per-identifier files above are the same rows sharded one to a file — reach for
> those when you hold a name, and for these when you have a question about the
> set.

⚠️ **`construct-inventory.json` is served as a projection.** Fields naming a
file or directory inside the private repository are removed — a construct's
React module and Storybook module read as `true` rather than as a path, and
stylesheets as bare filenames. Every construct, count, verdict and gap
survives; only addresses are gone. The file's own `$redacted` key lists what
changed and why, so `jq` never has to guess whether a missing field means "not
measured".

<!-- block: tally-table -->

| file | rows | size | how to read it |
|---|---|---|---|
| `/data/contrast.json` | 152 | 65 KB | **fetch it** — fits in one read |
| `/data/figma-token-join.json` | 207 | 103 KB | **fetch it** — fits in one read |
| `/data/construct-inventory.json` | 870 | 609 KB | **save to disk first** — see below |
| `/data/resolved-tokens.json` | 659 | 1,262 KB | **save to disk first** — see below |

<!-- block: member-list -->

- `/data/contrast.json` — every semantic foreground on every semantic surface, light and dark, with its WCAG contrast ratio and a pass/fail per floor — fetch this for a contrast lint
- `/data/figma-token-join.json` — the Figma↔CSS comparison, one row per specimen variant, with a verdict
- `/data/construct-inventory.json` — every construct join row: react, css, story, per-app usage counts
- `/data/resolved-tokens.json` — every token: resolved light/dark value, `house`/`vendor`/`inert` verdict, and every resolution hop with `file:line`

### The large files are diagnostic dumps. Do not read them into context.

They are the **complete measurement** — every row, plus the blind-spot lists,
the resolution rules and the reconciliation counts. They are not pages and they
were never meant to be read top to bottom. **A fetch returns the whole file and
it lands in your context whole**, so pulling one in spends most of a context
window, and the row you want is probably past wherever your tool truncates —
you pay for the fetch and still do not have the answer.

**If you can run shell commands with network access, save one to disk and work
with it there, as you would any large data file:**

```sh
BASE=<the URL you fetched this index from>
curl -sO "$BASE/data/resolved-tokens.json"

# one token, every resolution hop, with file:line for each
jq '.tokens[] | select(.name=="--color-surface-error") | .values' \
  resolved-tokens.json
```

```sh
curl -sO "$BASE/data/construct-inventory.json"

# highest-usage constructs that have no Storybook module
jq -r '[.constructs[] | select(.story_module == null)]
        | map({name, u: (.uses_product + .uses_admin)})
        | sort_by(-.u) | .[0:5][] | "\(.name)  \(.u)"' \
  construct-inventory.json
```

**This is the route these files are for.** A question of the form *"which X has
the most Y but no Z"* is a query, and no page can pre-sum every one of them; on
disk it is one line.

⚠️ **If `curl` returns nothing and exits cleanly, your shell probably has no
network** even though your fetch tool does — that combination is common in
sandboxed agents and it fails silently. Do not retry it; use the pages.

**If you have no shell, or no network from it, use the pages instead.**
Everything these files would let you compute across the whole set is already
summed on `/coverage.md` and `/inventory.md` — one fetch each, and each names
its members rather than only counting them.

Each dataset carries its own `blind_spots` list. **Read it** — it says what the
measurement cannot see, which is not the same as what is absent.

## Pages

### Token values

<!-- block: row-index -->

- [/tokens/chart-color.md](/tokens/chart-color.md) — The series palette, kept apart from the colour tiers because a chart series is chosen by position, not by meaning.
- [/tokens/color/legacy.md](/tokens/color/legacy.md) — The 2020-era names. Still shipping, still referenced, blind to the theme switch — and not for new code.
- [/tokens/color/primitive.md](/tokens/color/primitive.md) — The raw ramp underneath the semantic names. Not for product code: a colour no semantic name covers is a missing semantic name, not a reason to reach for a ramp step.
- [/tokens/color/semantic-alias.md](/tokens/color/semantic-alias.md) — Older names that still resolve to the semantic set. Safe to read, not to reach for in new code.
- [/tokens/color/semantic.md](/tokens/color/semantic.md) — The design language. This is what product code should reach for.
- [/tokens/color/vendor.md](/tokens/color/vendor.md) — Tailwind's palette, inherited rather than chosen. We declare none of it.
- [/tokens/other.md](/tokens/other.md) — Sizes, shadows, radii and everything else that is neither colour nor type.
- [/tokens/typography.md](/tokens/typography.md) — Every font family, size, weight, line height and letter spacing the product ships.

### Summed over everything

<!-- block: row-index -->

- [/coverage.md](/coverage.md) — Every gap on this site, counted and named, as a sum over the pages themselves.
- [/figma-drift.md](/figma-drift.md) — Where the design library and the CSS disagree, per token, with the causes named.
- [/inherited-from-tailwind.md](/inherited-from-tailwind.md) — The values nobody here chose, and which of them actually render.

<!-- block: row-index -->

- [/inventory.md](/inventory.md) — One row per construct that earns a page, sorted by product usage.

### Authored judgement

<!-- block: row-index -->

- [/foundations/authoring-contract.md](/foundations/authoring-contract.md) — Authoring components
- [/foundations/design-principles.md](/foundations/design-principles.md) — Design principles
- [/foundations/glossary.md](/foundations/glossary.md) — Glossary — the words this site invented
- [/foundations/layout.md](/foundations/layout.md) — Layout
- [/foundations/typography.md](/foundations/typography.md) — Typography
- [/gaps.md](/gaps.md) — Why each empty axis on a component or token page matters, and who can close it.
- [/how-agents-read-this.md](/how-agents-read-this.md) — What this site does to be legible to a coding agent, and how we measure whether it worked.
- [/how-to-change-this.md](/how-to-change-this.md) — Where a change goes, who can make it, and the rules a contribution has to clear.
- [/patterns/buttons.md](/patterns/buttons.md) — Button hierarchy
- [/patterns/date-time-filter.md](/patterns/date-time-filter.md) — Scoping data by time range, deploy revision, or a custom date range, with only the sections a page needs.
- [/patterns/empty-state.md](/patterns/empty-state.md) — Empty state
- [/patterns/filters.md](/patterns/filters.md) — Narrowing a list from one widget, and keeping it in step with the search bar.
- [/patterns/forms-checklist.md](/patterns/forms-checklist.md) — Form checklist
- [/patterns/forms.md](/patterns/forms.md) — Forms
- [/patterns/map.md](/patterns/map.md) — Showing how things are connected, when the relationship matters more than the values.
- [/patterns/menu.md](/patterns/menu.md) — Choosing between a select, a combobox and a menu, which all open the same panel.
- [/patterns/responsive-navigation.md](/patterns/responsive-navigation.md) — How the global navigation changes between the narrow, tablet and desktop widths.
- [/patterns/trace-timeline.md](/patterns/trace-timeline.md) — Showing where a single request spends its time, span by span.
- [/writing/accessibility.md](/writing/accessibility.md) — Accessibility
- [/writing/error-messages.md](/writing/error-messages.md) — Error messages
- [/writing/ui-text.md](/writing/ui-text.md) — UI text patterns
- [/writing/voice.md](/writing/voice.md) — Our voice

### Indexes

<!-- block: row-index -->

- [/foundations/index.md](/foundations/index.md) — The principles and the vocabulary the rest of the site assumes.
- [/index.md](/index.md) — Generated from the product's own code, with hand-authored guidance merged in.
- [/patterns/index.md](/patterns/index.md) — Composed things that carry guidance — how several components behave together.
- [/tokens/index.md](/tokens/index.md) — Every token page. Colour is split by tier; everything else is grouped by what a reader came looking for.
- [/writing/index.md](/writing/index.md) — Voice, tone, and the wording patterns we ship most often.

### This site itself

<!-- block: row-index -->

- [/colophon.md](/colophon.md) — How this site is built, and the small set of primitives every page composes from.

## Components

All 125 constructs, one page each. After each link: its CSS class, and
the words people search for it by. A construct not listed here does not exist
on this site. `/inventory.md` has the same rows with their React, Storybook,
Figma and usage columns.

<!-- block: member-list -->

- [Accordion](/components/accordion.md): collapsible section, expandable content, toggle panel, accordion, disclosure, foldable list
- [AlertDialog](/components/alert-dialog.md): modal dialog, confirmation dialog, confirm action, alert dialog, dialog overlay, modal
- [Area](/components/area.md): `.c-area`; grid layout, page layout, sidebar layout, content area, header area, two-column grid, three-column grid, css grid, layout grid, section layout
- [ASChart](/components/as-chart.md): line chart, area chart, bar chart, sparkline, chart with hover, chart export, multi-series chart, time series chart
- [AssignmentButton](/components/assignment-button.md): assignee selector, team member picker, user assigner, multi-select avatar, assignment dropdown
- [Avatar](/components/avatar.md): `.c-avatar`; user icon, profile image, initials circle, avatar stack, user badge, person icon
- [AvatarStack](/components/avatar-stack.md): `.c-avatar-stack`; user group, avatar group, stacked avatars, user list, team members, avatar overflow, compact users
- [Badge](/components/badge.md): `.c-pill`; label, tag, status indicator, pill, small badge, color-coded label
- [Bar](/components/bar.md): `.c-bar`; progress bar, status indicator, horizontal bar, filled bar, color bar, meter
- [BlankSlate](/components/blank-slate.md): empty state, no data, placeholder, empty screen, empty page, guide, onboarding, help, empty content, empty view, intro, welcome
- [Box](/components/box.md): `.c-box`; container, panel, card, section, content block, grouped content
- [Breadcrumbs](/components/breadcrumbs.md): `.c-breadcrumbs`; navigation path, location trail, crumb trail, hierarchical navigation, path indicator, location breadcrumbs
- [Button](/components/button.md): `.c-button`; primary button, secondary button, danger button, icon button, link button, submit button
- [ButtonGroup](/components/button-group.md): `.c-button-group`; button group, toggle group, segmented control, radio button group, choice group, button toolbar
- [c-article](/components/article.md): `.c-article`; article, documentation, content, prose, rich text, markdown, blog post, guide, article layout, typography, block, text block
- [c-caps](/components/caps.md): `.c-caps`; uppercase text, capitalized text, text transform, heading text, label text, caps
- [c-formv2](/components/formv2.md): `.c-formv2`; form field, form label, text input, textarea, select dropdown, checkbox group, radio group, form hint, form error, form description
- [c-header-m-nav](/components/header-m-nav.md): `.c-header-m-nav`; mobile navigation, mobile menu, hamburger menu, sidebar navigation, drawer menu, off-canvas menu
- [c-header-nav](/components/header-nav.md): `.c-header-nav`; top navigation, header menu, horizontal nav, site navigation, main menu, nav bar
- [c-header-subnav](/components/header-subnav.md): `.c-header-subnav`; header navigation, subnavigation, dropdown menu, top navigation, secondary nav
- [c-heading](/components/heading.md): `.c-heading`; heading, title, header, section title, page title, subtitle, label, caps text, large text, bold text
- [c-ol](/components/ol.md): `.c-ol`; ordered list, numbered list, list, bullet list alternative
- [c-p](/components/p.md): `.c-p`; paragraph, text block, body text
- [c-pagebar](/components/pagebar.md): `.c-pagebar`
- [c-popover](/components/popover.md): `.c-popover`; tooltip alternative, hover menu, popup menu, dropdown menu, context menu, floating panel
- [c-progress](/components/progress.md): `.c-progress`; progress bar, loading indicator, status bar, bar, loader, progress
- [c-screenshot](/components/screenshot.md): `.c-screenshot`; screenshot, image, preview, display image, screen capture
- [c-side-nav](/components/side-nav.md): `.c-side-nav`; navigation sidebar, collapsible menu, nested navigation, vertical menu, active link indicator, subnavigation
- [c-simple-form](/components/simple-form.md): `.c-simple-form`; form, input field, submit button, text input, email input, password input, search input, number input, url input, textarea, select dropdown, checkbox
- [c-skeleton](/components/skeleton.md): `.c-skeleton`; loading placeholder, placeholder, loading state, skeleton
- [c-step-dots](/components/step-dots.md): `.c-step-dots`; step indicator, progress dots, step dots, horizontal steps, vertical steps, progress steps
- [c-steps-hor](/components/steps-hor.md): `.c-steps-hor`; step indicator, progress steps, horizontal steps, numbered steps, step dots, wizard
- [c-steps-vert](/components/steps-vert.md): `.c-steps-vert`; vertical steps, step indicator, progress dots, timeline steps, step list, vertical progress
- [c-table-scroll-x](/components/table-scroll-x.md): `.c-table-scroll-x`; horizontal scroll table, scrollable table, wide table, table overflow, x-axis scroll table
- [c-textarea](/components/textarea.md): `.c-textarea`; textarea, multi-line input, text input, form field
- [c-textfield](/components/textfield.md): `.c-textfield`; text input, search box, form field, input field, text box, single line input
- [c-ul](/components/ul.md): `.c-ul`; unordered list, bullet points, list, bulleted list, list style
- [c-virtual-table](/components/virtual-table.md): `.c-virtual-table`; virtualized table, scrollable table, frozen columns, large dataset table, performance table
- [CellValueActions](/components/cell-value-actions.md)
- [ChartSettingsMenu](/components/chart-settings-menu.md): chart options, chart controls, chart settings, chart menu, chart configuration, chart panel, settings menu, configuration panel
- [Checkbox](/components/checkbox.md): `.c-checkbox`; checkbox, toggle option, form input, select multiple, check box, form control
- [CheckboxGroup](/components/checkbox-group.md): checkbox group, multiple checkboxes, checkbox list, grouped checkboxes, checkbox collection
- [ClusterMetrics](/components/cluster-metrics.md): cpu cores display, cpu usage time, resource unit formatter, core unit converter
- [Code](/components/code.md): `.c-code`; code block, inline code, code snippet, monospace text, syntax highlighting, preformatted text
- [Combobox](/components/combobox.md): searchable select, autocomplete input, dropdown with search, multi-select input, chips input, select with filter
- [Container](/components/container.md): `.c-container`; page wrapper, content wrapper, max-width container, centered container, responsive container, layout container
- [CopyIconButton](/components/copy-icon-button.md): copy button, copy icon, copy to clipboard, clipboard button, copy action, copy feedback
- [CopyText](/components/copy-text.md): copy button, clipboard, copy to clipboard, copy icon, copy text, copyable
- [CopyTextButton](/components/copy-text-button.md): copy button, clipboard button, copy to clipboard, copy link, copy code, copy text
- [CopyToClipBoardButton](/components/copy-to-clip-board-button.md): copy button, clipboard button, copy to clipboard, copy text, copy action, button with copy
- [CreateTriggerLinks](/components/create-trigger-links.md)
- [DateRangePicker](/components/date-range-picker.md): date range selector, date picker, time range, date range input, calendar range, start end date
- [DateRangeSlider](/components/date-range-slider.md): time range slider, hour slider, time window selector, date range control, horizontal slider, range input
- [DefaultRestChart](/components/default-rest-chart.md): rest chart, time series chart, performance chart, line chart, metrics chart, expandable chart, fullscreen chart, exportable chart
- [DescriptionCodeList](/components/description-code-list.md): code list, description list, term description pair, code term, code description, definition list
- [DescriptionList](/components/description-list.md): `.c-description-list`; term value pair, key value display, definition list, label value pair, data row, description pair
- [Drawer](/components/drawer.md): side panel, slide-out panel, modal panel, resizable panel, minimizable panel, drawer, panel, sheet
- [Dropdown](/components/dropdown.md): `.c-dropdown`; select menu, popup menu, trigger button, dropdown list, menu with icons, menu with groups, checkbox menu, radio menu, submenu, disabled items, positioned menu
- [DualRangeSlider](/components/dual-range-slider.md): range slider, dual thumb slider, double slider, range input, slider with two handles, min max slider
- [EmptyState](/components/empty-state.md): no data, empty page, placeholder, empty screen, blank state, action button
- [EnvironmentLabel](/components/environment-label.md): environment badge, deployment environment, environment indicator, env label, deployment status, environment tag
- [ErrorState](/components/error-state.md): error message, empty state, ghost icon, no data, placeholder
- [ExportDropdown](/components/export-dropdown.md): export button, download data, csv export, export menu, data export, export dropdown
- [ExternalLink](/components/external-link.md): external link, new tab link, outbound link, link with icon, link opens external
- [Form](/components/form.md): `.c-form`; form, input field, checkbox group, radio group, select dropdown, form validation, form label, form error, form description, form hint, form field, form control
- [FormattedComparisonOperator](/components/formatted-comparison-operator.md): comparison operator, operator display, formatted operator, operator formatter, comparison symbol
- [FormattedDuration](/components/formatted-duration.md): time duration, elapsed time, time display, duration formatter, time format, mm:ss, hh:mm, hours minutes, milliseconds to time, formatted time
- [FormattedExceptionRate](/components/formatted-exception-rate.md): exception rate, error percentage, formatted percent, percentage display
- [FormattedFileSize](/components/formatted-file-size.md): file size display, file size formatter, file size human readable, file size unit conversion, size formatter, human readable size, file size label, disk space display
- [FormattedHumanNumber](/components/formatted-human-number.md): human-readable number, formatted number, number label, number display, abbreviated number
- [FormattedImpactPercent](/components/formatted-impact-percent.md): impact percentage, percentage display, formatted percent, impact ratio, percentage indicator, value percent
- [FormattedNumber](/components/formatted-number.md): formatted number, number display, number formatter, precision number, number with decimals, number formatting
- [FormattedPercent](/components/formatted-percent.md): percentage, percent sign, formatted percentage, number with percent
- [FormattedRevision](/components/formatted-revision.md): shortened revision, git hash, commit abbreviation, version display, revision tooltip
- [FormattedThroughput](/components/formatted-throughput.md): throughput display, requests per minute, requests per hour, rate formatter
- [FormattedTime](/components/formatted-time.md): time display, formatted date, timestamp, human-readable time, date formatter, time formatter
- [FormattedTimeAgo](/components/formatted-time-ago.md): time ago, relative time, elapsed time, human-readable time, dynamic time
- [FormattedTimeSince](/components/formatted-time-since.md): relative time, time ago, from now, elapsed time, duration since, timestamp display
- [FormField](/components/form-field.md): form field, form input wrapper, form group, form element container
- [FormLabel](/components/form-label.md): form label, input label, field label, form hint, label with hint, form field description
- [FormPreviewBox](/components/form-preview-box.md): form preview, form validation, form status, form display, form mockup, form example, form demo, form container, form card, form panel
- [FrequencyIcon](/components/frequency-icon.md): frequency indicator, notification frequency, alert frequency, repeat icon, schedule icon, trigger icon
- [Grid](/components/grid.md): `.c-grid`; two column layout, sidebar layout, header sidebar content, grid layout, responsive grid, two row layout
- [HighlightedCode](/components/highlighted-code.md): code block, syntax highlight, code snippet, formatted code, code display, highlighted code block
- [HighlightedCodeExpandable](/components/highlighted-code-expandable.md): code block, syntax highlight, expandable code, code snippet, formatted code, code with line numbers
- [HighlightedCodeWithActions](/components/highlighted-code-with-actions.md): code block, syntax highlight, code snippet, code display, formatted code, code with actions, copyable code, interactive code
- [HighlightedCodeWithTabs](/components/highlighted-code-with-tabs.md): code block, syntax highlight, code snippet, code display, code viewer, code tab
- [HostFilter](/components/host-filter.md): host selector, multi-select dropdown, filter hosts, host picker, select multiple
- [HoverCard](/components/hover-card.md): hover tooltip, pop over content, card on hover, preview card, tooltip alternative, popper
- [Icon](/components/icon.md): `.c-icon`; symbol, glyph, icon button, disclosure indicator, close button, svg icon, font icon, inline icon
- [IconBox](/components/icon-box.md): `.c-icon-box`; rounded icon container, colored icon badge, icon badge, icon wrapper, shaped icon box, icon container
- [InlineCode](/components/inline-code.md): `.c-inline-code`; inline code, code snippet, code text, monospace text, code highlight, code badge
- [Input](/components/input.md): text input, form field, text field, input field, form input, editable text, single line text, text entry
- [KeyboardShortcut](/components/keyboard-shortcut.md): key combo, shortcut badge, key indicator, keyboard icon, hotkey display, shortcut label
- [LearnMoreTag](/components/learn-more-tag.md): info link, help link, learn more, external link with icon, info icon link
- [Link](/components/link.md): `.c-link`; link, hyperlink, clickable text, router link, navigation link
- [LoadingAnimation](/components/loading-animation.md): loading spinner, loading indicator, animated loader, loading state, progress animation
- [LoadingSpinner](/components/loading-spinner.md): `.c-spinner`; loading, spinner, progress indicator, loading text, animated loader, small spinner, large spinner
- [LoadMoreButton](/components/load-more-button.md): load more, load more button, load more link, load more action, infinite scroll trigger, show more
- [LogsQueryAutocomplete](/components/logs-query-autocomplete.md): log query input, autocomplete filter, query builder, search filter, field selector, operator picker, value suggestion
- [Markdown](/components/markdown.md): `.c-markdown`; rich text, formatted text, markdown renderer, text with formatting, content block, documentation text, styled prose, markdown, text component, formatted content
- [Message](/components/message.md): `.c-message`; info banner, error notice, warning message, success alert, notification banner, callout, status message, inline message
- [Meter](/components/meter.md): `.c-bar`; progress bar, status indicator, fill level, horizontal bar, value bar, meter
- [NaturalLanguageDateRangeInput](/components/natural-language-date-range-input.md): natural language date input, date range input, time expression input, quick jump date, date picker alternative, text date selector
- [Overlay](/components/overlay.md): `.c-overlay`; modal, dialog, popup, full-screen overlay, backdrop, modal window
- [Page](/components/page.md): page layout, two column, page header, content area, sidebar layout, main content, layout container, section wrapper, page structure, column layout
- [PopOver](/components/pop-over.md): popup, tooltip alternative, dropdown menu, context menu, floating panel, modalless dialog
- [QueryInputFilter](/components/query-input-filter.md): search filter, query input, filter input, search box, filter box, query builder, filter suggestions, example filter
- [Radio](/components/radio.md): `.c-radio`; radio button, single selection, choice input, form control, toggle option
- [RadioGroup](/components/radio-group.md): radio buttons, choice group, single selection, form options
- [RelatedLogLinesTable](/components/related-log-lines-table.md): log table, log list, log viewer, log timeline, related logs, table
- [ResizeHandle](/components/resize-handle.md): resize handle, splitter, divider, column resize, drag to resize, resizable separator
- [Select](/components/select.md): `.c-select`; dropdown, select input, picker, menu, listbox, form control, choice selector
- [SeverityIcon](/components/severity-icon.md): severity indicator, priority icon, error level, incident level, status indicator, triage icon
- [Spinner](/components/spinner.md): `.c-spinner`; loading, spinner, animated loader, progress indicator
- [Table](/components/table.md): `.c-table`; data table, grid, list view, sortable table, selectable rows, expandable rows, column filter, fixed header, inline table, virtualized table
- [Tabs](/components/tabs.md): `.c-tabs`; tab navigation, content tabs, switcher, section switch, tabbed interface, tab panel, tab list
- [TimeSelectInput](/components/time-select-input.md): time input, time picker, time field, time selector, time form field
- [Toast](/components/toast.md): notification, popup, alert message, toast notification, dismissible banner, status message
- [Toggle](/components/toggle.md): `.c-toggle`; on off switch, toggle switch, checkbox switch, on off control, switch button, toggle control
- [Tooltip](/components/tooltip.md): hover hint, info popup, descriptive text, on-demand help, contextual tip, label overlay
- [TraceServiceMap](/components/trace-service-map.md): service map, trace visualization, distributed tracing map, service dependency diagram, trace nodes, legend panel, expandable legend
- [TracesMiniTimeline](/components/traces-mini-timeline.md): mini timeline, trace trends, performance chart, error chart, time range selector, compact chart
- [TracesPanel](/components/traces-panel.md): trace list, trace timeline, load more, scrollable list, deployment marker, active trace highlight
- [TraceTimeline](/components/trace-timeline.md): trace timeline, span timeline, distributed tracing timeline, trace visualization, trace viewer, span chart

## DESIGN.md, for impeccable

`/DESIGN.md` at this site's root is the design system in the form
[impeccable](https://github.com/pbakaus/impeccable) reads from the root of a
project: a frontmatter listing every colour, radius and type role the product
ships, then eight prose sections on the system's character, colours, type,
layout, depth, shapes, components and guardrails. It is generated from the same
pinned source as every page here, and it links back to these pages for the
full reference. It is not a page of this site: it has no nav entry and no HTML
rendering. Fetch it only to install or refresh a project's `DESIGN.md`, or to
read the system's visual rules in one file. For a value or a construct, the
routes above are shorter.

## Provenance

Every page carries `generated` and `sources` in its frontmatter, states its own
gaps in its tables, and names the authored file its prose lives in. **A page
that cannot state a fact says so rather than omitting it.**