Component Library Creation
Hydrow.com lacked a unified design system, leading to inconsistencies and slower workflows. Anticipating the need for scalability, I built a new component library in just two weeks, with robust accessibility states and a stronger, more resilient foundation across design and code. The true value of this work became clear a year later, when the system enabled us to roll out a full brand refresh in under a week.
Role
Lead Designer
Employer
Hydrow
Focus
Systems Design, Accessibility, Figma Component Creation
Platform
Web
I defined a type scale, color palette, and design variables in Figma, giving the site a set of solid building blocks that ensured consistency, scalability, and better accessibility across the site.
Process
Audit
I started by auditing the site’s colors, components, and text styles. The more I dug in, the more I realized just how out of sync the design library was with the live website.
Audit Establish Foundations
Primary color palette and button changes
Type variables, initially defined using a harmonious type scale that was adjusted for our use cases
In Practice
The robust design system I created has been a time saver on design and development sides, and a helpful set of constraints and consistent components for new projects.
Because it’s built on variables and with autolayout, the components are very flexible, enabling fast iteration.
Color variables, set with primitive and semantic values for easy swapping out
Audit Establish Foundations Build Components
I developed a comprehensive component library, now the backbone of all design and development work for almost two years. The library includes over 30 components, with detailed prototyped state changes at the component level—streamlining the handoff between design and development and improving the fidelity and functionality of page prototypes.
Accessibility Implications:
Sufficient padding between interactive elements
Clear treatments that pass color contrast requirements for different action states
Consistent header treatments across pages for better screenreader navigation
I defined a type scale, color palette, and design variables in Figma, giving the site a set of solid building blocks that ensured consistency, scalability, and better accessibility across the site.
Audit Establish Foundations Build Components Rebrand
The 2025 rebrand gave us a chance to redefine colors, typography, and the homepage. With the component library already in place, I updated the system and created preview pages in under two weeks, enabling faster brand alignment and more productive team discussions.
I was able to expand on the foundations, creating light and dark themes for background versatility that was needed for the new brand.
More Projects
Product Listing Page
Hydrow
Upholstery Vision
Wayfair
Accessibility Training
Wayfair