Design system
collection

My interest in typography began with a “small” but persistent annoyance. Ever since my very first startup gig, I’ve been bothered by the extra space in text boxes. I learned to measure against a 4px baseline grid to offset some of it, but it was never quite enough.

In February 2019, I noticed that Figma rendered Segoe 1px lower than Chromium. Curious, I reached out to Figma, and one of their engineers, Jonathan Chan, kindly responded. Through Jonathan, I learned how font baselines are calculated and rendered differently across layout engines.

Later that spring, Marcin Wichary from Figma published his article “Getting to the bottom of line height in Figma”. It revealed the layout behavior at the heart of the extra space issue that had been bugging me for so long.

That summer, on a random night, I stumbled upon the original leading-trim proposal and reached out to its spec author, fantasai. A series of conversations led me to facilitate a sponsorship between fantasai, the CSS Working Group, and Microsoft Design to support the initial phase of the specification.

I went on to share what I’d learned in my own Medium article published through Microsoft Design, detailing the root problem, how leading-trim would solve it, and how it could make spacing systems more precise and consistent.

In 2023, this feature made its way into Figma as the Vertical trim feature. And earlier this year—six years later—leading-trim was released as text-box-trim in most modern browsers. In fact, the page you’re viewing right now is implemented using text-box-trim.

I wasn't always comfortable with colors. I remember using the HSB color picker in the early days, unsure if I was "doing it right."

In the summer of 2019, I found myself looking into how contrast ratio is calculated. (Interestingly, I noticed this same error in WCAG 2.1's contrast ratio formula that has since been corrected.) Somewhere down the road, I went down the fascinating rabbit hole of a GitHub issue discussing the limitations of the existing standard, which I believe kick-started the new APCA contrast ratio standard.

One thing led to another, I eventually learned about perceptually uniform color spaces. I remember spending many nights reading articles after articles. It was eye-opening to realize just how much there is to color science, but at the same time, everything began to make sense.

I was eager to apply what I'd learned. At my previous team, I helped develop a method to generate uniformed color-sampled duo-tone gradients for our card backgrounds using the HSLuv color space.

In my current role, I had the opportunity to create our color system. I initially used OKLCh to generate the palettes. Despite its consistent result in hue and chroma, I found it lacked uniformity in lightness. For that reason, I ended up switching to HCT in my second iteration. It combines CAM16's uniform hue & chroma with Lab/LCh's lightness and, because its sRGB conversion only lowers chroma to fit the gamut, it keeps contrast even more consistent across hues than, for example, LCh. Although I still observed the hue shift issue similar to that of Lab/LCh, it was easy to correct, allowing me to achieve better contrast consistency in my final palettes below.

Soon after Figma released variables in the summer of 2023, I was inspired by another designer’s shareout and started experimenting with changing component style and layout using variable modes on top of the usual variants and component prop features.

A year later, I started contributing heavily to our cross-company semantic token effort. In the beginning of the project, we were still locking down the token schema and how many tokens we actually needed. We had over 900 tokens, and the 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 made maintenance so much easier. By avoiding repeated variants in Figma, we also saw a significant improvement in component performance.

We didn’t end up shipping the components built this way due to discoverability concerns, but it was a fun experiment to stretch how Figma variables could be used and let us focus on iterating tokens without constantly re-wiring components.

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 tooling as a designer. I vibe coded color generation libraries in the OKLCh and HCT color spaces and 50+ Figma scripts to help me reduce manual tasks and complete various token workflows.

My boyfriend jokingly said I finally know what it’s like to be an engineer—why spend half an hour doing something manually when you can spend two hours automating it? Hey—why do manual tasks when you can learn something and have fun?