SISTEMA VISUAL

Cores.

Nossa paleta dinâmica: do Laranja Energético à profundidade do Roxo Criativo.

As cores da Mandalla são ferramentas de comunicação emocional e técnica. Nosso sistema é baseado em escalas de luminosidade que permitem flexibilidade total, garantindo sempre acessibilidade e alto impacto visual.

Laranja Coral

Ação & Energia

O **Laranja Coral (Terra Quente)** simboliza energia, transformação e ação social. É a cor que impulsiona o movimento regenerativo e a força da comunidade em territórios brasileiros.

10#FFF0EC
20#FFE1D9
30#FFD3C6
40#FFC5B3
50#FFB7A1
60#FFA88E
70#FF9879
80#FF8A68
90#FF7B54
100#FF6C40

Roxo Soft

Criatividade & Alquimia

O **Roxo Soft (Violeta)** simboliza inteligência, inovação e imaginação estratégica. É a cor da comunicação que conecta pensamentos complexos a soluções sensíveis.

10#F4F0FB
20#E9E1F7
30#DED3F0
40#D3C5E9
50#C7B7E2
60#BCA8DB
70#B399DB
80#A789D4
90#9C7CCD
100#926ECC

Turquesa

Equilíbrio & Impacto

O **Turquesa (Verde Água)** simboliza a natureza, o equilíbrio e a regeneração. É a cor que acalma, cura e restaura a integridade dos ecossistemas e territórios.

10#EDF7F6
20#DBEFED
30#C9E8E6
40#B7DFDD
50#A5D7D3
60#93CEC9
70#81C9C4
80#6FC0BA
90#5DB7B1
100#4CB2AB

Neutros

Estrutura & Wireframe

A escala de Cinzas (Grayscale) é essencial para a infraestrutura das nossas páginas. Eles constroem a fundação limpa do "Wireframe" do Lab (bordas pretas, fundos técnicos), permitindo que o foco permaneça na informação enquanto garante organização e hierarquia tipográfica sólida.

10#F4F4F4
20#E0E0E0
30#C6C6C6
40#AAAAAA
50#8D8D8D
60#777777
70#525252
80#333333
90#161616
100#000000

Acessibilidade (WCAG)

Garantimos o contraste mínimo de 4.5:1 para leitura.

Texto Branco: Usar apenas sobre passos 70 a 100.
Texto Preto: Usar sobre passos 10 a 50.

Texto Branco no Coral 100 — v Passou
Texto Preto no Coral 10 — v Passou

Gradientes Dinâmicos

Transições entre o tom vibrante (70) e o puro (100) criam profundidade.

Combinações a evitar

As seguintes combinações de cores foram eliminadas das famílias base e devem ser evitadas, a menos que seja necessário para aplicações específicas, como visualização de dados.

Evite empilhar blocos sólidos de Laranja Coral diretamente com Roxo Soft ou Turquesa. A alta saturação causa "vibração visual" (fadiga).

Evite o contato direto entre Roxo Soft e Turquesa do mesmo passo (luminosidade), pois gera baixo contraste direcional. Use sempre separadores neutros.

Gradientes sobre Imagens

A Mandalla possui diretrizes restritas para a aplicação de sobreposições (overlays) coloridas em fotos para o universo corporativo e de comunicação nas mídias digitais. Nosso foco é manter as cenas fiéis ao mundo real, evitando aparências fantasmagóricas ou invasão de luzes falsas no ambiente observável.

A Evitar: Aplicar gradientes de cores saturadas sobre rostos, corpos, ambientes e paisagens reais, criando focos de "luz irreal" ou aspecto fantasmagórico.

Recomendado: Quando for necessário ler textos sobre fotos, use a técnica do respiro: gradientes sutis do Preto puro (`#000000`) para o alfanumérico (`rgba(0,0,0,0)`). Isso emula sombras encontradas no mundo real.

Recursos

Acesse rapidamente nossos arquivos técnicos. No Figma, está a biblioteca viva de design system da Mandalla. No repositório de edição (Illustrator), disponibilizamos o acervo completo e editável dos guias de estilo de todos os clientes da agência para iniciar e nortear novos projetos.

Design System da Mandalla (Figma)
Figma
Acervo de Guias de Estilo de Clientes (.ai)
Ai