Energyline Token Refactor

Project

Refactoring color tokens across 15 themes to improve maintainability, support light and dark modes, and make accessible UI decisions easier to implement.

Goals

Create a semantic token system that scales across products and themes
Reduce complexity by removing duplicate and unused values
Achieve WCAG AA accessibility compliance
Establish a foundation for future themes, including dark mode

The challenge

A growing system needed stronger foundations

The existing color-token structure made consistency, accessibility, and theme maintenance increasingly difficult.

The challenge was to simplify the underlying system while supporting 15 themes, light and dark modes, and more accessible interfaces.

80

existing tokens

15

themes

2

Modes: Light and dark

Contrast issues found in a single page:

Rethinking the system

From color values to meaningful roles

This separated color values from their purpose, making the system easier to maintain and adapt without managing every component individually.

I reworked the token structure to create a clearer relationship between base colors, semantic roles, and UI components.

Designing for multiple themes

One system, different appearances

I focused on keeping color roles consistent across themes and light and dark modes, while allowing their underlying values to adapt.

The goal was to preserve visual hierarchy and usability while making theme updates more predictable.

↳ Semantic tokens made dark mode easier to maintain by enabling theme-level changes without rebuilding components.

Accessibility by design

Fixing the system, not just the symptoms

I focused on identifying contrast issues and resolving them through the token system rather than relying solely on individual UI fixes.

The workflow combined contrast validation, suitable token alternatives, and visual review to support more accessible and consistent interfaces.

Migration and impact

Building a foundation for sustainable change

The refactor aimed to improve:

Collaboration

Clearer definitions for design and engineering.

Consistency

Clearer color usage across components and themes.

Maintainability

Simpler updates through semantic tokens.

Accessibility

An approach to identifying and resolving contrast issues.

~80 -> 40

color tokens

15

themes supported

2

Modes: Light & Dark

~20 → 0

Contrast issues per reviewed page

0

Duplicate or unused tokens retained

1

Semantic system