Cequence Design System

Figma
Storybook
React
Material UI

Project Impact

5,000+lines of css reduced from applications
2New themes introduced
20%Increase in UI development velocity
50%Increase in consistency across products

Problem Statement

The existing UI system lacked a unified, scalable theming structure, leading to inconsistencies across applications and redundant CSS overrides. There was a need for visual uniformity and a more streamlined approach to managing themes and components across both dark and light modes.

Solution

1. Adoption of Figma's Variable Control System (2023)

  • Figma introduced native design tokens, which I leveraged to overhaul our design system.
  • Created a structured theme palette with design token variables, each with a specific, intentional purpose (e.g., text tokens labeled `neutrals/text/medium`).
Figma variables and design tokens interface

2. Redesign of Figma Components

Applied the new token-based theming across all components in the Figma design library, ensuring consistency and seamless integration between designers and their files.

Figma button component design system

3. Integration into the UI-Components Repository

  • Added Figma theme to our shared UI repository, integrating the design tokens into MUI themes for easy consumption by applications.
  • Created a structured theme JSON file to define design tokens:
    {
      "neutrals": {
        "text": {
          "high": "rgba(255, 255, 255, 0.95)",
          "medium": "rgba(255, 255, 255, 0.80)", 
          "low": "rgba(255, 255, 255, 0.60)",
          "disabled": "rgba(255, 255, 255, 0.40)"
        },
        "background": {
          "primary": "#18181B",
          "secondary": "#27272A",
          "tertiary": "#3F3F46"
        },
        "border": {
          "default": "rgba(255, 255, 255, 0.12)",
          "hover": "rgba(255, 255, 255, 0.20)"
        }
      },
      "brand": {
        "primary": {
          "main": "#2563EB",
          "light": "#3B82F6", 
          "dark": "#1D4ED8"
        },
        "secondary": {
          "main": "#7C3AED",
          "light": "#8B5CF6",
          "dark": "#6D28D9"
        }
      },
      "feedback": {
        "success": "#22C55E",
        "warning": "#F59E0B",
        "error": "#EF4444",
        "info": "#3B82F6"
      }
    }
  • Developed CSS overrides for MUI components to align them with the new token-based design system.
  • Created semantic MUI component overrides to apply design tokens consistently:
    {
      MuiButton: {
        styleOverrides: {
          root: {
            backgroundColor: theme.brand.primary.main,
            color: theme.neutrals.text.high,
            '&:hover': {
              backgroundColor: theme.brand.primary.light
            },
            '&:active': {
              backgroundColor: theme.brand.primary.dark
            },
            '&.Mui-disabled': {
              backgroundColor: theme.neutrals.background.tertiary,
              color: theme.neutrals.text.disabled
            }
          },
          outlined: {
            borderColor: theme.neutrals.border.default,
            '&:hover': {
              borderColor: theme.neutrals.border.hover,
              backgroundColor: 'transparent'
            }
          }
        }
      }
    }
  • Rethemed custom React components in the shared UI-components repository using the new tokens.

4. Dark & Light Theme Compatibility

Ensured that design tokens seamlessly supported both dark and light themes for greater flexibility in user interface preferences.

5. Collaborative Application Retheming

  • Removed redundant CSS overrides in applications, replacing them with standardized overrides from the shared UI repository.
  • Conducted an in-person retheming session with the UI engineering team, where we collaboratively rethemed components like buttons, icons, and text fields, removing thousands of lines of CSS.

6. Ongoing Evolution

  • Owned the remaining effort to fully transition applications to the new theme.

Impact

Consistency

Achieved visual uniformity across all applications, giving them a cohesive and professional appearance.

Efficiency

Removed thousands of lines of redundant CSS, streamlining the development process.

Accessibility & Usability

Leveraged MUI's built-in features to improve the accessibility of the applications.

Flexibility

Enabled a fully functional light mode for users, broadening the product's adaptability.