A marca Andrômeda e como usá-la.
O logo, as cores, a tipografia, o tom e o movimento de andromeda.im. Você pode baixar o logo para matérias de imprensa, apresentações e materiais da sua escola.
Logo
O logo é o símbolo seguido da palavra "andromeda" em minúsculas, tudo em ameixa. Use os arquivos como vêm e não redesenhe o logo.
Fundos claros e escuros
Sobre areia ou branco, o logo vai em ameixa. Sobre ameixa escuro, vai em branco. Não coloque o logo sobre fotos com detalhes.
Tamanho mínimo
Na tela, o logo completo tem pelo menos 24 px de altura, cerca de 107 px de largura. Se não couber, use só o símbolo. Na impressão, pelo menos 25 mm de largura.
24 pxÁrea de respiro
Ao redor do logo, deixe no mínimo metade da altura do símbolo. Se houver espaço, a altura inteira.
x/2O que não fazer
Só o símbolo
Onde o logo completo não cabe, como um favicon, um avatar ou o ícone de um app, vai só o símbolo, com a mesma área de respiro.
Cor
A paleta é areia, ameixa e magenta. A areia é o fundo, o ameixa escuro é o texto e o magenta marca o que importa, poucas vezes por tela.
Cores base
Cada cor é um token CSS de src/index.css. O texto de um parágrafo precisa de contraste de 4,5:1, e o texto grande, de 3:1.
O fundo de todas as páginas.
- Texto ameixa
- 15.9:1 · AAA
- Texto branco
- 1.1:1 · Decorativo
- Sobre areia
- 1.0:1 · Decorativo
Faixas e blocos que se destacam do fundo.
- Texto ameixa
- 14.7:1 · AAA
- Texto branco
- 1.2:1 · Decorativo
- Sobre areia
- 1.1:1 · Decorativo
Cartões, campos e capturas.
- Texto ameixa
- 17.1:1 · AAA
- Texto branco
- 1.0:1 · Decorativo
- Sobre areia
- 1.1:1 · Decorativo
Bordas e divisores de 1 px.
- Texto ameixa
- 12.8:1 · AAA
- Texto branco
- 1.3:1 · Decorativo
- Sobre areia
- 1.2:1 · Decorativo
Títulos e texto principal.
- Texto ameixa
- 1.0:1 · Decorativo
- Texto branco
- 17.1:1 · AAA
- Sobre areia
- 15.9:1 · AAA
Parágrafos e linhas finas.
- Texto ameixa
- 1.9:1 · Decorativo
- Texto branco
- 9.0:1 · AAA
- Sobre areia
- 8.4:1 · AAA
Texto secundário e rótulos.
- Texto ameixa
- 2.8:1 · Decorativo
- Texto branco
- 6.0:1 · AA
- Sobre areia
- 5.6:1 · AA
Texto desabilitado. Não serve para parágrafos.
- Texto ameixa
- 6.0:1 · AA
- Texto branco
- 2.8:1 · Decorativo
- Sobre areia
- 2.7:1 · Decorativo
Links, pontos das etiquetas e palavras destacadas.
- Texto ameixa
- 2.3:1 · Decorativo
- Texto branco
- 7.3:1 · AAA
- Sobre areia
- 6.8:1 · AA
Fundos de ícones e chips.
- Texto ameixa
- 14.0:1 · AAA
- Texto branco
- 1.2:1 · Decorativo
- Sobre areia
- 1.1:1 · Decorativo
Texto sobre magenta claro.
- Texto ameixa
- 1.2:1 · Decorativo
- Texto branco
- 13.7:1 · AAA
- Sobre areia
- 12.8:1 · AAA
Proporção
Uma página é quase toda areia e branco. O ameixa vai no texto e, no máximo, em uma faixa escura por página. O magenta ocupa menos de 5 %.
Escala ameixa
Os tons fixos da marca, que não mudam com o tema. plum-ink é o ameixa dos botões e dos blocos escuros.
Escala areia
Faixas escuras
O bloco de IA, o plano em destaque nos preços e o rodapé vão sobre ameixa. Ali o texto passa a branco e aos magentas claros, plum-50 e plum-100. Nunca usamos preto puro.
Comunicados com confirmação de leitura, aprovação da direção antes do envio e arquivo de tudo o que foi enviado. Sem depender do número pessoal de nenhum professor.
Tipografia
Inter para tudo. Instrument Serif em itálico só para a palavra destacada de um título. JetBrains Mono só no manifesto.
Interface, títulos e texto, nos pesos 400, 500, 600 e 700.
Itálico 400, para o trecho destacado de um título, 8 % maior que o resto.
Só no manifesto, nos pesos 400 e 500.
Escala
Os títulos vão em peso 500, com espaçamento negativo entre letras, e diminuem com a largura da tela.
Títulos com destaque
Cada título tem no máximo um trecho destacado, em Instrument Serif itálico e em magenta. O resto vai em Inter.
Nome e tom
Como se escreve o nome e como a Andrômeda soa.
O nome
O nome se escreve de acordo com o idioma do texto. Em minúsculas, só aparece dentro do logo.
- ANDRÔMEDA
- andrômeda, dentro de uma frase
- Andromeda, em um texto em português
- Andrômeda App
Tom
- Dizemos o que o produto faz: quem leu um comunicado, o que falta aprovar, qual turma precisa de atenção.
- Dados concretos antes de adjetivos: "15 dias sem cartão", não "teste sem compromisso".
- Em espanhol, voseo rio-platense: "Empezá gratis". Em português do Brasil, "você".
- Os títulos levam maiúscula só no começo, como uma frase.
- A IA devolve tempo e contexto ao professor. Não o substitui.
Espaço e formas
Medidas que se repetem em todo o site.
Contêiner
Largura máxima de 1280 px, com margens laterais de 24 px no celular, 40 px no tablet e 56 px no desktop. Entre seções vão de 96 a 144 px.
Cantos arredondados
Botões
São três botões, todos em formato de pílula: o principal em ameixa, o secundário em branco com borda e um branco para fundos escuros. Com o mouse em cima mudam de tom, e ao tocar diminuem 2 %.
Ícones
Os ícones são do Lucide, com traço de 2 px. Vão em 16 px dentro do texto e em 20 px em botões e cartões. Dentro de uma célula, sobre magenta claro.
Imagens
Mostramos capturas reais do painel e do app, no idioma de quem lê. Não usamos maquetes nem fotos de banco de imagens.
- Há uma captura por idioma, com o sufixo -es, -pt ou -en.
- Vão em .webp, com largura e altura, e com carregamento adiado.
- Sobre areia ou branco, com borda de 1 px e cantos de 24 px.
Movimento
Tudo entra com a mesma curva, rápida no começo e suave no fim. Se o dispositivo pede menos movimento, fica o esmaecimento e sai o deslocamento.
Curva
Durações
Entradas
Os blocos sobem 18 px e passam de um desfoque de 6 px a nítidos. Os títulos entram palavra por palavra, uma a cada 45 ms.