Guia de estilo/cor
Paleta principal
A paleta principal define a base da marca. As cores primárias estabelecem identidade. Os neutros fazem o trabalho pesado.
A contenção cria impacto.
#f5f5f5
#121212
#1a1a1a
#b3b3b3
#777
#333
#111
#fff
#f7f7f7
#555
#888
#e0e0e0
#ffc700
#ffc700
Cores funcionais
As cores funcionais existem para comunicar o estado: sucesso, aviso, erro e foco. Eles devem ser instantaneamente reconhecíveis e usados de forma consistente.
Nunca reutilize cores funcionais para decoração.
- Ação primária
Nome: Accent Gold
Hex: #FFC700
Função: CTA primário, estados ativos, interações principais, ênfase, links.
Essa é a única cor que chama a atenção no sistema. - Secundário/Silenciado
Nome: Secondary Dark
Hex: #B3B3B3
Função: texto secundário, elementos de interface de usuário de suporte, ações menos proeminentes.
Usado para reduzir o peso visual sem remover a visibilidade. - Desativado/Espaço reservado
Nome: Placeholder Dark
Hex: #777777
Função: estados desativados, texto de espaço reservado, elementos inativos.
Sinaliza o status não interativo ou inativo. - Divisória/Estrutural
Nome: Divider Dark
Hex: #2A2A2A (aproximadamente do tom do divisor na imagem)
Função: Divisórias, bordas sutis, separação estrutural.
Fornece hierarquia sem competir com o conteúdo.
Taxas de contraste de acessibilidade
Todas as combinações de cores devem atender ou exceder os padrões de acessibilidade. Isso não é opcional.
A acessibilidade é uma linha de base, não um recurso.
Título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendia vários enim em eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Anean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendia vários enim em eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Anean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Marca versus uso de cores da interface do usuário
As cores da marca chamam a atenção. As cores da interface do usuário orientam o comportamento. Misturar os dois cria confusão.
A cor da marca e a cor da interface do usuário têm propósitos diferentes. Eles não são intercambiáveis.
A cor da marca comunica identidade.
A cor da interface do usuário comunica a função.
Eles devem permanecer separados.
Uso da cor da marca
O Accent Gold existe para representar a marca.
Use-o para:
- CTAs primários
- Navegação ativa
- Principais momentos de ênfase
- Links e destaques de interação
O ouro deve parecer intencional e raro. O uso excessivo reduz o impacto.
Nunca use a cor da marca para elementos estruturais.
Uso de cores da interface do usuário
Tons neutros alimentam a interface.
Use neutros para:
- Planos de fundo
- Seções
- Divisores
- Corpo do texto
- Elementos secundários
- Estados com deficiência
A cor da interface do usuário suporta legibilidade e hierarquia.
Nunca deve competir com a ênfase da marca.
Regras
- Não use ouro para blocos decorativos.
- Não use a cor da marca para erros ou estados do sistema.
- Não introduza novas cores sem atualizar o sistema.
- Se tudo é ouro, nada é importante.