Manual de marca · v1 · noviembre 2026
Una marca que se lee como un flujo.
MV, de Martí Villalba, dibujado como un proceso: un punto de partida, un recorrido y un destino. Es lo que hago con los productos, del problema a la métrica.
01 · Concepto
Inicio, recorrido y destino.
El símbolo nace del monograma de mis iniciales. La M y la V se escriben en un único trazo que arranca en un nodo macizo y termina en un anillo hueco, como en un diagrama de flujo.
Nodo de inicio
Macizo. El problema, el punto de partida. Siempre abajo a la izquierda.
Recorrido
La M y la V en una sola línea de grosor constante, con el mismo ritmo entre crestas y valles.
Destino
Hueco. El resultado, la métrica. Siempre arriba a la derecha. Es el único elemento que puede llevar color.
02 · Construcción
Geometría con φ como guía, ajustada a ojo.
El símbolo se dibuja sobre una altura de 100 unidades. Las formas redondas rebasan un 2 % las guías para que parezcan del mismo tamaño que las rectas.
- Proporción del conjunto: rectángulo áureo al cuadrado (2,618 : 1), contando los rebases.
- La línea arranca con un asta vertical: es la que hace que se lea la M.
- Todas las diagonales tienen la misma inclinación y el ritmo entre crestas y valles es constante.
- Las crestas tienen más radio (24) que los valles (20): arriba respira y abajo asienta.
- Los nodos miden φ veces el grosor de la línea, para que se lean como puntos y no como pesas.
03 · Versiones
Una forma, cuatro usos.
La versión principal es tinta sobre hueso. El anillo de destino puede ir en azul cuando el logo convive con contenido de producto o con llamadas a la acción.
Principal · tinta sobre hueso
Invertida · hueso sobre tinta
Con acento · anillo azul
Logotipo horizontal · Inter Tight 600
04 · Espacio y tamaño mínimo
Aire alrededor y un mínimo que se respeta.
El espacio libre alrededor del símbolo es igual al diámetro del nodo (x). Nada entra en esa zona: ni texto, ni bordes, ni otros logos.
Símbolo: 40 px de ancho como mínimo en pantalla, 12 mm en papel.
Logotipo: 140 px como mínimo.
Por debajo: no se reduce el símbolo, se usa el conector.
05 · Sistema de tamaños
Cada tamaño tiene su dibujo.
Por debajo de 48 px el logo no se reduce: se usa una pieza dibujada píxel a píxel que conserva la idea con menos trazos.
Conector · 16–32 px
Favicon y pestañas. Retícula de 16: trazo de 2 px, nodo de 5 px y anillo de 6 px.
Recorte · 48–180 px
Icono de app y perfiles en redes. El flujo sale del marco: se ve el inicio y la M.
Logo completo · 200 px o más
Cabecera, documentos, presentaciones y redes. Con el nombre cuando hay espacio.
06 · Color
Dos tintas y un golpe de azul.
La marca vive en tinta y hueso. El azul es un acento, no un fondo: el anillo de destino, los enlaces y una sola acción por pantalla.
07 · Tipografía
Tres familias, cada una con su papel.
Todas son gratuitas y se cargan desde Google Fonts.
Aa
Inter Tight
Titulares (500, tracking −3,5 %) y nombre del logotipo (600, −1 %).
Aa
Inter
Texto corrido (400, 16–19 px, interlineado 1,6) y botones (500).
Aa
JetBrains Mono
Etiquetas en mayúsculas (12 px, +8 %), datos y código.
08 · Movimiento
El logo se ejecuta como un flujo.
La animación cuenta la idea sin explicarla: aparece el inicio, se dibuja el recorrido y se alcanza el destino. Dura 2,25 s y se reproduce una sola vez.
- 0–0,35 sInicio. El nodo de inicio aparece creciendo desde el 40 %.
- 0,35–1,95 sRecorrido. La línea se dibuja de principio a fin con una curva cubic-bezier(.65, 0, .35, 1).
- 1,9–2,25 sDestino. El anillo aparece y cierra el flujo.
- SiempreReglas. Sin bucles ni rebotes. Si el sistema pide reducir el movimiento, el logo aparece quieto.
09 · Usos incorrectos
Lo que no se hace.
No estirar ni deformar
No girar
No intercambiar los nodos
No aplicar degradados ni sombras
No cambiar el grosor de la línea
No usar sobre fondos sin contraste
10 · Descargas
Todos los archivos.
Vectores en SVG para cualquier tamaño; PNG solo cuando la plataforma no admita SVG.
Código para el <head> de cualquier página
<link rel="icon" href="../favicon.ico" sizes="48x48"> <link rel="icon" href="../favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="../apple-touch-icon.png"> <link rel="manifest" href="../site.webmanifest"> <meta name="theme-color" content="#F6F6F4">