Introduction
The work covered in this document is to build the UI design system for Tracer front end. The Tracer design system will contain a collection of reusable components guided by clear design standards to support Tracer application development where the look and feel is consistent across all of Tracer features. In addition to making the UI consistent, the expectation for the design system is to reduce the UI development time for the engineers.


Requirements

Working with Tracer’s Technical Lead, the following list of all the requirements must be met.

  • List all the Tracer components that need to be part of the design systems
  • Chose technology to build the design system
  • Distribute the design system components for developers to use
  • Document the design system through Storybook and proper readmes as needed
  • The design system should either enable an application to implement the following or implement them itself:

    • Theming of colors and fonts
    • Responsive design
    • Accessibility
    • Dark mode

This work may require refactoring of current code to comply with the new design system.

Work Breakdown

At a high level, the work to do this should resemble:

  • Working with product design and the technical lead, list all of the components that we will build into the design system based on current and future usage
  • Identify all stakeholders in this project, including but not limited to: product, design, frontend guild, management, platform engineering, the Hub team
  • Re-build components following the new design system guidelines, and gradually adopt them in the existing code
  • Extensive documentation on the process to update and release the library
  • Once sufficient components have been built, we will add a visual regression tool to the stack

Preconditions

The following items will be accomplished before this project begins:

  • CSS architecture is decided
  • Repositories and deployment targets are created

Milestones

  • An off-the-shelf library of quality React components or native web components is selected for use, after a review of options is complete
  • Components are prioritized and scheduled into further milestones for completion
  • Storybook documentation and visual regression testing exist

Acceptance criteria

  • Tracer should have a complete design system at the conclusion of this work, covering all currently used components and interaction patterns
  • The library and maintenance processes should be documented
  • Definition of Done

    This work is done when we are able to use design components consistently during new feature development.