Crafting a Design System

A design system is a set of standards, documentation, and reusable components that guide the development of digital products within an organization. It serves as a single source of truth for designers and developers, ensuring consistency and efficiency across projects (1).

Motivation

The company faced challenges with inconsistent UI elements across its products, which negatively affected efficiency and user experience. Hard-coded colors and typography resulted in longer development cycles and maintenance issues, while designers struggled with unclear specifications.

As a provider of white-label products, the company needed a streamlined approach to customize colors and typography for client branding. So far, Customer Success teams used random colors for client integrations, undermining brand consistency and accessibility.

To address these issues, the design system should:

  • Be easy to use by the Customer Success team who handle client integrations

  • Stand out to attract prospective clients

  • Stylistically match Angular Material library used by the development team

Design elements to include

  • Colors

  • Typography

  • Icons

  • Components

  • Layout grids and break points

  • Interactive states

  • Widget specifications

With a goal of

  • Minimizing variants to accelerate development cycles and client integrations

  • Bringing consistency across all products

  • Adhering to web accessibility standards, ensuring inclusive user experiences

Process - Colors

I created color systems for dark and light themes with an equal number of corresponding color variants, allowing developers to translate designs between themes easily. Further, I categorized colors into primary and derived. The derivation process involves darkening or lightening the default color based on the Lightness scale of HSL.

This approach simplifies integration for the Customer Success team:

  1. For neutral colors, they only need to input the background color to generate all other colors.

  2. For data visualization, they provide just three colors (weak, neutral, strong) to create a full spectrum.

It also ensures that products adhere to accessibility standards.

Typography

I optimized the typography system by reducing the number of text styles from 15 to 9, enhancing consistency and usability.

By working closely with the Customer Success and development teams, I established a process where:

  • Customer Success team only needs to specify a font and a base font size during client integration

  • All typography is automatically adjusted based on these inputs

Components

To promote component modularity and reusability, I:

  1. Applied atomic design principles, organizing components hierarchically

  2. Leveraged the company's use of Angular Material theme, utilizing its accessible and well-tested components

  3. Created a comprehensive style guide with visual examples and responsive design rules

Next steps

  1. Documentation

    • Publish the design system on Storybook or similar platform for better visibility, understanding, and adoption

  1. Measurement and Adoption

    • Track adoption rates by the development teams

    • Assess stakeholders’ understanding and correct usage of the system

    • Identify gaps in accessibility

  1. Refinement

    • Expand the component library to cover all use cases

    • Implement recurring updates based on Angular Material releases

    • Refine the system based on usage metrics and user feedback

(1) Design systems 101: What is a design system? Source: https://www.figma.com/blog/design-systems-101-what-is-a-design-system/.

Back to top

Next case