Casos de estudo

Setor da Energia

Design System
Multi-brand

Figma Variables Tokens 3 camadas Multi-brand Workshops

Contexto

Uma empresa do setor da energia tinha uma marca principal e duas sub-marcas com identidades visuais muito distintas entre si. Faltava consistência e uma ligação natural à marca raiz.

O objetivo do cliente era claro: manter a distinção entre as três marcas, mas que qualquer pessoa as reconhecesse imediatamente como pertencentes à mesma família.

FigJam board do workshop de estratégia: secções de O que é um Design System, Porquê Agora, Visão e Objectivos, e Critérios de Sucesso, com stickies e anotações dos participantes
Workshop 1 — Estratégia e alinhamento
FigJam board do workshop de identidade: missão, valores, personalidade, público-alvo e proposta única de valor para as três marcas, organizados em colunas por marca
Workshop 2 — Identidade e necessidades das três marcas

O meu papel

  • Condução de workshops de alinhamento estratégico (2 sessões)
  • Brand audit e design audit às três marcas
  • Benchmark de design systems no setor da energia
  • Criação do design system multi-brand de raiz
  • Definição das foundations: cores, tipografia, espaçamento, grid, efeitos e logos
  • Documentação de boas práticas e acessibilidade por componente

Principais desafios
identificados

  1. Três marcas sem ADN visual partilhado

  2. Ausência de tokens com herança entre marcas

  3. Componentes duplicados sem sistema de referência comum

  4. Sem critérios de acessibilidade definidos ou documentados

Descoberta

Dois workshops estruturados com o cliente antes de qualquer decisão de sistema:

  1. Estratégia e alinhamento

    Visão, critérios de sucesso, validação da viabilidade técnica do multi-branding, identificação de necessidades e plano de ação imediato.

  2. Identidade e necessidades

    Aprofundamento das identidades das três marcas, análise de contexto e validação de necessidades para informar a criação do design system.

Complementado com três auditorias:

  • Brand audit às três marcas
  • Design audit aos sites existentes das três marcas
  • Benchmark de 3 design systems no setor da energia

Arquitetura do sistema

Tokens organizados em três camadas: global (valores base), alias (mapeamento semântico) e component (uso específico). A marca principal define as foundations; as sub-marcas herdam e sobrepõem apenas o necessário.

Foundations criadas de raiz para as três marcas:

  • Cores
  • Tipografia
  • Espaçamento
  • Grid e breakpoints
  • Efeitos
  • Logos
Sistema de cores SEL Design System: paletas Primary Dark Teal, Primary Blue, secundárias, Accent, e paletas EDGE e REEF com escalas de tom de 50 a 950 e valores de contraste WCAG
Foundations — sistema de cores com 3 marcas e cores semânticas
Biblioteca de componentes: cards em estados loading e empty, cards de gráficos de composição, comparação e distribuição, cards de informação e acção com variantes Primary, List e KPI, e exemplos de aplicação com fotografias reais
Biblioteca de componentes — cards com variantes e estados
Documentação do componente Button: tipos Primary, Secondary, Ghost, Link e Destructive; tamanhos SM, MD e LG; estados Default, Hover, Pressed, Focus, Disabled e Loading; suporte a ícones; variantes por marca SEL, EDGE e REEF; anatomia e boas práticas; guidelines de acessibilidade WCAG
Documentação — Buttons com guidelines de acessibilidade por componente

Resultado

  • Design system multi-brand coerente, com herança de tokens em 3 camadas
  • Três marcas distintas mas imediatamente reconhecíveis como família
  • Zero componentes duplicados: herança garantida por tokens
  • Documentação completa com boas práticas e critérios de acessibilidade por componente

O que este
projeto demonstra

  • Capacidade de conduzir o processo completo: descoberta, estratégia e entrega
  • Profundidade em arquitetura de design systems e tokens multi-brand
  • Pensamento sistémico aplicado a problemas reais de identidade de marca