This was a personal project in design systems; to create a system without business influence. This was to strictly focus on what pieces can use similar design elements while providing the proper affordance for users to achieve their goals.

The project has sections dedicated to color, typography, spacing, layout, and components. Each section was curated to use the parts of the system they describe along with any reference material or approaches used to create the outcome. Some of the approaches are new; with unique terms to describe the parts of the system. For example, there is a significant difference between the design tokens that describe the brand (genitive) versus where the value of the token will be applied (locative). The color scale is also computed in steps from the middle of the grayscale for contrast and spacing values are based on size.

This was also a journey into preparing a website for a nearly perfect Lighthouse score and PWA with offline capabilities. The reception within the design systems community for the project has been positive, and the work continues to be cited for other teams’ design systems decisions.