Quem se lembra do percurso de reconhecimento e afirmação da temática dos design systems nos últimos anos, por certo não poderá deixar de ficar espantado (e maravilhado) quando numa qualquer pesquisa online consegue encontrar tantos e tão bons exemplos de sistemas. Para além claro do aumento massivo de artigos sobre o tema nas comunidades de design, a quantidade de design systems, públicos e disponíveis para consulta que se consegue encontrar online não pode deixar de espantar qualquer curioso.
A par da quantidade é sobejamente evidente também a qualidade de muitos dos design systems disponíveis. Para além de um contributo importante para a comunidade que cada equipa faz ao partilhar o seu sistema de forma pública (todos nós nos inspiramos em alguma coisa) todos estes exemplos, são igualmente um contributo valioso para quem possa neste momento estar a começar este trabalho.
Alguns dos exemplos mais interessantes
A quantidade de exemplos disponíveis torna difícil perceber, pelo menos numa primeira análise, quais os design systems mais interessantes, isto se olharmos exclusivamente pela vertente da qualidade técnica e extensão do sistema. É certo que a dada altura a eleição dos “mais interessantes” terá tudo que ver com os critérios pessoais de quem tenta fazer essa seleção. Ainda assim, comparando as escolhas de uns e de outros, não será complicado encontrar alguns exemplos que se repetem e aí é que pode estar algum padrão interessante a ter em atenção.
Pessoalmente, se tivesse que responder à pergunta “Quais os design systems mais interessantes que conheces hoje em dia?”, confesso que a resposta daria algum trabalho. A par das referências recorrentes quando falamos de sistema de design, existem alguns outros exemplos que acredito que não merecem ser esquecidos numa lista do género.
Tentando elencar alguns dos exemplos mais interessantes de design systems atualmente na indústria, uns mais conhecidos que outros, a lista poderia muito bem incluir:
- Material Design (Google)
- Carbon Design System (IBM)
- Atlassian Design System (Atlassian)
- Polaris (Shopify)
- Global Experience Language (BBC)
- Spectrum (Adobe)
- Design (Goldman Sachs)
- Fiori Design Guidelines (SAP)
- Backpack (Skyscanner)
- Garden (Zendesk)
- Momentum Design (Cisco)
- Oxygen (Repsol)
- Lightning Design System (Salesforce)
- Lexicon (Liferay)
- Predix Design System (GE)

O mais interessante de cada exemplo
Por entre tantos, completos e interessantes exemplos poderá ser também importante tentar perceber em cada referência de design system, quais as suas mais-valias mais relevantes. Todas estas referências são sistemas bastante completos e que oferecem a quem os consulta visões muito evoluídas daquilo que pode ser um design system.
Ainda assim, analisando com mais detalhe, é possível encontrar em cada uma das referências, aspetos que tornam cada design system único e o diferenciam dos restantes.
Material Design (Google)
- Historicamente foi um dos primeiros grandes design systems da indústria;
- É um dos design systems mais completos que existem com toda a documentação pública;
- Disponibiliza recursos, plugins e materiais adicionais ao sistema (ícones, criador de paletas de cores, etc.);
- Instruções específicas para a criação de diferentes temas dentro do design system disponibilizando também exemplos de temas;
- Excelente documentação para área específicas como usabilidade e acessibilidade.
Carbon Design System (IBM)
- Documentação e utilização de escalas relacionadas para diferentes componentes do sistema (grelhas, tipografia, espaçamentos, etc.);
- Excelentes orientações para componentes de data visualization;
- Documentação de onboarding para designers e development bastante completa;
- Definição e partilha dos modelos de colaboração e envio de contributos para a evolução do design system;
- Excelente documentação de cada um dos componentes do sistema.
Atlassian Design System (Atlassian)
- Relação estrutural entre a marca e o design system;
- Orientações muito sólidas e concretas para a temática da acessibilidade;
- Recomendações para o desenho e utilização de ilustrações;
- Excelentes orientações para a escrita e criação de conteúdos;
- Documentação de componentes bastante completa mas muito simples.
Polaris (Shopify)
- Orientações para o trabalho e definição da arquitetura de informação dos produtos;
- Informação útil para a definição e criação de conteúdos;
- Documentação relevante de boas práticas para componentes de data visualization;
- Recomendações para a utilização do som nas experiências;
- Modelos interativos de cada um dos componentes do design system.
Global Experience Language (BBC)
- Publicação de artigos temáticos sobre os desafios do dia a dia de construção e utilização do design system e a sua relação com a disciplina de UX;
- Modelo de documentação de componentes simples e útil;
- Excelentes orientações relacionadas com as grelhas e as suas lógicas de construção;
- Utilização de família tipográfica própria em todo o sistema;
- Disponibilização de guias práticos tipo “how to” para determinadas tarefas ou atividades.
Spectrum (Adobe)
- Descrição detalhada do roadmap de evolução do sistema;
- Incorporação e documentação do conceito de design tokens;
- Orientações para o design bi-direcional de componentes;
- Documentação da solução de responsive e grelhas utilizadas no design system;
- Sugestões e checklists de boas práticas para a temática da acessibilidade.
Design (Goldman Sachs)
- Orientações para a escrita de mensagens;
- Excelentes recomendações e documentação sobre a utilização de grelhas;
- Detalhe da documentação de cada componente do sistema;
- Recomendações para a utilização do design system com o Figma;
- Exemplos práticos de utilização das definições de espaçamentos em componentes.
Fiori Design Guidelines (SAP)
- Informação de onboarding e overview geral de toda a proposta do design system;
- Documentação e clarificação da arquitetura do sistema;
- Definição de diferentes temas (theming);
- Orientações detalhadas e com exemplos para a dimensão de motion design;
- Descrição dos modelos e variações de navegação.
Backpack (Skyscanner)
- Definições e exemplos de utilização do tom de voz;
- Inventário detalhado de todos os design tokens do sistema;
- Disponibilização de várias versões dos componentes (web, react, etc.);
- Orientações de acessibilidade para developers;
- Família iconográfica bastante completa e gratuita;
Garden (Zendesk)
- Solução de documentação bastante simples mas interessante para sistemas mais circunscritos;
- Orientações para a escrita e criação de conteúdos;
- Listagem completa de palavras específicas utilizadas na escrita de conteúdos e mensagens;
- Modelos interativos de cada componente do design system;
- Detalhe do modelo de documentação dos componentes de botões.
Momentum Design (Cisco)
- Informação sobre os princípios e caraterísticas do design system;
- Definição da “personalidade” do próprio design system;
- Documentação dos design tokens do sistema;
- Biblioteca e opções de iconografia;
- Regras de utilização de cada um dos componentes do sistema.
Oxygen (Repsol)
- Modelo de documentação bastante simples e funcional;
- Apresentação dos conceitos essenciais e da arquitetura do sistema;
- Organização e documentação da paleta cromática;
- Diferentes versões e documentação de componentes para web e app;
- Modelos interativos de cada componente do sistema.
Lightning Design System (Salesforce)
- Descrição detalhada das atualizações do design system;
- Listagem completa de todos os design tokens do sistema;
- Documentação de boas práticas e recomendações para a acessibilidade;
- Diferentes tipos e modelos de iconografia;
- Desenvolvimento de plugin próprio para Sketch.
Lexicon (Liferay)
- Recomendações para a escrita de mensagens;
- Definição de padrões transversais para ações similares;
- Documentação bastante simples e completa de cada componente do sistema;
- Exemplos concretos de páginas com a utilização do design system;
- Estado da evolução de cada peça do sistema.
Predix Design System (GE)
- Mosaico visual de apresentação dos vários componentes do sistema;
- Documentação dos modelos de layout e grelhas possíveis;
- Recomendações para a criação de “empty states”;
- Modelo interativo e com as várias opções de cada componente;
- Documentação das várias aplicações da cor.
Mais exemplos para explorar
Quem trabalha em alguma das áreas do design, sabe que o trabalho de pesquisa é uma “never ending story”. Uma tarefa permanente e persistente para tentar encontrar e sistematizar as melhores e mais completas referências em cada um dos tópicos, muito relevantes para os desafios do dia a dia.
No caso dos design systems, mesmo podendo a partilha desta lista fornecer bastantes referências, é fundamental não circunscrever a pesquisa tão só a estas sugestões. Para completar todas as referências de design systems aqui sugeridas, poderás consultar esta colecção de Pinterest onde é possível encontrar muitos mais exemplos de sistemas.
Fotografia © Michael Dziedzic (Unsplash)