Frontdoor Component Library

Frontdoor is made up of four major home warranty companies and a recently launched on-demand home service brand. With the growing number of digital products, the business needed a way to ensure consistency across the entire ecosystem. Leveraging design tokens and some opens source tools we were able to build the foundations of a component library and design system.
Design systems
Component libraries
UX Design
UI Design

Design Tokens

Working with the development team we came up with a set of generic design tokens to use as building blocks for the rest of the system.  From there we were able to map in brand colors and fonts to differentiate the component library for each product.  Knowing we had the built in flexibility to deal with systemic change we were confident building out a proof of concept.

Proof of concept

We wanted to see if we could create multiple variations of the same sign up form to support the different brands.  Using the base components with the brand specific tokens as a theme, we were able to achieve the desired result.

Sketch libraries

The challenge from there was to keep the production code in sync with our sketch libraries. Using a few tools we were able to create an interface to add design tokens and export sketch libraries with the html-to-sketch plugin.