Nielson Norman Group defines a design system as, a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

If you’re new to design systems I highly recommend reading Design Systems 101 - NN/g Nielson Norman Group.

Now that we’ve reestablished what a design system is, let’s take an ‘In Focus’ look at the dynamic landscape of design. From development, to why a well-structured design system is crucial for creating cohesive, consistency, and efficient user experiences. As the founding designer in my company, my role involved the creation and maintenance of our company's design system and component library. This eventually grew into a multi-brand design system but that’s a read for another time. In this blog post, we will delve into three popular design system approaches - Atomic, Semantic, and Multi-Brand - exploring their unique advantages, drawbacks, and the impact of each on the design and development process. By the end of this read you should have a better understand of design systems and which one is the right choice for your team/company/brand.

👉 Atomic Design System:

The Atomic design system, popularized by Brad Frost, is based on the idea of breaking down a user interface into its fundamental building blocks, known as atoms. These atoms, such as buttons, inputs, and icons, can be combined to form molecules (like forms or cards), which further combine to create organisms (like headers or sidebars). The hierarchy continues with templates and pages.

Pros:

1. Granularity: Atomic design promotes reusability and scalability of components, allowing for consistent visual patterns throughout the application.

2. Modularity: By organizing components hierarchically, designers and developers can focus on individual elements without losing sight of the bigger picture.

3. Speed and Efficiency: Once atoms are defined, the design and development process become streamlined, reducing redundancies and enabling faster iterations.

Cons:

1. Time-Consuming: Defining atomic components and ensuring their compatibility can be time-consuming during the initial stages of development.

2. Learning Curve: New team members might find it challenging to understand the complex hierarchy and naming conventions, leading to a steeper learning curve.

👉 Semantic Design System:

The Semantic design system emphasizes the importance of meaning and context in component naming and organization. Instead of focusing on the visual aspects, it aims to describe the purpose and function of each component using clear and consistent language.

Pros:

1. Intuitive Naming: Components with semantically meaningful names make it easier for team members to understand their purpose and usage.

2. Accessibility: By employing descriptive names, the design system promotes accessibility, as screen readers and other assistive technologies can better interpret the user interface.

Cons:

1. Limited Visual Guidance: While semantic design prioritizes clarity, it might lack specific visual guidelines, leading to inconsistent visual styling.

2. Subjectivity: Determining the most appropriate names and context for components can be subjective, leading to potential disagreements within the team.

👉 Multi-Brand Design System:

A Multi-Brand design system caters to organizations with multiple products or services that require distinct brand identities. It allows for the creation of a single, centralized design system that can be adapted and extended to meet the unique branding requirements of each product or service.

Pros:

1. Efficiency: A multi-brand approach reduces duplications, as core components and guidelines can be shared across brands, leading to improved productivity.

2. Consistency: Even with different brand identities, a multi-brand design system maintains consistency in user experience, ensuring a seamless transition between products.

Cons:

1. Complexity: Balancing the need for brand-specific elements and shared components can be complex and requires careful planning and collaboration.

2. Maintenance Overhead: Updating the design system to accommodate individual brand updates may require extra resources and time.

While data varies depending on the organization and project, studies have shown that companies implementing design systems experience up to a 50% reduction in design and development time. Additionally, design systems lead to a 33% increase in brand consistency and a 42% decrease in maintenance costs over time.

At the end of the day choosing the right design system approach depends on the unique needs and goals of each organization. The Atomic design system provides meticulous granularity, the Semantic approach focuses on clarity and meaning, while the Multi-Brand approach caters to diverse branding requirements. Embracing design system diversity allows teams to strike a balance between consistency, efficiency, and adaptability, ultimately delivering exceptional user experiences and empowering teams to create products that stand out in the market. As design system managers, it is essential to continuously assess and iterate on our approach, learning from data and feedback to improve the design and development process continually.

A design system isn’t a project. It’s a product serving products. – Nathan Curtis, EightShapes