> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fixr.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Sistema de Design

> Princípios de design aplicados para garantir uma interface amigável e uma boa experiência do usuário.

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.

<Frame caption="Exemplo das cores primárias em botões e cabeçalhos">
  <img src="https://mintcdn.com/fixr/CjsYTFpJxZqxd5Uf/public/images/colors_primary.png?fit=max&auto=format&n=CjsYTFpJxZqxd5Uf&q=85&s=bfe60690167ed9b0ca87abeeb3958654" width="2880" height="1162" data-path="public/images/colors_primary.png" />
</Frame>

## 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.

<Frame caption="Paleta de cores neutras para texto e fundo">
  <img src="https://mintcdn.com/fixr/CjsYTFpJxZqxd5Uf/public/images/colors_shades.png?fit=max&auto=format&n=CjsYTFpJxZqxd5Uf&q=85&s=c914205708d65f3a6ccd6416a0613080" width="2880" height="1290" data-path="public/images/colors_shades.png" />
</Frame>

## 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.

<Frame caption="Exemplo das cores de comunicação: erro, alerta e sucesso">
  <img src="https://mintcdn.com/fixr/CjsYTFpJxZqxd5Uf/public/images/colors_communication.png?fit=max&auto=format&n=CjsYTFpJxZqxd5Uf&q=85&s=38074cfad8ce27ffcf76929bcbb8bda0" width="2880" height="1530" data-path="public/images/colors_communication.png" />
</Frame>

## 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.

<Frame>
  <img src="https://mintcdn.com/fixr/CjsYTFpJxZqxd5Uf/public/images/logocolors.png?fit=max&auto=format&n=CjsYTFpJxZqxd5Uf&q=85&s=3b8c62856b352ab386f3561fbe33e053" width="2560" height="1440" data-path="public/images/logocolors.png" />
</Frame>

Para mais informações sobre como esse sistema de design é implementado em diferentes componentes da interface, consulte os exemplos de [Telas e Componentes](/modelo/interface/telas).

<Card title="Veja o protótipo no Figma!" img="https://mintcdn.com/fixr/CjsYTFpJxZqxd5Uf/public/images/figma_preview.png?fit=max&auto=format&n=CjsYTFpJxZqxd5Uf&q=85&s=43343392762c80dc44c713e54bc5b021" href="https://www.figma.com/design/IECYvToOBshaShNi7LtNwc/Fixr?node-id=16-185&t=6K7hhycmSNyXjswf-1" width="1916" height="990" data-path="public/images/figma_preview.png">
  Acompanhe as alterações nas telas da aplicação, no sistema de design, nos wireframes e mais!
</Card>
