Início / Marca e design system
Design system da Escola Científica.
Tudo o que é preciso para criar peças, páginas e materiais com a cara da escola: marca, cores, tipografia, grafismos, ícones e componentes. Baseado no manual de identidade visual de Júlia Ambrozini e Que Haja!, 2025.
01 · Princípios
Quatro ideias que guiam o visual.
Feito à mão
Traços de giz e lápis, como os desenhos das crianças. Nada de ícone de banco de imagem nas peças de comunicação.
Cor com função
Laranja e verde assinam. As cores do arco-íris organizam temas, segmentos e projetos.
Contraste sempre
Fundo escuro com texto claro, fundo claro com texto escuro. Nunca meio-tom sobre meio-tom.
Arredondado e simpático
Cantos generosos, como as letras do logotipo. Formas que acolhem.
02 · Marca
Assinaturas.
A marca tem versão vertical, horizontal e super horizontal. Use a multicolorida em fundos neutros ou institucionais. A versão de 1 cor pode ser laranja, verde, preta ou branca.
- Vertical: 2,3 cm de largura
- Horizontal: 0,7 cm de altura
- Super horizontal: 0,4 cm de altura
- Com logotipo: a margem da letra “a” do logotipo em volta de toda a marca
- Símbolo sozinho: 3 vezes o tamanho da “bolinha” da espiral
- Alternar as cores da versão multicolorida
- Usar o símbolo laranja ou verde fora da assinatura completa multicolorida
- Aplicar sobre cores complementares ou de baixo contraste
- Distorcer, girar ou reorganizar símbolo e logotipo
03 · Símbolo
Uma espiral biomimética.
A jornada da criança cientista. A espiral une a impressão digital (o indivíduo único), a natureza (nossa principal fonte de exploração) e a galáxia (a curiosidade pelo todo).
O desenho parte de uma elipse e sugere a união das letras E e C. O movimento fala de desenvolvimento contínuo e evolução.
Fundos permitidos
Relações de cor previstas no manual para aplicar o símbolo sobre fundos da paleta.
04 · Cores
Paleta cromática.
Laranja e verde são as cores principais e devem aparecer com mais frequência. As cores do arco-íris representam a diversidade, a infância e as etapas do aprendizado. Clique numa cor para copiar o código.
- Fundo escuro (laranja, verde, verde escuro, azul, roxo, carmim, tinta) leva texto branco.
- Fundo claro (papel, creme, amarelo claro, branco) leva texto verde escuro (
--texto, #235E4F). - Fundo de meio-tom (amarelo, pêssego, lilás, verde claro, azul claro) leva texto tinta, porque o verde escuro não chega a 4,5:1 nesses fundos.
- Branco sobre laranja tem 4:1. Use só em texto grande ou em negrito. Para botões e links sobre fundo claro, use
--laranja-escuro(#B83C06, 5,7:1). - Use cor para destacar o dado importante, não para decorar o texto corrido.
05 · Tipografia
Alan Sans.
Simpatia, clareza e personalidade. Uma fonte única para títulos e textos corridos, gratuita no Google Fonts (licença OFL). Os títulos usam ExtraBold e Black; o texto usa Regular.
var(--t-4xl)Display: Curiosidade por princípiovar(--t-3xl)Título 1: Curiosidade por princípiovar(--t-2xl)Título 2: Curiosidade por princípiovar(--t-xl)Título 3: Curiosidade por princípiovar(--t-lg)Destaque: Curiosidade por princípiovar(--t-base)Texto: Curiosidade por princípiovar(--t-sm)Apoio: Curiosidade por princípiovar(--t-xs)Legenda: Curiosidade por princípio06 · Grafismos
Desenhos feitos à mão.
Traços de giz e de lápis que humanizam a comunicação. Cada grafismo aceita qualquer cor da paleta. Use poucos por peça, em tamanhos diferentes, como se tivessem sido desenhados na margem do caderno.
No código: <span class="g g-sol" style="color:var(--laranja);width:120px"></span>
07 · Ícones
Ícones de interface.
Para o site e materiais digitais. Grade de 24 px, traço de 2 px, pontas arredondadas. Herdam a cor do texto.
No código: <svg class="ico"><use href="assets/icones/icones.svg#i-lupa"/></svg>
08 · Componentes
Blocos de construção.
Botões
Etiquetas
Cartões
Cartão com ícone
Para listar características, espaços e princípios.
- Inspirado nas peças do Instagram
- Para listas e avisos
Cartão de destaque
Para segmentos e chamadas.
Pergunta
Como fica uma pergunta aberta?
A resposta aparece aqui, com largura confortável para leitura.
Destaque“Uma fala curta em destaque.”
Espaço de foto
09 · Projetos
Marcas dos projetos.
Cada projeto tem identidade própria, sempre conversando com a paleta e o traço da Científica.
10 · Código
Tokens para usar no site.
Todas as cores, tamanhos, espaços e raios estão em assets/css/tokens.css. Use as variáveis, nunca o código da cor solto.
.botao {
background: var(--laranja-escuro);
color: #fff;
border-radius: var(--r-pilula);
font: 700 var(--t-base)/1.2 var(--fonte);
}
.secao-destaque { background: var(--verde); color: #fff; padding-block: var(--e-9); }