One design system for Fay, on iOS, Android and web

Fay connects people with dietitians covered by their insurance. Patients book and track their care in our iOS and Android apps and on the web. When I started this work in April 2026, the marketing site, the web product and the mobile app each ran on its own design system. None of them shared tokens, so the same color or radius lived somewhere different in each one.

I pitched a design system overhaul and led it until I left in August. Five months of work is too much for one page, so here are the highlights of how things went!

Nobody could change a color in one place, so people copied whatever was closest. Our web code alone ended up with 123 buttons written by hand, and that was just one symptom. Then our engineers started building with AI, and the copying sped up. As Don (our awesome Android engineer and my closest partner on this project) put it in Slack about AI-written code: “Given access to all the LEGO, it built everything slightly differently, faster.”

So I built the system toward one dream: if AI only gets a small set of parts to build with, a person can actually review what it makes. We didn’t get all the way there before I left, but every step pointed there.

Buying someone else’s mistakes

I’d never built a design system from scratch. So I found someone who has done it before at a large company. Because our team was very small, my first plan was to hire her to build ours. After talking to her and understanding her rate, I changed the ask. I realized that what we really wanted were the mistakes she’d already made somewhere else. And with AI and the right processes, the manual work would go faster even with a small team.

I pitched our CTO on about 25 hours of the contractor’s time to audit what we had, sketch the token structure and help strategize the process of the overhaul. He said yes on one condition: check in after two weeks and make sure she’s worth it. She was. I took it from there, named it Iris, and gave it a little brand. Suddenly it felt like a real project. Teams talked about it, and people name-dropped Iris in conversations I wasn’t part of. It gave me hope, but it also made me feel more responsible for what I was asking of people: some budget, and a lot of designers’ and engineers’ time. I had to advocate for at least 20 hours a week from one engineer. Instead of three engineers learning the same mistakes at once, I asked to start with just Don, figure out the workflows together, and then bring in the others. But it was happening and the deeper I went into it, the clearer the path seemed.

One change, two clicks

Before Iris, changing one color took seven manual steps across three repos and two Figma libraries. With Iris, I published a change once and a pull request opened on iOS, Android and web by itself. Don’s review of the first one: “Checks pass, code compiles, updates are safe. Approve and merge. Two clicks.”

Naming things by their job

In light mode, a card and the page behind it are both white. In dark mode the card has to get lighter, because shadows disappear. They look identical in one theme and different in the other, so they can’t share a name. That’s why we named every token for the job it does. “Card” became “surface/one”. “Button” became “action”, because a link or an icon can be an action too, so one token covers all of them.

Docs that check my work

I built components with Claude Code reading and writing Figma directly. Before it wrote any documentation, my prompt asked it to flag anything unnamed, misused or hard-coded. So writing the docs doubled as an audit.

AI took the repetitive half of the job. I spent the time I got back on structure and naming, and then ran a workshop so the other designers could work the same way.

Three platforms, one set of tokens

Iris laid the foundation for a more consistent product. By August, all the tokens were in the system on iOS and Android, and one change reached all three platforms at once. We had 24 components and 186 icons, web components were being built, and the teams had started replacing their old components and tokens with Iris ones on every platform.

The team kept going after I left, and most of the web components are done now. As Joey (web) put it: “Iris has made it clear what is and isn’t within the design language of Fay, making it clear to agents how to assemble user interfaces. Smaller projects no longer need prescription from the design team; engineers and their agents are empowered to use the components and tools available to us, knowing that the outcome will fit in the style of Fay.”

Design systems don’t get applause. I did this one because the product and the teams deserved it, and I got to do it next to people who wanted the same thing.

Thank you to everyone who believed in Iris before there was much to see. Mark, our CTO, approved it, starting with those first 25 hours. Cathryn (the amazing contractor) did the first audit and the high-level token structure, and I built the rest. Don (Android), Cassie (iOS) and Joey (web) built the pipelines and put up with a lot of renaming. Tori and Ling, our designers, tested the new system in their own projects, made it better whenever it fell short and added the components it was missing.