I was embedded on the Horizon Mobile team as a hybrid production designer and front-end developer, working alongside two product designers to distill a new art direction into a fully systematized design language. My scope spanned both sides of the stack — building and maintaining the design system in Figma while simultaneously refactoring the front-end to match.

• Refactored the entire Figma design system library, building out 151 components handed off by product design with component properties aligned to engineering's component API
• Authored 90 component specs and 41 template specs covering token application across styling attributes in both light and dark mode
• Created 96 templates in light and dark mode representing core screens built entirely with the design system
• Landed 40 diffs on the front-end covering component migration, token management, and UI bug fixes
• Endorsed all engineering commits to ensure pixel perfection against design spec
• Hosted weekly design critiques with system product designers to support design partners across the organization
• Created and hosted educational seminars and bi-weekly team updates on design system progress, covering the full range of topics designers needed to work with the system confidently

Horizon Mobile was undergoing a significant refresh — a new art direction that needed to be distilled into a systematic design language capable of powering a multi-faceted experience across gameplay, onboarding, store, feed, avatars, and settings on both iOS and Android. The existing design system was being deprecated in both design and code, which meant the work wasn't an evolution of what existed. It was a replacement.

I was brought in to bridge that gap. The goal was to translate the new visual direction into a rigorous system — one that lived in Figma as a production-ready library and in the codebase as a maintainable front-end foundation — and to hand it off to engineering with enough fidelity that implementation would require no interpretation.

The design side moved first. Working closely with two product designers, we distilled the art direction into systematic values — color tokens, typography, spacing, and component decisions — over the course of three months. Every component in the library was built with component properties that mapped directly to engineering's component API, so the relationship between how something was constructed in Figma and how it would be implemented in code was intentional and explicit, not coincidental.

Specs were the handoff mechanism. I built 90 component specs and 41 template specs that documented how tokens applied to every styling attribute in both light and dark mode. These weren't reference documents — they were build instructions, and I endorsed every commit against them to ensure what shipped matched what was designed.

On the front-end, the work ran in parallel. Over six months I landed 40 diffs covering component migration from legacy to new, token management updates, and UI bug fixes where production had drifted from design spec. The goal on the engineering side was the same as on the design side: deprecate the old system completely and replace it with something maintainable.

The 96 templates — built in both light and dark mode — served as a living source of truth for the experience. They covered core screens across every major surface of Horizon Mobile and were built entirely with the design system, so they demonstrated correct system application at the screen level rather than just the component level. Partners across the organization could reference them to check system alignment as they were actively building features.

Product designers across Horizon Mobile — spanning in-world gameplay, onboarding, store, feed, avatars, and settings — used the system as their foundation for crafting and shipping features. The template library gave every team a reference point for how their surface area was systematized, reducing the guesswork around whether a given pattern was correct and making cross-team consistency a default rather than something that had to be enforced.

The weekly critiques I hosted with system product designers created a regular feedback loop that kept the library responsive to what partners actually needed rather than what we assumed they would need. It also meant surface areas that typically received less attention — like settings — were represented in the system with the same fidelity as the high-traffic parts of the experience.

Education was a significant part of the rollout. I created and hosted educational seminars alongside bi-weekly progress updates to keep teams informed and aligned as the system evolved. The educational material ranged from exercise files that let designers get hands-on with the new token infrastructure to video overviews covering the full surface area of how to work with the system: how to locate and use components in both Figma and code, what steps to take when a component couldn't be found, how to access the Figma library, theme switching, navigating the library, pulling components, working with component properties, understanding tokens, and using Dev Mode. The goal was to ensure that every designer who touched the system had enough context to use it correctly without needing to escalate to the core team.

Within three months of the front-end work landing, 80% of legacy components had been deprecated in production. A design system that had accumulated technical and design debt across both Figma and the codebase was replaced with a system built to scale — one where the design and engineering representations were intentionally aligned rather than diverged.

What made this project unusual was the timeline and the scope. Distilling a new art direction into a full system — 151 components, 96 templates, 90 component specs, 41 template specs — in three months on the design side, then following it with six months of front-end execution that deprecated 80% of the legacy system in production, is not a typical pace for design systems work at this scale.

Operating in a hybrid capacity as both production designer and front-end developer made the handoff significantly faster than a traditional design-to-engineering process. Being able to ship components myself and understand the code being written meant the gap between spec and implementation collapsed — there was no translation layer, no back-and-forth waiting on interpretation. The system I built in Figma was the same system I implemented on the front-end, and that compression is what made the timeline possible.

Screenshots and GIFs showcasing components, specs, and templates from my work on the Horizon Mobile Design System.