AS
AS
Leading the revamp of the PLUS color system for users, developers, and designers
Designing a color system that works (and feels) better
Role
Design Systems Lead on a team of 4 designers
Duration
January - August 2025
Platform
PLUS, a tutoring platform supporting 5k+ students with 10k+ hours of learning and 200+ tutors
Impact
24 new color values, boosting AAA text accessibility from ~50% → 100%; 15% less design debt via consolidation
I redesigned 80% of PLUS’s color palette to improve accessibility, refresh the brand, and support design decisions for the team.
...affecting 200+ components across its design system..
...and 50 pages, for 200+ tutors and 3,000+ students.
This is how I led a revamp of PLUS’ color system.
01-Problem: A once-reliable color system was now holding the platform back.
The original PLUS color system, rooted in Material Design, had served the platform well. But as the platform evolved and designers rotated through the team, its limitations showed.
Primary and secondary colors clashed, the line between brand colors and neutrals blurred, and designers used colors interchangeably - creating inconsistent components and growing design debt. The platform was evolving, but color system wasn’t keeping up.
“What’s the difference between background and surface?”
“When do I use variant?”
“Are Tertiary and Info the same?”
“Which is the supporting color?”
Designers were often confused about color roles.
02-Process: Redesigning the color system through research and AI experimentation.
My process consisted of four phases:
AI-enabled prototyping
Team Workshop
Platform Audit
Handoff + Implementation
AI-enabled prototyping
Using ChatGPT, Claude, and Vercel v0, I explored 50+ palette directions, testing tonal combinations against PLUS’s evolving brand and simulating their behavior across components and states.
AI tools helped me generate a wide starting point of palettes to evaluate.
To test each palette, I implemented them across three key screens.
Team Feedback Workshop
I scored each palette against five criteria - contrast, accessibility, harmony, versatility, and brand tone - then simulated their use in key UI. Partnering with my manager, I shared the top contenders with the design team for feedback and an anonymous vote.
One palette rose to the top.
Platform Audit
BUT THEN, I noticed that even our strongest palettes didn’t meet contrast standards for text.
The current color scheme was not AAA accessible.
To balance brand expression with accessibility, I introduced a new text-specific color that achieved AAA contrast while allowing the rest of the palette to stay light and on-brand.
On Primary (Text) was introduced for all brand colors.
On Primary (Text) achieving AAA accessibility.
Handoff and Implementation
With the palette finalized, I led the system rollout alongside two designers. I created scoped color tokens with built-in guardrails, defined clear rules for when to use brand colors versus neutrals, and provided guidance for applying color to surfaces, states, and interactions. Together, we implemented the new system across more than 200 components and every screen on the platform.
Figma's scope feature places guardrails on color use.
Documentation for designers and developers.
03-Impact: From Experimentation to a complete overhaul.
The new system made color easier to use and trust, and it felt like a better reflection of the brand. Designers weren’t second-guessing anymore, tokens were clear, and the platform came together in a more cohesive way - closer to the PLUS we want to build.
10% decrease in color usage mistakes
200+
components updated
~50% to 100% improvement in AAA contrast
50+ updated screens
15% decrease in design system debt
2 designers guided on design systems
04-My Takeaways: Design systems teach you craft and empathy.
Design systems taught me to care about both the details and the people.
A few takeaway bullets:
Accessibility and brand can align when designed with purpose
AI tools can help, but they always need human judgment
A good system scales decisions while supporting the people behind the brand
Ashley Sánchez
Thanks for stopping by!
Ashley Sánchez
Thanks for stopping by!
Ashley Sánchez
Thanks for stopping by!
I redesigned 80% of PLUS’s color palette to improve accessibility, refresh the brand, and support design decisions for the team.
...affecting 200+ components across its design system..
...and 50 pages, for 200+ tutors and 3,000+ students.
This is how I led a revamp of PLUS’ color system.
01-Problem: A once-reliable color system was now holding the platform back.
The original PLUS color system, rooted in Material Design, had served the platform well. But as the platform evolved and designers rotated through the team, its limitations showed.
Primary and secondary colors clashed, the line between brand colors and neutrals blurred, and designers used colors interchangeably - creating inconsistent components and growing design debt. The platform was evolving, but color system wasn’t keeping up.
“What’s the difference between background and surface?”
“When do I use variant?”
“Are Tertiary and Info the same?”
“Which is the supporting color?”
02-Process: Redesigning the color system through research and AI experimentation.
My process consisted of four phases: (1) AI-enabled rapid exploration, (2) designer and stakeholder input to guide decisions, (3) a platform-wide audit to validate needs, and (4) final iteration and implementation across the platform.
2.1 AI-enabled rapid exploration
Using ChatGPT, Claude, and Vercel v0, I explored 50+ palette directions, testing tonal combinations against PLUS’s evolving brand and simulating their behavior across components and states.
2.2 Team + Stakeholder Input
I scored each palette against five criteria - contrast, accessibility, harmony, versatility, and brand tone - then simulated their use in key UI. Partnering with my manager, I shared the top contenders with the design team for feedback and an anonymous vote.
One palette rose to the top.
2.3 Platform-wide Audit
BUT THEN, I noticed that even our strongest palettes didn’t meet contrast standards for text. To balance brand expression with accessibility, I introduced a new text-specific color that achieved AAA contrast while allowing the rest of the palette to stay light and on-brand.
On Primary (Text) was introduced for all brand colors.
2.4 Final Implementation
With the palette finalized, I led the system rollout alongside two designers. I created scoped color tokens with built-in guardrails, defined clear rules for when to use brand colors versus neutrals, and provided guidance for applying color to surfaces, states, and interactions. Together, we implemented the new system across more than 200 components and every screen on the platform.
Figma's scope feature places guardrails on color use.
03-Impact: From Experimentation to a complete overhaul.
The new system made color easier to use and trust, and it felt like a better reflection of the brand. Designers weren’t second-guessing anymore, tokens were clear, and the platform came together in a more cohesive way - closer to the PLUS we want to build.
AAA contrast achieved for key text + UI
Mentored 2 designers
Updated 200+
components
04-My Takeaways: Design systems teach you craft and empathy.
Design systems taught me to care about both the details and the people.
A few takeaway bullets:
Accessibility and brand can align when designed with purpose
AI tools can help, but they always need human judgment
A good system scales decisions while supporting the people behind the brand
Launching a color system that designers, users, and developers can understand
Designing a color system that works (and feels) better
Role
Design Systems Lead
Duration
January - August 2025
Platform
PLUS, a tutoring platform supporting 3000+ students with 10k+ hours of learning
Team
1 manager, 4 design systems teammates
Impact
200+ redesigned component, 24 new color values