01 / action
Buttons and links
A button changes this page. A link goes somewhere. The label names the result, not the shape.
Nothing saved yet.
Interface standard
Components.
A component is a behavior rule with a visual form. It has one job, plain words, every necessary condition, and no surprises between mouse, keyboard, and touch.
Rules before parts
01
Native first
Start with the correct HTML element.
02
One job
Split parts that ask for two decisions.
03
Every condition
The uncommon cases are part of the component.
04
Content sets size
Never shrink type to rescue a box.
Core parts
These are recipes, not a software package. Reuse the HTML and token roles; extract code only after the same part appears twice.
02 / status
Labels and results
A category is a quiet pill. A result uses a glyph, a word, and color together.
research complete needs correction
03 / field
Inputs
Use the name readers will recognize.
Use YYYY-MM-DD.
04 / content
Surfaces
code or evidence
status = 'complete'05 / feedback
After an action
Put the result beside the action that caused it. Preserve context and give the next useful step.
busy
Checking 8 sources…
empty
No saved drafts. Start a new draft.
✓ complete
Published. View the live page.
Every condition belongs in the design
The happy path is one row, not the whole specification.
- Rest
- The job, current value, and available action are clear before anyone interacts.
- Hover + focus
- The same target responds to pointer and keyboard. Focus is always visible.
- Busy
- Keep the action label recognizable, prevent repeat input, and say what is happening.
- Empty
- Name what is absent and offer the next valid action. Empty space is not an explanation.
- Error
- Keep the person’s input, show the exact correction beside it, and move focus when needed.
- Success
- Confirm what completed and where the result now lives. Do not make people infer completion.
Composed example
Release calendar
One shared component combines month controls, a true calendar, linked editions, today, the next scheduled item, and a legend. Its parts stay quiet so the schedule remains the focal object.
August 2026
next: the 1st
links to that month's edition · series page
structureReal weekday layout and month length.
meaningGlyph, label, position, and color work together.
motion220ms month turn; fade when reduced motion is preferred.
Layout and motion
Fit the content
- 44pxMinimum action target in either direction.
- 12pxMinimum rendered text, including labels and evidence.
- 66chMaximum measure for explanatory prose.
- 390pxSmall-screen proof without sideways scrolling.
Move only to explain
- Hover and focus transitions run in 160–240ms.
- Page sections may fade in once for orientation.
- Movement shows entry, exit, order, or changed position.
- Nothing bounces, loops, or moves after the change is understood.
Do and don't
× don't
Use color as the message.
A red dot, unlabeled icon, or green border asks people to guess. A fifth hue also breaks the four-board palette.
✓ do
Say the result.
Use a glyph, plain label, and palette color together: “× needs correction” or “✓ complete.”
× don't
Hide the label in placeholder text.
It disappears as soon as someone types and cannot carry the field’s meaning.
✓ do
Keep label, help, and correction together.
The field keeps its name before, during, and after input; any correction sits beside it.
Final check before reuse.
The native element does the job before custom JavaScript is added.
Every button works; every link goes somewhere; every field has a visible label.
Rest, hover, focus, busy, empty, error, success, and disabled behavior are accounted for.
Keyboard order follows reading order, focus is visible, and status never depends on color alone.
Targets are at least 44 by 44 pixels and rendered text is at least 12 pixels.
The component fits at 390 pixels without clipping, overlap, or horizontal scrolling.
Motion explains a change, honors reduced motion, and stops when the change is understood.
The page and matching Markdown were inspected after the production build.