I've been building design systems for quite a few years now and carved a niche for myself that caters to the unique needs of B2B startups and growing organisations alike. However, I've noticed that our clients often have questions regarding our process, its components, and the value they derive from it.

In this detailed guide, I aim to provide a transparent overview of our approach. I'll shed light on:

• The anatomy of our design systems and the components they encompass

• The cohesive mechanism that enables these components to work seamlessly

• The concept and relevance of design tokens in our systems

• The seamless process we follow for handing over the design system to developers.

To further augment your understanding, check our in-depth case study that chronicles our journey of developing a design system for our B2B client.

Understanding a Design System

Before we delve into our methods, let's first clarify the concept of a design system. First of all, "Design System" is currently a hot keyword usually thrown around by everyone without fully understanding what it is. I've seen many companies say they have a design system, but almost always it's just a style guide and a library of a few components. A design system is a living document built for developers and product managers, not an old outdated repository that no one uses.

There are many different explanations of a design system, and most of them are correct. My thinking is this: a design system is a robust framework comprising a series of components reused across a digital product. It brings uniformity, boosts efficiency, and strengthens brand identity by providing a single source of truth to all stakeholders involved in product design and development. But Design Systems can be complex and very different for every project. If you're not sure your company need one, check out this article.

Elements of a Typical Design System

We view each design system as a unique entity that caters to the specific needs and goals of a business. That said, the following components often form the backbone of our design systems.

1. Design Tokens

Design tokens are the DNA of a design system. They set the tone and define the core attributes that ensure consistency across the interface. They help us connect our designs with front end and force designers to design consistently. Our design tokens encompass:

• Colour: We define a palette that embodies your brand's identity, mood, and values.

• Typography: We establish rules for fonts, sizes, weights, line heights, and spacing to ensure readability and accessibility.

• Shadows: We use shadows to emphasize depth and draw attention to interactive elements.

• Grids: We define a flexible grid system that governs the layout and arrangement of components.

• Spacing: We set consistent spacing rules to ensure balance and rhythm in the design.

• Radiuses: We define corner radius values for elements like buttons, cards, inputs, etc., to control their roundness.

• Other tokens: such as sizing, min/max-width, border-width, etc.

During the creation of each component (atoms, molecules, organisms) we always have design tokens in mind and add them whenever applicable. To learn more about design tokens and why they're crucial to our design systems, we recommend reading the benefits of design tokens, as well as how we apply them.

2. Atoms

Atoms represent the most basic functional units of a user interface. They're the building blocks that, when combined, create more complex components. Our design system atoms typically encompass:

• Avatars and avatar badges

• Buttons of various types: standard, group, mobile

• Regular icons and miscellaneous ones (check, rating, social, country, payment, files)

• Tags, or Chips, for categorizing content

• Horizontal and vertical Tabs for managing multiple contents in the same space

• Input fields and dropdowns for data entry

• Badges, or labels, for providing metadata

• Checkboxes and Toggles for binary choices

• Dropdown menus and combo boxes for selecting from a list of options

• Loading and progress indicators

• Sliders for range selection

• Tooltips for additional information

3. Molecules

Molecules are complex components made by grouping atoms together. They form functional sections of an interface and often involve user interaction. Our design system molecules typically include:

• Alert banners for critical notifications

• Info banners for important information

• Breadcrumbs for navigation help

• Checkbox groups for multiple selections

• Empty states for no-data situations

• File upload interface

• List items for presenting data

• Pagination and dividers for data division and navigation

• WYSIWYG editor for content management

• Toast or Snackbar notifications for user feedback

• Image grids, video players, and carousels for rich media display

4. Organisms

Organisms are complex UI sections formed by grouping together molecules and/or atoms. They form distinct parts of a page and work together as a part of the whole. Common organisms in our design systems include:

• Various modal dialogs

• Side panels

• Command bars

• Analytics cards

• Chart types

• Date pickers

• Calendars

• Image cards

• Dashboard and other cards

• Headers and Footers

• Navigation (Side or Top)

• Tables for data display

• Messaging, Live chat, Comments sections

• Popovers for extra information

• Activity feeds for user updates

• Progress steps for multi-step processes

• Search and filter interfaces

• And many more reusable organisms based on popularity

5. Templates

We integrate the above atoms, molecules and organisms into tailored templates based on our customers' unique needs. These include, but are not limited to:

• Login and sign-up pages

• Settings pages

• Detail pages

• Dashboard layouts

• Data visualization pages

• Error pages

• Any other specific page that gets reused frequently.

How Do These Components Work Together?

An effective design system is not merely a collection of components; it's their thoughtful assembly that abides by certain rules. All components of our design systems follow key tokens — grid, layout, padding, radiuses, shadows, typography, and colour — to ensure visual harmony and consistency across the product. This methodical approach streamlines the implementation process, making it less prone to discrepancies and errors.

Time to Document Everything

We believe in transparent and exhaustive documentation. Each component in our design systems comes with a clear usage explanation, development specifications, and its different states clarified. We utilize Figma for documenting these details and use various Figma plugins to help make design system documentation more exhaustive.

Furthermore, we encourage and assist our clients in adopting Design System component documentation platforms like Storybook, Zeroheight, and others. This helps create an easily accessible and interactive library of all components, boosting team understanding and communication.

Handing Over the Design System

Our role isn't confined to just creating a robust design system; we also facilitate its seamless transition to the development team. Each component is meticulously annotated, and component tokens are exported as CSS and JS output files, aided by a style dictionary. This streamlining significantly reduces the time spent by developers on styles. Our detailed article explores this handover process further.

Conclusion: Cohesion, Consistency, and Efficiency

I believe (and have experienced) that a well-structured design system is instrumental in crafting a cohesive, consistent, and efficient digital product that's a must for growing tech companies. This example process I discussed has already provided immense value for companies by making interface design structured and much easier to understand for other departments. However, this process still requires quite an investment from designers, product managers and frontend engineers alike, so it's best to discuss with an expert to see what the potential return on investment will be.