Para todos os produtos Mobiis
Mobiis Design System (MDS)
Uma só linguagem para todos os nossos produtos.
←→ navegam · arraste as peças para girar
Bom dia a todos. Hoje vou apresentar o Mobiis Design System, o MDS, que já está publicado e aberto para qualquer pessoa da empresa. Guardem este endereço: design.mobiis.com.br — vou voltar a ele no final.02 O problema
Sem Padrão, Cada Tela Nasce de um Jeito
- Tela ASalvarSalvar
- Tela BSALVARSalvar
- Tela Csalvar dadosSalvar
- Inconsistência entre produtos
- Retrabalho a cada nova tela
- Entregas mais lentas
03 O que é
Um Kit de Peças Padronizadas para Criar Produtos
Um conjunto único de regras, peças e orientações que todos usam para criar as telas da Mobiis.
Uma definição, várias tecnologias
Peças reais do mds-styles
Como um kit de LEGO: as peças já existem e se encaixam. Qualquer pessoa monta algo coerente.
Pensem num kit de LEGO: as peças já vêm prontas, têm o mesmo encaixe e qualquer pessoa consegue montar algo que faz sentido. O Design System é isso para os nossos produtos. Esses botões, badges e o campo aqui são os componentes de verdade, com o CSS do mds-styles. E um ponto importante: o MDS são as definições — cores, espaços, regras e diretrizes —, não uma tecnologia. Delas saem a biblioteca de componentes do Figma, usada por quem desenha, o mds-style, de HTML e CSS, que é a base do mds-angular, e os temas para PrimeFaces, MUI e Tailwind. Passem o mouse em cada uma para ver a torre dela, construída sobre a mesma base; um clique abre a página dela no site.04 O que existe dentro
Quatro Pilares, Tudo em um Só Lugar
O site tem quatro partes, uma para cada torre ao lado. Os fundamentos são a base visual: cores, letras, espaços e ícones. Os componentes são as peças prontas, as diretrizes explicam como montar e escrever as telas, e os princípios dizem por que fazemos as coisas desse jeito.05 Princípios de design
Quatro Princípios Guiam Cada Tela
Quando duas regras conflitam: Clareza › Consistência › Objetividade. E antes de tudo, confirme que o problema é o certo.
06 Diretrizes da interface
Regras Claras para Montar e Escrever Telas
Tudo reunido na página Diretrizes da interface do usuário (abre em nova aba).
Princípios de Design
Explicam por que decidimos como decidimos: a forma de pensar que vale para qualquer tela, inclusive as que ainda não existem.
“Você não pode apenas perguntar aos clientes o que eles querem e depois tentar dar isso a eles. Quando você terminar de construir, eles querem algo novo.”
Diretrizes
Dizem como aplicar esse raciocínio em situações concretas: o que escrever, qual componente usar, como a interface deve se comportar.
07 Contraste
Contraste Medido como o Olho Enxerga
Todo par de texto e fundo do MDS é testado pela APCA, um cálculo que mede o contraste como o olho percebe. Ele considera o tamanho e o peso da letra e se o texto é escuro sobre claro ou claro sobre escuro. Quanto maior o Lc, a nota da APCA, maior o contraste.
Teste um par de cores
Carga 4821 em trânsito
Previsão de entrega: 14:30 · Doca 3
- Texto corrido · mínimo Lc 75Aprovado
- Rótulos e botões · mínimo Lc 60Aprovado
- Títulos grandes · mínimo Lc 45Aprovado
- Exemplo no campo e ícones · mínimo Lc 30Aprovado
No MDS, a cor do texto sobre cada cor de fundo já vem definida e é escolhida pela APCA.
A APCA é a base proposta para a próxima versão do WCAG, o padrão internacional de acessibilidade. O MDS também considera tema claro e escuro, a cor da marca de cada cliente, foco visível e informação que não dependa só da cor.
Um cuidado central no MDS é o contraste. Usamos a APCA, um cálculo mais novo que mede o contraste como o olho percebe: leva em conta o tamanho da letra, o peso e se o fundo é claro ou escuro. Arrastem o controle da cor do texto, que percorre os tons do nosso primary: quanto maior o contraste, mais as letras saltam da parede ao lado; quando ele cai, elas se apagam. Troquem para o fundo escuro e parem no Primary claro: o WCAG 2 aprova esse par, a APCA não. Agora o contrário: no Fundo Primary, cliquem em "Usar o Padrão". É o texto do nosso botão principal. O WCAG 2 reprovaria, a APCA aprova para botões. É aí que ela faz diferença.08 Inteligência artificial
Um Design System que a IA Entende
O MDS é escrito para pessoas e para máquinas: a IA consulta as regras antes de gerar uma tela e usa a auditoria do MDS para conferir o que gerou.
As regras do MDS num só arquivo, que qualquer IA lê: Claude, Cursor, AI Studio, Lovable.
Como usar: Cole na conversa ou deixe na raiz do projeto.
Ver o DESIGN.md (abre em nova aba)699 classes reais, lidas do código: a IA não inventa peça.
Como usar: Vem como skill no pacote @mobiis/mds-style.
44 regras que a IA usa para revisar o próprio código antes de entregar.
Como usar: Servidor MCP mds-style, no Claude Code ou no Cursor.
Textos de tela em pt-BR, no padrão de escrita do MDS.
Como usar: No site ou como agente de UX writing na sua IA.
Abrir o Assistente (abre em nova aba)No mds-angular, a IA já vem pronta
- ng add @mobiis/mds-angular conecta a IA do projeto ao MDS: skills e servidores MCP.
- Do Figma para a página: o comando /mds:pagina monta a tela em Angular com os componentes reais.
- Conferência a cada edição: o plugin valida a API dos componentes e as regras de design.
- Revisar e migrar: /mds:revisar e /mds:migrar trazem telas antigas para o MDS.
Nosso objetivo
ConsistênciaEficiênciaQualidade
Em todos os produtos da Mobiis.
Se for para lembrar de uma coisa só, é esta. O Design System existe para que todos os nossos produtos sejam consistentes, construídos com eficiência e com qualidade. Tudo o que vimos até aqui serve a esses três objetivos — as peças, juntas, formam um todo.10 Benefícios
Ganhos que Toda a Empresa Sente
Na prática, isso vira cinco ganhos — um para cada coluna ao lado. A marca fica igual em todo lugar, entregamos mais rápido porque não começamos do zero e paramos de refazer decisões já tomadas. As telas ficam mais acessíveis, e design e engenharia passam a falar a mesma língua.11 Benefício por área
Cada Área Ganha Algo Concreto
Produto e Design
Mais tempo para o problema, menos para pixels.
12 Como acessar e participar
Acesse, Use e Ajude a Melhorar
Aponte a câmera do celular
- Comece pela seção “Comece aqui”
- Dúvidas e sugestões: preencha o formulário (abre em nova aba)
- Responsável: José Orlando Sousa (jose.sousa@mobiis.com.br)