Identidad de marca
Brand Kit
El sistema de identidad de Francisco López: el logo y su geometría exacta, la paleta con sus dos capas, la tipografía y las reglas que gobiernan su uso. Todo descargable, en claro y oscuro.
01 — Concepto
Una marca de dos capas
El símbolo es un anillo sobre una base: una lente, un ojal, un cero. La versión split desplaza dos capas de color —cian y morado— tras el trazo de tinta. 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
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.
Inline en el marcado · 382 B · dimensionado por altura.
Inline en el marcado · 220 B · dimensionado por altura.
Nunca inline · 23 KB trazado · dimensionado por ancho.
Nunca inline · 23 KB trazado · dimensionado por ancho.
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
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#005E5F · #3FC9C4--brand-purple#9B87F5--brand-purple-accentoklch(0.62 0.16 290)--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
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
05 — Aplicaciones
La marca en su sitio
Dónde vive el logo y cómo se descarga cada pieza. El PNG del símbolo se dimensiona por altura y el del lockup por ancho — no es evidente, por eso se dice aquí.
Asset dedicado, no un reescalado. A 16px el trazo sube a 10 unidades para compensar ópticamente. Plano, centrado.
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.
06 — Uso correcto e incorrecto
Los errores reales de este sistema
No un catálogo de ✓ / ✗ genéricos: los fallos que tuvo esta marca, la cifra que los detectó y cómo se corrigieron. Un registro de criterio.
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.
Aquí va la identidad: qué es la marca y cómo se usa. El rigor de ingeniería —rejilla, breakpoints, escala de espaciado, motion y la medición completa de accesibilidad— vive en el Design System.