This was a design framework used internally at This Also for the studio’s website, presentation templates, internal microsites, and more. I was tasked with translating this framework from a series of designs and ideas into a set of rules, and making a portable library that could be easily included and used on websites.
With the help of Michelle Cruz, we broke down all of the rules and styles involved into an SCSS library composed of distinct, organized modules. Bonsai includes the broad features you would expect from a design library — font sizes and styles, colors and a grid system — as well as finicky details and options, like pixel-perfect line-height adjustments, a built-in light and dark mode with animated transitions, and debugging options that can be activated on any site that includes Bonsai.
Bonsai is built and packaged using Grunt and distributed internally either as an NPM module hosted on a private Git repo or as a bundle of source files.
- Library architecture and planning
- Build and deployment systems
- Testing suite