Design Systems
Brandly Design System
My Contributions
I designed and implemented Brandly, a scalable multi-theme design system for Brandable’s ecommerce portfolio. My work included defining grids, typography, color systems, and reusable components while ensuring flexibility for diverse brand personalities. I also created developer documentation and a CSS framework to streamline collaboration, accelerate launches, and reduce design rework.
Role
UI/UX Designer, Brandable Inc.
2019-2020
Beverly Hills, CA
Services
Component library, Documentation, CSS framework
The Challenge
About Brandable
Brandable, Inc., a Beverly Hills–based consumer packaged goods firm, develops products across five unique verticals: food, wellness, pets, toys, and home. They create relevant, impactful brands that improve everyday life—all within a fast-paced, startup-driven environment.
A Multi-Themed Approach
To ensure structure and scalability across its growing portfolio, Brandable needed a unified yet flexible approach to its online presence. I created Brandly, a multi-theme design system built to power their ecommerce sites with intuitive, performance-driven UI solutions while honoring each brand’s distinct personality.
Execution
Foundation
A strong foundation ensures long-term stability. Since responsiveness and accessibility were top priorities, I implemented an 8px spacing system and 12-column grid for layouts, ensuring consistency across all brand sites. This framework enabled scalable, reusable components adaptable to any ecommerce experience.
Typography
While fonts varied by brand, I established a consistent typographic scale and hierarchy. This approach provided clarity and readability while allowing for brand-specific customizations within headers, body copy, and product details.
Color Palette
Each brand began with its own palette, but I extended these with system-wide functional colors—status indicators, grayscales, and tonal scales—to support digital needs such as form inputs, alerts, and interactive states.
Buttons
Buttons became a key expression of brand personality. I defined core states and variants while leaving attributes like corner radius and border width flexible, enabling a balance between structure and individuality.
Form Fields
Form fields, though utility-driven, offered another layer of brand expression. I aligned them with button design rules and built in customizable attributes to ensure consistency while reinforcing unique styling across sites.
Additional Components
Reusable modules like product cards and description blocks completed the system, providing building blocks that worked across all verticals regardless of product type or brand voice.
The Solution
By creating a flexible, pattern-based system, Brandable gained the ability to launch new brands and products faster, with less design rework and fewer stakeholder bottlenecks. Complete with developer documentation and a CSS framework, Brandly enabled scalability, efficiency, and brand authenticity across a diverse ecommerce portfolio.
Design Systems
Brandly Design System
My Contributions
I designed and implemented Brandly, a scalable multi-theme design system for Brandable’s ecommerce portfolio. My work included defining grids, typography, color systems, and reusable components while ensuring flexibility for diverse brand personalities. I also created developer documentation and a CSS framework to streamline collaboration, accelerate launches, and reduce design rework.
Role
UI/UX Designer, Brandable Inc.
2019-2020
Beverly Hills, CA
Services
Component library, Documentation, CSS framework
The Challenge
About Brandable
Brandable, Inc., a Beverly Hills–based consumer packaged goods firm, develops products across five unique verticals: food, wellness, pets, toys, and home. They create relevant, impactful brands that improve everyday life—all within a fast-paced, startup-driven environment.
A Multi-Themed Approach
To ensure structure and scalability across its growing portfolio, Brandable needed a unified yet flexible approach to its online presence. I created Brandly, a multi-theme design system built to power their ecommerce sites with intuitive, performance-driven UI solutions while honoring each brand’s distinct personality.
Execution
Foundation
A strong foundation ensures long-term stability. Since responsiveness and accessibility were top priorities, I implemented an 8px spacing system and 12-column grid for layouts, ensuring consistency across all brand sites. This framework enabled scalable, reusable components adaptable to any ecommerce experience.
Typography
While fonts varied by brand, I established a consistent typographic scale and hierarchy. This approach provided clarity and readability while allowing for brand-specific customizations within headers, body copy, and product details.
Color Palette
Each brand began with its own palette, but I extended these with system-wide functional colors—status indicators, grayscales, and tonal scales—to support digital needs such as form inputs, alerts, and interactive states.
Buttons
Buttons became a key expression of brand personality. I defined core states and variants while leaving attributes like corner radius and border width flexible, enabling a balance between structure and individuality.
Form Fields
Form fields, though utility-driven, offered another layer of brand expression. I aligned them with button design rules and built in customizable attributes to ensure consistency while reinforcing unique styling across sites.
Additional Components
Reusable modules like product cards and description blocks completed the system, providing building blocks that worked across all verticals regardless of product type or brand voice.
The Solution
By creating a flexible, pattern-based system, Brandable gained the ability to launch new brands and products faster, with less design rework and fewer stakeholder bottlenecks. Complete with developer documentation and a CSS framework, Brandly enabled scalability, efficiency, and brand authenticity across a diverse ecommerce portfolio.
Design Systems
Brandly Design System
My Contributions
I designed and implemented Brandly, a scalable multi-theme design system for Brandable’s ecommerce portfolio. My work included defining grids, typography, color systems, and reusable components while ensuring flexibility for diverse brand personalities. I also created developer documentation and a CSS framework to streamline collaboration, accelerate launches, and reduce design rework.
Role
UI/UX Designer, Brandable Inc.
2019-2020
Beverly Hills, CA
Services
Component library, Documentation, CSS framework
The Challenge
About Brandable
Brandable, Inc., a Beverly Hills–based consumer packaged goods firm, develops products across five unique verticals: food, wellness, pets, toys, and home. They create relevant, impactful brands that improve everyday life—all within a fast-paced, startup-driven environment.
A Multi-Themed Approach
To ensure structure and scalability across its growing portfolio, Brandable needed a unified yet flexible approach to its online presence. I created Brandly, a multi-theme design system built to power their ecommerce sites with intuitive, performance-driven UI solutions while honoring each brand’s distinct personality.
Execution
Foundation
A strong foundation ensures long-term stability. Since responsiveness and accessibility were top priorities, I implemented an 8px spacing system and 12-column grid for layouts, ensuring consistency across all brand sites. This framework enabled scalable, reusable components adaptable to any ecommerce experience.
Typography
While fonts varied by brand, I established a consistent typographic scale and hierarchy. This approach provided clarity and readability while allowing for brand-specific customizations within headers, body copy, and product details.
Color Palette
Each brand began with its own palette, but I extended these with system-wide functional colors—status indicators, grayscales, and tonal scales—to support digital needs such as form inputs, alerts, and interactive states.
Buttons
Buttons became a key expression of brand personality. I defined core states and variants while leaving attributes like corner radius and border width flexible, enabling a balance between structure and individuality.
Form Fields
Form fields, though utility-driven, offered another layer of brand expression. I aligned them with button design rules and built in customizable attributes to ensure consistency while reinforcing unique styling across sites.
Additional Components
Reusable modules like product cards and description blocks completed the system, providing building blocks that worked across all verticals regardless of product type or brand voice.
The Solution
By creating a flexible, pattern-based system, Brandable gained the ability to launch new brands and products faster, with less design rework and fewer stakeholder bottlenecks. Complete with developer documentation and a CSS framework, Brandly enabled scalability, efficiency, and brand authenticity across a diverse ecommerce portfolio.