Explore

Design system - STEM

Color palette

Typesystem

Version 3

Abbreviations

DS - Design system

UI - User interface

UX - User experience

PMs - Product managers

B2B - Business to Business

B2C - Business to Consumers

Introduction

Before diving into the details, let’s first understand what a design system is and why it plays a crucial role in product development.

A design system is a collection of reusable components, guidelines, and principles that provide a unified framework for designing and building products. It serves as a centralized resource that defines:

The visual language of the product.

Interaction patterns that ensure consistency.

Rules and standards for creating cohesive user experiences across different platforms and devices.

At Attentive, my design team and I aimed to continuously refine and enhance our design maturity, striving to create a system that stands out in the market while ensuring scalability and long-term effectiveness.

Since Attentive offers B2B software solutions, the product lifecycle is significantly longer compared to consumer-facing solutions. This presented unique design challenges that required thoughtful decision-making:

Designing for longevity & avoiding fleeting trends

Unlike B2C solutions, B2B systems are built for long-term use, often spanning 15-20 years.

To maintain relevance and effectiveness, it was crucial to avoid chasing short-lived design trends that might become obsolete.

Instead, the focus was on crafting a timeless, professional, and adaptable visual design that could seamlessly integrate with the system’s legacy while remaining modern and functional.

Managing complexity in a B2B environment

B2B systems are inherently more complex than B2C applications due to factors such as:

Handling multiple data states.

Integration with other enterprise software.

Advanced user workflows and customization requirements.

Every design decision had to be strategic, ensuring that the system maintained usability and efficiency despite its complex nature.

Through our design system, we aimed to tackle these challenges, ensuring consistency, scalability, and usability while creating a robust foundation for future product development.

The benefits of a design system are crystal clear: No more juggling different color shades for the same states, No more building components from scratch every time, and No more overthinking button corner radii.

This is exactly what a Design System brings to the table! 🚀

But why the name ‘STEM’?

Think of a plant and the various parts that make it thrive. Just like in nature, every element of our design system (DS) plays a crucial role in growth and function:

Stem – Just as the stem carries water and minerals from the roots to the leaves, the design system acts as a central link, ensuring consistency and structure across teams.

Branches – Represent the Design and Development teams, extending from the system and supporting its implementation.

Leaves – Symbolize the individual contributors who use and build upon the design system, enabling it to evolve.

Flower – The final product, which blossoms as a result of a well-structured and efficiently maintained design system.

By naming it STEM, we emphasize its role as the core foundation that nourishes and connects all aspects of product design and development, leading to growth and innovation.

⁠

Why was STEM needed

The need for a design system (STEM) became evident after gathering insights and pain points from the Design, Product, and Engineering teams. The absence of a structured design system led to inefficiencies, inconsistencies, and scalability challenges. Here’s why we needed STEM:

Designers

Without a pre-defined design system, designers had to create each component from scratch, making the process time-consuming and inefficient.

Even when some components were reusable, they were not shared across the team, leading to redundant work and lack of scalability.

There was no proper documentation on how to use components, causing inconsistencies in implementation.

Developers

Developers had to rebuild the same components multiple times with slightly different styles, making the process repetitive and inefficient.

With multiple teams working on different modules, the final product lacked design consistency, leading to styling mismatches across the system.

While third-party libraries could be used, they often introduced unnecessary functionalities and misaligned styles, forcing developers to heavily customize them.

Product Managers

The absence of a design system resulted in inefficiencies and unpredictability in product development, causing delays in timelines.

During design reviews, new, unplanned components would suddenly appear in different flows, leading to inconsistencies.

This uncertainty made product managers hesitant to ship features, fearing they might "hit an iceberg and sink later," leading to long-term usability issues.

Conclusion

The absence of a unified design system created bottlenecks, inconsistencies, and inefficiencies across all teams. STEM was introduced to solve these challenges, ensuring:

Scalability – A system that grows with the product.

Consistency – Unified design and development standards.

Efficiency – Reduced rework, improved collaboration, and faster product development.

By implementing STEM, we created a foundation for a structured, reusable, and well-documented design system, enhancing the overall product lifecycle and team productivity.

This version improves clarity, structure, and engagement, making it easier to read and impactful. Let me know if you need refinements!

Version history

We are currently on version-3 of STEM.

Version history

Version history

Version name

Full name

Description

Version 1

It was built on Adobe XD

Had many components

Was inspired from Google MUI

Version 2

Same as v1 but built again on Figma now

Some variation added to components of v1

Version 3

The latest version

Contains 40+ component

Responsive for different screen size with following breakpoints

XL : 1920px * 1080px

LG : 1536px * 864px

MD : 1280px * 720px

There are no rows in this table

⁠

My role

Shortly after joining Attentive, I was given the opportunity to take ownership of the design system, ensuring its maintenance and evolution. One of my key responsibilities was overseeing the transition of our Design System from Adobe XD to Figma (v1 → v2). Post transition it was to maintain and evolve the design system (which resulted in v3). During this process, I identified several critical issues that needed immediate attention.

Key Issues Identified

Inconsistent color palette

The color system lacked consistency in how colors were derived.

Hex codes were randomly assigned in some places, leading to inconsistencies.

There was no structured documentation or process for creating and maintaining a scalable color palette.

Unscalable typography system

The type system was not properly calculated, making it difficult to scale.

It was designed for only one screen size, limiting adaptability across different devices.

Missing components in the system

As we worked on new product features, we realized that several essential components were missing from the design system.

This led teams to design components on the fly, resulting in inconsistencies across the product.

Enhancements needed for existing components

Padding adjustments – Some components needed better spacing for improved visual balance.

Size variations – The system lacked responsive versions of components for different screen sizes.

Component states definition – There was no clear documentation for component states (hover, active, disabled), making implementation inconsistent.

My Contribution By taking ownership of the Design System, I focused on:

Fixing inconsistencies in color, typography, and components.

Improving scalability to ensure adaptability across different screen sizes.

Enhancing documentation to create a structured, reusable, and well-documented system.

This approach helped in streamlining the design workflow, ensuring consistency across teams, and creating a scalable design foundation for the future.

Resolving the Issues: Building a Roadmap

Recognizing the need for immediate improvements, I outlined a structured roadmap to systematically address each issue within the Design System (STEM). My approach was to tackle one issue at a time, ensuring that every change was well-documented, scalable, and seamlessly integrated into our workflow.

Key objectives of the roadmap Each step was carefully planned and documented to:

Maintain consistency – Ensuring uniformity in design components, typography, and color usage across the system.

Provide clear guidelines – Establishing a well-defined process for future updates and modifications.

Facilitate seamless collaboration – Bridging the gap between design and development teams to ensure smooth implementation.

By following this methodical approach, the Design System underwent a gradual yet impactful transformation, becoming scalable, well-documented, and fully aligned with product needs.

Design system - STEM

Abbreviations

Introduction

But why the name ‘STEM’?

Why was STEM needed

Conclusion

Version history

My role

Resolving the Issues: Building a Roadmap

Other articles