Components

A vertical set of headings that reveals bounded supporting content in place.

Use

Use when several peer explanations are optional and their headings remain useful while collapsed.

Avoid

Do not hide required instructions, errors, or the primary path behind a disclosure.

Persistent inline feedback that explains a condition near the work it affects.

Use

Use for durable information, caution, success, or failure that remains until the condition changes.

Avoid

Do not use as decoration, duplicate a field error, or make color carry the meaning.

A blocking confirmation for a consequential action that requires an explicit choice.

Use

Use before destructive or irreversible commits when the consequence cannot be inferred from the trigger.

Avoid

Do not interrupt routine, reversible work or replace a full workflow route.

A reserved media frame that prevents layout shift before content arrives.

Use

Use for images, maps, video, and previews whose geometry must remain stable while loading.

Avoid

Do not crop evidence or source material when the full frame is required.

A file row that keeps identity, progress, state, and actions in one stable footprint.

Use

Use when a record accepts uploads or exposes durable files with clear status and recovery.

Avoid

Do not hide file type, failed state, source, or the action required to recover.

A small person or organization mark with a deterministic text fallback.

Use

Use beside a name when identity helps scanning or attribution.

Avoid

Do not use an avatar as the only accessible name or allow a failed image to collapse the layout.

Compact metadata that stays subordinate to the record or action it describes.

Use

Use for state, category, and small counts when the text remains readable without color.

Avoid

Do not turn badges into primary actions or create a rainbow taxonomy.

A compact ancestry trail for a durable place within a deeper hierarchy.

Use

Use when the parent path helps orientation and every ancestor is a real destination.

Avoid

Do not repeat top navigation or manufacture hierarchy for a shallow route.

A message unit that separates speaker, content, state, and supporting actions.

Use

Use in chronological conversation where attribution and delivery state matter.

Avoid

Do not make long evidence, forms, or system records look like casual chat.

Commits, chips, quiet actions, and icon-only controls from one stateful primitive.

Use

Use the default ink button for a commit, chip for a reversible filter, ghost for quiet utility, and icon only when the mark is unambiguous.

Avoid

Do not make every action a pill, remove the word while busy, or invent page-local button colors.

A compact neighborhood of peer actions with one shared geometric contract.

Use

Use for tightly related actions whose individual roles remain clear and whose hit areas never overlap.

Avoid

Do not force unrelated actions together or erase semantic prominence to make every button identical.

A month grid for choosing or inspecting dates with keyboard-safe navigation.

Use

Use when spatial date context materially improves the choice.

Avoid

Do not require a calendar for a known date that is faster to type.

A quiet grouped surface for content that belongs together.

Use

Use when grouping materially improves comprehension and the card has a clear internal hierarchy.

Avoid

Do not wrap every section in a card or nest rounded surfaces without a spacing and radius relationship.

A controlled horizontal sequence that preserves position, controls, and the next-item cue.

Use

Use for a bounded visual sequence when order matters and all items remain reachable.

Avoid

Do not auto-advance important content or hide core navigation inside a slider.

A quantitative view whose scale, units, comparison, and source remain explicit.

Use

Use only when shape or comparison is faster to read visually than in a compact table.

Avoid

Do not add decorative charts, misleading scales, gradients, or unlabeled color-only series.

An independent binary choice with a persistent visible label and mixed-state support.

Use

Use when several options may be selected or a single explicit agreement is required.

Avoid

Do not use for immediate on/off settings or make the label non-clickable.

A single optional region controlled by one stable, stateful trigger.

Use

Use for secondary detail that may stay closed without blocking the task.

Avoid

Do not collapse primary content, validation, or the only route to an action.

A searchable selection field for a large or remotely loaded option set.

Use

Use when scanning a native select would be slow and typed filtering improves retrieval.

Avoid

Do not use for a handful of options or ship it without empty, loading, and no-result states.

A keyboard-first search and action surface for expert navigation.

Use

Use when a large action set benefits from ranking, filtering, and a single predictable shortcut.

Avoid

Do not make command search the only way to reach a core destination.

A secondary pointer menu for object-specific expert actions.

Use

Use as an acceleration layer when every critical action also has a visible path.

Avoid

Do not make right-click or long-press the only route to required work.

A dense record surface with explicit columns, selection, sorting, and state.

Use

Use for comparison and repeated operations across many structured records.

Avoid

Do not use a table when content is unstructured or hide mobile access behind horizontal guesswork.

A labeled field plus calendar transaction for choosing a valid date or range.

Use

Use when constraints, ranges, or nearby dates make calendar context useful.

Avoid

Do not block typing, omit locale, or silently correct an invalid date.

A focused interruption with trapped focus, an explicit title, and a return path.

Use

Use for consequential confirmation or a short task that must be completed before returning.

Avoid

Do not use for routine navigation, passive detail, or a workflow that needs its own URL.

A document or subtree contract that keeps layout and directional marks correct in LTR and RTL.

Use

Use at the language boundary so spacing, order, and directional icons adapt together.

Avoid

Do not mirror logos, nondirectional marks, numbers, or media by assumption.

A touch-oriented transient sheet for a short transaction, anchored to a viewport edge.

Use

Use on compact screens when a brief modal task benefits from direct-manipulation dismissal.

Avoid

Do not turn a durable workflow into a desktop drawer or hide essential navigation in it.

A trigger-owned list of immediate actions with complete keyboard behavior.

Use

Use for secondary commands that belong to one object or control.

Avoid

Do not place forms, durable content, or the sole critical action inside a menu.

A truthful zero-result or zero-record state with the next useful action.

Use

Use when a collection has nothing to show and distinguish first use from filtered or failed results.

Avoid

Do not blame the user, fill the void with illustration, or hide a recoverable error.

The canonical label, control, help, error, and required-state relationship.

Use

Use around every form value so accessible naming and validation remain consistent.

Avoid

Do not substitute placeholder text for the label or separate the error from its control.

A transaction scaffold that groups labeled fields, validation, section context, and commit actions.

Use

Use for durable data entry where submit, error recovery, and keyboard order must remain explicit.

Avoid

Do not invent page-local field geometry, hide validation until the end, or use a form for immediate settings.

Pointer and focus inspection for supplemental information about a referenced object.

Use

Use when a compact preview saves navigation and the same content is available on focus.

Avoid

Do not put actions, required information, or touch-only access inside hover.

A recessed well with a visible focus state and a mobile-safe text size.

Use

Use for one-line text, URL, search, number, and credential entry with a visible label.

Avoid

Do not disable paste, hide the label in placeholder copy, or use less than 16px type on mobile.

A field and its tightly related prefix, suffix, or actions in one geometric neighborhood.

Use

Use when adjacent content changes or acts on the same value and its reading order is unambiguous.

Avoid

Do not squeeze unrelated buttons into the field or let adornments obscure error and focus states.

A segmented one-time-code field with one accessible value and paste support.

Use

Use for short verification codes when automatic fill and full-code paste are preserved.

Avoid

Do not create separate tab stops, block paste, or use it for passwords.

A reusable record row with identity, metadata, state, and trailing actions.

Use

Use for scannable collections where a stable row grammar improves repeated reading.

Avoid

Do not turn every item into a card or make nested actions trigger the row.

A compact visual token for a keyboard key or shortcut chord.

Use

Use beside an available action to disclose an accelerator.

Avoid

Do not present a shortcut as the only path or imply a key that changes by platform.

A persistent accessible name tied to one control and its hit area.

Use

Use on every field and control group with concise task language.

Avoid

Do not use placeholder, tooltip, or nearby prose as a substitute.

A map location mark with selected, clustered, and accessible label states.

Use

Use when geographic position is part of the work and an equivalent list remains available.

Avoid

Do not encode status by color alone or make a tiny pin the only hit target.

A desktop command hierarchy for dense application workflows.

Use

Use only when expert work genuinely benefits from persistent, conventional command groups.

Avoid

Do not imitate desktop software on simple pages or use it as site navigation.

A complete conversational event with author, content, time, state, and actions.

Use

Use when chronological communication is durable work rather than transient feedback.

Avoid

Do not collapse operational records or alerts into anonymous chat bubbles.

A conversation viewport that preserves reading position and announces new content without stealing it.

Use

Use for live or long message history with explicit jump-to-latest behavior.

Avoid

Do not force-scroll while someone is reading or lose position as media loads.

The platform selection control, dressed lightly while retaining native behavior.

Use

Use first for a short stable option list, especially on mobile.

Avoid

Do not replace it with a custom popup unless search or rich options are truly needed.

A disclosure-based set of site destinations with clear grouping and focus movement.

Use

Use for a modest hierarchy of durable routes that benefits from grouped preview.

Avoid

Do not build a mega-menu when direct links or search are clearer.

Stable navigation across ordered result pages with canonical URLs.

Use

Use when result position and shareable page boundaries matter.

Avoid

Do not use unbounded page links, lose filters, or replace necessary virtualization.

A small anchored layer for secondary choices and short supporting content.

Use

Use when the task is brief, contextual, and can close without losing work.

Avoid

Do not put a long workflow, essential information, or a second popover inside it.

A determinate measure of completed work with a textual value or outcome.

Use

Use when the system knows total work and progress materially helps expectation.

Avoid

Do not fake precision, omit the meaning, or use a determinate bar for unknown duration.

A structured sequence of questions with progress, validation, and resumable answers.

Use

Use for guided intake where ordering and conditional follow-up reduce cognitive load.

Avoid

Do not split a small form into ceremony or lose answers between steps.

A visible mutually exclusive set with one shared question and keyboard movement.

Use

Use when all options should be compared before choosing one.

Avoid

Do not use for multi-select, immediate toggles, or long remote option lists.

A bounded split layout whose user-controlled size persists without breaking either pane.

Use

Use in expert workbenches when people need to balance adjacent durable regions.

Avoid

Do not make required content unreachable, overlap handles, or ship without keyboard resizing.

A bounded overflow region with native scrolling and a visible continuation cue.

Use

Use only when a contained region must scroll independently from the route.

Avoid

Do not create nested scroll traps or hide content behind custom scrollbar styling.

A trigger-owned popup for choosing one value from a bounded option set.

Use

Use when the list is concise, the current value matters, and native select is insufficient.

Avoid

Do not use for actions, multi-select, or options that require free-text search.

A structural boundary that uses the shared rim rather than decorative contrast.

Use

Use between adjacent regions when spacing alone does not explain the relationship.

Avoid

Do not add a rule after every row or use separators as decoration.

An edge-anchored modal surface for a short supporting task with explicit return.

Use

Use when context should remain visible behind a compact transaction.

Avoid

Do not use as a permanent desktop page, nested route, or arbitrary right-hand container.

The long arm of the application shell: stable places, identity, and global utilities.

Use

Use only at the shell owner so pages cannot change its geometry or navigation contract.

Avoid

Do not make a page-local sidebar or put transient filters in global navigation.

A quiet placeholder that reserves the exact shape of content still loading.

Use

Use when a response delay is perceptible and the final geometry is known.

Avoid

Do not animate excessively, invent fake content, or use a skeleton for an error.

A direct-manipulation control for an approximate value within a bounded range.

Use

Use when relative position matters more than exact entry and expose the current value.

Avoid

Do not use for precise money, dates, or values that are easier to type.

A small indeterminate activity mark that preserves the control or region footprint.

Use

Use when work is underway but progress cannot be measured; keep the action word when present.

Avoid

Do not replace the whole interface, shift the label, or spin indefinitely without recovery.

An immediate on/off setting whose new state takes effect on activation.

Use

Use for reversible settings where the current state is more important than submitting a form.

Avoid

Do not use for one-time agreement, multi-option choice, or a destructive action.

Semantic rows and columns for exact comparison and accessible reading order.

Use

Use when values share attributes and people need to compare them precisely.

Avoid

Do not use for layout, omit headers, or force a desktop-width grid onto mobile.

Peer views of one local context with one selected panel and stable keyboard behavior.

Use

Use for a small bounded set of parallel views that do not need separate navigation history.

Avoid

Do not hide sequential steps, mix actions with views, or create a long horizontal maze.

A resizable multiline well for notes, descriptions, and durable free text.

Use

Use when the expected answer needs sentences or line breaks, with a visible label and limits.

Avoid

Do not use for a one-line value or auto-grow without a practical maximum.

A brief nonblocking acknowledgement for an outcome that needs no immediate action.

Use

Use after a reversible background action when inline state already records the durable result.

Avoid

Do not put errors, required decisions, or the only confirmation in a disappearing message.

A compact pressed-state control for one reversible view or formatting option.

Use

Use when the selected state is visible, immediate, and can be named accessibly.

Avoid

Do not use as a commit, hide state in color alone, or confuse it with a switch.

A compact peer set for one or several reversible view choices.

Use

Use for bounded view modes or filters with short, mutually understandable labels.

Avoid

Do not put irreversible actions in a toggle group or let a long list become a horizontal tab maze.

A short label or clarification that appears on hover and keyboard focus.

Use

Use to name an icon-only control or clarify unfamiliar compact notation.

Avoid

Do not hide required instructions, actions, rich content, or touch-only information inside it.

The shared hierarchy, measure, wrapping, and numeric treatment for readable Thorbis content.

Use

Use semantic elements first, then the published type roles and 65–75ch reading measure.

Avoid

Do not invent page-local scales, center reading copy, or use display styling as hierarchy everywhere.