BluePrint Design Library

A design system created to enable consistent design patterns and improve team workflow.


To ensure that all designs would be consistent with each other, each component had to be meticulously built exactly as they are represented in code.

Creating components required implementing some complex figma prototyping to ensure components were as stylistically accurate as possible


BluePrint leverages a 3-tier token system that allows me to use a reference palette (left) to define a theme (middle) and use the theme to define component-level tokens (right).

Reference tokens

Theme tokens

Component tokens

The 3 tier system allows me to change a color once, and that change populate down the tree to every component using that color.

A built-in token structure to easily adjust styles that sync across figma files as well as code repo


I created a documentation site to be the single point of truth for designer or developers that have questions or need examples of components and patterns being used.

Usage examples

Component elements