TheBio.app
Guía de marca
Manual de identidad visual para uso interno, partners y prensa. Los valores siguen el código y los activos publicados del producto: una sola fuente de verdad evita versiones divergentes.
Introducción
Esta guía resume cómo presentar TheBio.app de forma coherente: colores definidos en el tema del producto, logotipo y archivos listos para descargar desde el sitio. Antes de crear piezas nuevas, contrastá con esta referencia; si el producto evoluciona, el código en web/src/theme/brand.ts prevalece como fuente técnica.
Identidad verbal
Nombre
Escribí siempre TheBio.app (T y B mayúsculas, punto antes de app). Evitá variantes como “The Bio App”, “Thebio” o “TheBioApp” en comunicación pública.
Tono
Claro, directo y cercano en español: explicá el beneficio (“tu link en bio”) sin jerga innecesaria. En marketing público mantené frases cortas y accionables, alineadas al mensaje de la home.
Logotipo
El logotipo principal es el PNG referenciado en el sitio. Mantené proporciones, legibilidad y contraste; no lo reemplacés por tipografía genérica en contextos de marca.
Uso correcto y zona de respeto
Dejá al menos la mitad de la altura del símbolo como margen libre alrededor del logo (zona de respeto). En la barra de navegación del sitio el símbolo se usa aproximadamente 36px; no reduzcas por debajo de 32px en interfaces digitales salvo favicon o iconos de sistema.
Usos incorrectos
Deformar
Bajo contraste
Rotar o alterar
Paleta de color
Los valores hex deben tomarse de esta tabla (sincronizados con brand.ts). El violeta y el gris carbón son la base de la experiencia marketing; el lavanda claro refuerza acentos y enlaces sobre fondo oscuro.
BIO_PURPLE
#ab47bcColor primario de marca, CTAs y hero.BIO_DEEP
#531D86Violeta profundo para profundidad y gradientes.BIO_GREY
#292f36Superficies oscuras, barra de navegación, tarjetas promo.BIO_LIGHT_PURPLE
#dc95ffAcentos claros, bullets y estados activos sobre oscuro.NAV_TEXT
#f5f6faTexto principal sobre fondos oscuros de marca.pageWash
#fafafaFondo general de páginas claras (app y documentación web).accentWash
#f8fafcFondo alternativo suave para secciones claras.heroCard
#292f36Alias de superficie hero (igual que BIO_GREY en el token).heroMuted
rgba(41,47,54,0.92)Capas semitransparentes sobre hero oscuro.Superficies y patrones de interfaz
El tema de la aplicación (Material UI) define radios y botones alineados al marketing: tarjetas y contenedores tipo Paper usan esquinas de aproximadamente 12px; botones estándar del producto unas 10px. Los botones tipo “pill” de las landing (legacy marketing) usan radio completo aproximado 25px vía legacyButtonSx.
Tarjeta promo (BIO_GREY)
Ejemplo de bloque con borde sutil violeta y sombra suave, como en el panel.
Superficie clara
Usá pageWash o blanco para contenido largo; reservá el violeta para impacto y jerarquía, no para párrafos extensos.
Tipografía
La interfaz usa Inter como familia principal (variable CSS --font-inter). Roboto se carga en el layout raíz para componentes de Material que lo esperan; el tema tipográfico del producto prioriza Inter en encabezados y cuerpo.
Inter light — titulares amplios
Inter semibold — subtítulos y énfasis
Roboto regular — disponible para el stack MUI (pesos cargados: 300, 400, 500, 700).
Recursos descargables
Archivos servidos desde el propio sitio (carpeta public). Clic en “Descargar” guarda el archivo; respetá la licencia de uso de la marca en comunicaciones externas.
| Archivo | Formato | Uso sugerido | Acción |
|---|---|---|---|
thebioapp-logo.png | PNG | Logo principal en web y apps (referencia en código: SITE_LOGO_PNG). | Descargar |
thebioapp-logo-hires.png | PNG | Alta resolución para piezas que requieran mayor detalle. | Descargar |
thebioapp-logo-marketing.png | PNG | Versión amplia para marketing, presentaciones e impresión. | Descargar |
thebioapp-favicon.png | PNG | Icono de pestaña y contextos cuadrados pequeños. | Descargar |
favicon.ico | ICO | Favicon clásico para compatibilidad con navegadores antiguos. | Descargar |
Contacto y uso
Para dudas sobre implementación o uso en campañas, pasá por el canal público del producto: la sección lista de espera / contacto en la home. No inventes direcciones de correo ni claims legales que no estén publicados en el sitio.