Design System
2025
Empresa
Motiva | Grupo CCR
Desafio
A Motiva é o maior grupo de mobilidade do Brasil e trabalha de forma colaborativa com diversos times, internos e externos, que atuam em diferentes projetos e criando soluções para as mais diversas finalidades, produtos e plataformas. Essa pluralidade frequentemente gera falta de consistência e ineficiência, aumentando prazos e custos.
Criamos então um Design System do zero, unificando design e código para atender a toda demanda do setor de tecnologia.
Fundamentos
Primitive Tokens
São definições primitivas do sistema, que contemplam cores, escalas numéricas e definições de tipografia. Apesar de não serem aplicadas diretamente nos componentes, são primordiais para a manutenção e escalabilidade e acessibilidade.
Alias Tokens
São definições e intenções de estilos, cores, grids, espaçamentos, bordas, fontes e outros. Eles são conectados e alimentados pelos tokens primitivos. Aqui também definimos temas e escalas que serão aplicados nas interfaces.
primitive
Colors
As cores primitivas desempenham um papel fundamental na criação de temas para as diversas linhas de negócio da companhia. Para isso, desenvolvemos uma paleta de cores ampla e versátil, que contempla tons neutros, cores de branding, feedback e auxiliares. Além disso, já definimos as correspondências para os temas claro e escuro, permitindo que, ao adicionar um tema via alias-tokens, os modos light e dark sejam automaticamente contemplados.
Numbers
Os valores primitivos numéricos compõem as escalas que alimentam diversas propriedades do nosso Design System, como espaçamentos, espessuras e arredondamento de bordas, além de tamanhos e ajustes tipográficos. Cada escala é baseada em um multiplicador específico, seguindo uma progressão lógica — como 1 em 1, 2 em 2, 4 em 4, 8 em 8 — garantindo consistência, modularidade e escalabilidade em todo o sistema.
Font
Apesar de muitas propriedades tipográficas serem definidas por valores numéricos, os tokens primitivos das fontes desempenham um papel essencial na versatilidade e na facilidade de manutenção do sistema. Eles contemplam as famílias e pesos das fontes, que, em conjunto com os valores numéricos, formam a base para a construção da escala tipográfica do Design System.
alias
Colors
Os alias-tokens de cor são alimentados pelas cores primitivas, mas sua principal função é atribuir intenção de uso ao aplicar cor nos componentes. Eles atuam como uma camada semântica, garantindo que as cores sejam utilizadas de forma consistente em todo o Design System. Além disso, facilitam a manutenção: ao alterar uma cor primitiva, todos os componentes associados ao alias-token correspondente são automaticamente atualizados.
Grids
O sistema de grids garante a responsividade das interfaces dos produtos digitais. Com quatro tamanhos de breakpoints, ele abrange aplicações para ambientes mobile, tablet e desktop. O grid se ajusta automaticamente de acordo com o dispositivo, otimizando tanto a usabilidade quanto a estética da interface em diferentes resoluções.
Width, height & gap
São definições padronizadas de largura, altura e espaçamento entre elementos, são essenciais para garantir a consistência no uso de grids aplicado aos componentes. Essa escala se alimenta do sistema primitivo de número múltiplo de 8, em que cada unidade de espaço equivale a 8 pixels.
Border width & radius
As definições de borda, alimentadas pelos tokens primitivos numéricos, atuam diretamente na composição e estilização dos componentes, pois influenciam diretamente na percepção visual e na identidade do produto. Trabalhamos com dois parâmetros principais: border-width (espessura da linha) e border-radius (arredondamento das bordas).
Effects
São definições de efeitos visuais como sombras, desfoques e estados de foco, que se alimentam dos tokens primitivos numéricos. Esses efeitos aprimoram tanto a usabilidade quanto a estética das interfaces, adicionando profundidade, destaque a elementos importantes e reforçando a interatividade. Além disso, contribuem para a acessibilidade, ao tornar mais evidente o comportamento dos componentes durante a navegação.
Type scale
Utilizando os tokens primitivos de fonte e valores numéricos, definimos a família tipográfica, peso, tamanho, espaçamento entre linhas (line-height), espaçamento entre letras (letter-spacing), transformações e decorações que compõem toda a escala tipográfica. Essa estrutura contempla diferentes níveis hierárquicos — como legendas, corpo de texto, rótulos e títulos — garantindo uma comunicação textual clara, coerente e harmônica em todas as interfaces.
Componentes
Depois de definir, configurar e documentar os fundamentos do nosso Design System — com base nas diretrizes de comunicação e nos requisitos técnicos de usabilidade e acessibilidade — demos início à construção dos componentes a partir de um inventário que mapeia os elementos existentes e as necessidades dos produtos.
Todos os componentes da biblioteca são globais e responsivos, podendo ser utilizados por qualquer time, plataforma ou produto da companhia. São desenvolvidos com base nas definições de Alias Tokens, o que permite uma adaptação ágil e facilita a manutenção.
Recursos
Variantes
Cada componente possui uma série de variantes de estado, tamanho e configurações específicas, definidas de acordo com suas necessidades de uso. Essas variantes seguem uma lógica de apresentação, tanto para os times de design quanto de tecnologia, facilitando a manipulação e aplicação dos componentes. Essa estrutura amplia as possibilidades de uso, tornando o Design System mais dinâmico, sem abrir mão da consistência visual e funcional.
Assets
Contamos com uma ampla variedade de componentes de suporte, como ícones personalizados, bandeiras de todos os países, marcas de redes sociais e meios de pagamento, teclados, anotações e elementos voltados para acessibilidade. Esses recursos complementares são essenciais para a criação, documentação e padronização de fluxos e interfaces.
Documentação e Acessibilidade
Documentação
Cada componente é documentado com informações completas sobre sua construção, diretrizes de acessibilidade e modos de uso e aplicação. Atualmente, o conteúdo está centralizado no Figma para os times de design e no Storybook para o time de desenvolvimento. Como próximo passo na evolução do Design System, planejamos unificar toda a documentação em uma única plataforma — como Supernova ou Zeroheight — facilitando o acesso, a manutenção e a colaboração entre as equipes.
Acessibilidade
Toda a escala de tamanho e cor da tipografia aplicada aos nossos componentes segue rigorosamente as diretrizes de acessibilidade da WCAG. Garantimos áreas de clique com tamanho mínimo adequado nas interações, além de contemplar orientações específicas para leitores de tela, estados de foco visíveis para navegação via teclado, entre outras iniciativas. Essas práticas reforçam o compromisso com a inclusão e a usabilidade para todos os perfis de usuários.
Escalável,
consistente,
responsivo,
adaptável,
dinâmico,
acessível
50
componentes
400
variantes
20
produtos e sites
Designers
Madson Agostini
Developers
Vitor Hidalgo
Kayo Elias
Wagner Santos
Coordenadação
Thiago Zarantoniello
Marcus Montezano
