Devido a falta de padronização e ao crescimento de demandas em softwares e sistemas, viu-se a preocupação em iniciar um design system para escalabilidade visual nos produtos.

Roboto foi a tipografia selecionada devido a sua fácil renderização na web e por ser uma fonte gratuita no google fontes, num total de 10 tamanhos diferentes para abranger diferentes usos, como sistemas web e mobile. Left, Centred e Right, branco com cinza, preto e azul foram as cores utilizadas.

Colors 

As cores trabalhadas são as já utilizadas no branding da empresa, com adicional de tons mais escuros para gerar acessibilidade em contraste, foi realizado testes de contraste em todos os tons adicionados.

Seguindo padrões de atomic design com definições de 4pt, facilitando a escalabilidade e abrangendo diversos tipos de grid.

Opções de botões square e rounded em fill e border, com ou sem sombra, com ou sem ícone com ou sem gradiente, para abranger diversos usos e situações. O texto nos botões são centralizados verticalmente e alinhados com base na grid de 4pt, ou seja, entre 8px a 16px de alinhamento horizontal. Se houver ícone nos botões, há uma separação de 4px entre o ícone e o texto. Atualmente foi fixado o uso dos botões quadrados com cantos arredondados em 4pt.

Foi seguido a linha de interações nos botões como no bootstrap, com enable, disable, hover, pressed e focused.

De acordo com regras de acessibilidade, o ideal é que tenha título e placeholder fiquem em lugares distintos para facilitar pessoas com dificuldades visuais no preenchimento e leitura de inputs e informações.