Design
How to classify your design system—a framework
5 min
Introducing the Design System Attributes Framework
The Design System Attributes Framework serves as a structured approach for classifying design systems based on four key attributes:
Flexibility. Refers to the ability to customize and style elements, layouts, and interactions to suit specific product (or project) needs and brand identities.
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).
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.
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:
Flexible-Complete
Design systems in this category offer a comprehensive set of unopinionated components and solutions, allowing considerable customization and adaptation.
Key Characteristics:
Comprehensive design resources, adaptable to varied contexts, supports customization and innovation.
Components are designed to be highly adaptable, allowing designers and developers to modify them extensively to fit various needs.
While there is a set of exhaustive components offering an extensive set of properties and configurations, the guidelines for their use are flexible, permitting significant alterations.
Encourages users to experiment and adjust components as needed, promoting innovation while still offering a complete solution.4. Reducing Stress and Overwhelm:
Examples of Flexible-Complete design systems:
Atlassian Design System. Supports a wide range of use cases and allows for customization to fit specific product requirements, but generally emphasizes completeness over composability.
Shopify Polaris. Includes a comprehensive array of components while allowing significant customization to cater to the unique branding and functionality requirements of different Shopify stores.
Flexible-Composable
Design systems in this category offer modular and unopinionated components that can be freely combined and extensively customized.
Key Characteristics:
Elements and components are broken down into smaller parts to support a high degree of modularity.
Components can be adapted and customized to fit various needs and preferences.
Guidelines are flexible, allowing for creative combinations and extensive modifications.
Encourages experimentation and unique implementations.
Suitable for products (or projects) requiring diverse and innovative design solutions, adapting to various styles and contexts.
Examples of Flexible-Composable design systems:
Chakra UI. Known for its modular and highly customizable components, it offers a lot of flexibility for developers to create unique designs by combining and customizing its components.
Segment’s Evergreen. Designed to be highly composable and adaptable, with components that can be customized and extended to fit various use cases.
Flexible-Composable
Material UI and Radix are examples of Consistent-Composable design systems.
Design systems in this category provide modular and opinionated components with strict adherence to design rules to ensure uniformity.
Flexible-Composable
Modularity with uniform standards; components are designed to be highly modular and can be combined in various ways. However, they adhere to strict design standards to ensure a uniform look and feel.
There are stringent guidelines and rules that ensure each component fits seamlessly with others, maintaining a cohesive design language.
Users can reliably predict how components will behave and appear when combined, leading to a consistent user experience across different applications.
Often used in environments where maintaining a strong, recognizable brand identity is crucial.
Flexible-Composable
Material UI. Based on Google’s Material Design guidelines, it provides modular components that adhere to strict design principles to ensure consistency. It allows for composability but maintains a uniform look and feel.
Radix UI. Emphasizes consistency in design patterns and accessibility features across its components. Each component follows strict guidelines to ensure uniformity in appearance and behavior, leading to a cohesive user experience.
Flexible-Composable
Design systems in this category provide a comprehensive set of highly opinionated and exhaustive components and design patterns with strict guidelines to ensure uniformity and cohesion across all implementations.
Built with Framer
Design
How to classify your design system—a framework
5 min
Introducing the Design System Attributes Framework
The Design System Attributes Framework serves as a structured approach for classifying design systems based on four key attributes:
Flexibility. Refers to the ability to customize and style elements, layouts, and interactions to suit specific product (or project) needs and brand identities.
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).
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.
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:
Flexible-Complete
Design systems in this category offer a comprehensive set of unopinionated components and solutions, allowing considerable customization and adaptation.
Key Characteristics:
Comprehensive design resources, adaptable to varied contexts, supports customization and innovation.
Components are designed to be highly adaptable, allowing designers and developers to modify them extensively to fit various needs.
While there is a set of exhaustive components offering an extensive set of properties and configurations, the guidelines for their use are flexible, permitting significant alterations.
Encourages users to experiment and adjust components as needed, promoting innovation while still offering a complete solution.4. Reducing Stress and Overwhelm:
Examples of Flexible-Complete design systems:
Atlassian Design System. Supports a wide range of use cases and allows for customization to fit specific product requirements, but generally emphasizes completeness over composability.
Shopify Polaris. Includes a comprehensive array of components while allowing significant customization to cater to the unique branding and functionality requirements of different Shopify stores.
Flexible-Composable
Design systems in this category offer modular and unopinionated components that can be freely combined and extensively customized.
Key Characteristics:
Elements and components are broken down into smaller parts to support a high degree of modularity.
Components can be adapted and customized to fit various needs and preferences.
Guidelines are flexible, allowing for creative combinations and extensive modifications.
Encourages experimentation and unique implementations.
Suitable for products (or projects) requiring diverse and innovative design solutions, adapting to various styles and contexts.
Examples of Flexible-Composable design systems:
Chakra UI. Known for its modular and highly customizable components, it offers a lot of flexibility for developers to create unique designs by combining and customizing its components.
Segment’s Evergreen. Designed to be highly composable and adaptable, with components that can be customized and extended to fit various use cases.
Flexible-Composable
Material UI and Radix are examples of Consistent-Composable design systems.
Design systems in this category provide modular and opinionated components with strict adherence to design rules to ensure uniformity.
Flexible-Composable
Modularity with uniform standards; components are designed to be highly modular and can be combined in various ways. However, they adhere to strict design standards to ensure a uniform look and feel.
There are stringent guidelines and rules that ensure each component fits seamlessly with others, maintaining a cohesive design language.
Users can reliably predict how components will behave and appear when combined, leading to a consistent user experience across different applications.
Often used in environments where maintaining a strong, recognizable brand identity is crucial.
Flexible-Composable
Material UI. Based on Google’s Material Design guidelines, it provides modular components that adhere to strict design principles to ensure consistency. It allows for composability but maintains a uniform look and feel.
Radix UI. Emphasizes consistency in design patterns and accessibility features across its components. Each component follows strict guidelines to ensure uniformity in appearance and behavior, leading to a cohesive user experience.
Flexible-Composable
Design systems in this category provide a comprehensive set of highly opinionated and exhaustive components and design patterns with strict guidelines to ensure uniformity and cohesion across all implementations.
Built with Framer
Design
How to classify your design system—a framework
5 min
Introducing the Design System Attributes Framework
The Design System Attributes Framework serves as a structured approach for classifying design systems based on four key attributes:
Flexibility. Refers to the ability to customize and style elements, layouts, and interactions to suit specific product (or project) needs and brand identities.
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).
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.
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:
Flexible-Complete
Design systems in this category offer a comprehensive set of unopinionated components and solutions, allowing considerable customization and adaptation.
Key Characteristics:
Comprehensive design resources, adaptable to varied contexts, supports customization and innovation.
Components are designed to be highly adaptable, allowing designers and developers to modify them extensively to fit various needs.
While there is a set of exhaustive components offering an extensive set of properties and configurations, the guidelines for their use are flexible, permitting significant alterations.
Encourages users to experiment and adjust components as needed, promoting innovation while still offering a complete solution.4. Reducing Stress and Overwhelm:
Examples of Flexible-Complete design systems:
Atlassian Design System. Supports a wide range of use cases and allows for customization to fit specific product requirements, but generally emphasizes completeness over composability.
Shopify Polaris. Includes a comprehensive array of components while allowing significant customization to cater to the unique branding and functionality requirements of different Shopify stores.
Flexible-Composable
Design systems in this category offer modular and unopinionated components that can be freely combined and extensively customized.
Key Characteristics:
Elements and components are broken down into smaller parts to support a high degree of modularity.
Components can be adapted and customized to fit various needs and preferences.
Guidelines are flexible, allowing for creative combinations and extensive modifications.
Encourages experimentation and unique implementations.
Suitable for products (or projects) requiring diverse and innovative design solutions, adapting to various styles and contexts.
Examples of Flexible-Composable design systems:
Chakra UI. Known for its modular and highly customizable components, it offers a lot of flexibility for developers to create unique designs by combining and customizing its components.
Segment’s Evergreen. Designed to be highly composable and adaptable, with components that can be customized and extended to fit various use cases.
Flexible-Composable
Material UI and Radix are examples of Consistent-Composable design systems.
Design systems in this category provide modular and opinionated components with strict adherence to design rules to ensure uniformity.
Flexible-Composable
Modularity with uniform standards; components are designed to be highly modular and can be combined in various ways. However, they adhere to strict design standards to ensure a uniform look and feel.
There are stringent guidelines and rules that ensure each component fits seamlessly with others, maintaining a cohesive design language.
Users can reliably predict how components will behave and appear when combined, leading to a consistent user experience across different applications.
Often used in environments where maintaining a strong, recognizable brand identity is crucial.
Flexible-Composable
Material UI. Based on Google’s Material Design guidelines, it provides modular components that adhere to strict design principles to ensure consistency. It allows for composability but maintains a uniform look and feel.
Radix UI. Emphasizes consistency in design patterns and accessibility features across its components. Each component follows strict guidelines to ensure uniformity in appearance and behavior, leading to a cohesive user experience.
Flexible-Composable
Design systems in this category provide a comprehensive set of highly opinionated and exhaustive components and design patterns with strict guidelines to ensure uniformity and cohesion across all implementations.
Built with Framer
