In the summer of 2015, I organized and redesigned our UI components across multiple public and internal applications.

This was a huge project with multiple goals. First, we wanted to enforce aesthetic and code consistency across all of our applications. We also wanted to provide engineers with a library of UI components with which they could easily build new features while writing very little CSS. Finally, in the tradition of projects like Jeremy Keith’s Pattern Primer, we wanted visual unit tests for our basic UI components that would let us diagnose visual bugs without navigating through our apps.

After taking inventory of all our components and refactoring a lot of SCSS, I wrote and designed a style guide that documented each UI component alongside its source code. I also wrote guidelines that defined how each component should be used.

The DOBT style guide homepage.

UI color swatches in the DOBT style guide.

Dropdown types in the DOBT style guide.

Subscribe to the mailing list.

Every once in a while, I'll write to you with something I've been thinking about, alongside some cultural recommendations.