Example title
One or two lines of description.
The rule At most one primary button per view. A disabled button is best avoided: it’s grey and doesn’t respond, but it doesn’t say why. Someone filling in a form who finds “Save” blocked doesn’t know which field is missing. Better to keep it active: on click, the field to complete is highlighted with a message saying what to enter.
Help text, always visible.
Enter a number, for example 850.
The rule The label is always visible: the placeholder disappears as you type. The error says what to do, not just that something is wrong.
The rule The state lives in aria-pressed, not in a class: what you see and what the screen reader hears can’t disagree. The check mark makes it readable without colour too.
One or two lines of description.
One or two lines of description.
One or two lines of description.
The rule A clickable card holds no other links or buttons: the main link would cover them.
The rule The text states the status, the colour reinforces it. A badge is never clickable.
Try it: one section open at a time.
A design system for designers and for AI agents.
Yes: Enter and Space open and close each section.
No: it’s built on the native details and summary elements.
The rule Built on details and summary: keyboard, screen reader and find-in-page work with no extra code.
The rule In a prototype, data that doesn’t exist yet is shown as a placeholder. Never invented numbers, never code braces on screen.