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.

A poster of the logic behind font sizes and columns in the Bonsai design system.

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.

A screenshot of the Typography page from the Bonsai microsite. The small T A logo is in the top left corner. The page features a tool for determining the layout of a page using Bonsai at different device widths. A bar along the top features a dropdown for selecting width, and indicators for the number of columns and widths of those columns and margins. Below that is an example page with the column structure, spacing and type sizes shown.
The typography page from the Bonsai microsite

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.