Esporte
Escolinha de futebol
Toda quarta, 40 crianças aprendem disciplina e trabalho em equipe em campo.
Design System · Sem fins lucrativos
Uma identidade que abraça.
O sistema de design da ACRICA traduz 34 anos de cuidado com crianças e adolescentes em uma linguagem visual calorosa, esperançosa e acessível a todos — em português, inglês e espanhol, no claro e no escuro.
Por que um Design System? É o conjunto de regras visuais — cores oficiais, fontes, botões, espaçamentos — que garante que a ACRICA pareça a mesma instituição em qualquer página do site, hoje ou daqui a dois anos. Aprovando essa base uma única vez, todo o site (e materiais futuros) usa as mesmas cores, os mesmos textos acessíveis e o mesmo tom de voz — sem retrabalho e sem depender de quem estiver construindo a página naquele momento. É o que torna o site rápido de manter, crescer e passar adiante para outro voluntário no futuro.
01 · Essência
A voz da marca
Cinco pilares guiam cada palavra, cor e interação. Acolhemos sem ser frios; inspiramos sem explorar a dor.
🤝Acolhedor
Linguagem calorosa, que abraça — nunca burocrática.
☀️Esperançoso
Foco no impacto positivo, não no sofrimento da criança.
💬Simples
Palavras acessíveis para famílias, doadores e comunidade.
✊Urgente sem culpar
Gera ação sem fazer o leitor se sentir mal.
❤️Humano e próximo
Histórias reais, nomes e rostos — não estatísticas frias.
02 · Marca
A marca
Duas crianças de mãos dadas formam um coração. O amarelo é a esperança; o verde-azulado, o crescer; o coral, a coragem.
Área de respiro: mantenha sempre um espaço livre ao redor da marca equivalente à altura do coração. Não distorça, não recolore e não aplique sombras.
03 · Cores
Cor
Uma paleta calorosa extraída da marca. Todos os pares de texto/fundo abaixo cumprem o contraste mínimo WCAG 2.1 AA.
Confiança · Azul
Marca primária · ação, confiança, crescimentoAcolhimento · Rosa
Acento · doação, urgência, energiaSol · Amarelo
Destaque · esperança, calor, infânciaTerra · Neutros
Fundo & texto · neutros quentesTokens semânticos (adaptam-se ao tema)
04 · Tipografia
Tipografia
Bricolage Grotesque para títulos — caloroso e contemporâneo. Figtree para textos — claro e amigável. Corpo a 17px para conforto de leitura.
Cada criança importa
34 anos transformando vidas
Educação, arte e esporte
Conheça nossos projetos
Texto de abertura que convida o leitor a continuar, com tom caloroso e próximo.
Texto corrido para conteúdo. A ACRICA atende 130 crianças e adolescentes por dia em Piraquara, oferecendo um espaço seguro no contraturno escolar com atividades de educação, cultura e esporte.
Legenda · Rótulo · Metadados
05 · Espaço & Raios
Espaçamento & cantos
Escala base de 4px e cantos generosamente arredondados — suaves e amigáveis, como a marca.
Escala de espaçamento
Raios de canto
sm · 10px
md · 16px
lg · 24px
xl · 32px
pill · 999px
06 · Elevação
Elevação
Sombras quentes e suaves (nunca cinza puro) criam profundidade sem dureza.
shadow-sm
shadow-md
shadow-lg
shadow-brand
shadow-accent
07 · Botões
Botões
Cantos em pílula, alvo mínimo de 48px e foco sempre visível. Doar usa o coral para chamar a ação.
Variantes
08 · Badges & Chips
Badges & chips
Etiquetas para categorizar projetos e filtros selecionáveis.
Badges
Educação
Urgente
Esporte
Cultura
Filtros (chips)
09 · Formulários
Formulários
Rótulos sempre visíveis, dicas claras e estados de erro descritivos com aria-invalid.
10 · Cards & Impacto
Cards & números de impacto
Histórias reais ganham rosto; o impacto ganha número. Sempre com calor, nunca como vitrine de dor.
Educação
Reforço escolar
Apoio no contraturno que já elevou a frequência escolar em 23%.
Arte
Oficina de música
Instrumentos, coral e a alegria de se expressar — palco para sonhar.
Banner de impacto
34
anos de história
130
crianças por dia
12
projetos ativos
100%
recursos auditados
11 · Feedback
Alertas & progresso
Mensagens com ícone e cor — nunca apenas cor — para serem compreendidas por todos.
Doação confirmada! Sua contribuição já está transformando vidas. Obrigado.
Sabia? Você pode destinar parte do seu Imposto de Renda à ACRICA sem custo extra.
Prazo do IRPF: a destinação direta deve ser feita até 30 de dezembro.
Meta da campanha · 74%
12 · Acessibilidade
Acessibilidade — WCAG 2.1 AA
Inclusão não é opcional para quem cuida de pessoas. Estes princípios são obrigatórios em todo o sistema.
Contraste AA
Texto normal ≥ 4.5:1 e texto grande/UI ≥ 3:1, validados no claro e no escuro.
Foco visível
Todo elemento interativo mostra um anel de foco coral de 3px — nunca removido.
Alvos de 48px
Botões e links têm área de toque confortável para mãos de todas as idades.
Cor + ícone + texto
Nunca dependemos só da cor para transmitir significado.
HTML semântico
Cabeçalhos em ordem, marcos ARIA, links de pular e textos alternativos.
Movimento reduzido
Respeitamos prefers-reduced-motion — sem animações que incomodam.
13 · Idiomas
Três idiomas, uma voz
Português, inglês e espanhol — alterne no topo da página e veja todo o sistema responder. A preferência fica salva no navegador.
🇧🇷 Português
Cada criança importa
Ajude a transformar vidas em Piraquara.
🇬🇧 English
Every child matters
Help transform lives in Piraquara.
🇪🇸 Español
Cada niño importa
Ayuda a transformar vidas en Piraquara.