Identidad de marca
Brand Kit
Una identidad no se diseña porque haga falta un logotipo: se diseña para dejar de decidir lo mismo cada vez. Esto es ese lenguaje, con sus reglas y sus piezas, descargable en claro y oscuro.
De qué está hecha
La idea que hay detrás y los tres signos que la sostienen: el monograma, la paleta de dos capas y la pareja tipográfica.
- 01Concepto
- 02Logotipo
- 03Color
- 04Tipografía
01 — Concepto
01. Una marca de dos capas
El símbolo es un anillo, el foco que descansa sobre una base sólida: criterio de producto construido sobre una fundación estable. No es decoración: es la firma del método. Del discovery al dato, dos planos que se separan y vuelven a alinearse en una sola forma limpia.
Una sola capa de tinta. Para UI pequeña, favicon y monocromo.
Tres trazos apilados sin blend. Solo a ≥48px, donde el color se lee como capa.
02 — Logotipo
02. El logo y sus reglas
Dos composiciones (símbolo solo y lockup con wordmark), cada una en plano y split. Recortadas exactas a la tinta: la altura que le das es la altura real del símbolo.
Todo lo que hace falta para poner esta marca en cualquier sitio: los PNG de 1024, 512 y 256 px, las dos tintas y el favicon. En un solo archivo.
Inline en el marcado · 382 B · dimensionado por altura.
El SVG suelto va en tinta oscura. En el kit: PNG de 1024, 512 y 256 px y las dos tintas.
Inline en el marcado · 220 B · dimensionado por altura.
El SVG suelto va en tinta oscura. En el kit: PNG de 1024, 512 y 256 px y las dos tintas.
Una tinta pura · 220 B · para fondos claros.
En el kit: PNG de 1024, 512 y 256 px.
Una tinta pura · 220 B · para fondos oscuros.
En el kit: PNG de 1024, 512 y 256 px.
Nunca inline · 23 KB trazado · dimensionado por ancho.
El SVG suelto va en tinta oscura. En el kit: PNG de 1024, 512 y 256 px y las dos tintas.
Nunca inline · 23 KB trazado · dimensionado por ancho.
El SVG suelto va en tinta oscura. En el kit: PNG de 1024, 512 y 256 px y las dos tintas.
Tabla de uso
Todos los tamaños son la altura visible del símbolo.
Las siete reglas
Umbral split → flat: 48px
El desplazamiento de color es el 5,1% de la altura del símbolo, así que a 48px el creciente mide 2,5px. Por debajo se lee como fleco sucio, no como capa.
Tamaño mínimo: 24px
El trazo es el 8,6% de la altura: a 24px son 2,1px y aguanta; a 15px son 1,3px y el antialiasing lo lava a gris.
Sin contenedor circular
El símbolo ya es un círculo. Meterlo en otro lo reduce y lo convierte en una diana.
Nunca menor que la UI contigua
Es la marca, no un icono más. Debe pesar al menos tanto como el LinkedIn o el © de al lado.
Proporción símbolo/wordmark
40–45% compuestos en UI, ~60% en lockup cerrado. Fuera de ese rango el símbolo flota solo o el wordmark domina.
Transición del nav: continua
El color se extingue antes de bajar de 48px y el wordmark se desvanece en opacidad sin recortar glifos. Nunca pasa por un estado de mala registración.
prefers-reduced-motion: salto
Sin interpolar: se salta entre estados de golpe, sin transición intermedia. El símbolo pasa de 48px a 28px y la barra, de 80px a 64px: dos medidas distintas.
Regla 1 · el umbral, visto
Dónde deja de funcionar el split
El creciente de color mide el 5,1% de la altura. Por debajo de 48px se lee como registro sucio, no como capa. La escalera lo enseña sola.
03 — Color
03. Paleta y dos capas
La regla de las dos capas: una capa de tinta (fondo + trazo) que conmuta con el tema, y una capa de color (cian + morado) que solo aparece en el split y no cambia entre claro y oscuro. Cada muestra lleva su token, su hex y su ratio de contraste medido. Cambia el tema con el toggle del nav para ver la capa de tinta conmutar.
--background#F7F3EC#191D21--foreground#21262B#F7F3EC--primary · --brand-cyan#005859#3FC9C4--brand-purple#9B87F5--brand-purple-accent#B7A3FF#583DA6--brand-cyan-split#16BDBD--brand-purple-split#9B87F5--brand-cyan-soft#A7E1DE--brand-purple-soft#C6B9F0Los pasteles nunca como color de texto. Son fondos. Si va texto sobre un pastel, siempre en foreground (tinta), nunca al revés.
04 — Tipografía
04. Dos tipos, dos trabajos
Qué tipos son y por qué, como activo de marca. La escala, tamaños e interlineados viven en el Design System.
Display · pesos 600 / 700
Grotesca de carácter, con detalles humanistas y ligeras irregularidades que le dan personalidad sin perder rigor. Es la voz de los titulares y del wordmark: firme, contemporánea, reconocible.
ABCDEFGHIJKLM
abcdefghijklm 0123456789
Texto · pesos 400 / 500 / 600
Neutra, de altísima legibilidad en pantalla a cualquier tamaño. Hace el trabajo silencioso: cuerpo, etiquetas, datos y UI. Deja que Bricolage lleve la voz y ella sostiene la lectura.
ABCDEFGHIJKLM
abcdefghijklm 0123456789
Cómo se usa
Dónde vive la marca fuera de este sitio, y las reglas que impiden que cada aplicación la interprete a su manera.
- 05Aplicaciones
- 06Uso correcto e incorrecto
05 — Aplicaciones
05. La marca en su sitio
Dónde vive el logo: dentro del sitio, donde cada pieza se descarga, y fuera de él, donde solo se coloca. El PNG del símbolo se dimensiona por altura y el del lockup por ancho. No es evidente, por eso se dice aquí.
En el sitio
Las dos superficies que sirve este mismo dominio. Aquí la pieza se baja.
Asset dedicado, no un reescalado. A 16px el trazo sube a 10 unidades para compensar ópticamente. Plano, centrado.
En el kit: PNG de 32 y 16 px y las dos tintas.
La tarjeta real que se sirve a las redes: logo split, wordmark, título y kicker sobre el fondo de marca. Fija en claro y oscuro, la genera cada página. El lockup de abajo es la pieza con la que se construye.
El sufijo del PNG nombra la tinta, no el fondo. tintaOscura va sobre fondos claros; tintaClara sobre fondos oscuros. Disponibles en 256 / 512 / 1024 px.
Fuera del sitio
Tres piezas que no viven en este dominio y llevan la misma marca. Son la prueba que un sistema solo puede dar fuera de su propia página, y por eso no hay nada que bajar aquí: ninguna se coloca aquí. Las tres se versionan con el repositorio, que es lo que impide que existan dos verdades.
Símbolo split a 75px, el nombre en negrita y los dos canales, separados por un filete vertical. Va en tabla y con los estilos en línea, que es lo único que sobrevive intacto a un cliente de correo, y las imágenes por URL absoluta a este dominio porque los data-URI los capa Gmail.
Dónde vive Gmail, pegada en sus ajustes de firma
1584 × 396 sobre el fondo oscuro del sitio, con el titular del Hero y el dominio. La esquina inferior izquierda va vacía a propósito: ahí LinkedIn superpone la foto de perfil, así que el banner no la lleva.
Dónde vive LinkedIn, en la cabecera del perfil
La tarjeta que enseña GitHub al compartir el repo, con ese mismo titular. No lleva ni una cifra: la sirve GitHub desde sus ajustes y no acepta una URL, así que nada podría mantenerla al día. Un dato que no puede tener guardián no es un dato, es una promesa.
Dónde vive GitHub, en los ajustes del repositorio
06 — Uso correcto e incorrecto
06. Los errores reales de este sistema
No un catálogo de ✓ / ✗ genéricos: los fallos que tuvo esta marca en el proceso, la cifra que los detectó y cómo se corrigieron.
El viewBox que mentía
height:40px → 23px · −42%Era "0 0 120 120" pero la tinta ocupaba solo el 58% del alto. Todo el que usó el componente lo infradimensionó sin saberlo.
Corrección: viewBox recortado a la tinta: la altura que das ES la del símbolo.
El split usado a 24px
creciente de color = 1,2pxA esa altura el desplazamiento se leía como error de registro de imprenta, no como firma.
Corrección: umbral split → flat a 48px (regla 1). Por debajo, variante plana.
El favicon sin compensación óptica
8,2% de tinta a 16px vs 8,1% a 32pxEl de 16px era el de 32 reescalado; a ese tamaño el trazo se lavaba a gris.
Corrección: asset dedicado a 16px con stroke-width 10 en vez de 6.
El logo pesando menos que un icono ajeno
12×15px junto a LinkedIn 18×18pxEn el footer la marca quedaba por debajo de un icono de UI y al mismo peso visual que el © contiguo.
Corrección: el logo nunca mide menos que los iconos contiguos (regla 4).
El lockup al 29%
símbolo 24→64px, wordmark en 18pxEl símbolo creció y el wordmark se quedó atrás. El logo no era grande: estaba solo.
Corrección: proporción símbolo/wordmark controlada (regla 5).
El círculo dentro del círculo
símbolo al 35% de su huellaEl nav metía el símbolo en un contenedor circular, convirtiéndolo en una diana.
Corrección: sin contenedor circular: el símbolo ya es un círculo (regla 3).
Los cuatro colores de esta página
4 tokens desviadosLa página que documenta el color era la que lo tenía mal: hueso, oscuro y los dos pasteles.
Corrección: #F5F3EE→#F7F3EC · #181B1F→#191D21 · pastel cian #CFEFEE→#A7E1DE · pastel morado #E6E0FB→#C6B9F0.