WhoDo!/ Identidade da Marca

v1.0 — Julho 2026

Identidade da Marca WhoDo!

Este guia documenta todos os elementos visuais, padrões de design e diretrizes que compõem a identidade da WhoDo!. Use como referência para manter a consistência em todos os produtos e ferramentas da plataforma.

Cores primárias

Gradientes oficiais

Níveis tipográficos

Anos de marca

"Quem precisa encontra. Quem faz escolhe."

Tagline oficial da WhoDo!

Paleta de Cores

Cores primárias, secundárias e semânticas da marca

#6366f1

Indigo WhoDo!

--color-primary

Cor principal da marca. Usada em CTAs, links, elementos interativos.

Uso:

Botões primários, links, ícones ativos, bordas de foco

#4f46e5

Indigo Escuro

--color-primary-dark

Tom mais escuro do indigo para hover states e footer.

Uso:

Hover de botões, gradientes escuros, links visitados

#818cf8

Indigo Claro

--color-primary-light

Tom mais claro para backgrounds sutis e efeitos de luz.

Uso:

Backgrounds de badge, glow effects, hover de cards

#8b5cf6

Púrpura WhoDo!

--color-accent

Cor de destaque secundária. Complementa o indigo em gradientes.

Uso:

Gradientes, badges promocionais, elementos de destaque

#1e3a5f

Azul Marinho WhoDo!

Navbar BG

Cor da marca registrada na navbar. Representa profissionalismo e confiança.

Uso:

Navbar fixa, backgrounds de seções institucionais

#1e1b4b

Azul Profundo

Navbar escura

Base do gradiente hero e temas escuros.

Uso:

Hero sections, dark mode, backgrounds de destaque

#10b981

Esmeralda

-- Sucesso

Cor semântica de sucesso e confirmação.

Uso:

Verificado, concluído, online, saldo disponível

#f59e0b

Âmbar

-- Alerta

Cor semântica de alerta e destaque.

Uso:

Atenção, pendente, estrelas de avaliação

#ef4444

Rosa

-- Erro

Cor semântica de erro e cancelamento.

Uso:

Erros, cancelamentos, notificações críticas

💡

Navbar — Cor registrada da marca

A cor #1e3a5f é o azul marinho exclusivo da WhoDo! e deve ser usada consistentemente na navbar de todas as páginas. Esta cor representa profissionalismo, confiança e solidez — valores centrais da marca.

Gradientes

Gradientes oficiais para backgrounds e elementos de destaque

--gradient-primary

Gradient Primary

135deg · 3 cores

Uso: Badges, textos gradientes, botões de criação

--gradient-hero

Gradient Hero

135deg · 4 cores

Uso: Hero da landing page, backgrounds de alto impacto

Dashboard Header

Gradient Dashboard

135deg · 3 cores

Uso: Header do dashboard, cards de destaque

Call-to-action

Gradient CTA

135deg · 2 cores

Uso: Botões CTA, links principais

Tipografia

Inter — A fonte oficial da WhoDo!

Inter

Variable font · Pesos: 400, 500, 600, 700, 800, 900

Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

WhoDo! — Display

36-72px · ExtraBlack 900

text-4xl sm:text-5xl md:text-7xl

WhoDo! — H1

30-36px · ExtraBold 800

text-3xl sm:text-4xl

WhoDo! — H2

24px · ExtraBold 800

text-2xl font-extrabold

WhoDo! — H3

18px · Bold 700

text-lg font-bold

WhoDo! — Body

14px · Normal 400

text-sm

WhoDo! — Small

12px · Medium 500

text-xs

WhoDo! — Caption

10px · Semibold 600

text-[10px]

Importação

tsx

// No layout: import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'], display: 'swap' })

// No JSX:
<body className={inter.className}>
  {children}
</body>

Logotipo

Uso correto do logo e identação da marca

WhoDo!

Navbar — Fundo escuro

Texto branco com exclamação em azul claro (#60a5fa)

tsx

<span className="text-xl font-black text-white tracking-tight">
  WhoDo<span className="text-blue-300">!</span>
</span>

Logo PNG — Fundo claro

Logo original escuro para fundos claros

tsx

<Image src="/logo.png" alt="WhoDo" width={180} height={40} />

Logo PNG — Fundo escuro

Usar filter: brightness(0) invert(1) para versão branca

tsx

<Image src="/logo.png" alt="WhoDo" width={180} height={40}
  style={{ filter: 'brightness(0) invert(1)' }} />

📋 Regras de uso

•Use sempre o logo branco sobre fundos escuros (navbar, hero, footer)
•O nome "WhoDo!" sempre com a exclamação no final em azul claro (#60a5fa)
•Não distorça as proporções do logo
•Mantenha área de respiro mínima de 16px ao redor do logo
•Para fundos claros, use o logo com filter: brightness(0) para versão escura
•O ícone favicon é o logo PNG em 500x500px

📱

PWA (Progressive Web App)

O WhoDo! é um PWA instalável. Configuração em public/manifest.json

Theme Color

#4f46e5

Background

#f8fafc

Display

standalone

Orientation

portrait

Componentes e Padrões

Classes e padrões visuais para componentes da interface

📇Cards

Padrões de cartão usados em toda a plataforma

Padrão

Hover (clicável)

Destaque

tsx

<!-- Card Padrão -->
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm">
  ...
</div>

<!-- Card Clicável -->
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm 
  hover:border-indigo-200 hover:shadow-xl hover:-translate-y-1 
  transition-all duration-300 cursor-pointer">
  ...
</div>

<!-- Card Destaque -->
<div className="bg-gradient-to-br from-indigo-600 via-indigo-700 to-purple-800 text-white rounded-2xl shadow-lg">
  ...
</div>

🔘Botões

Padrões de botão para ações na interface

tsx

<!-- Botão Primário (CTA) -->
<button className="px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 
  text-white font-bold rounded-xl shadow-md shadow-indigo-200
  hover:from-indigo-700 hover:to-purple-700 transition-all">
  Primário
</button>

<!-- Botão Outline -->
<button className="px-5 py-2.5 border-2 border-slate-200 
  text-slate-700 font-semibold rounded-xl
  hover:border-indigo-400 hover:text-indigo-600 transition-all">
  Outline
</button>

<!-- Botão Ghost -->
<button className="px-5 py-2.5 text-slate-500 font-medium rounded-xl 
  hover:bg-slate-100 transition-all">
  Ghost
</button>

✨Efeitos Especiais

Efeitos visuais e animações do design system

Glass

Skeleton Loading

Gradient Text

tsx

/* Glass */
<div className="glass">...</div>

/* Skeleton Loading */
<div className="skeleton w-full h-4 rounded-lg" />

/* Gradient Text */
<h1 className="bg-gradient-to-r from-indigo-600 via-purple-600 to-violet-500 bg-clip-text text-transparent font-black">
  Título com Gradiente
</h1>

📏 Sistema de Espaçamento

4px

p-1

8px

p-2

16px

p-4

24px

p-6

32px

p-8

2xl

48px

p-12

⭕ Sistema de Bordas (Radius)

rounded-lg

Inputs, botões pequenos

8px

rounded-xl

Cards, inputs, modais (padrão)

16px

2xl

rounded-2xl

Cards de destaque, containers

24px

full

rounded-full

Badges, avatares, pills

9999px

🎬Animações

Animações CSS disponíveis no design system

`animate-float`

Elementos decorativos, bolhas de background

`animate-shimmer`

1.5s

Skeleton loading

`animate-slide-in`

0.3s

Modais, painéis laterais

`animate-hover-float`

0.2s

Hover de cartões e botões

Voz da Marca

Tom, personalidade e diretrizes de comunicação

Personality

→Profissional e confiável — como um encanador que chega no horário
→Amigável e acolhedor — como um bom vizinho
→Direto e prático — sem enrolação, vai direto ao ponto
→Inovador sem ser arrogante — tecnologia a serviço das pessoas

Tagline

"Quem precisa encontra. Quem faz escolhe."

✅ O que fazer

Use "Você" para se dirigir ao usuário
Tom otimista e encorajador
Mensagens curtas e diretas
Inclua emojis com moderação 👋

❌ O que evitar

✗Jargão técnico desnecessário
✗Tom formal ou burocrático
✗Exagerar nos emojis
✗Ser negativo ou alarmista

Acessibilidade

Diretrizes para uma plataforma inclusiva

Diretrizes de Acessibilidade

✅

Use aria-label em botões sem texto visível

tsx

<button aria-label="Fechar"> <X /> </button>

✅

Mantenha contraste mínimo 4.5:1 entre texto e fundo

tsx

text-slate-700 sobre bg-white = ✅ | text-slate-400 sobre bg-white = ❌

✅

Use focus-visible em elementos interativos

tsx

focus-visible:ring-2 focus-visible:ring-indigo-500

✅

Forneça texto alternativo para imagens

tsx

<Image alt="Foto de perfil de João" />

✅

Não suprima warnings de acessibilidade sem justificativa

tsx

Em vez de biome-ignore-all lint/a11y, corrija os problemas

🎯 Contraste de Cores

Primary + Branco

✅ 7.1:1

Navbar + Branco

✅ 11.5:1

Dark + Branco

✅ 8.2:1

Branco + Texto

✅ 15.3:1

Recursos e Referências

Arquivos, links e documentação técnica

🎨

Design Tokens

Variáveis CSS no globals.css

src/app/globals.cssLinhas 4-119

📱

Manifest PWA

Configuração do PWA

public/manifest.jsonCompleto

🔤

Fonte Inter

Fonte oficial via Google Fonts

src/app/layout.tsxLinha 10

🖼️

Logotipo

Logo PNG 500x500

public/logo.pngAsset estático

⚙️

Tailwind v4

Configuração PostCSS

postcss.config.mjsCompleto

📐

Componentes

Biblioteca de componentes

src/components/Diretório completo

Mantido pelo Time WhoDo!

Última atualização: Julho 2026 · v1.0

Para sugestões ou alterações, entre em contato: whodo@newsdrop.net.br