DX Design System

└ Design System

DX is a design system and framework-agnostic component library built with Web Components, React, and Angular. It provides accessible, performant components, a single source of truth for development, and tools for testing, designing, and building applications with seamless customization.

As the Staff Front-End Engineer, I designed a performant and accessible design system, created framework-agnostic components, and developed a single source of truth for documentation, testing, and deployment. DX empowered developers to build consistent applications while promoting contribution through an inner-source.

  • Web Components
  • React
  • Angular
  • Design Systems
  • JavaScript
  • TypeScript
  • Accessibility
  • Performance
  • Testing
  • UIKit
  • CDN

Design System and Component Library

DX is a design system and framework-agnostic component library that redefined how our organization designs, builds, and consumes components. Built with Web Components, React, and Angular, DX offers accessible and performant components with features like:

  • White-labeling: Full customization for light, dark, and branded themes without compromising user experience.
  • Single Source of Truth: A unified system for designing, testing, and building components with seamless integration.
  • Tooling: Built-in support for documentation, component testing, and deployment through a CDN.
DX Presentation screen 1
DX Presentation screen 7
DX Presentation screen 2
DX Presentation screen 3
DX Presentation screen 4
DX Presentation screen 5
DX Presentation screen 6
DX Presentation screen 8

Key Features

  • Accessible and Performant: Ensured all components meet the highest accessibility standards and deliver optimal performance across frameworks.
  • Framework Agnostic: Components can be used with Web Components, React, or Angular, providing flexibility for teams.
  • Inner Source Contribution: A dedicated platform for collaboration and hosting all available components, promoting contribution and transparency across teams.
  • Integrated Tooling: Documentation, testing, and deployment tools included out of the box.
DX App screen 1
DX App screen 2
DX App screen 3
DX App screen 4

Contributions

My role in DX included:

  • Leading the architecture of a design system with accessible and performant components.
  • Creating a framework-agnostic library with Web Components, React, and Angular.
  • Building a single source of truth for documenting, testing, and consuming components.
  • Developing a CDN-based deployment system for seamless integration across teams.
  • Designing white-label theming for light, dark, and branded color schemes while ensuring consistency in user experience.
  • Establishing an inner-source project to encourage collaboration and transparency in the organization.

Architecture Diagram