La marca Andrómeda y cómo usarla.
El logo, los colores, la tipografía, el tono y el movimiento de andromeda.im. Podés descargar el logo para notas de prensa, presentaciones y materiales de tu escuela.
Logo
El logo es el isotipo seguido de la palabra «andromeda» en minúsculas, todo en ciruela. Usá los archivos como vienen y no lo redibujes.
Fondos claros y oscuros
Sobre arena o blanco, el logo va en ciruela. Sobre ciruela oscuro, va en blanco. No lo pongas sobre fotos con detalle.
Tamaño mínimo
En pantalla, el logo completo mide al menos 24 px de alto, unos 107 px de ancho. Si no entra, usá el isotipo solo. En impresión, al menos 25 mm de ancho.
24 pxEspacio libre
Alrededor del logo dejá como mínimo la mitad del alto del isotipo. Si hay lugar, el alto completo.
x/2Lo que no hay que hacer
El isotipo solo
Donde no entra el logo completo, como un favicon, un avatar o el ícono de una app, va el isotipo solo, con el mismo espacio libre.
Color
La paleta es arena, ciruela y magenta. La arena es el fondo, el ciruela oscuro es el texto y el magenta marca lo importante, pocas veces por pantalla.
Colores base
Cada color es un token de CSS de src/index.css. El texto de un párrafo necesita un contraste de 4,5:1, y el texto grande, de 3:1.
El fondo de todas las páginas.
- Texto ciruela
- 15.9:1 · AAA
- Texto blanco
- 1.1:1 · Decorativo
- Sobre arena
- 1.0:1 · Decorativo
Bandas y bloques que se separan del fondo.
- Texto ciruela
- 14.7:1 · AAA
- Texto blanco
- 1.2:1 · Decorativo
- Sobre arena
- 1.1:1 · Decorativo
Tarjetas, campos y capturas.
- Texto ciruela
- 17.1:1 · AAA
- Texto blanco
- 1.0:1 · Decorativo
- Sobre arena
- 1.1:1 · Decorativo
Bordes y divisores de 1 px.
- Texto ciruela
- 12.8:1 · AAA
- Texto blanco
- 1.3:1 · Decorativo
- Sobre arena
- 1.2:1 · Decorativo
Titulares y texto principal.
- Texto ciruela
- 1.0:1 · Decorativo
- Texto blanco
- 17.1:1 · AAA
- Sobre arena
- 15.9:1 · AAA
Párrafos y bajadas.
- Texto ciruela
- 1.9:1 · Decorativo
- Texto blanco
- 9.0:1 · AAA
- Sobre arena
- 8.4:1 · AAA
Texto secundario y etiquetas.
- Texto ciruela
- 2.8:1 · Decorativo
- Texto blanco
- 6.0:1 · AA
- Sobre arena
- 5.6:1 · AA
Texto deshabilitado. No sirve para párrafos.
- Texto ciruela
- 6.0:1 · AA
- Texto blanco
- 2.8:1 · Decorativo
- Sobre arena
- 2.7:1 · Decorativo
Enlaces, puntos de las etiquetas y palabras resaltadas.
- Texto ciruela
- 2.3:1 · Decorativo
- Texto blanco
- 7.3:1 · AAA
- Sobre arena
- 6.8:1 · AA
Fondos de íconos y chips.
- Texto ciruela
- 14.0:1 · AAA
- Texto blanco
- 1.2:1 · Decorativo
- Sobre arena
- 1.1:1 · Decorativo
Texto sobre magenta claro.
- Texto ciruela
- 1.2:1 · Decorativo
- Texto blanco
- 13.7:1 · AAA
- Sobre arena
- 12.8:1 · AAA
Proporción
Una página es casi toda arena y blanco. El ciruela va en el texto y, como mucho, en una banda oscura por página. El magenta ocupa menos del 5 %.
Escala ciruela
Los tonos fijos de la marca, que no cambian con el tema. plum-ink es el ciruela de los botones y de los bloques oscuros.
Escala arena
Bandas oscuras
El bloque de IA, el plan destacado de precios y el pie de página van sobre ciruela. Ahí el texto pasa a blanco y a los magentas claros, plum-50 y plum-100. Nunca usamos negro puro.
Comunicados con confirmación de lectura, aprobación del equipo directivo antes de que salgan y archivo de todo lo enviado. Sin depender del número personal de ningún docente.
Tipografía
Inter para todo. Instrument Serif en cursiva sólo para la palabra resaltada de un titular. JetBrains Mono sólo en el manifiesto.
Interfaz, titulares y texto, en pesos 400, 500, 600 y 700.
Cursiva 400, para el segmento resaltado de un titular, un 8 % más grande que el resto.
Sólo en el manifiesto, en pesos 400 y 500.
Escala
Los titulares van en peso 500, con interletra negativa, y se achican con el ancho de la pantalla.
Titulares con resaltado
Cada titular tiene como mucho un segmento resaltado, en Instrument Serif cursiva y en magenta. El resto va en Inter.
Nombre y tono
Cómo se escribe el nombre y cómo suena Andrómeda.
El nombre
El nombre se escribe según el idioma del texto. En minúsculas sólo aparece dentro del logo.
- ANDRÓMEDA
- andrómeda, dentro de una oración
- Andromeda, en un texto en español
- Andrómeda App
Tono
- Nombramos lo que hace el producto: quién leyó un comunicado, qué falta aprobar, qué curso necesita atención.
- Datos concretos antes que adjetivos: «15 días sin tarjeta», no «prueba sin compromiso».
- En español, voseo rioplatense: «Empezá gratis». En portugués de Brasil, «você».
- Los titulares llevan mayúscula sólo al principio, como una oración.
- La IA le devuelve tiempo y contexto al docente. No lo reemplaza.
Espacio y formas
Medidas que se repiten en todo el sitio.
Contenedor
Ancho máximo de 1280 px, con márgenes laterales de 24 px en el celular, 40 px en tablet y 56 px en escritorio. Entre secciones van de 96 a 144 px.
Bordes redondeados
Botones
Hay tres botones, todos con forma de píldora: el principal en ciruela, el secundario en blanco con borde y uno blanco para fondos oscuros. Con el mouse encima cambian de tono, y al tocarlos se achican un 2 %.
Íconos
Los íconos son de Lucide, con trazo de 2 px. Van en 16 px dentro del texto y en 20 px en botones y tarjetas. Dentro de una celda, sobre magenta claro.
Imágenes
Mostramos capturas reales del panel y de la app, en el idioma de quien lee. No usamos maquetas ni fotos de stock.
- Hay una captura por idioma, con el sufijo -es, -pt o -en.
- Van en .webp, con ancho y alto, y con carga diferida.
- Sobre arena o blanco, con borde de 1 px y esquinas de 24 px.
Movimiento
Todo entra con la misma curva, rápida al principio y suave al final. Si el dispositivo pide menos movimiento, queda el fundido y se va el desplazamiento.
Curva
Duraciones
Entradas
Los bloques suben 18 px y pasan de un desenfoque de 6 px a nítidos. Los titulares entran palabra por palabra, una cada 45 ms.