For humans
Component pages explain intent, anatomy, variants, content, accessibility, examples, and review standards so teams can apply the system with judgment.
Components Overview
Components are the reusable decisions of the system. Each page should help people understand the component and give agents enough structured guidance to choose, configure, and validate it consistently.
14Components tracked
Initial inventory for the first design system release.
14Ready
Pages with enough guidance to use in product work.
0Draft
Core controls with registry rules started.
0Planned
Needed basics that will mature as the system grows.
For agents
Registry entries turn the same guidance into stable IDs, allowed variants, accessibility constraints, and generation rules that can ship in the Agent Kit.
Initial component inventory
This is the starting set, not the final library. The goal is to document the basic controls first, then expand into data display, feedback, navigation, and complex product patterns.
Ready
Button
Triggers an immediate action such as submitting a form, opening a dialog, or confirming a decision.
View guidanceReady
Text Input
Collects short free-form text values with labels, helper text, validation, and clear error recovery.
View guidanceReady
Select
Lets users choose one option from a known list when the choices are stable and compact.
View guidanceReady
Checkbox
Captures independent yes/no choices or lets users select multiple options from a set.
View guidanceReady
Radio
Captures a single selection from a small set of mutually exclusive options.
View guidanceReady
Toggle
Turns a setting on or off when the change can take effect immediately.
View guidanceReady
Typography
Applies system type roles for headings, body text, labels, captions, and code content.
View guidanceReady
Icon
Uses recognizable symbols to support scanning, affordance, and compact controls.
View guidanceReady
Link
Moves users to another page, section, document, or external destination.
View guidanceReady
Panel
Groups related controls or content inside operational interfaces without turning page sections into cards.
View guidanceReady
Alert
Communicates important system feedback, validation outcomes, warnings, or status changes.
View guidanceReady
Badge
Labels compact status, category, priority, or count metadata without becoming an action.
View guidanceReady
Dialog
Interrupts the current workflow for a focused decision, confirmation, or short task.
View guidanceReady
Tooltip
Provides brief supplemental clarification for a focused control or compact UI element.
View guidanceHow we document components
In this design system, each component entry should eventually cover these six parts. This keeps the web app useful for people and gives the Agent Kit enough structure to guide consistent generated UI.
When to use
Name the jobs the component is responsible for and the product situations where it helps.
When not to use
Call out nearby components, patterns, and edge cases where this component would make the workflow harder.
Accessibility expectations
Define keyboard behavior, semantic markup, labels, focus handling, validation wiring, and target size.
Content guidance
Explain labels, helper text, errors, option names, and other copy decisions that make the component usable.
Examples and states
Show the supported variants, states, validation paths, and realistic examples teams can recognize.
Implementation notes
Document import paths, native element behavior, API limits, composition rules, and mistakes agents should avoid.
How agents should use components
The first behavior to enforce is conservative reuse: agents should pick from the registry, follow variant constraints, and cite gaps instead of inventing new UI.
- Start with an existing component before inventing a custom element.
- Choose the variant that matches the user decision, not the desired visual weight.
- Use semantic tokens for layout, color, type, focus, and state styling.
- Check accessibility and content rules before handing off code or documentation.
Next after basics: connect components to patterns like form layout, approval flows, search and filter, empty states, and error recovery.