Naming things is hard. Sometimes, classifying the things you’ve just named is even harder.

As a content modelist, I’ve had my fair share of battles with the process of classification. I wouldn’t exactly say it’s more of an art than a science — but then again, not even the periodic table is systematically flawless. So in a way, I guess Rick was right when he told Morty that “sometimes science is more art than science.”

Just like in the realm of content modeling, you have to deal a lot with classification when building design systems; defining components, naming and categorizing them, establishing patterns, crafting viable strategies. Classification is at the very core of design system work.

And yet, I haven’t exactly found an abundance of classification systems or frameworks for design systems out there. Sure, we have implicit terminology to roughly describe components, but I’ve struggled to find something comprehensive. Something that encompasses a clearly defined direction and properly classified attributes of a given design system. Something that describes the differences between systems.

Which is why I created my own framework. It’s been useful for me to create a recognizable mental model of distinct approaches to architecting design systems. I hope it can provide some usefulness for you too.

INTRODUCING THE DESIGN SYSTEM ATTRIBUTES FRAMEWORK

https://miro.medium.com/v2/resize:fit:1400/1*TJRy8MpjWgnust2ZZnTTCg.jpeg

The graph. Illustration by author using Miro.

The Design System Attributes Framework serves as a structured approach for classifying design systems based on four key attributes:

1. Flexibility. Refers to the ability to customize and style elements, layouts, and interactions to suit specific product (or project) needs and brand identities.
2. Consistency. Refers to the uniformity and coherence of elements, patterns, and interactions across products and experiences, ensuring that similar elements or interactions appear and behave predictably across different parts of a product (or across different products within a brand ecosystem).
3. Composability. Refers to the degree to which components and elements can be combined and arranged to create new and varied layouts and interfaces, as well as the degree to which building blocks are broken down into smaller parts.
4. Completeness. Refers to how exhaustive elements and components are, to cover a wide range of use cases and scenarios through an extensive set of properties and configurations.

The reason why I chose these particular attributes is because they are quite common (and often misinterpreted despite being pretty clearly defined) and because they live on different ends of a spectrum. Many design system builders claim to build “flexible and consistent” components, but in reality, that’s practically impossible. There are ways to leverage one if you emphasize the other, but generally speaking, you sacrifice consistency by accentuating flexibility and vice versa.

Same thing goes for composability and completeness: you either build with a “composable” mindset, or a “complete” mindset. It will inevitably affect how you architect your system and structure your components. Composers gravitate towards breaking down components into smaller pieces, thinking about how to assemble and disassemble them efficiently. Completionists gravitate towards building bigger, more rigid components, thinking about how to configure them effectively.

Personally, I think it’s crucial to acknowledge these distinctions and make purposeful choices based on them to be able to craft viable strategies for the design system you’re building.

The Design System Attributes Framework is essentially a graph with two axes: an x-axis with Flexible on the left end and Consistent on the right end, and a y-axis with Composable in the top and Complete in the bottom.

By plotting the four key attributes on a graph with two axes, the framework provides a visual representation that helps teams understand where their design system falls within the spectrum of attributes.

The main purpose of this classification is to aid in identifying the strengths and weaknesses of a design system, guiding decisions for further development and maintenance.

Observing the key attributes on the two-axis graph, four distinct categories (or quadrants) emerge: