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.
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.
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.