Design systems
A design system records product decisions
Reusable components become more valuable when they explain the behavior, content, and trade-offs a team has agreed to preserve.
By Josh Child6 min read
In this perspective
A design system can begin with colors and components, but its value grows when it records why the product behaves the way it does. A button style is useful. A shared understanding of when an action needs confirmation, how an error should be explained, and what a completed task looks like is more useful over time.
I think of a design system as a set of decisions a team wants to reuse. Some are visual, some are behavioral, and some are about language. Together, they help contributors build new experiences without reopening every question or accidentally contradicting an existing answer.
AI-assisted implementation makes this especially relevant. It can generate variations quickly. A clear system gives that speed a direction the team can inspect.
Consistency should carry meaning
Two screens can look consistent while behaving differently. They may use the same typography and spacing, yet one saves automatically while the other requires a confirmation. If the product does not explain that difference, visual consistency can actually make the mismatch harder to notice.
I would define patterns around the meaning of an interaction. What does save mean here? When can a person leave without losing work? How does the product distinguish a draft from a completed action? Those questions belong alongside the visual specification because they shape expectations.
The same applies to content. If one screen says customer and another says client for the same entity, the difference may seem minor to a contributor. For a person learning the product, it can suggest that the system is describing two different things. A shared vocabulary helps the interface remain understandable as it grows.
The system lives in connected page types
My preserved Hoopes Vision website connects procedure pages, doctor profiles, technology information, and resources through shared templates and structured content. I designed the information structure and visual system, then used AI-assisted development to implement the templates and front-end interactions.
An interactive design reference documents colors, typography, components, and interaction patterns. That reference is useful because future pages need more than a screenshot to imitate. Contributors need to understand which parts are shared and which parts respond to the content of a particular page.
The BYU Humanities project presented a related challenge in an agency context. Directories, calendars, news, and program information required different layouts while still belonging to one website. I contributed requirements, direction, planning, and coordination. The Riser team's design and development work made those decisions concrete across the site.
In both examples, consistency is most valuable when it helps different kinds of content remain recognizable without forcing them into an identical composition.
Document the states people actually encounter
A component with only a default state is an incomplete product decision. Real use includes empty records, loading, validation, errors, disabled actions, long labels, and small screens. Those states reveal whether the pattern can carry the intended meaning.
For a hypothetical upload component, I would document what happens before selection, during transfer, after success, and after a failure. The error should explain what the person can do next. The success state should make the resulting file easy to identify. A retry should preserve useful context rather than forcing the person to reconstruct the task.
This kind of detail helps designers and engineers discuss the same behavior. It also gives AI-assisted implementation a more specific brief. Asking for a file upload that matches the site is vague. Providing the accepted states, labels, and recovery behavior creates something that can be checked.
Make exceptions visible and deliberate
A system should help a team make decisions, not prevent them from responding to a real need. Sometimes a new interaction does not fit an existing pattern. The useful question is why.
I would ask whether the difference comes from a distinct user task, a technical constraint, or a local preference. A genuinely different task may deserve a new pattern. A technical constraint may need a temporary compromise with a clear limitation. A preference may be resolved by using what already exists.
Recording the reason keeps exceptions from becoming unexplained precedents. A future contributor can see why a page differs and decide whether that reason still applies. Without that context, the next person may copy the exception and gradually turn it into a competing system.
The GOV.UK Design System is a useful example of presenting reusable components alongside patterns and guidance. The distinction helps show that a system can support both individual interface elements and the tasks those elements serve.
Give AI a constrained starting point
If I use AI to help implement a page, I want the existing system to be an explicit input. That includes available components, semantic roles, content structure, and responsive behavior. Otherwise, the generated result may look plausible while introducing another version of a solved pattern.
I would ask it to compose from existing components before creating new ones. I would also review the output against the behavior the system documents. A matching screenshot does not establish that keyboard focus, validation, or mobile layout follows the same rules.
This approach also makes requests easier to review with other people. The discussion can focus on a specific difference: the new form changes the error placement, or the action label does not match the established task. That is more useful than deciding whether the page feels close enough.
Keep ownership practical
A design system needs someone to make decisions about changes, but the process should match the size of the team. A small product does not need a complicated contribution ceremony to maintain a useful set of patterns.
I would start with a clear place to propose a change, an explanation of the problem it addresses, and a way to inspect affected examples. Someone should review the implications for design, implementation, and content. When a pattern changes, the team should know which existing screens need attention.
Documentation should help people use the system in the moment. A short example and a clear rule may be more valuable than a long essay nobody consults. The system can become more detailed where recurring questions justify the effort.
Measure usefulness through the work
The number of components is not a strong measure of a design system's value. I would look at whether it helps the team make clearer decisions and deliver coherent experiences. Are contributors finding an appropriate starting point? Are repeated mistakes becoming less common? Can someone explain why a pattern exists?
Those questions invite practical improvements. A frequently misused component may need better guidance or a simpler API. A pattern that requires repeated exceptions may be solving the wrong problem. A documented rule that nobody can follow may need to change.
The system should remain connected to actual product use. Its purpose is to carry useful decisions forward, make important behavior predictable, and give the team a shared foundation for the next piece of work. That is a meaningful role whether a person writes every line or uses AI assistance to implement part of the experience.