Brand Kit Completo — Freelans

Versão 1.0 | Documento Mestre de Identidade

---

---

1. Manifesto da Marca

Essência

Freelans existe para tornar o bom profissional encontrável.

Não para transformá-lo em empreendedor. Não para ensiná-lo a fazer marketing. Não para cobrar por tentativas que podem não dar certo. Para fazer uma coisa simples e radical: garantir que quem já faz um trabalho de qualidade seja visto por quem precisa desse trabalho.

Propósito

O Brasil tem 25,9 milhões de trabalhadores por conta própria. A maioria deles depende de indicação para conseguir cliente. Quando a indicação seca, a renda seca. Quando a renda seca, a família sente.

Esse ciclo não é culpa do profissional. É culpa da invisibilidade.

A Freelans existe para quebrar esse ciclo.

Promessa

"Enquanto você trabalha, a Freelans trabalha por você."

Não prometemos clientes garantidos. Prometemos que você nunca mais vai ser invisível. Que o próximo cliente que procurar alguém com o seu ofício vai te encontrar. Que nenhum lead vai esfriar enquanto você está com as mãos ocupadas.

Prometemos estar do seu lado — não em cima de você.

Credo da Marca

O trabalhador autônomo brasileiro não precisa de mais uma plataforma que acredita nele depois que ele prova que funciona.

Ele precisa de uma plataforma que acredita nele primeiro.

Gratuita na entrada. Honesta na proposta. Inteligente na operação.

Isso é a Freelans.

---

---

2. Posicionamento

Declaração de Posicionamento

Para trabalhadores autônomos brasileiros que dependem de indicação e perdem clientes por invisibilidade digital, a Freelans é a plataforma de visibilidade profissional que oferece um perfil completo, portfólio estruturado e um agente de IA que atende leads no WhatsApp, porque acredita que quem já faz um bom trabalho merece ser encontrado — sem pagar por tentativa, sem depender de sorte.

Tagline Principal

"Seu trabalho merece ser encontrado."

Taglines Secundárias por Contexto

Território de Posicionamento

A Freelans ocupa o espaço entre a informalidade do OLX (sem credibilidade estruturada) e a exploração do GetNinjas (cobra antes de provar valor). É a plataforma que o mercado não tinha: gratuita na entrada, confiável na percepção, inteligente na operação.

---

---

3. Paleta de Cores Definitiva

3.1 Cores Primárias

Azul Profissional

Papel no sistema: Cor âncora de confiança. Aplicada em elementos estruturais — navegação, headers, botões primários de ação informacional, fundos de seções institucionais. É a cor que diz "pode confiar" sem precisar gritar.

Justificativa: Não é o azul corporativo frio dos bancos tradicionais (que o público de Rodrigo e Camila rejeita instintivamente), nem o azul desbotado de classificados. Saturação alta e valor médio comunicam confiabilidade conquistada, não autoridade imposta. Âncora para os três perfis de persona simultaneamente.

---

Laranja Ação

Papel no sistema: Cor de energia e decisão. Aplicada exclusivamente em CTAs primários, badges de destaque, elementos de ação imediata e acentos de comunicação de alto impacto. Representa o momento em que o profissional passa de invisível a encontrável.

Justificativa: Tom específico com temperatura quente e saturação alta comunica brasilidade sem clichê e ação sem agressividade. Diferencia a Freelans do gradiente azul-roxo que uniformizou o setor de fintechs — ruptura visual deliberada e estratégica.

---

3.2 Cores Secundárias e Neutras

Branco Estrutural

Uso: Fundos primários de interface, espaço de respiração, texto sobre fundos escuros, backgrounds de cards em contexto claro.

Justificativa: Não é branco puro (#FFFFFF). O leve off-white reduz a dureza da tela e aproxima da textura de papel — referência ao universo real do autônomo. Branco puro cria fadiga visual e sensação de frieza clínica, inadequado para uma marca que precisa de calor humano.

---

Azul Noite

Uso: Textos primários, headings, elementos de alto contraste, fundos de modo escuro, rodapés.

Justificativa: Quase preto com leve virada para o azul — mantém coerência cromática com o sistema. Preto neutro puro (#000000) comunica rigidez; este tom ancora seriedade com personalidade e pertencimento ao sistema cromático.

---

Cinza Médio

Uso: Textos secundários, labels, metadados, placeholders, ícones de estado inativo.

---

Cinza Claro

Uso: Fundos de cards, separadores, estados hover, áreas secundárias de interface.

---

Azul Suave

Uso: Fundos de seções de destaque, badges informativos, estados de seleção ativa, áreas de onboarding.

---

Laranja Suave

Uso: Fundos de highlights de features premium, banners de upgrade, alertas positivos de conversão.

---

3.3 Cores de Estado (UI System)

---

3.4 Regras de Uso Cromático

Proporção do Sistema (Regra 60-30-10)

Tabela de Contraste (Conformidade WCAG 2.1)

Combinações Proibidas

• #1B4FD8 sobre #F26419 — conflito de saturação, vibração visual inaceitável
• #F26419 sobre #1B4FD8 — mesma razão, sentido inverso
• #F26419 como fundo dominante em telas longas — reservado para elementos pontuais
• Qualquer cor de estado (sucesso, erro, atenção) como cor decorativa fora de contexto funcional

---

---

4. Tipografia

4.1 Família Tipográfica

Família principal: Montserrat Licença: SIL Open Font License (Google Fonts — uso livre comercial) Classificação: Sans-serif geométrica humanista

Justificativa da família única: Montserrat possui amplitude de pesos (100–900) suficiente para criar hierarquia completa sem o risco de conflito entre famílias distintas. Para o público que acessa majoritariamente via smartphone — incluindo dispositivos Android entry-range como o Samsung Galaxy A34 de Rodrigo — a consistência de uma família única garante legibilidade e coerência sem depender de carregamento de múltiplas fontes. A geometria humanista equilibra o rigor técnico que André exige e a acessibilidade que Rodrigo e Camila precisam.

---

4.2 Pesos Autorizados e Aplicações

Pesos proibidos: Thin (100) e ExtraLight (200) — legibilidade comprometida em telas de baixa resolução presentes no segmento Android entry-range.

---

4.3 Escala Tipográfica

Base: 16px (1rem) Razão modular: 1.25 (Major Third) Unidade de referência: rem (relativo ao root, garante acessibilidade em zoom de browser)

---

4.4 Regras Tipográficas

Casing

Justificativa do Title Case em CTAs: ALL CAPS em botões reduz a velocidade de leitura em 13–18% em dispositivos móveis — dado crítico para Rodrigo lendo no canteiro de obras.

Comprimento de Linha (Measure)

Ênfase em Texto Corrido

• Negrito: Usar Montserrat SemiBold (600), não Bold (700) — Bold quebra o ritmo visual do parágrafo
• Itálico: Reservado exclusivamente para citações de depoimentos e nomes de profissões em contexto específico
• Sublinhado: Reservado para links — nunca para ênfase decorativa

---

---

5. Grid e Espaçamento

5.1 Sistema de Grid

Grid Base

Unidade fundamental: 8px Justificativa: A unidade de 8px é divisível por 2, 4 e 8, gerando múltiplos que cobrem todas as necessidades de espaçamento sem criar valores arbitrários. Compatível com os sistemas de design mais utilizados (Figma, Material Design, Tailwind CSS).

Grid de Layout por Breakpoint

Largura máxima de conteúdo: 1312px (centrado com margens automáticas em viewports maiores)

---

5.2 Escala de Espaçamento

Todos os valores são múltiplos de 8px (com exceção do valor base de 4px para micro-espaçamentos).

---

5.3 Raio de Borda (Border Radius)

Princípio: Cantos arredondados reforçam o caráter acessível e humano da marca. Cantos vivos (0px) são reservados para elementos de sistema (bordas de separação, linhas divisórias).

---

5.4 Sombras (Elevation System)

Nota: As sombras usam o Azul Noite (#1A1A2E) como cor base em vez de preto puro, mantendo coerência cromática com o sistema.

---

5.5 Proporções de Componentes

Botões

Cards de Perfil

---

---

6. Elementos Gráficos

6.1 Mascote — A Formiguinha Freelans

Conceito e Simbolismo

A formiga é a síntese visual da proposta de valor da Freelans. O simbolismo é preciso e não acidental:

• Força desproporcional ao tamanho: carrega até 50× seu peso — metáfora direta do autônomo que sustenta família e clientes com recursos limitados
• Organização e método: trabalha com precisão, nunca no caos — comunica que a Freelans é a ferramenta organizada que o autônomo precisa
• Construção persistente: constrói algo maior que ela mesma ao longo do tempo — metáfora da carreira profissional que cresce com visibilidade
• Trabalho coletivo: a formiga individual faz parte de algo maior — o autônomo na rede da Freelans

Especificações de Construção

Estilo: Line art com fill sólido. Linha de contorno de 2px de espessura. Não hiper-realista, não esquemática demais.

Proporções:

• Cabeça: 40% da altura total do personagem (proporção exagerada para expressividade emocional)
• Corpo: 35% da altura total
• Pernas (3 pares): comprimento de 30% da altura total, articuladas para indicar movimento
• Antenas: 25% da altura total, levemente curvadas

Cores do mascote:

Estados Emocionais do Mascote

Versões de Aplicação

---

6.2 Logotipo

Construção

Wordmark: "Freelans" em Montserrat ExtraBold (800), caixa baixa com inicial maiúscula.

Tagline no lockup: "seu trabalho merece ser encontrado" em Montserrat Regular (400), 40% do tamanho do wordmark, cor #6B7280.

Ícone de marca: A formiguinha em versão busto, posicionada à esquerda do wordmark. Relação de altura: ícone = 120% da altura do cap-height do wordmark.

Variações de Logotipo

Área de Proteção (Clear Space)

Área mínima de proteção ao redor do logotipo = altura da letra "F" do wordmark em todas as direções. Nenhum elemento gráfico, texto ou borda pode invadir essa área.

Tamanhos Mínimos

---

6.3 Patterns e Texturas

Pattern 1 — Trama Hexagonal

Conceito: Referência direta ao universo das formigas (colmeia) sem ser literal. Representa organização, estrutura e trabalho coletivo.

Especificações:

• Hexágonos regulares com lado de 12px
• Espessura de linha: 1px
• Cor: #1B4FD8 em 6% de opacidade sobre #FAFAFA
• Espaçamento entre hexágonos: 4px
• Uso: Fundos de seções institucionais, backgrounds de hero em versão light, papelaria

---

Pattern 2 — Pontos em Trajetória

Conceito: Pontos que formam caminhos — metáfora do profissional sendo encontrado, da conexão acontecendo, da trajetória de crescimento.

Especificações:

• Pontos circulares de 4px de diâmetro
• Espaçamento entre pontos: 24px em grid diagonal 45°
• Pontos maiores (8px) em posições estratégicas simulando "destinos" na trajetória
• Cor: #F26419 em 12% de opacidade
• Uso: Backgrounds de seções de CTA, banners de campanha, materiais de evento

---

Pattern 3 — Linhas de Caminho

Conceito: Trilhas conectando pontos — visualização abstrata da jornada do autônomo de invisível a encontrável.

Especificações:

• Linhas de 1.5px de espessura
• Terminadas em pontos circulares de 6px
• Direção predominante: diagonal 30°
• Cor: #1B4FD8 em 8% de opacidade
• Uso: Fundos de seções de features, materiais de apresentação

---

Textura de Papel Craft

Conceito: Textura sutil que remete ao caderno de anotações do profissional, ao recibo manuscrito, ao universo real do autônomo.

Especificações:

• Overlay de textura de papel em 4–6% de opacidade
• Aplicada sobre #FAFAFA em materiais impressos e mockups
• Nunca em interfaces digitais funcionais (prejudica legibilidade)
• Uso: Cartão de visita, papel timbrado, embalagens, materiais de evento presencial

---