Skip to main content
O sistema de design do Fixr é projetado para ser uma base sólida e versátil para o gerenciamento visual de todas as interfaces do aplicativo, focando em consistência, simplicidade e clareza. A marca Fixr usa principalmente tons de azul para representar confiança e tecnologia, além de uma paleta de cores de suporte para textos, fundos e comunicação de alertas.

Cores Primárias

A identidade visual do Fixr gira em torno de tons de azul que representam o núcleo da marca. Essas cores são usadas em botões, cabeçalhos e outros elementos principais da interface, transmitindo um senso de confiabilidade e profissionalismo.

Exemplo das cores primárias em botões e cabeçalhos

Cores de Texto e Fundo

O sistema de design inclui cores neutras para textos e fundos, assegurando legibilidade e acessibilidade em todos os temas do aplicativo. Tipicamente, o texto é apresentado em cinza escuro ou preto sobre fundos brancos ou cinza claro, para garantir contraste e leitura fácil. Elementos visuais secundários, como bordas ou divisores, seguem uma paleta neutra para manter o foco no conteúdo.

Paleta de cores neutras para texto e fundo

Cores de Comunicação

Para garantir que a comunicação visual seja clara e eficiente, o Fixr utiliza um esquema de cores padrão para mensagens de erro, alertas e sucesso. Essas cores ajudam os usuários a identificar rapidamente o status das ações realizadas no aplicativo.
  • Erro: Vermelho, usado em mensagens de erro ou campos de formulário inválidos.
  • Alerta: Amarelo, aplicado em avisos e alertas críticos.
  • Sucesso: Verde, usado para confirmações de ações bem-sucedidas.

Exemplo das cores de comunicação: erro, alerta e sucesso

Versatilidade do Sistema de Design

A marca Fixr pode aproveitar esse sistema de design para adaptar a interface a diferentes plataformas e tamanhos de tela. A flexibilidade das cores e dos estilos visuais permite que o Fixr mantenha sua identidade em uma variedade de contextos, garantindo uma experiência visual consistente para os usuários.
Para mais informações sobre como esse sistema de design é implementado em diferentes componentes da interface, consulte os exemplos de Telas e Componentes. figma_preview

Veja o protótipo no Figma!

Acompanhe as alterações nas telas da aplicação, no sistema de design, nos wireframes e mais!