Identidad visual
Brand kit
Logotipo, isotipo, color, tipografía y tono de voz de Bumini. Úsalo para hablar de nosotros con coherencia. Ofertas para cada etapa de tu bebé.
Todo lo que hay en esta página lo escribe npx tsx scripts/generate-brand-assets.ts. No edites los ficheros a mano: cámbialo en el script y vuelve a ejecutarlo.
Logotipo
Dos versiones y solo dos: sobre claro y sobre oscuro. El logotipo está dibujado como geometría vectorial, no como texto, así que el SVG se ve igual en cualquier equipo aunque no tenga la tipografía instalada.
Isotipo
La cara Bumini: dos ojos Lima y una sonrisa Magenta sobre Noche. En fondo oscuro se apoya sobre una placa Porcelana para no fundirse con el fondo.
Avatares para redes
Telegram y WhatsApp recortan la foto de perfil en círculo. Por eso el avatar va a sangre —sin esquinas redondeadas, que se perderían en el recorte— y toda la cara vive dentro del 40 % del radio desde el centro. El generador lo vuelve a medir píxel a píxel en cada ejecución y falla si algo se sale.
Cuadrado 400×400
El que subes a la plataforma
Recorte circular
Cómo lo verá la gente
Circular con alfa
Para sitios que no recortan
Favicon e iconos
El favicon.ico es multirresolución (16, 32 y 48 px, con la cara un 12 % más grande por debajo de 32 px para que se lea). Los iconos maskable van a sangre para que Android pueda recortarlos con cualquier forma.
16
32
48
Apple 180
PWA 192
Maskable
Open Graph
Una sola plantilla, dos formas de servirla: /og-default.png es la imagen estática por defecto (1200×630) y opengraph-image-template.tsx la genera al vuelo con el titular de cada página.
Descargas
SVG para todo lo que sea vectorial (web, imprenta, rótulos) y PNG con fondo transparente para lo demás.
Paleta de color
Porcelana
#FBFBFD
Fondo base
Porcelana honda
#EEF1F7
Fondo alterno
Noche
#2B3A5B
Logotipo / superficies
Tinta
#22293A
Hover oscuro
Lima
#8FB8E8
Acento / ojos
Magenta
#F0879E
Acento / sonrisa
Contraste
El logotipo sobre su fondo siempre supera 4,5:1 (WCAG AA). El rosa de marca solo llega a AA sobre Noche, así que la sonrisa cambia a Magenta contraste #A82C4B —el mismo --magenta-ink que ya usa el sistema— cuando va sobre claro. Los ratios se calculan aquí mismo, no se copian.
| Par | Muestra | Ratio | AA |
|---|---|---|---|
| Logotipo sobre Porcelana | bumini | 10.93:1 | Pasa |
| Logotipo sobre Noche | bumini | 10.93:1 | Pasa |
| Sonrisa sobre Noche | bumini | 4.66:1 | Pasa |
| Sonrisa sobre claro | bumini | 6.50:1 | Pasa |
| Ojos sobre Noche | bumini | 5.48:1 | Pasa |
| Texto sobre Lima | bumini | 5.48:1 | Pasa |
| Rosa de marca sobre claro | bumini | 2.35:1 | No usar |
Tipografía
Display · Bricolage Grotesque
Todo para tu bebé con descuento
Texto · DM Sans
Selección editorial de chollos para bebé en España: pañales, carritos, sillas de coche, básicos y cuidado diario, con precios verificados y sin postureo.
Mono · JetBrains Mono
-30% · 0-3 MESES · 2-3 AÑOS
Reglas de uso
Sí
- Deja un aire mínimo alrededor igual a la altura del isotipo.
- Usa la versión sobre oscuro en cuanto el fondo baje de 4,5:1 con Noche.
- Isotipo suelto a partir de 24 px; por debajo, usa el favicon.
- Escribe siempre «Bumini» en prosa, con B mayúscula.
No
- No lo recolorees fuera de la paleta ni le pongas sombras.
- No lo deformes, gires ni le cambies el interletraje.
- No pongas el logotipo sobre Magenta en versión clara: se queda en 2,35:1.
- No edites los PNG a mano; regenéralos con el script y súbelos.
Botones
Design system
La fuente de verdad de los tokens vive en @bumini/ui (colors, fonts) y la de los assets en el generador. Nada de hexes sueltos: importa los tokens.
import { Button, colors, fonts } from "@bumini/ui";
# regenerar todo el kit (favicons, logos, avatares, OG, manifests)
npx tsx scripts/generate-brand-assets.tsTono de voz
Directo
Al grano, sin relleno ni marketing vacío. Decimos el precio y el ahorro real.
De padres a padres
Hablamos claro: cercano, práctico y con criterio para el día a día.
Honesto
Marcamos los enlaces de afiliado y decimos cuándo algo no vale la pena.