Saltar al contenido

Marca · Identidad visual

Manual de Marca

Este manual describe cómo está construida la identidad visual del LBS y cómo aplicarla: el logotipo y sus variantes aprobadas, el área de protección y los tamaños mínimos, la paleta de colores, la tipografía y el tono con el que habla el laboratorio.

La identidad pertenece a todo el laboratorio: artículos, pósteres, presentaciones, herramientas y sitios web deben parecer venir del mismo lugar. En caso de duda, elige la opción correcta más simple y mantén el logotipo libre de cualquier otro elemento.

Volver a los documentos

Nombre y firma

El laboratorio es «LBS» en forma corta y «Laboratório de Bioinformática e Sistemas» en forma completa. El nombre completo es institucional y se mantiene en portugués en contextos formales, incluso en material escrito en otro idioma; las traducciones solo sirven para facilitar la lectura.

LBS
Siempre en mayúsculas, nunca «L.B.S.» ni «Lbs». Puede usarse solo una vez que haya aparecido el nombre completo.
Laboratório de Bioinformática e Sistemas
Nombre oficial completo. Mantenlo en portugués en membretes, convenios y siempre que se nombre institucionalmente al laboratorio.
Laboratorio de Bioinformática y Sistemas
Traducción de lectura, usada en textos en español. Equivalentes: Laboratory of Bioinformatics and Systems (EN) y Laboratoire de Bioinformatique et Systèmes (FR).
DCC · UFMG
Vincula siempre el laboratorio al Departamento de Ciencia de la Computación de la Universidad Federal de Minas Gerais. Usa punto medio, no barra ni guion.

La firma tipográfica dentro del logotipo es arte vectorizada, no texto editable. Está siempre en portugués y nunca se vuelve a componer ni se traduce.

El logotipo

La identidad tiene dos partes: el símbolo digital —la flecha que sale de un globo punteado— y la firma tipográfica. Se combinan en tres formatos y tres versiones de color. Cada versión se ofrece en SVG, que escala sin pérdida, y en PNG con fondo transparente.

Firma horizontal

Símbolo a la izquierda de la firma. Es la opción por defecto para cabeceras, pies de página, membretes y plantillas de presentación: siempre que el espacio sea más ancho que alto. Es la versión que usa este sitio.

Manual de Marca — Firma horizontal, Color

Color

Por defecto. Úsala sobre fondos blancos y claros.

Manual de Marca — Firma horizontal, Azul marino

Azul marino

Uso a un solo color: impresión sin degradados, grabado, sellos y documentos monocromos.

Manual de Marca — Firma horizontal, Blanca

Blanca

Sobre fondos azul marino, oscuros o fotográficos. Es la versión que usa el tema oscuro del sitio.

Firma vertical

Símbolo sobre la firma. Úsala donde el espacio sea estrecho o cuadrado: pósteres, banners enrollables, credenciales, portadas de redes sociales y la esquina de un póster científico.

Manual de Marca — Firma vertical, En color

En color

Estándar. Úsala sobre fondos blancos y claros.

Manual de Marca — Firma vertical, Azul marino

Azul marino

Fondos claros.

Manual de Marca — Firma vertical, Blanca

Blanca

Fondos oscuros y fotográficos.

Símbolo aislado

El símbolo sin la firma. Úsalo solo cuando el LBS ya esté nombrado cerca, o cuando el espacio sea demasiado pequeño para la firma completa: favicons, avatares, iconos de aplicación, marcas de agua y marcadores de sección.

Manual de Marca — Símbolo aislado, Color

Color

Por defecto, sobre fondos claros.

Manual de Marca — Símbolo aislado, Azul marino

Azul marino

Uso a un solo color y tamaños muy reducidos.

Manual de Marca — Símbolo aislado, Blanco

Blanco

Fondos oscuros y fotográficos.

Área de protección y tamaño mínimo

Mantén libre, en los cuatro lados del logotipo, un margen igual a la mitad de la altura del símbolo. Nada entra en ese margen: texto, filetes, imágenes o el borde de la página. En caso de duda, dale más espacio, no menos.

LBS½x½x½x½x

Firma horizontal

144 px / 40 mm

Ancho mínimo. Es el tamaño que usa la cabecera del sitio en pantallas pequeñas.

Firma vertical

96 px / 25 mm

Ancho mínimo.

Símbolo

32 px / 10 mm

Ancho mínimo. Por debajo de ese tamaño, usa la versión azul marino: el degradado deja de leerse.

Lo que no se debe hacer

Las firmas son arte final. Escálalas de forma proporcional y no modifiques nada más.

  • No estires, aplastes ni gires el logotipo. Escálalo de forma proporcional.
  • No lo recolorees fuera de las tres versiones aprobadas.
  • No coloques la versión en color o azul marino sobre un fondo oscuro o cargado: para eso está la versión blanca.
  • No vuelvas a componer la firma. Es arte vectorizada, no texto, y nunca se traduce.
  • No construyas tu propia composición separando el símbolo de la firma.
  • No añadas sombras, contornos, biselados ni brillos.
  • No lo agobies. Respeta el área de protección.
  • No lo metas en una caja blanca sobre un fondo de color cuando la versión blanca puede aplicarse directamente sobre ese fondo.

Color

La paleta es azul profundo y cian para la ciencia, la computación y la confianza, y verde para las ciencias de la vida. El naranja es un acento poco frecuente: sirve para destacar una sola cosa en la página, nunca como segundo color de marca. El morado, el rojo, el negro o gris dominantes y los tonos neón quedan fuera de la paleta.

Colores del logotipo

Tomados de la propia arte. Usa estos valores al reproducir el logotipo o al igualarlo en impresión.

Azul LBS

#093373

Azul marino plano: símbolo y firma en uso a un solo color

Degradado azul

#123F86 → #082F68

Cuerpo del símbolo en la versión en color

Turquesa LBS

#05ADB6 → #00889C

Realce del símbolo en la versión en color

Blanco

#FFFFFF

Logotipo en negativo sobre fondos oscuros y fotográficos

Paleta de interfaz

Los tokens sobre los que están construidos el sitio y las herramientas del laboratorio. Cada uno tiene un valor para el tema claro y otro para el oscuro; en el código, usa el token, no el hexadecimal.

InkClaro #08213F · Oscuro #E8F4FFTexto principal y superficies oscuras planas
MarineClaro #0F6FB8 · Oscuro #76C4FFEnlaces, etiquetas de sección y acciones primarias
CyanClaro #139BD7 · Oscuro #57CDFFRealces, iconos y acentos de datos
LeafClaro #35A972 · Oscuro #62DC9DAcento de ciencias de la vida y estados positivos
AmberClaro #F4A01B · Oscuro #F8B84CAcento poco frecuente. Como máximo uno por pantalla
MutedClaro #5F728B · Oscuro #9AB3CDTexto secundario y pies de foto
LineClaro #DCE8F4 · Oscuro #253E58Bordes, filetes y contornos de tarjetas
CloudClaro #F7FBFF · Oscuro #09192BFondos de página y de tarjetas

Tipografía

Dos familias: una con serifa para titulares y una sin serifa para todo lo demás. Ambas son pilas de fuentes, no una fuente única, para que el material se mantenga consistente en equipos que no tengan instalada la primera opción.

Display

Bioinformática

Iowan Old Style → Newsreader → Fraunces → Georgia

Títulos de página y titulares. Compón en cuerpo grande, interlineado ajustado y con moderación.

Texto e interfaz

Laboratorio de Bioinformática y Sistemas

Inter → Manrope → Geist → system UI

Cuerpo de texto, navegación, etiquetas, botones y tablas: todo lo que no sea un titular.

Etiquetas de sección

ÁREAS DE INVESTIGACIÓN

Sin serifa, peso 900, mayúsculas, espaciado 0,2em

La pequeña etiqueta azul marino sobre una sección. Mantenla corta: dos o tres palabras.

Voz y tono

Acordados en la encuesta interna de marca del laboratorio. Sonamos como investigadores que entregan cosas.

Innovador

Empieza por lo que es nuevo y por qué importa, no por el método.

Interdisciplinario

Escribe de modo que lo entiendan tanto un biólogo como un informático. Explica cada término la primera vez que aparece.

Emprendedor

Concreto y prospectivo. Nombra la herramienta, el conjunto de datos, el resultado.

Moderno

Frases cortas, voz activa, sin preámbulos institucionales.

Confiable

Nunca exageres un resultado. Cítalo, enlázalo o déjalo fuera.

Evita

  • El morado en cualquier contexto de marca
  • El rojo como acento: se lee como estado de error
  • El negro o el gris como color dominante
  • El neón y los degradados muy saturados fuera del logotipo

Archivos

Las nueve versiones del logotipo están en public/logos/ de este repositorio, cada una en SVG y en PNG con fondo transparente: dieciocho archivos en total. Usa el SVG siempre que puedas, porque escala sin pérdida. El PNG sirve para editores que no abren vectores, como Word, PowerPoint y las redes sociales. Descarga el conjunto completo en ZIP o toma un archivo individual de las tarjetas de arriba.

ZIP · 9 SVG + 9 PNG · ~1,5 MB

Descargar todos los logotipos (ZIP)