Context

A rebranding of the company required an update to the themes to bring the product in line with the brand. This required all of the colors to be revisited and gave me an opportunity to tighten up typography, spacing, and design tokens. I had made the last set of themes and had time to analyze customer adoption. This is a good time to apply those learnings to the new themes. There were four themes: Dark, Space, Dark Variant, Light, and Contrast, a Light variant with stronger contrast. Notifications are increasingly prominent in the UI and are limited by color and rules in the previous themes.

Problem

A new branding palette had been introduced, which needed to be applied to the color system. All of the logo usages also needed to be updated. Fonts also needed a stronger hierarchy. There were instances of styles only applied in a few places or were not consistent in size from screen to screen. A few of the themes have very low usage but continued to serve a practical purpose to be highly legible in some cases, like in rooms with bright light, projected surfaces, and contrast against other products.

Process

• Audit: Look at customer usage of the themes. Locate any color variables that are rare. Find all instances of font type styles and sizes and catalog their locations. Catalog all locations of the logo and variations. 
  
• Hypothesis Testing: Reduce the light theme to a single, higher-contrast theme. Dark theme and Space are the most important. Updating the type sizes and better hierarchy leads to a stronger understanding of information.
  
• Pivot & Rejection: Streamlining the approach, I rejected the initial plan to maintain all four themes, choosing instead to focus on purposeful utility. Mid-development, marketing introduced a new brand accent color amidst a palette of heavily saturated options. Because combining these high-intensity colors created visual clutter and hindered user focus, I transitioned to a single accent color to clearly direct attention to interactive controls and actionable objects.
  
• Iteration: Using color theory tools and the new branding palette, I created a foundational color spectrum using Illustrator and mapped colors to a color wheel. I started by building a unified light theme baseline, then derived the standard dark theme from it. Finally, I developed the customer-favorite “Space” theme by taking the dark baseline and adding higher saturation with blue and green undertones pulled directly from the brand spectrum.

Proposal

Update existing themes and reduce the light theme to a single highly legible theme. Reduce fonts used to make a balanced base-13 type ramp. Update variables to be consistent across the product. Apply base 13 grid to spacing variables. Update all colors and gradients, logos, and branding elements to be consistent across the UI. 

Result

Applying new branding to the existing design system provided the ideal opportunity to clean up fragmented styles and establish rigorous consistency across the product framework. Typography was thoroughly reorganized onto a strict proportional system; this improved legibility. This scales up to be the basis of a design grid for the whole UI and a clear content hierarchy. The UI feels more focused and optimized by eliminating obsolete styles, unifying interactive states, and establishing robust color standards—such as utilizing a single, unified color for actionable objects and clarifying multi-step flows—while maintaining full WCAG compliance. The modernized visual language ensures strong brand alignment across all touchpoints, seamlessly integrating the new logo and color palette into UI components, automated reports, marketing collateral, and third-party integrations.

Visual Results

On this screen, link colors are inconsistent. The grays were the basis of the background colors. The colors in the UI were not strongly linked to the overarching brand. Corner radiuses were also used inconsistently and at different sizes.

This original mapping of the color could be stacked better. The theme also established a convention where a modal not directly connected to a control or explainer text, such as a guide or notification, would use the opposite theme as a contrast to the background.

Type Audit

Went through the figma design system and every screen in the UI to check for custom styles and inconsistencies. I documented them and varified them and created a plan for development of which styles to fix first to get to the goal of a balanced type ramp.