O que é o MDS

O Mobiis Design System (MDS) é a linguagem visual por trás do ecossistema de logística da Mobiis — TMS, YMS, WMS, roteirização, rastreamento de frota e a assistente MIA. Quem usa essas telas no dia a dia é gente operacional: operador logístico, motorista, gerente de pátio, diretor de supply chain. Muita informação, tempo real, e nenhuma paciência para uma interface poluída.

A regra de ouro

Simplifique, e revele informação aos poucos. Mostre só o que importa pra ação do momento; deixe o sistema fazer o trabalho pesado e a pessoa no comando. Toda tela tem um objetivo principal — quanto mais opções na tela, mais tempo alguém leva pra decidir (é a Lei de Hick, e ela não perdoa).

Essa regra sozinha já resolve boa parte das dúvidas de “isso deveria estar aqui?”. Para o resto, os princípios completos estão em Diretrizes de Interface → Nossos Princípios.

Como o sistema é organizado

Três peças, cada uma com seu papel — se você não sabe onde procurar algo, comece por aqui:

• mds-styles — a definição do sistema em si, sem depender de framework nenhum: tokens em SCSS (--mds-*), HTML/CSS puro, e o Storybook de fundações e componentes em HTML. Este site mora aqui, porque é aqui que o design system é centralizado.
• mds-angular — um consumidor do mds-styles, não uma segunda fonte: a biblioteca de componentes Angular (@mobiis/mds-angular) e seu Storybook, com a API completa (inputs/outputs) de cada componente.
• Notion — onde moram as regras de uso escritas: o que cada componente faz, quando usar (e quando não), variantes, e como escrever pra ele. Mais as diretrizes gerais de interface.

Como reconhecer o MDS no código

Todo componente segue BEM estrito com prefixo mds- (.mds-button, .mds-card__header). Fundações e utilitários — grid, spacing, texto — usam nomes mais “limpos”, no estilo Bootstrap/Tailwind (.container, .gap--md), pra quem já conhece esse mundo se sentir em casa mais rápido. Prefixado ou não, tudo aponta pros mesmos design tokens (--mds-*), então a consistência visual não depende de decorar qual classe usa qual prefixo.

Multi-marca: o sistema atende vários tenants trocando só a cor primária, via [data-primary="..."] no elemento raiz — sem o atributo, cai no padrão, que é brand-mobiis. A lista completa de tenants está em Cores.