DX Design System
└ Design System
DX is a design system and framework native 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 a Staff Front-End Engineer, I led the architecture and design of a performant and accessible design system using framework native components and web components including 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 native 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.
