Case studies

Energy Sector

Design System
Multi-brand

Figma Variables 3-layer Tokens Multi-brand Workshops

Challenge

An energy company had a parent brand and two sub-brands with very distinct visual identities and no shared DNA. There was no consistency and no natural connection back to the root brand.

The client's goal was clear: maintain the distinction between the three brands, while making any of them instantly recognisable as part of the same family.

  1. Three brands with no shared visual DNA

  2. No tokens with inheritance between brands

  3. Duplicated components with no shared reference system

  4. No defined or documented accessibility criteria

FigJam board from the strategy workshop: sections covering What is a Design System, Why Now, Vision and Objectives, and Success Criteria — with participant stickies and annotations
Workshop 1 — Strategy and alignment
FigJam board from the identity workshop: mission, values, personality, target audience and unique value proposition for the three brands, organised in columns by brand
Workshop 2 — Identity and requirements of the three brands

My Role

  • Strategic alignment workshops (2 sessions)
  • Brand audit and design audit across all three brands
  • Benchmarking design systems in the energy sector
  • Building the multi-brand design system from scratch
  • Defining foundations: colour, typography, spacing, grid, effects and logos
  • Component documentation with best practices and per-component accessibility guidelines

Discovery &
Research

Two structured workshops with the client before any system decisions:

  1. Strategy and alignment

    Vision, success criteria, technical feasibility of multi-branding, needs identification and immediate action plan.

  2. Identity and requirements

    Deep dive into each brand's identity, context analysis and needs validation to inform design system creation.

Complemented by three audits:

  • Brand audit across all three brands
  • Design audit of each brand's existing websites
  • Benchmarking 3 design systems in the energy sector
SEL Design System colour system: Primary Dark Teal, Primary Blue, secondary, Accent, and EDGE and REEF palettes with tone scales from 50 to 950 and WCAG contrast values
Foundations — colour system with 3 brands and semantic colours
Component library: cards in loading and empty states, composition chart cards, comparison and distribution cards, information and action cards with Primary, List and KPI variants, and usage examples with real photography
Component library — cards with variants and states
Button component documentation: Primary, Secondary, Ghost, Link and Destructive types; SM, MD and LG sizes; Default, Hover, Pressed, Focus, Disabled and Loading states; icon support; brand variants for SEL, EDGE and REEF; anatomy, best practices and WCAG accessibility guidelines
Documentation — Buttons with per-component accessibility guidelines

Design Decisions

Tokens organised in three layers: global (base values), alias (semantic mapping) and component (specific use). The parent brand defines the foundations; sub-brands inherit and override only what is necessary.

Foundations built from scratch for all three brands:

  • Colour
  • Typography
  • Spacing
  • Grid and breakpoints
  • Effects
  • Logos

Outcome & Impact

  • Coherent multi-brand design system with 3-layer token inheritance
  • Three distinct brands, instantly recognisable as a family
  • Zero duplicated components: inheritance guaranteed by tokens
  • Complete documentation with best practices and per-component accessibility criteria
  • A single reference system for all three brands, eliminating ad-hoc component decisions during development