{ "name": "Neutral product component catalogue", "version": "1.0.0", "description": "Copy-ready reference markup for the twenty-one canonical Neutral interface patterns.", "components": [ { "id": "button", "name": "Button", "use": "A clear, immediate action. Keep one primary action per action group.", "avoid": "Navigation, passive status or a choice that needs explanatory context.", "accessibility": "Use a native button, preserve a visible focus ring and keep the label explicit.", "markup": "
\n \n \n
" }, { "id": "link", "name": "Link", "use": "Moving to another page, resource or document while preserving the reader’s place in the current flow.", "avoid": "Submitting, mutating or opening a local interface state; those are buttons.", "accessibility": "The text names the destination. External destinations are disclosed in the accessible name.", "markup": "Open incident record" }, { "id": "input", "name": "Input", "use": "A single value that a person can enter, inspect and correct.", "avoid": "A fixed short choice set, which should use controls or a segmented selector.", "accessibility": "Keep a visible label, connect help and error text, and preserve the value after validation fails.", "markup": "" }, { "id": "controls", "name": "Checkbox, radio and switch", "use": "Independent options, one-of-many choices and reversible settings respectively.", "avoid": "A command that takes effect immediately or a multi-step decision.", "accessibility": "Use native inputs inside visible labels. Do not encode selection by colour alone.", "markup": "
\n Evidence sources\n \n \n \n
" }, { "id": "badge", "name": "Badge", "use": "A compact state attached to an object, with words as well as a semantic marker.", "avoid": "Navigation, actions or decorative categorisation.", "accessibility": "The readable label carries the state. Never rely on the dot or colour alone.", "markup": "Degraded" }, { "id": "pill", "name": "Pill", "use": "A short filter or selectable classification in a compact set.", "avoid": "Status, long labels or a primary call to action.", "accessibility": "Use aria-pressed for toggle pills and retain a 32px pointer or 44px touch target.", "markup": "
\n \n \n
" }, { "id": "card", "name": "Card", "use": "One coherent object or choice that benefits from a bounded click or reading target.", "avoid": "Wrapping every paragraph, metric or adjacent region in a separate box.", "accessibility": "Keep heading order intact. If the whole card is interactive, use one real link over the card.", "markup": "
\n Investigating\n

Training throughput degraded

\n

8 GPUs · 47 min · likely network fabric

\n Open incident\n
" }, { "id": "table", "name": "Table", "use": "Comparing many peer records with consistent fields, sorting and exact quantities.", "avoid": "One record, prose or a layout grid masquerading as data.", "accessibility": "Use a real table, scoped headers and labels for sorting. Right-align numeric columns.", "markup": "
\n \n \n \n
GPUStateGoodput
gpu-042Degraded82.7%
\n
" }, { "id": "note", "name": "Note", "use": "A scoped warning, error or important qualification that remains near affected content.", "avoid": "Routine descriptions, promotional callouts or transient success confirmation.", "accessibility": "Use an appropriate role only when the message should be announced immediately.", "markup": "
\n Action requires approval.\n

Moving the workload will interrupt the current training step.

\n
" }, { "id": "dialog", "name": "Dialog", "use": "A focused decision that must be completed or dismissed before the parent flow continues.", "avoid": "Supplementary detail, navigation or a non-blocking confirmation.", "accessibility": "Use a native dialog, label it with its heading, trap focus while open and return focus on close.", "markup": "\n

Stop remediation?

\n

The current safe action will finish before the process stops.

\n
\n" }, { "id": "toast", "name": "Toast", "use": "Confirming a completed, non-blocking action and optionally offering one reversible undo.", "avoid": "Errors that need attention or decisions that require an answer.", "accessibility": "Use role=status with aria-live=polite and keep any Undo control reachable long enough.", "markup": "
Evidence pack exported.
" }, { "id": "empty-state", "name": "Empty state", "use": "A first run, filtered result with no matches or genuinely empty collection.", "avoid": "Loading, errors or hiding unavailable data behind a cheerful illustration.", "accessibility": "Use the correct heading level and make the single next action a real control.", "markup": "
\n

No incidents in this range.

\n

Change the time range or clear filters to inspect earlier evidence.

\n \n
" }, { "id": "app-shell", "name": "App shell and navigation", "use": "The persistent frame for Neutral product routes, global navigation and page content.", "avoid": "The marketing website or a one-off branded document.", "accessibility": "Use a labelled navigation element, aria-current on the active route and main for page content.", "markup": "
\n \n

Incidents

Operational records and evidence.

\n
" }, { "id": "page-header", "name": "Page header and toolbar", "use": "The top of every product page or detail view: context, title, purpose and page-level actions.", "avoid": "A marketing hero or a local panel heading.", "accessibility": "Use the page’s h1, a labelled breadcrumb nav and explicit labels for toolbar controls.", "markup": "
\n

Training throughput degraded

\n
\n
" }, { "id": "stat", "name": "Stat", "use": "Two to four peer metrics that materially explain an operational state.", "avoid": "A number that belongs in a table row or a decorative KPI without a baseline.", "accessibility": "Place the label before the value and spell out direction or comparison in the context text.", "markup": "
\n
Goodput82.7%−17.3% from baseline
\n
Affected8 GPUsone workload
\n
" }, { "id": "description-list", "name": "Description list", "use": "The attributes, evidence metadata or SLA terms of one record.", "avoid": "More than one peer record, which should use a table.", "accessibility": "Use a real dl with matching dt and dd pairs; keep nested links and statuses semantic.", "markup": "
\n
Confidence
High
\n
Supporting signals
14
\n
Owner
Provider operations
\n
" }, { "id": "skeleton", "name": "Skeleton", "use": "The first useful load of a list, table, stat or card when the final geometry is known.", "avoid": "Actions under 300ms, background refresh, errors or missing data.", "accessibility": "Mark the loading region aria-busy and keep the decorative skeleton aria-hidden.", "markup": "
\n \n \n \n
" }, { "id": "density", "name": "Density and sizes", "use": "Adapting controls and rows to standard, compact, dense or touch-heavy work without changing hierarchy.", "avoid": "Shrinking text or targets ad hoc to force more information onto a screen.", "accessibility": "Dense pointer controls return to 44px targets on coarse pointers. Text remains fully legible.", "markup": "
\n
Standard
\n
Dense
\n
Touch
\n
" }, { "id": "tabs", "name": "Tabs", "use": "Two to six sections of one record or workspace whose content changes in place.", "avoid": "Steps in a flow, filters or navigation between unrelated pages.", "accessibility": "Use a tablist, tab buttons, aria-selected, labelled tabpanels and arrow-key navigation.", "markup": "
\n \n \n \n
" }, { "id": "menu-tooltip", "name": "Menu and tooltip", "use": "Menus group three or more secondary actions; tooltips label icon-only controls and concise shortcuts.", "avoid": "A menu with one action or a tooltip containing essential help or interactive content.", "accessibility": "Expose expanded state, use menu semantics, close with Escape and connect tooltips with aria-describedby.", "markup": "
\n \n
\n
" }, { "id": "pagination-forms", "name": "Pagination and forms", "use": "Paging long operational tables and arranging create or edit forms on a consistent grid.", "avoid": "Infinite scroll in data tables or a single field stretched across a wide page.", "accessibility": "Label pagination, mark the current page and preserve source order through responsive form layouts.", "markup": "
\n \n
\n
" } ] }