Table of Contents
Intent is an underrated primitive in software design. I’m not talking about user intent, but rather the intent of the creator of the interface.
The concept of intent is ingrained in nearly every design system. For example, in MUI, a button has a color
prop (in MUI, color tokens are defined by their intent). These parts of the system work together like this: <Button color="danger">Delete</Button>
.
UI libaries like Blueprint and Evergreen use the name intent for this prop.
I prefer calling this prop intent
instead of color
because it is more to the point. An intent prop can be used for more than just buttons; it can be applied to notifications, banners, results, and various other components.
The MUI method of using colors named for their intent is a bit cumbersome, but allows for an escape hatch for when specific colors are needed. The use of intent as a prop works great in tandem with utility props like those that styled-system
introduced.
It is a great abstraction since its implementation lies at the component layer. This provides enough flexibility to create a design language that is consistent while also being narrowable for product needs.
This might sound like a nitpick—what’s in a name1? But I think it’s important to have an accurate name for such a keystone concept. While software design communicates with users, a design system communicates with one’s peer implementing @company/ui
in their product. Intent seems like the best way to create a unified API across the entire system for this purpose.