Components
Every component has its own page: live preview with theme and breakpoint switches, its rendered HTML, its CSS section, its source, and links to the documentation and GitHub — one source of truth per component.
Actions & indicators
ButtonOne primary per surface — an ink plate. Vermillion appears only on danger, so red always means destructive.Badge & StatusBadgeThe one status→color map for the whole product — StatusBadge accepts a status, never a color.ChipTaxonomy values: plain, counted, selected, removable, deprecated with a migration arrow.KbdKeyboard hints on real kbd elements.SpinnerThe one sanctioned looping animation; freezes under reduced motion.ProgressMeterOne threshold policy product-wide: <70 danger, <85 caution, 85+ success.
Forms
FormFieldVisible label, real for/id wiring, help text, errors announced via role=alert.Input & TextareaRaised text surfaces; invalid state is border + message, never color alone.SelectNative select with a drawn chevron — the platform picker, styled.Checkbox & RadioInk-fill selection: glyph for checkbox, dot for radio.Switchrole=switch with immediate effect — switches act now, checkboxes wait for Save.
Content & data
CardPlates on paper: rule border at rest, interactive cards lift on hover, quiet cards nest.Table & SortableThThe plate frame around data: header rule, hairline rows, aria-sort columns.DataTableColumn config, click-to-sort, whole-row open targets, designed empty state.FilterBarInstant search + facet selects + polite aria-live result summary.DragListPointer drag plus always-visible keyboard move buttons — reordering is never pointer-only.DualValueDiffFieldThe signature tagger control: imported (sunken, read-only) → editorial (raised, editable), with override detection.Avatar & AvatarStackInk coins with paper initials; the stack is the presence primitive.EmptyStateEmpty states teach: what belongs here plus the first step — never a bare 'no data'.
Overlays & feedback
Modal & ConfirmDialogFocus-trapped dialog; destructive confirms carry the only filled red in the system.DropdownMenuReal role=menu with arrow-key focus; danger items sit last.ToastBottom-right plates, polite live region, 5s pause-on-hover — and the Undo slot.TooltipHover/focus with aria-describedby — supplementary detail only, never required reading.BannerPage-level notices; danger announces as an alert.
Wayfinding
TabsRoving focus with arrow keys; the vermillion underline marks selection.SegmentedControlSegments switch presentations of the same data — never navigation.BreadcrumbsWhere you are; the current page is text, not a link.PaginationWindowed pages with aria-current.CommandPalette⌘K combobox over pages, recents, and actions — aria-activedescendant, grouped results.
Shell & product
AppShell & TopBarThe workspace frame: sidebar rail, ink-plate active item, sticky top bar with environment badge.ThemeTogglePaper/sumi icon segmented — two modes only; applies nothing until the stored preference is read. This one is LIVE: clicking it changes your real theme.ToolCardHome dashboard tool launcher with pin toggle.EntityCardThe clickable grid unit for layouts/campaigns/collections — whole surface is the target.StatCardAnalytics headline number: value, delta note, optional sparkline.