Spectrify - Design system
A design system across two business verticals
Building one design system for two products serving different users, workflows, and business verticals. Spectrify enabled a shared foundation while keeping each product identity.
Industry :
Energy Tech
Role :
Product Design
Platform :
Web
Client :
Spectral Energy
Context :
Spectral has two products.
STELLAR - Asset management for wind farms and solar panels.
BRIGHTER - Building energy management for optimizing building energy use.
Problem :
Two products, two teams, no shared foundation
Users switching between products had to re-login, breaking their workflow.
Each team designer was building components for their own product.
Developers couldn't reuse code across products.
Prototyping was slow because nothing was standardized.
Solution :
Approach
The frontend team was already building both products in Vue.js. So we built Spectrify on top of Vuetify, a Vue component framework.
For icons we went with Pictogrammers. It's an extension of the Material icon library the team was already using, with 7,400+ icons.
We used Highcharts for complex data visualizations. As the products grew, we needed a charting library that could handle advanced charts out of the box.
Every component was documented and mapped 1:1 in Storybook, so developers had a single reference for what was built and how to use it.
Tokens
One design system, two products, three brand themes
We used semantic tokens so we didn't have to rebuild components for each product. Change the theme, the colors update automatically.
Every token follows the same structure:
{brand}-{category}-{property}-{role}-{name}
Foundations
Product Colors
Each product has its own brand color. STELLAR uses blue, BRIGHTER uses green, Spectral uses yellow. Everything else, text, backgrounds, status colors, is shared across all three.
Accessibility
All color combinations are tested against WCAG guidelines. Every background and color pairing in the system meets at least AA contrast ratio.
Typography
We used Inter Font, an open-source font designed for screen readability. Clean, highly legible at small sizes, and free. The right fit for a data-heavy product like STELLAR and BRIGHTER.
Shared Components
Components used across both products. Same structure, same interaction patterns, different brand color.
Navigation
Same rail menu and secondary navigation in both products. When a user switches from STELLAR to BRIGHTER, the layout feels identical. Only the brand color and the page content change.
Page header
One component, two products. Breadcrumbs, title, tabs, filters, and actions all in the same place, regardless of which product you're in.
Organization switcH
The organization switcher lives in the top left, showing the current org's logo so users always know which account they're in. Switching organizations stays within the same product.
Products switch
Switching products is a bigger action. It changes the user's account context entirely. So we placed the product switcher at the product level, separate from the org switch. Users can move between STELLAR and BRIGHTER without re-logging in.
Outcome :
Spectrify shipped as the shared foundation across all Spectral products. STELLAR, BRIGHTER, Orbit, and Prism all pull from the same component library and token system.
Users can now switch between STELLAR and BRIGHTER without re-logging in.
Designers across both teams work from the same component library. No more rebuilding the same components twice.
Every component was mapped 1:1 to Storybook in collaboration with the dev team, making sure what was designed matched exactly what was built.
Developers reuse components across products, cutting duplication significantly.
Prototyping got faster. New screens can be assembled from existing components rather than built from scratch.
What we didn't solve
Figma's variable system only supports three modes at the time of building Spectrify. So couldn't include a light mode as this would require two more brand themes
