Manual de marca · v1 · novembre 2026
Una marca que es llegeix com un flux.
MV, de Martí Villalba, dibuixat com un procés: un punt de partida, un recorregut i una destinació. És el que faig amb els productes, del problema a la mètrica.
01 · Concepte
Inici, recorregut i destinació.
El símbol neix del monograma de les meves inicials. La M i la V s'escriuen en un únic traç que arrenca en un node massís i acaba en un anell buit, com en un diagrama de flux.
Node d'inici
Massís. El problema, el punt de partida. Sempre a baix a l'esquerra.
Recorregut
La M i la V en una sola línia de gruix constant, amb el mateix ritme entre crestes i valls.
Destinació
Buit. El resultat, la mètrica. Sempre a dalt a la dreta. És l'únic element que pot dur color.
02 · Construcció
Geometria amb φ com a guia, ajustada a ull.
El símbol es dibuixa sobre una alçada de 100 unitats. Les formes rodones sobrepassen un 2 % les guies perquè semblin de la mateixa mida que les rectes.
- Proporció del conjunt: rectangle auri al quadrat (2,618 : 1), comptant els sobrepassaments.
- La línia arrenca amb una asta vertical: és la que fa que es llegeixi la M.
- Totes les diagonals tenen la mateixa inclinació i el ritme entre crestes i valls és constant.
- Les crestes tenen més radi (24) que les valls (20): a dalt respira i a baix assenta.
- Els nodes mesuren φ vegades el gruix de la línia, perquè es llegeixin com a punts i no com a peses.
03 · Versions
Una forma, quatre usos.
La versió principal és tinta sobre os. L'anell de destinació pot anar en blau quan el logo conviu amb contingut de producte o amb crides a l'acció.
Principal · tinta sobre os
Invertida · os sobre tinta
Amb accent · anell blau
Logotip horitzontal · Inter Tight 600
04 · Espai i mida mínima
Aire al voltant i un mínim que es respecta.
L'espai lliure al voltant del símbol és igual al diàmetre del node (x). Res no entra en aquesta zona: ni text, ni vores, ni altres logos.
Símbol: 40 px d'amplada com a mínim en pantalla, 12 mm en paper.
Logotip: 140 px com a mínim.
Per sota: no es redueix el símbol, es fa servir el connector.
05 · Sistema de mides
Cada mida té el seu dibuix.
Per sota de 48 px el logo no es redueix: es fa servir una peça dibuixada píxel a píxel que conserva la idea amb menys traços.
Connector · 16–32 px
Favicon i pestanyes. Retícula de 16: traç de 2 px, node de 5 px i anell de 6 px.
Retall · 48–180 px
Icona d'app i perfils a les xarxes. El flux surt del marc: es veu l'inici i la M.
Logo complet · 200 px o més
Capçalera, documents, presentacions i xarxes. Amb el nom quan hi ha espai.
06 · Color
Dues tintes i un toc de blau.
La marca viu en tinta i os. El blau és un accent, no un fons: l'anell de destinació, els enllaços i una sola acció per pantalla.
07 · Tipografia
Tres famílies, cadascuna amb el seu paper.
Totes són gratuïtes i se serveixen des del mateix domini.
Aa
Inter Tight
Titulars (500, tracking −3,5 %) i nom del logotip (600, −1 %).
Aa
Inter
Text corregut (400, 16–19 px, interlineat 1,6) i botons (500).
Aa
JetBrains Mono
Etiquetes en majúscules (12 px, +8 %), dades i codi.
08 · Moviment
El logo s'executa com un flux.
L'animació explica la idea sense explicar-la: apareix l'inici, es dibuixa el recorregut i s'arriba a la destinació. Dura 2,25 s i es reprodueix una sola vegada.
- 0–0,35 sInici. El node d'inici apareix creixent des del 40 %.
- 0,35–1,95 sRecorregut. La línia es dibuixa de principi a fi amb una corba cubic-bezier(.65, 0, .35, 1).
- 1,9–2,25 sDestinació. L'anell apareix i tanca el flux.
- SempreRegles. Sense bucles ni rebots. Si el sistema demana reduir el moviment, el logo apareix quiet.
09 · Usos incorrectes
El que no es fa.
No estirar ni deformar
No girar
No intercanviar els nodes
No aplicar degradats ni ombres
No canviar el gruix de la línia
No fer servir sobre fons sense contrast
10 · Descàrregues
Tots els fitxers.
Vectors en SVG per a qualsevol mida; PNG només quan la plataforma no admeti SVG.
Codi per al <head> de qualsevol 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">