Atomic elements
Buttons
.card-filter__btn / .controls-map-btn
Buttons are available in Primary, Secondary, and Tertiary form, and may be text-only, icon and text, or icon-only. Icon-only buttons must always be paired with alt-text that explicitly describes the action of the button — accessibility is the first priority.
Primary marks the recommended path — any given group of buttons should only ever have one Primary. Secondary and Tertiary buttons may accompany it to offer alternative or supporting actions without competing with the primary recommendation.
Checkboxes
.checkbox-tristate
Checkboxes support three states: unchecked, checked, and indeterminate — a partial-selection state, shown as a dash rather than a tick, distinct from both checked and unchecked. This is a fully custom control, not the browser's native checkbox, so its states render consistently across browsers and themes.
Indeterminate is not a fourth optional style — it must only be used where a control genuinely represents a group of child items with mixed selection state (e.g. a parent category with some but not all of its children selected). Never apply it to a standalone checkbox with no children to summarize.
Icon gallery
icons/icons.js — window.FieldGuideIcons
Icons are sourced from Lucide (lucide-static), an open-source icon library, and vendored locally rather than loaded from a CDN. The set shown here reflects the icons currently in active use across the system — a working selection, not the full Lucide library, and it will grow as the system does.
Each icon is captioned with its lookup key for direct reference in code. This gallery is a reference index rather than a component in its own right, so there's no example to copy — reach for the key shown here when wiring a new icon-only button or icon-paired label.
Summary pills
.dp-blanket-pill / .region-tier-summary-pill
Summary pills are Field Guide's neutral, ink-filled treatment for a count or state that stands in for a group — "34 selected," a tier overflow, an "(All)" toggle. They draw only from the brand/neutrals palette, deliberately, so a summary never competes visually with the data-viz or status colors used elsewhere for meaning (source identity, confidence, agreement). Where a pill represents a specific real thing — a single named source — use a Source tag instead, which does carry a data-viz color for exactly that reason: Tags identify; pills summarize.
A summary pill's visible text is often an abbreviation ("(All)," a bare count) — pair it with alt-text that states the full meaning explicitly, the same accessibility requirement as an icon-only button.
Text inputs
.filter-text-input
Text inputs share one border and focus-ring treatment across Field Guide, whether single-line or multi-line — a deliberate consolidation, so every field in a form reads as part of the same system rather than each control developing its own visual identity over time.
Placeholder text should model the expected format or give a concrete example, not restate the field's own label.
Single-line
Multi-line
Compound components
Citation modal
.modal-citation / ModalCitation.open()
The citation modal is a full-viewport document inspection surface, opened when a user clicks a document citation. It shows the real source page, already scrolled and highlighted to the cited passage, with document navigation and page-number pagination along the bottom.
Every citation should link to a specific location within its source — a page number alone is not enough; the reader should land already looking at the passage in question, not the top of the file.
Shown pre-opened below for demonstration — its own click-to-open flow isn't reproduced on this page.
Confidence tag
.tag-confidence / mountTagConfidence()
A confidence tag communicates a computed confidence tier — Low, Medium, High, Full, or None — as a set of 0–4 filled dots paired with a text label. None represents a genuine recorded absence of confidence data, distinct from a field simply having no tag at all.
High and Full deliberately share one color, distinguished only by dot count and label text — confidence level should never rely on color alone to be understood.
Datapoint card
.card-datapoint / mountCardDatapoint()
A datapoint card presents a derived value alongside every source's own record behind it, and a confidence tag computed from how well those sources agree — Agree, Align, Diverge, or Conflict. Where a value isn't stated directly by any single source but can be derived from the ones available, the card presents that derived value with the same source-comparison treatment, clearly marked as system-derived.
Citation rows within a card are focusable and open the citation modal on click.
Filter card
.card-filter
The filter card is Field Guide's consolidated search and filtering toolset — everything a user needs to narrow a search down to the sources, categories, dates, and regions relevant to their question, in one persistent panel. AI-assisted search and Description/keywords are open by default; Category, Date, Data Provenance, and Region stay collapsed until a user needs them.
AI assisted search
Description or keywords
Separate multiple keywords with commas.
Category
Date
Data provenance
Region
Region's and Data Provenance's own search fields really do switch to a full-screen modal below a 592px browser width, same as the real product — try narrowing this window to see it.
Masthead
masthead / mountMasthead()
The masthead is Field Guide's site-wide identifier bar, mounted on every page — sticky, full-bleed, and inverted, with a surface-colored wordmark and controls set against an ink background. It appears in two variants: primary, used on task-oriented pages, with the wordmark linking home and profile and hamburger menus for account and navigation controls; and design-system, used on reference pages, with a tag label identifying the section, a light/dark toggle, and hamburger navigation only.
Primary variant
Design-system variant
Source tag
.tag-source / mountTagSource()
A source tag identifies the specific agency or publication behind a piece of data. Shape encodes jurisdiction tier — square for National, diamond for State or Province, circle for County or Local — while color distinguishes individual sources within a tier. A fourth shape, an hourglass, marks a value the system derived itself rather than one drawn from a single named source.