Design system collection
Work from 2018 to present
Design systems are my strength and passion. I started my design journey creating productivity web apps and first encountered design systems in 2018. I quickly found myself drawn to any design system work afterwards, looking for every opportunity to work on them. What started as side projects is now my full-time role, and I'm enjoying every minute of it.
Typography
I led a sponsorship between Microsoft Design and the CSS Working Group to support the initial phase of the leading-trim spec. This feature was released as Vertical trim in Figma and later as text-box-trim in most modern browsers. Read my 🖋️ Medium article for an in-depth look at how this CSS property improves text layout precision and spacing systems.
Color
Color is another passion of mine. I've researched and explored perceptually uniform color spaces in depth. Recently, I designed a color system for our org's design system in OKLCh and later improved it in HCT. Hover over the demo below to see the color change.
Vincent van Gogh
Dutch painter
FeaturedVincent Willem van Gogh was a Dutch Post-Impressionist painter who created over 2,000 works of art, including 900 paintings and 1,100 drawings and sketches. His bold colors, expressive brushwork, and thick application of paint influenced the Fauves and German Expressionists in the early 20th century.
Component
I love building components—I've built five+ component libraries over the years. I always strive to find the most efficient way to build components and I'm meticulous about the details throughout the process. Below is how I build components (a component-building guide I wrote in 2023).
Token
In 2024, I started contributing heavily to our company-wide semantic token effort. My work since then has centered on tokens. I led semantic token adoption across our organization and became the go-to token person. Below is a glimpse into how I manage 1200+ tokens.
Soon after Figma released variables in the summer of 2023, I was inspired by another designer and started experimenting with changing component style and layout using variable modes on top of the usual variants and component prop features.
When I started contributing to our cross-company semantic token effort, the project was still in the early stages. We were locking down the token schema and determining how many tokens we actually needed. We already had over 900 tokens, and button alone referenced more than 160. That meant 160+ opportunities to introduce mistakes. Each time tokens were added or removed, we also had to update how they were assigned to components.
To make our component more durable to token changes and to improve component performance, I created 3 abstraction layers—state, selected and component style—to abstract the component away from the token iterations, and used variable modes to control component style and layout variations, practically turning variable collections into a “style manager”. In the end, 160+ tokens were “folded” into 8 tokens to assign to component, which let us focus on iterating tokens without constantly re-wiring components. By avoiding repeated variants in Figma, we also saw a significant improvement in component performance.
Workflow
I started vibe coding in the summer of 2024, and I absolutely love it. I love how it gives me agency—not only to minimize manual tasks in Figma, but also to create toolings as a designer. I vibe coded color generation libraries in the OKLCh and HCT color spaces with custom tweaks, and nearly 100 Figma scripts to help me reduce manual tasks and supercharge token workflows.
My boyfriend jokingly said I finally know what it's like to be an engineer—why spend x minutes on a simple task when you can spend y hours automating it? Jokes aside, as LLMs get better and with good API docs, automating simple tasks takes just as long these days. Automation also helps prevent more errors, which is especially important in our line of work. Plus, why do it manually when you can learn something and have fun?
Documentation
Alongside the patterns I’ve defined over the years, I’ve also written a range of design guidelines and documentation—from foundations to components—to document standards and guide usage.
