Logic-Driven Color Architecture
A token-driven, perceptually-balanced color system built at Optavise to scale accessibility across brands, themes, and clients automatically
Role:
Lead Designer, System Architect
Timeline:
2024-2025
Tools:
Figma, Antigravity, Storybook, HCT Color Picker, Stark Contrast Calculator
Outcome:
Architected a tonal-scale color system that bakes accessibility into the foundation rather than checking it per color. Because contrast is guaranteed by tonal value, the system supports automatic dark-theme generation, instant brand-swapping via a decoupled alias layer, and a repeatable framework for onboarding new clients — turning the color library from a maintenance burden into a strategic asset.
Modernize Color Library for SaaS Environment
The existing library couldn't flex to client branding without breaking accessibility. Every new client meant manual contrast checking and one-off color decisions, a process that didn't scale.
Legacy Library Integrating with Client Branding
The problem we were trying to scale for was that clients were given the option of having their logo and our company’s colors as the ‘Default’ option or they could choose to have their “Brand” color as the primary color.
Default
Perceptual Tones over Static Hexes
By assigning colors based on their tonal value rather than just their lightness, I ensured that any color in the system would maintain a predictable contrast ratio.
If a Neutral "Tone 80" passes accessibility against a Surface color, then a Brand "Tone 80" color will also pass.
System Integrity
We moved from "guessing at colors" to a logic-based taxonomy that ensures a cohesive user experience across all products.
Semantic naming system for core token library based on what a color DOES versus what it is.
“bkgd.brand.primary” vs “blue.500”
System Logic Behind the Figma Plugin
Used as a design tool or to validate with stakeholders. Carries 1:1 parity with code, so there is no change in what color would be generated.
Based on the color logic built in the plugin:
- Any color can be selected and tested within the designs on the fly
- Dark theme is automatically generated based on the original color
- Can swap hex code within the “primary” token in Figma
- Show Contrast rating for light and dark themes
- If contrast ratio is not met, show the closest alternative HEX color that meets accessibility.
Final Thoughts
Problem-Evolved
By shifting from measuring accessibility based only on HEX codes to a Perceptual Tonal Scale, and identifying breakpoints against our environment, I transformed our color system from a maintenance burden into a strategic asset. This architecture provides a repeatable framework for onboarding new clients and brands.
Standardized Accessibility
Contrast ratios are now "baked in" to the tonal scale, reducing manual QA time.
Themed Flexibility
The decoupled Alias layer allows for instant "dark mode" or brand-swapping without touching the core component logic.
Logic-Driven Color Architecture
A token-driven, perceptually-balanced color system built at Optavise to scale accessibility across brands, themes, and clients automatically
Role:
Lead Designer, System Architect
Timeline:
2024-2025
Tools:
Figma, Antigravity, Storybook, HCT Color Picker, Stark Contrast Calculator
Outcome:
Architected a tonal-scale color system that bakes accessibility into the foundation rather than checking it per color. Because contrast is guaranteed by tonal value, the system supports automatic dark-theme generation, instant brand-swapping via a decoupled alias layer, and a repeatable framework for onboarding new clients — turning the color library from a maintenance burden into a strategic asset.
Modernize Color Library for SaaS Environment
The existing library couldn't flex to client branding without breaking accessibility. Every new client meant manual contrast checking and one-off color decisions, a process that didn't scale.
Legacy Library Integrating with Client Branding
The problem we were trying to scale for was that clients were given the option of having their logo and our company’s colors as the ‘Default’ option or they could choose to have their “Brand” color as the primary color.
Default
Perceptual Tones over Static Hexes
By assigning colors based on their tonal value rather than just their lightness, I ensured that any color in the system would maintain a predictable contrast ratio.
If a Neutral "Tone 80" passes accessibility against a Surface color, then a Brand "Tone 80" color will also pass.
System Integrity
We moved from "guessing at colors" to a logic-based taxonomy that ensures a cohesive user experience across all products.
Semantic naming system for core token library based on what a color DOES versus what it is.
“bkgd.brand.primary” vs “blue.500”
System Logic Behind the Figma Plugin
Used as a design tool or to validate with stakeholders. Carries 1:1 parity with code, so there is no change in what color would be generated.
Based on the color logic built in the plugin:
- Any color can be selected and tested within the designs on the fly
- Dark theme is automatically generated based on the original color
- Can swap hex code within the “primary” token in Figma
- Show Contrast rating for light and dark themes
- If contrast ratio is not met, show the closest alternative HEX color that meets accessibility.
Final Thoughts
Problem-Evolved
By shifting from measuring accessibility based only on HEX codes to a Perceptual Tonal Scale, and identifying breakpoints against our environment, I transformed our color system from a maintenance burden into a strategic asset. This architecture provides a repeatable framework for onboarding new clients and brands.
Standardized Accessibility
Contrast ratios are now "baked in" to the tonal scale, reducing manual QA time.
Themed Flexibility
The decoupled Alias layer allows for instant "dark mode" or brand-swapping without touching the core component logic.
Logic-Driven Color Architecture
A token-driven, perceptually-balanced color system built at Optavise to scale accessibility across brands, themes, and clients automatically
Role:
Lead Designer, System Architect
Timeline:
2024-2025
Tools:
Figma, Antigravity, Storybook, HCT Color Picker, Stark Contrast Calculator
Outcome:
Architected a tonal-scale color system that bakes accessibility into the foundation rather than checking it per color. Because contrast is guaranteed by tonal value, the system supports automatic dark-theme generation, instant brand-swapping via a decoupled alias layer, and a repeatable framework for onboarding new clients — turning the color library from a maintenance burden into a strategic asset.
Modernize Color Library for SaaS Environment
The existing library couldn't flex to client branding without breaking accessibility. Every new client meant manual contrast checking and one-off color decisions, a process that didn't scale.
Legacy Library Integrating with Client Branding
The problem we were trying to scale for was that clients were given the option of having their logo and our company’s colors as the ‘Default’ option or they could choose to have their “Brand” color as the primary color.
Default
Perceptual Tones over Static Hexes
By assigning colors based on their tonal value rather than just their lightness, I ensured that any color in the system would maintain a predictable contrast ratio.
If a Neutral "Tone 80" passes accessibility against a Surface color, then a Brand "Tone 80" color will also pass.
System Integrity
We moved from "guessing at colors" to a logic-based taxonomy that ensures a cohesive user experience across all products.
Semantic naming system for core token library based on what a color DOES versus what it is.
“bkgd.brand.primary” vs “blue.500”
System Logic Behind the Figma Plugin
Used as a design tool or to validate with stakeholders. Carries 1:1 parity with code, so there is no change in what color would be generated.
Based on the color logic built in the plugin:
- Any color can be selected and tested within the designs on the fly
- Dark theme is automatically generated based on the original color
- Can swap hex code within the “primary” token in Figma
- Show Contrast rating for light and dark themes
- If contrast ratio is not met, show the closest alternative HEX color that meets accessibility.
Final Thoughts
Problem-Evolved
By shifting from measuring accessibility based only on HEX codes to a Perceptual Tonal Scale, and identifying breakpoints against our environment, I transformed our color system from a maintenance burden into a strategic asset. This architecture provides a repeatable framework for onboarding new clients and brands.
Standardized Accessibility
Contrast ratios are now "baked in" to the tonal scale, reducing manual QA time.
Themed Flexibility
The decoupled Alias layer allows for instant "dark mode" or brand-swapping without touching the core component logic.