🚀 buba.space · Manual de Marca v2.0
Buba
El copiloto que pone tu marketing en órbita. Marca, mascota y sistema visual de Buba: la plataforma que automatiza el go-to-market de cualquier marca.
scroll ↓
El copiloto que pone tu marketing en órbita. Marca, mascota y sistema visual de Buba: la plataforma que automatiza el go-to-market de cualquier marca.
Buba automatiza el lanzamiento y crecimiento de marcas, de GTM a SEO, sin que se sienta frío ni robótico. La mascota humaniza algo complejo: te acompaña como un copiloto leal, listo y optimista.
Hacer que lanzar y crecer una marca sea tan simple como tener a Buba a tu lado.
De la estrategia a la ejecución: campañas, contenido y crecimiento, en piloto automático.
La marca trae la visión; Buba trae la velocidad, la consistencia y los resultados.
Cómo se comporta Buba en una escala de marca.
Buba es un Golden Retriever cachorro con traje de astronauta y casco burbuja. Representa lo que la marca hace: explorar nuevos mundos (mercados) con curiosidad, valentía y una sonrisa.
.space y a "poner marcas en órbita".El rango emocional de Buba. Úsalas para dar tono a cada momento del producto y la comunicación.
Estado base. Onboarding, bienvenidas, estados normales.
Logros, lanzamientos, "¡campaña publicada!".
Cargando, analizando datos, generando ideas.
Tips, confirmaciones, micro-celebraciones.
El wordmark "buba" es redondo y amigable. El punto coral sobre la última letra es el planeta de Buba: un detalle propietario que puede orbitar, brillar o convertirse en estrella.
Deja un margen mínimo igual a la altura de la "b" alrededor del wordmark. Nada invade ese espacio.
24 px de alto en digital. Por debajo, usa solo el ícono (cabeza de Buba o el planeta).
La cabeza de Buba con casco funciona como avatar, favicon y app icon. El planeta coral es el ícono reducido.
Coral como protagonista, azul cósmico y amarillo estrella como apoyo, dorado para Buba y crema para respirar. El navy profundo aterriza todo y da contraste.
60% crema/blanco, 30% navy y azul, 10% coral/amarillo para acentos y acción. La saturación se reserva para momentos clave.
Coral y navy cumplen contraste AA sobre crema/blanco. No pongas texto amarillo sobre blanco ni coral sobre azul.
Sobre fondo Deep Space, el amarillo y el coral brillan: úsalo para portadas, celebraciones y hero shots.
Wordmark, titulares grandes y momentos juguetones. Redonda y cálida.
Títulos de sección y UI. Geométrica, moderna, confiable.
Texto corrido, párrafos largos y datos. Neutral y legible en cualquier tamaño.
Display 34–86px Fredoka
H2 28–44px Poppins SemiBold/Bold
H3 18–22px Poppins Medium
Cuerpo 16px Inter Regular · interlínea 1.6
Cercano, claro y optimista. Buba es un experto que no presume: explica simple, celebra contigo y nunca asusta con jerga. Tutea siempre.
Tuteo, frases cortas, cero corporativismo. Hablas con un amigo que sabe del tema.
Una idea por frase. Traduce lo técnico. Si Buba no lo entendería, se reescribe.
Enfocado en el siguiente paso y en la celebración. Energía de cachorro, no de hype vacío.
"¡Listo! Tu campaña ya está en órbita 🚀 La primera data llega en 24h."
"La campaña ha sido provisionada exitosamente en el sistema de gestión publicitaria."
"Vi una oportunidad: tu audiencia responde mejor los jueves. ¿La probamos?"
"Análisis de performance indica una varianza temporal en el engagement segmentado."
"Tranqui, yo me encargo del resto. Tú dedícate a la marca."
"El usuario debe delegar las tareas operativas restantes a la plataforma."
Buba vive en todo el ecosistema de la marca.
Onboarding, estados vacíos, loaders y celebraciones dentro de la app.
Protagonista de creatividades, reels y plantillas de campaña.
Firma cálida, headers de newsletter, reportes "de parte de Buba".
Stickers, peluche, swag para clientes y eventos.
El nuevo territorio donde te buscan tus clientes es un cosmos inmenso e incierto: la IA. Buba navega ese espacio por ti y te pone en el mapa, para que tu marca sea encontrada. Esta es la metáfora central de toda la comunicación.
Espacio = IA (vasta, llena de señales, difícil de navegar). · Estrellas = clientes. · Buba = el copiloto que traza la ruta y enciende tu señal para que te encuentren.
Alt: "Tu marca tiene un norte. Buba te lleva." · Buba traza la ruta de tu marca a través del cerebro-IA hasta tus clientes.
Alt: "Que tus clientes te orbiten." · Buba convierte tu marca en un faro: las naves (clientes) llegan solas.
Alt: "Tu próximo cliente está a una constelación de distancia." · Espacio inferior libre para CTA y logo.
Alt: "Conecto tu marca con quien te está buscando." · El holograma une tu planeta con cada cliente-estrella.
Nebulosa de red neuronal (estrellas conectadas) sobre Deep Space navy. Nunca un espacio vacío y frío.
Puntos de luz coral, azul y dorado. Se conectan, se atraen, se encienden.
Siempre señalando, liderando o emitiendo señal. Acción y dirección, nunca pasivo.
Titular corto en Fredoka/Poppins sobre el espacio negativo. Verbo de guía: guío, te llevo, enciendo, conecto.
El producto aterrizó a pleno día. La noche espacial queda solo en el hero (starfield, Buba flotando y el escaneo en vivo); al scrollear amanece y todo lo demás vive en un mundo diurno de tarjetas sticker, bandas de color y movimiento perpetuo. La fuente de verdad es geo/landing-v2.html, y buba.app replica estos tokens en app/globals.css.
Starfield, video de Buba con máscara radial y la card del escaneo. Es el único momento oscuro: engancha y pide el dominio.
Un degradado que nace en el deep del hero y muere en crema. Aloja el marquee de marcas que ya trabajan con nosotros, en crema.
Bandas de color por sección, tarjetas sticker, Fredoka en titulares y siempre algo en movimiento. Cero paneles oscuros.
El recorrido alterna fondos completos, nunca tarjetas oscuras sobre claro. Este es el orden de la landing.
Se suma a la paleta del manual: pasteles para stickers y semánticos oscurecidos para leerse sobre claro.
El azul cósmico se oscurece a #1273a3 cuando es texto o ícono sobre crema/blanco.
Una sola superficie para todo: borde sólido, sombra dura sin difuminar, esquinas generosas y un pop al hover. Las de este manual son demos vivas: pásales el cursor.
Fondo blanco, crema o pastel. Borde 2px navy. Radio 16 a 24px. Sombra dura desplazada (sin blur). Rotaciones de ±1 a 2 grados para el feel de sticker pegado; al hover se endereza y se levanta.
.sticker {
background: #fff; /* o #FBF1DF / pastel */
border: 2px solid #1C2150;
border-radius: 20px;
box-shadow: 6px 6px 0 rgba(28,33,80,.9);
}
.sticker:hover {
transform: translateY(-6px);
box-shadow: 6px 12px 0 rgba(28,33,80,.75);
}Los CTA son pills Fredoka con el mismo borde y sombra dura. El kicker de sección es un chip navy (o amarillo cuando la banda es navy). Inputs blancos con borde navy suave y foco azul.
Fredoka asciende: ya no es solo el logo, es el display de todos los titulares de sección (32 a 58px). Poppins queda en kickers, UI y sublabels. Inter sigue en el cuerpo.
Lo didáctico se resuelve con marcas en círculo, nunca con párrafos: ✓ lo hace, ~ a medias, ✕ no lo hace. La columna propia se resalta en ámbar.
La regla verde/amarillo del escaneo, oscurecida para fondos claros. Tu marca siempre en verde, la competencia en ámbar.
Cada sección tiene un elemento en marcha perpetua, pausable con el cursor. Con prefers-reduced-motion todo se congela en un estado legible.
El ticker coral rotado y el marquee de clientes del amanecer: cintas infinitas que se pausan al hover.
Los 5 agentes giran alrededor de la marca en dos anillos con contra-rotación para que el texto nunca se voltee.
Cards cerradas que se abren y muestran qué está haciendo el agente, con una línea de acción y cursor parpadeante.
Destellos en los colores de marca siguen al cursor por toda la página. Solo con pointer fino.
Los videos de Buba (Higgsfield) se integran sin marco: máscara radial que funde los bordes con el fondo, sepia suave y scanlines encima.
.tv video { filter: sepia(.38) saturate(.85) contrast(1.06); }
.tv {
mask-image: radial-gradient(ellipse 58% 54% at 50% 48%,
#000 42%, transparent 72%);
}
.tv::after { /* scanlines */
background: repeating-linear-gradient(0deg,
rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
}Cualquier logo con fondo transparente entra al marquee y sale crema parejo con un solo filtro. Si el archivo trae placa opaca, se compone la marca en SVG (isotipo + wordmark) en crema.
.cl-set img {
filter: brightness(0) invert(1) sepia(.22) saturate(.65);
}Assets vivos: assets/clients/ (logos), assets/buba-*.png (expresiones de la mascota), assets/tools-vintage.mp4 (video del bloque de herramientas).
El hero conserva el espacio profundo (#0B0E2A), el starfield y el video de Buba, pero la card del escaneo ya habla sticker: crema sólida, borde navy, sombra dura y botones pill. El liquid glass quedó retirado del sistema.