Design Systems
Building scalable visual systems that connect design, brand, and code.
.png)
Key Features
Team Input
Worked with the Growth and Executive teams to design a system that mirrored how they operate, across Figma, the CRM, and live products.
Components and Variables
Built flexible, AI-readable components mapped to shadcn/ui so they stay consistent across dashboards, forms, and marketing pages. Tokens for color, type, and spacing keep the platform coherent from design to code.
Added Delight
Developed a modular illustration and graphics system that other teams can easily adapt for reports, presentations, and social content.
Bridging design, data, and development with one shared system.
Key Features
Team Input
Collaborated with the Growth and Executive teams to design a system that matched how they actually work with fast iterations, clear handoffs, and shared ownership.
Components and Variables
I developed flexible components and variables that brought consistency across the site, making it easier to manage and update while ensuring a cohesive user experience.
Added Delight
I made a cohesive illustration and motion system that brought warmth and delight back to the Idealist platform. These playful yet professional visuals made the site more inviting and enjoyable.
Code (Chromatic/Storybook)
To streamline design-to-development workflows, I collaborated with developers to integrate Figma variables into Storybook. This allowed us to seamlessly bridge the gap between design components and code, ensuring consistency across the entire platform. By incorporating Figma variables, we enhanced our design system's flexibility and made it easier for developers to access, implement, and maintain UI components directly from Storybook.
AI Compatible Design System
Role
Lead Lead UX + Product Designer at Catalyst Exchange
Problem
As a design team of one, I needed a way to collaborate with product and engineering while keeping pace with rapid iteration.
Solution
Built a unified AI-compatible design system based on shadcn/ui, structured so both people and AI tools like Figma Make could read and use easily.
.png)
Custom
Design System
Role
Lead Designer at Idealist.org
Problem
Idealist's jobsite lacked a cohesive design, resulting in inconsistent components across the site making it challenging for developers to be efficient.
Solution
I documented and solidified the brand system, including color schemes, typography, and layout templates, to unify the brand’s visual language. This system was applied across site and print assets.