Insight · July 22, 2026
Every screen
is now a guess.
Classic design systems standardized a certain interface. AI products render a probability instead. The component library has to grow to say so.
01 · The shift
Design systems were built for interfaces that could not be wrong.
A design system is a promise about repetition. Define the button once, and every button behaves the same. Define the spacing scale once, and every screen breathes the same way. The whole value comes from the fact that the same input renders the same output, every time, on every surface.
That promise assumes a certain interface. A toggle is on or off. A form field holds what the user typed. A table shows the rows the database returned. Nothing in a classic component is a guess. AI products broke that assumption quietly, and most libraries have not caught up.
The tokens still matter. Color, type, spacing, motion. But a model adds a second layer the old scales never covered. The product now has to render how sure it is, where an answer came from, and what to do when it is wrong. Those are not visual decisions. They are decisions about truth, and the library was never asked to hold them before.
02 · The problem
A probabilistic product wearing a deterministic skin.
Ask a model the same question twice and you can get two different answers. One of them might be wrong. That is not a bug to design around, it is the material the product is made of. The output is a distribution, not a value.
So the interface has a decision to make on every screen that touches the model. How sure is this. Where did it come from. What happens while it thinks. What does a person do when it is wrong. Classic components have no answer for any of it, because they never had to. Teams end up bolting a chat box onto a system designed for facts and hoping the seams do not show. They do.
The one line to keep
“A classic component renders a fact. An AI component renders a guess, and has to look like one.”
03 · The new components
Seven answers a classic library never had to give.
01
Confidence
How sure the model is, shown in a way a person can act on. Not a raw percentage, a state they can read at a glance.
02
Uncertainty
What to render when the model is not sure. A fallback, a set of options, a question back to the user. Never a confident wrong answer.
03
Generation
The state between the request and the answer. Tokens arriving, a component assembling itself, a plan forming while the user watches.
04
Citation
Where a claim came from, placed next to the claim it supports, styled so a person can check it without hunting.
05
Latency
The wait, made bearable. Progressive disclosure of what is happening, so a slow answer still feels like progress.
06
Correction
The path from wrong to right. How a user overrides the system, edits its output, and teaches it without leaving the flow.
07
The trail
A record of what the system did and why. What it read, what it chose, what a person changed. The audit a probabilistic product owes.
04 · Why it belongs in the system
The frameworks named the questions. The system standardizes the answers.
Researchers have been clear about what an AI product owes a person. Microsoft consolidated more than 150 design recommendations into eighteen guidelines, grouped by moment: the first interaction, the work in the middle, the times the system is wrong, and the relationship over time. The first two guidelines are the plainest. Make clear what the system can do. Make clear how well it can do it. Those guidelines were tested by 49 practitioners against 20 real products before they shipped.
Knowing the answer is not the same as building it. If every team invents its own confidence badge and its own error state, the product speaks in a different voice on every screen, and a user never learns to read it. The point of a design system is that the answer to how sure is this looks the same in the inbox, the dashboard, and the settings page. Confidence, uncertainty, and the decision trail become tokens and components, not one off decisions made under deadline.
05 · One field, four states
A single AI field carries states a text input never had.
Take one field that a model fills in. A suggested reply, a drafted summary, a proposed value. In a classic system that is a text input with two states, empty and filled. Give the same field to a model and it needs four, and each one is a real component with its own rules.
The wait has to look like progress, so the generating state streams instead of spinning. The good answer has to carry its source, so the confident state shows where it came from. The weak answer has to say so, so the uncertain state offers options rather than one guess dressed as fact. And the wrong answer has to be cheap to fix, so the correction state puts the edit one move away.
Multiply that by every field a model touches. The reply, the summary, the tag, the price, the next step. Each one carries the same four states, and each one needs them to look and behave the same way, or the product feels like four products stitched together. That consistency is exactly what a design system is for. The only new part is that the states describe a guess instead of a fact.
Field: AI suggested reply generating stream tokens as they arrive · never a blank spinner confident show the answer · attach the source next to the claim uncertain offer two or three options · invite the user to choose correction one move to edit, dismiss, or teach · keep the flow
One field · four components the old library never specified
06 · The goal
Calibrate trust. Do not just build it.
Google's People and AI Guidebook makes one shift that reframes the whole job. Conventional design talks about building trust. The guidebook talks about calibrating it. A probabilistic product should be trusted exactly as far as it earns, no more. Too little trust and the feature goes unused. Too much and the first confident mistake costs the user something real.
Calibration is a design task, and it lives in these components. Citations are the clearest case. Nielsen Norman Group's guidance is to place a source next to the specific claim it supports, style it so it stands apart from the answer, and make it easy to open. A citation buried at the bottom is decoration. A citation beside the sentence is a way for a person to check the work and decide how far to trust it.
Latency calibrates trust too. Jakob Nielsen's response time limits still hold. A tenth of a second feels instant. One second keeps a person in flow. Ten seconds is the edge of holding attention at all. A model often blows past all three, so the generating state has to show progress the whole way, or the person assumes the product broke.
07 · Where not to add it
Most of the product is still deterministic. Keep it that way.
Not every screen touches a model, and the ones that do not should stay exactly as certain as they were. A confidence badge on a saved setting is noise. A citation on a number the database returned is theater. The new components earn their place only where the output is actually a guess.
The failure is applying probabilistic patterns everywhere, until a person cannot tell which parts of the product are firm and which are speculative. The whole reason to name these components is to draw that line. Certain things look certain. Guesses look like guesses. The design system holds both, and the boundary between them is the most honest thing on the screen.
Start small. Find the one field where a model already fills in an answer. Give it the four states before you give the product forty. A system grows one honest component at a time.
Closing
Design the doubt, not just the answer.
The old library standardized what a certain interface looks like. The new work is standardizing what a guess looks like, so a person can read the difference without being told. That is the design system an AI product actually needs, and almost nobody has finished building it yet.
Amershi et al., Guidelines for Human and AI Interaction · CHI 2019 and the Microsoft HAX Toolkit · Google People and AI Guidebook · Nielsen Norman Group on citations and response time limits
Share this perspective
More insights
Adjacent perspectives.
Bttr. Field Brief
The brief Bttr. writes for senior buyers.
Monthly. One signal worth your time on Brand Operating Systems, AI search visibility, and the infrastructure buildout. No filler.