Brand book público
As cores, a tipografia, os componentes e a voz da Codaqui — abertos para voluntários, comunidades parceiras e parceiros de mídia. Transparência também é design.
01
A marca carrega a trajetória da associação — de uma conversa em 2020 a centenas de participantes. Dados reais, os mesmos de/sobre/insights.
2020Origem
Conversas e experiências que plantaram a semente do Codaqui.
Hackathon Campo Mourão inspira a criação do projeto educacional
2021Fundação
De 'Kids Academy' à Associação Codaqui — constituição jurídica, primeiros voluntários e primeiras turmas.
Constituição jurídica da Associação Codaqui
Primeira trilha de Python concluída com 12 participantes
2022Crescimento
74 encontros realizados entre 2021-2022, novos parceiros e plataformas educacionais.
Google Ad Grants e GitHub Campus conquistados
74 encontros com ~15 participantes recorrentes
2023Marco
Doações de computadores, lançamento do projeto Mentoria, financiamento coletivo e presença na DevPR Conf.
Projeto Mentoria lançado — democratizando acesso a orientação profissional
Doação de computadores para escola no RJ e pela Cortex Intelligence
2024Expansão
Aulas presenciais no CPM, 95 mentorias realizadas e forte crescimento da comunidade.
41 encontros presenciais no CPM — primeiro ano com aulas presenciais
14.000+ visualizações mensais no site
2025Impacto
Retorno ao formato virtual com 95 mentorias, 66 horas e crescimento expressivo da comunidade.
95 mentorias realizadas — recorde histórico do Codaqui
692 membros no Discord — maior comunidade até agora
2026Em andamento
Novas frentes de ensino com Educação Financeira e Introdução ao Python.
Diversificação do ensino: Educação Financeira além de programação
02
Três versões oficiais em /img/. A regra de ouro é de contraste: logo escura só sobre fundo claro, logo branca só sobre fundo escuro.
Ameixa #3A2F39 + verde #57B593. Versão preferencial — somente sobre fundos claros.
Somente sobre fundos escuros (ameixa, fotos escuras, hero). Some sobre fundo claro — nunca usar.
Uma cor só (#3A2F39) para contextos sem cor: carimbo, recibo, impressão P&B — sobre fundo claro.
Vigente em todo o site: o componente BrandLogotroca automaticamente conforme [data-theme]. Experimente alternar o tema no cabeçalho — a logo abaixo acompanha:
← viva: segue o tema da página✓ Fundo claro → logo principal
✓ Fundo escuro → monocromática branca
Mantenha ao redor da marca uma área livre igual à altura do "C" do logotipo (a área tracejada). Nenhum texto, logo de parceiro ou elemento gráfico invade esse espaço.
03
Uma escala verde de marca, uma escala neutra derivada do ameixa (cinzas puros são proibidos) e pares semânticos calibrados para os dois temas. Clique em qualquer swatch para copiar o hex. Os badges indicam o nível WCAG da cor usada como texto sobre fundo claro.
#57B593 não é acionável?O verde de marca #57B593tem contraste de apenas 2,49:1 sobre branco — reprova WCAG AA para texto e ações. Ele continua sendo a cor da marca (decoração, hero, logo, ilustrações), mas botões, links e textos usam o primary-700#378369(4,55:1 — AA) no tema claro e#89CBB3no tema escuro.
--cq-color-primary-50 … -900 · 500 = cor oficial da marca.
--cq-color-neutral-50 … -900 · derivados do ameixa da marca #3A2F39 — cinzas puros são proibidos.
Cada semântica tem um par foreground/background por tema. Os foregrounds escuros foram recalibrados (as versões claras falham AA sobre os fundos escuros) — --cq-color-*muda com [data-theme="dark"].
Tema claro — Info
#2F6FED / #EAF0FD
3,98:1 · AA 18pt+
Tema escuro — Info
#8FB3F9 / #1E2A45
6,78:1 · AA
Tema claro — Sucesso
#2C7A4B / #E8F4EC
4,65:1 · AA
Tema escuro — Sucesso
#5CB87A / #16301F
5,82:1 · AA
Tema claro — Aviso
#B45309 / #FBF0E4
4,47:1 · AA 18pt+
Tema escuro — Aviso
#E8963C / #3A2410
6,15:1 · AA
Tema claro — Erro
#C0392B / #FBEAE8
4,67:1 · AA
Tema escuro — Erro
#E8826F / #3D1B17
5,74:1 · AA
04
System fonts — nenhuma webfont baixada: a página abre instantânea em qualquer conexão. Performance é inclusão. Escala modular 1.25 sobre a base de 16px.
Texto e títulos — --cq-font-family-base
system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial
Números de impacto — --cq-font-family-mono
692 membros
--cq-line-height-tight: 1.2 — títulos--cq-line-height-normal: 1.5 — UI--cq-line-height-loose: 1.7 — leitura longa05
Padrões de UI construídos sobre os tokens — os mesmos usados nas páginas públicas e no app. Demonstrações estáticas; o comportamento real vive nos componentes.
Primário usa a cor acionável (--cq-action-primary-bg = primary-700 no claro) — nunca o verde de marca #57B593. Altura mínima de 44px (alvo de toque).
Pills com raio --cq-radius-pill; pares semânticos mudam com o tema.
Info — inscrições abertas até sexta-feira.
Sucesso — doação registrada no ledger.
Aviso — restam apenas 5 vagas.
Erro — não foi possível validar o comprovante.
| Data | Descrição | Comunidade | Valor |
|---|---|---|---|
| 12/09/2026 | Doação via Stripe | Codaqui | + R$ 200,00 |
| 05/09/2026 | Reembolso de transporte (DevPR Conf) | DevParaná | − R$ 85,00 |
| 01/09/2026 | Pagamento a fornecedor (camisetas) | Codaqui | − R$ 1.240,00 |
Valores em mono, sinal e cor semântica por direção (crédito/débito) — nunca só cor: o sinal +/− acompanha sempre.
06
WCAG 2.2 AA como piso, não como meta. Estas regras valem para toda página e componente do ecossistema Codaqui — inclusive esta página.
Todo par texto/fundo ≥ 4.5:1 (texto grande ≥ 3:1). A cor acionável é #378369, não o verde de marca.
Botões, links de navegação e campos têm altura mínima de 44px (WCAG 2.5.8).
Anel de 3px em --cq-focus-ring via :focus-visible global (WCAG 2.4.7/2.4.13) — demo abaixo.
Media query global zera animações e transições para quem prefere menos movimento (WCAG 2.3.3).
Toda página pública tem 'Pular para o conteúdo' e regiões header/main/footer navegáveis.
Erros têm texto, valores financeiros têm sinal +/−, status têm rótulo.
Pressione Tabpara navegar pelos elementos abaixo. O anel verde de 3px aparece em todos — é o mesmo anel global do site inteiro.
Teste também o skip link: recarregue a página e pressione Tab uma vez — "Pular para o conteúdo" aparece no topo.
07
Português do Brasil primeiro. Linguagem inclusiva e direta: acolhedora sem ser infantil, técnica sem ser arrogante. As palavras abaixo são norma, não sugestão.
| Diga | Evite | Por quê |
|---|---|---|
| “participantes” | “alunos” | Não somos escola: quem chega participa de uma comunidade, não de uma sala de aula. |
| “programa” | “curso” | Trilhas, mentoria e encontros formam um programa contínuo — não um produto fechado. |
| “encontros” | “aulas” | O formato é horizontal e colaborativo: encontro de pessoas, não transmissão de conteúdo. |
| “Associação Codaqui” | “escola / empresa” | Somos uma associação sem fins lucrativos (CNPJ 44.593.429/0001-05) — transparência é valor. |
#QueroEstudar
Trilhas e programa de estudo
#QueroApoiar
Doações e financiamento coletivo
#QueroMentoria
Projeto Mentoria
#ClubCodaqui
Clube de benefícios (SortCoins)