De la marca al pedido.
Identidad, packaging y dirección de arte para una marca de gravel. Y después, el catálogo privado y el panel interno con los que sus tiendas compran.
- Estrategia de marca
- Identidad visual
- Packaging
- Dirección de arte
- UX/UI
- Sistema de diseño
- Producto digital
«Gravel, with style.» Pamera nace para quien entiende que el gravel es un estilo de vida y no una competición: alta técnica textil con estética casual, rendimiento en la ruta y comodidad absoluta fuera de ella. Eso fue el encargo. Lo que vino después no estaba en el brief — cuando una marca empieza a vender a tiendas, hace falta algo más que un buen catálogo impreso.
El encargo
Una marca de ropa de gravel. Eso decía el encargo. El problema era otro y estaba debajo: en una categoría donde todo el mundo vende vatios, aerodinámica y sufrimiento, Pamera tenía que vender exactamente lo contrario sin que pareciera que renunciaba a la técnica.
Antes de dibujar nada hay que decidir qué se vende. La respuesta está en la tercera lámina del brandbook y gobierna todo lo que viene después.
Cuatro pilares y una rejilla de mensajes. De aquí sale todo lo que la marca dirá después, en el packaging, en la web y en el catálogo.
Cada colección tiene nombre propio, estampado propio y una razón para existir. No son referencias de un catálogo: son historias cortas.
Tres voces tipográficas con tres trabajos distintos, y una decisión de color que se defiende sola.
El tercer tiempo — lo que pasa cuando se acaba la ruta. Es el pilar que separa a Pamera del resto de la categoría, y el que acaba obligando a todo lo demás.
Donde no llegaba
Y el primer sitio donde no llegaba era el más aburrido de todos: el pedido de una tienda. La primera versión del catálogo digital la hicimos nosotros y tenía tres techos que apuntamos por escrito antes de que los señalara nadie. El contenido salía de un JSON exportado a mano —cambiar un tagline obligaba a reexportar, recompilar y desplegar—. Los pedidos entraban por WhatsApp, sin historial, sin base de correos y sin poder decirle a una tienda en qué punto va lo suyo. Y se entraba con una contraseña compartida, que en el propio contrato llamamos por su nombre: disuasorio, no seguridad. La segunda versión existe para cerrar esos tres agujeros.
Todo lo que sigue está en producción. Cada cifra sale del código o de los datos, no de una estimación.
- 73
- productos repartidos en cinco colecciones, con talla y estado por referencia
- 3
- idiomas español, inglés y catalán, en interfaz y en contenido
- 26
- políticas de acceso el panel esconde lo que no te toca; la separación real la aplica la base de datos
- 0 €
- al mes catálogo, panel, base de datos y correo, en planes gratuitos
Una web privada para las tiendas que venden Pamera. No es una tienda online: no hay precios, ni estado de producción, ni nada de la cocina interna. Solo la colección entera, bien fotografiada, y un pedido que se envía sin llamar a nadie.
Primero la colección, luego el producto
La decisión de arquitectura que más cambió el catálogo fue quitar cosas de la entrada. Dejó de abrir directo sobre la rejilla de productos y pasó a un recorrido de tres pasos: colecciones, colección, ficha. Menos carga de golpe, entrada de marca antes que de inventario, y sitio para contar algo antes de vender. La misma lógica gobernó las restas que vinieron después: el visor de giro 360 se especificó entero y se retiró, la vista en lista desapareció y el estado de producción se ocultó al mayorista porque no es asunto suyo.
El otro lado de la misma máquina. Aquí se aprueban altas, se mueven pedidos y se escribe a los clientes. Arranca en oscuro porque es una herramienta de trabajo, no un escaparate.
No son capturas: son los componentes de verdad, montados en vivo. Cada pieza del panel existe en claro y en oscuro desde el día uno — por eso todo se parece a todo y nada parece un parche.
Botones, campos, avisos y navegación salen de la misma caja. Cuando algo nuevo entra al panel, ya sabe de qué familia es.
Tres escenarios, un mismo sistema. Se elige personaje, escena, encuadre y lente; el generador devuelve el prompt en inglés, la descripción de arte en español y la imagen. Ábrelos.
Un prompt por pieza
Se elige personaje, escena, encuadre y lente, y el sistema devuelve el prompt en inglés y la descripción de arte en español. Ocho estilos fotográficos, de catálogo a UGC de calle, y seis encuadres.
Gemini, con red debajo
Dos modelos en cadena — si el primero agota su cuota del día, entra el segundo sin que nadie toque nada. El contador de generaciones que quedan está a la vista, no escondido.
La marca, inyectada en cada prompt
Ninguna imagen puede saltarse la regla que va escrita dentro de cada instrucción: todas las camisas Pamera llevan bolsillo en el pecho con el logo bordado. Es la diferencia entre una herramienta de marca y un generador de imágenes bonitas.
Y esto es lo que sale por el otro lado: cada prenda con su foto, su nombre y su año, en la rejilla que ve el mayorista. El zoom de columnas lo decide él, no nosotros.
Ningún color ni fuente hardcodeado fuera de los tokens.
Contrato de diseño Pamera, v1
Un proyecto así no lo saca un diseñador con buen gusto ni un programador rápido. Estas son las once especialidades que tocaron el trabajo, y la prueba de que se hicieron.
-
Estrategia de marca
Territorio, tono y posicionamiento antes de dibujar nada. «The Social Ride Gear» no es un eslogan que apareció al final.
-
Identidad visual y packaging
Sistema tipográfico de dos voces, aplicaciones, etiquetado y caja. Con manual, para que funcione sin nosotros delante.
-
Arquitectura de información
El catálogo dejó de abrir sobre la rejilla de producto y pasó a colecciones → colección → ficha, con la justificación escrita antes de mover un píxel.
-
Sistema de diseño
Cuarenta y cuatro variables de CSS y una regla en el contrato: ningún color ni fuente fuera de los tokens. Tailwind solo las referencia, no las define.
-
Diseño de interacción
El pedido está especificado a nivel de comportamiento, no de pantalla — al añadir desde la rejilla se reinician talla y cantidad, y el botón de pedido hace un pop de 700 ms para que se vea que ha entrado.
-
Interfaz y front-end
Veintidós componentes de React, con resolución de imágenes que tolera las que faltan en vez de romper la rejilla.
-
Modelado de datos
Diez tablas, disparadores que garantizan la integridad y una vista diseñada para que el front no haya que reescribirlo cuando cambie el modelo.
-
Seguridad y permisos
Tres roles y veintiséis políticas aplicadas en la base de datos. Comprobado en marcha: un usuario de ventas que intenta editar un diseño afecta a cero filas.
-
Dirección de arte
Se descartó el avatar 3D del panel con criterio escrito, no por gusto: ese lenguaje visual representaría a un juguete, no a esta marca.
-
Producción de imagen
Un generador propio de prompts sobre Gemini y una plantilla de mockups para estampar patrones nuevos sobre la misma prenda conservando ángulo, luz y fondo.
-
Internacionalización y accesibilidad
Español, inglés y catalán en interfaz y contenido. El gris secundario del tema claro se cambió porque daba 3,99:1 sobre la superficie de sección. Medido, no estimado.
El encargo era una marca de ropa de gravel. La respuesta fue una marca de compañía: la que se pone quien sale a rodar porque quiere volver con una historia, no con un récord. Un año después, el encargo era que esa marca pudiera venderse sola a las tiendas — y la respuesta fue la misma en otro material: un sistema que aguanta sin que haya nadie vigilándolo.
Lo que no vas a encontrar en esta página son cifras de negocio. Ni ventas, ni pedidos cursados, ni ahorro de tiempo. No se midieron, y no me los voy a inventar para que la ficha quede más redonda. Lo que sí está medido —número de referencias, idiomas, políticas de acceso, contraste— está arriba, y sale del código.
