Pantry is the design system for Albertsons. Starting in the fall of 2022, I led the design and architecture of our design tokens. As a result, we were able to build an automated pipeline from Figma to code, using Token Studio for Figma and Style Dictionary. This project proved to be especially challenging as our token naming structure differed slightly from Style Dictionary's CTI. Additionally, our final outputs were Kotlin and Swift files, which was a new endeavor for myself. Ultimately, we were able to create scripts to transform our tokens and solidify our pipeline.

Token architecture

We explored using three layers layers of abstraction, but our final deliverable was only two: global and theme layers.

A color swatch with the hex value #004488 pointing to another swatch with the name
Our first layer of abstraction contains global tokens.
Our second layer of abstraction contains theme tokens.
Our token architecture supports theming.