# Arbitrade · Instrucciones de diseño 2026 Documento para pegar como contexto cuando trabajes con Claude (u otro asistente IA) en cualquier pieza visual o comunicación de Arbitrade. Úsalo al principio del chat o como "system prompt" y la IA producirá piezas alineadas con el sistema 2026. **Cómo leerlo:** la capa de **marca** (personalidad, voz, fotografía, logo, iconos) vale para todo. La capa **visual** (color, tipografía, forma, movimiento) toma como referencia el sistema aplicado en Seguimiento CEO del Marketing HUB: blanco, grises fríos, superficies planas y DM Sans como tipografía principal en digital. --- ## 1. Sobre Arbitrade Arbitrade es una empresa española de retail desatendido B2B con casi 40 años en el mercado: smart vending, smart shops, lockers, corners y soluciones de agua. Clientes: oficinas, hospitales, hoteles, industria, transporte y educación. Alcance nacional, servicio premium. **Idea articuladora:** *Innovamos para hacer tu pausa diaria agradable y de calidad.* **Cuatro pilares de marca:** 1. **Innovación** — modernidad, liderazgo, tecnología, vanguardia. 2. **Pausa** — placer, bienestar, momentos para disfrutar y recargar. 3. **Experiencia** — comodidad, satisfacción, frictionless, intuición. 4. **Excelencia** — confianza, seguridad, estándares superiores, sostenibilidad. --- ## 2. Personalidad > Si fuera una persona, Arbitrade sería alguien **exigente pero cercana**. Cuida los detalles, elige lo mejor y está disponible cuando se la necesita. Innovadora sin ser fría, profesional sin resultar distante, con un punto premium que se percibe en cómo hace las cosas. **Triángulo de adjetivos:** - **Exigente** → Profesional, Inteligente - **Elegante** → Moderna, Serena, Concisa - **Cercana** → Natural, Honesta, Vital --- ## 3. Voz y tono ### Mapa de posicionamiento En general nos mantenemos en zonas neutrales del mapa Formal–Informal × Frío–Expresivo. En B2B no nos vamos a lo divertido ni a lo frío. En B2C podemos estirar puntualmente hacia lo expresivo y entusiasta, sin perder el rigor profesional. ### Rasgos generales - **Español de España.** Solo inglés para marcas de producto (`Energy boost`, `Healthy`, `Refréscate`). - **Profesional + experto, cálido + natural.** Como una marca creada por personas reales, no como una máquina. - **Directa, sensorial, sin relleno.** Frases cortas, verbos fuertes. ### Registro - **B2B** → neutro, serio pero nunca frío. *"Una pausa saludable para recargar la energía de tu equipo."* - **B2C** → cálido, expresivo, con chispa. *"¡Este verano, come sano!" · "ñam!"* ### Reglas tipográficas del copy - **Headlines:** 3–6 palabras, rítmicos, benefit-led, noun phrases. En DM Sans 600 en digital interno y B2B corporativo; en Fraunces en piezas de marca, B2C y cartelería (ver §6). *"Una pausa para recargar energía", "Es el momento de conectar"* - **Kickers en DM Sans:** mayúsculas, tracked wide (letter-spacing 0.14em). *`CAFÉ DE CALIDAD`, `VENDING PARA OFICINAS`* - **Stat numbers:** cifra muy grande (DM Sans 600 en digital y B2B; Fraunces en marca) + una línea en DM Sans como pie. - **CTAs:** imperativos cortos. *"Ponte en contacto", "Paga con tu tarjeta"* - **Letter-spaced uppercase** como motivo estético en latas y signage. *`H E A L T H Y`, `R E F R É S C A T E`* - **Teléfono de servicio:** `900 264 363` — agrupado en tres dígitos, sin paréntesis. ### Lemas y headlines aprobados **B2B:** - *Una pausa saludable para recargar la energía de tu equipo* - *Una pausa para recargar energía* - *Es el momento de conectar* - *Flexible y escalable, a tu medida* - *Café de calidad* **B2C (sistema corto):** `ñam!` · `H E A L T H Y` · `R E F R É S C A T E` · `Energy boost` · `Café & Co.` · `Modo snack` · `Nuevo sabor` · `2X1` ### Vocabulario de marca **Úsalos libremente:** pausa, recargar, conectar, cuidar, calidad, saludable, inteligente, soluciones, experiencia, sin relleno. ### Palabras que evitamos - Jerga corporativa: *sinergia, empoderar, stakeholders* - Clichés tech: *unleash, disruptivo, revolucionario, best-in-class, state-of-the-art* - Anglicismos gratuitos en B2B - Emojis en el sistema formal (en B2C se sustituye el emoji por wordplay: "ñam!", "¡come sano!") - Em-dashes (—) como separador: preferimos comas y frases cortas - Exclamaciones excesivas fuera del registro B2C --- ## 4. Color · un acento de marca, neutros fríos La identidad usa un único acento de marca, el naranja Arbitrade, sobre blanco y grises fríos. Otros colores existen solo para comunicar estado, nunca como decoración. ```css :root { /* Superficies y texto */ --surface: #FFFFFF; /* lienzo y papel */ --surface-subtle: #F7F7F8; /* zonas secundarias: laterales, cabeceras de tabla */ --hover: #F3F4F6; /* relleno al pasar el cursor */ --text: #1A1210; --text-2: #4D4743; /* texto secundario */ --muted: #68686D; --muted-2: #97979E; --line: #DEDFE2; /* filete por defecto */ --line-strong: #C9CBD0; --row-line: #EEEEF0; /* filete entre filas */ --dark: #1A1210; /* único bloque oscuro */ /* Marca */ --primary: #FF5F15; --primary-hover: #C72D07; --primary-soft: #FFF4EE; --primary-a04: rgba(255,95,21,.04); --primary-a08: rgba(255,95,21,.08); --primary-a12: rgba(255,95,21,.12); --primary-a20: rgba(255,95,21,.20); --primary-a35: rgba(255,95,21,.35); /* Estado · solo con significado */ --green: #60A022; --green-ink: #2D6A13; --blue: #0676FF; --blue-ink: #0A4CB5; --warn: #D68E0A; --warn-ink: #8C5F0F; --warn-soft: #FFF5DE; --danger: #C0392B; --danger-ink: #8F1B06; --danger-soft: #FDF2F0; } ``` ### Estados Cada estado se pinta con tres valores: **fondo** suave, **texto** (la versión `-ink`) y **punto**. | Estado | Fondo | Texto | Punto | |---|---|---|---| | Pendiente | `#F1EFED` | `#68615D` | `#8B8580` | | En curso | `#FFF5DE` | `#8C5F0F` | `#FFAC30` | | Para validar | `#EAF3FF` | `#0A4CB5` | `#0676FF` | | En seguimiento | `#EEF6E8` | `#346F1C` | `#60A022` | | Pospuesto | `#F5EAEA` | `#793838` | `#914444` | | Hecho | `#E7F3E4` | `#245812` | `#2D6A13` | ### Reglas - El naranja es el único color de marca. Verde, azul, ámbar y rojo solo aparecen como estado (éxito, información, aviso, error o una fase de un flujo), nunca como color de categoría ni decorativo. - Sobre un fondo tintado, el texto va en la versión `-ink` de su familia, no en el color puro. - Para distinguir dos bloques, como «lo de siempre» frente a «lo nuevo» o A frente a B, usar neutro para uno y naranja para el otro. - No asignar colores por posición o índice. Patrones como `:nth-child(2)` azul y `:nth-child(3)` verde están prohibidos porque no aportan significado. - El naranja identifica la marca y dirige la atención en CTAs, cifras, iconos, filetes, estados activos y foco. No debe convertirse en relleno dominante; para fondos usar sus tintes (`--primary-soft`, `--primary-a04`…`a35`). - El lienzo general es `#FFFFFF`; `#F7F7F8` solo para zonas secundarias. --- ## 5. Fondos y degradados - El lienzo principal es blanco: `#FFFFFF`. - Un halo o degradado decorativo debe permanecer dentro de la familia del naranja, con opacidades entre `.16` y `.40`. - No mezclar varios tonos cromáticos distintos en un degradado, no animarlo en bucle y no colocarlo detrás de cada tarjeta. - Nunca aplicar degradado al texto. - Las capas decorativas a sangre en web se posicionan respecto a la ventana con `position: fixed; inset: 0`. La cabecera y los elementos fijos deben usar `position: relative` y un `z-index` superior para conservar su jerarquía. --- ## 6. Tipografía ### Dos familias. Ninguna más. - **Body/UI → DM Sans (variable).** Sans geométrico moderno. Es la tipografía principal en digital. - **Display → Fraunces (variable).** Serif contemporánea con axis `opsz`, `SOFT`, `WONK`. Se mantiene, pero con uso reducido en digital. ### Cuándo usar cada una | Soporte | Titulares y cifras | |---|---| | Herramientas internas, paneles, dashboards | DM Sans | | Corporativo B2B para clientes (decks, propuestas, landings, emails) | DM Sans por defecto; Fraunces como mucho en un punto de la pieza (portada, una cifra destacada o una cita) | | Proyección (reuniones, pantallas) | DM Sans: la serif pierde legibilidad a distancia | | Marca, B2C, redes, cartelería, packaging | Fraunces | ### Reglas Fraunces - Solo para headlines, stat numbers, citas. - **Pesos:** 300 (light), 400 (regular), 700 (bold). Contraste por peso, no por itálica. - **Nunca cursiva.** - **Eje óptico recomendado:** - Portadas: `opsz 72` - Titulares: `opsz 54` - Subtítulos: `opsz 40` - **WONK 0 siempre.** - Mantener el interletraje casi a cero: como máximo `-0.01em` en portada y `-0.005em` en titulares. - No usar valores `opsz` superiores a 90 para titulares: estrechan el dibujo, elevan demasiado el contraste y cierran los ojales, dando una apariencia condensada. - Con el dibujo más ancho, reducir un punto el cuerpo de los titulares largos y comprobar que no invaden ni desplazan la navegación. ### Reglas DM Sans - Todo lo que no sea display, y también el display en digital interno y B2B corporativo. - **Pesos:** 400 body, 500–600 UI labels, 600–700 botones y titulares. - Titulares en DM Sans: 600, interletraje `-0.01em` en tamaños grandes. - Kickers: **600, mayúsculas, letter-spacing 0.14em.** ### Escala (nomenclatura del manual) ``` Kicker → 12px DM Sans 600 uppercase 0.14em Portada → tamaño fluido · DM Sans 600 -0.01em (digital/B2B) o Fraunces 400 opsz72 (marca) Titular → tamaño fluido · DM Sans 600 -0.01em (digital/B2B) o Fraunces 400 opsz54 (marca) Subtítulo → tamaño fluido · DM Sans 500 (digital/B2B) o Fraunces 400 opsz40 (marca) Título 4 → 32px DM Sans 600 Título 5 → 24px DM Sans 600 Body LG → 18px DM Sans 400 (lede) Body MD → 16px DM Sans 400 Caption → 12px DM Sans 500 ``` --- ## 7. Forma y elevación ### Superficies y densidad - Las tarjetas son papel blanco `#FFFFFF` con un filete de 1px `#DEDFE2`. Superficies planas: sin sombra en reposo, sin rellenos saturados ni degradados. - El color aparece en iconos, filetes, cifras o estados, no como relleno general de la tarjeta. - Como máximo puede haber un bloque oscuro por presentación, reservado para el mensaje que realmente manda. - La caja se ajusta al contenido. Evitar tarjetas sobredimensionadas con texto pequeño. - Colocar el icono al lado del texto, no encima, para eliminar huecos innecesarios. - En tarjetas destinadas a proyección, usar como suelo 18px para el nombre y 14.5px para la descripción. ### Esquinas - **Redondeadas, contenidas.** - Escala: **9px** controles (inputs, botones cuadrados, selects) · **12px** contenedores (tarjetas, paneles) · **16px** marco (modales, bloques principales) · **999px** pill (chips, etiquetas, botones pill). ### Sombras - **La sombra es solo para lo que flota.** Lo que está apoyado en la página no lleva sombra. - Tinte `rgba(26, 18, 16, X)`, nunca negro puro. - Hover: `0 1px 3px rgba(26,18,16,.06)` - Flotante (menús, popovers): `0 14px 38px rgba(26,18,16,.12)` - Modal: `0 24px 80px rgba(26,18,16,.18)` - **Nunca** sombra de color bajo los botones, inner shadows, hard shadows ni offsets simétricos puros. ### Borders y foco - Usar `--line: #DEDFE2` por defecto, `--line-strong: #C9CBD0` para reforzar y `--row-line: #EEEEF0` entre filas. - 1px siempre. - Foco: anillo de 3px `0 0 0 3px rgba(255,95,21,.20)` (como `box-shadow`, no como borde). - No inventar grises sueltos (`#eee`, `#ccc`): usar siempre los tokens. ### Modales - Papel blanco sólido, radio 16px, sombra modal. - Velo detrás: `rgba(26,18,16,.38)`. --- ## 8. Fotografía ### Estética (lifestyle) - Cálida, luminosa, de bajo contraste. - **Luz natural soft de mañana**, sin sombras duras. - **Tonos cálidos**: tierra, madera, lino y blanco roto. - **El color de marca como acento puntual** en entornos neutros. - 50mm, profundidad de campo corta. - Saturación baja, naranja Arbitrade puntual. ### Tipos de fotografía 1. **Lifestyle** (gente con producto en contexto): oficina contemporánea, cocina luminosa, café, hogar real. 2. **Producto aislado**: cutouts sobre papel blanco, fondo casi blanco o halo naranja monocromático. Solo para banners, stoppers en máquinas y publicidad de marcas concretas. El protagonista es el producto. 3. **Service shots**: personas interactuando con máquinas y productos. ### A evitar - Producto sin contexto, fondos demasiado neutros donde el producto no se eleva. - **Contraluces fuertes**, masas oscuras, alto contraste. - Renders fríos, oscuros o irreales sin entorno. - Expresiones serias o vacías; falta de vitalidad. - Stock genérico de oficina con sonrisas forzadas. - Filtros duros, alta saturación, virados fríos. ### Acting (mood board) Más expresión y dinamismo, vitalidad, énfasis en momentos compartidos y disfrute. Cara, cuerpo y gesto cuentan tanto como el producto. ### Prompts base para IA generativa (Nano Banana 2 / similar) ``` Lifestyle photography, close-up shot, slightly off-center composition, candid and natural feel, soft diffused morning light, no harsh shadows, warm muted tones, off-white and soft brown palette with subtle orange accent, low saturation, clean and minimal environment, natural skin texture, 50mm lens, shallow depth of field, real everyday moment. ``` **Espacios:** office kitchen, general office space, office desk (detail shots), kitchen counter, casual living space. **Sujetos:** Natural expressive people, expressive and natural gestures, relaxed posture, unposed interaction, slight movement blur of real conversation. Casual smart clothing in neutral warm colours with one subtle orange accent. Diverse ethnicities, soft natural skin tones, realistic human variation. --- ## 9. Iconografía ### Mark de Arbitrade - Es el **grano / hoja / llama** estilizado. Silueta almendrada con negativo interior tipo grano. - Se usa también como **elemento gráfico solo** (gran escala, con textura de granos de café, o como silueta tono sobre tono). - El único "símbolo hecho a mano" del sistema. ### Iconos de UI · Lucide - Set: **Lucide** (https://lucide.dev/). - **Stroke 1.2** (procesar en Figma con plugin Lucide → cambiar grosor → expandir → exportar). - Tamaños: 14–24px en UI, 32–48px en marketing. - Librería oficial Adobe del equipo: - **Nunca emoji** en producto. - **Nunca unicode decorativo** (✓ ★ ♥). --- ## 10. Motion - Usar solo el movimiento necesario para comunicar estado o jerarquía. - **Easing principal:** `cubic-bezier(0.32, 0.72, 0.28, 1)`. - **Duraciones:** 140ms (micro), 240ms (base), 420ms solo cuando una transición funcional lo requiera. - **Nada de bouncy springs.** Arbitrade es refinada, no juguetona. - Reveals: fade + translate corto (4–8px). - Los iconos no cambian de tamaño al pasar el ratón; deben mantenerse integrados junto al texto sin desplazar el contenido. - Nunca usar `scale` en botones, iconos ni estados activos. - Hover de tarjeta: sin desplazamiento. Cambia el fondo a `--hover` o el filete a `--line-strong`; como mucho, sombra de hover. No volcar la tarjeta a naranja ni cambiar todo el texto a blanco. - Un estado activo se distingue por color, filete o tinta, nunca por tamaño. - No usar gradientes girando o desplazándose en bucle detrás de las tarjetas. --- ## 11. Aplicaciones por tipo de pieza ### Post para redes (1080×1080 o 1080×1350) - Fondo `#FFFFFF` o halo cálido monocromático de baja opacidad. - Producto cutout grande flotando o foto lifestyle. - Kicker arriba (DM Sans uppercase tracked) opcional. - Título Fraunces bold 700, centrado o circular. - Onomatopeya/wordplay en lugar de emoji (`ñam!`, `Modo snack`). - Isotipo como firma (pequeño). ### Landing B2B - Hero sobre `#FFFFFF`, con halo cálido monocromático o foto lifestyle a la derecha. - Kicker uppercase en `--primary-hover`. - Título DM Sans 600 (44–88px en desktop). Fraunces solo en landings de campaña de marca. - Lede DM Sans 18–20px. - CTA naranja sólido, sin sombra. - Tags de prueba social abajo: kicker + cifra o h5 en DM Sans 600, en columnas. ### Cartelería máquina (vending signage) - Formato 4:5 vertical. - Fondo blanco por defecto. Puede usarse un único bloque `--dark` cuando el mensaje principal requiera máxima jerarquía, con naranja como único acento. - Wordmark blanco solo sobre el bloque oscuro; en fondo claro usar la versión oscura. - Mensaje breve en Fraunces lateral derecho. - Localización (ciudad) opcional en peso ligero junto al wordmark. - Incluir siempre `900 264 363`. ### Presentación / deck - 6 layouts: título, sección, stats, big-quote, product grid, cierre. - Fondo `#FFFFFF`; `#F7F7F8` para zonas secundarias. - Usar como máximo un bloque oscuro por presentación; no alternar fondos de varios colores. - Tipografía: DM Sans en todo el deck. Fraunces, si aparece, en un único punto (portada o big quote). - Stats en DM Sans 600 hasta 320px. - En tarjetas proyectadas, nombres de al menos 18px y descripciones de al menos 14.5px. **Los seis layouts, y qué lleva cada uno:** 1. **Título** — kicker, titular (DM Sans 600 o Fraunces), una línea de apoyo e isotipo pequeño. 2. **Sección** — divisor. Si la presentación usa su único bloque oscuro, es aquí. 3. **Stats** — de una a tres cifras en DM Sans 600, cada una con su pie en DM Sans 400. 4. **Big quote** — una frase, atribución en DM Sans y mucho aire alrededor. 5. **Product grid** — de dos a cuatro tarjetas blancas con filete, icono junto al texto. 6. **Cierre** — contacto, con el `900 264 363` y el wordmark. ### Presentación · archivo PowerPoint (.pptx) Lo de arriba describe el sistema. Esto es su traslación al soporte: no son reglas de marca nuevas, son las medidas del formato. - **Lienzo** 16:9, 33,87 × 19,05 cm. Margen de seguridad de 1,5 cm por lado: ni texto ni logo fuera de esa caja. - **Cuerpos en puntos, no en píxeles.** Portada 44 pt, titular 30, subtítulo 22, cuerpo 18, pie 12. Nunca por debajo de 14 pt en algo que haya que leer proyectado. - **Una idea por lámina.** Cuatro viñetas como máximo y doce palabras por viñeta. Si no cabe, es otra lámina. - **Incrusta las tipografías.** El archivo se abre en el ordenador de otra persona, donde Fraunces y DM Sans no están instaladas. Incrusta las dos fuentes de `assets/` en el .pptx. Si el generador no puede incrustarlas, dílo y declara la alternativa: Georgia para Fraunces y Arial para DM Sans. - **Fotos recortadas a la caja, nunca deformadas.** Una foto vertical en un lienzo horizontal va a sangre por un lado o en caja cuadrada con aire, no estirada. - **Sin animaciones ni transiciones de diapositiva.** El movimiento del sistema es para pantalla, no para pasar láminas. - **Editable de verdad**: texto como texto, no como imagen, y una tabla como tabla. ### Email corporativo - Fondo exterior `#F7F7F8`, cuerpo `#FFFFFF`. - Máximo 600px de ancho. - CTAs naranja redondeados pill. - DM Sans en todo el cuerpo. ### Herramientas internas y paneles - Lienzo `#FFFFFF`, tarjetas planas con filete `#DEDFE2`, filas separadas por `#EEEEF0`. - Solo DM Sans. - Estados con la paleta de §4 (fondo + texto `-ink` + punto). - Densidad alta: la información manda, sin halos ni elementos decorativos. --- ## 12. Reglas de oro (resumen) ### SIEMPRE - ✓ `#FFFFFF` como lienzo y papel; `#F7F7F8` para zonas secundarias. - ✓ Texto en `#1A1210`, no negro puro; secundarios en los grises fríos del sistema. - ✓ Naranja `#FF5F15` como único acento de marca para atención, CTAs, cifras, iconos, filetes, kickers y foco. - ✓ Colores de estado solo con significado, con su versión `-ink` para el texto. - ✓ DM Sans por defecto; Fraunces en display de marca y, en digital interno y B2B, de forma puntual. - ✓ Superficies planas; sombra solo en lo que flota, tintada `rgba(26,18,16,…)`. - ✓ Tarjetas blancas con filete gris frío de 1px. - ✓ Radios 9 / 12 / 16 y pill. - ✓ Iconos Lucide stroke **1.2**. - ✓ Movimiento mínimo y estados expresados por color, no por tamaño. ### NUNCA - ✗ Emoji en el sistema formal. - ✗ Iconos unicode decorativos. - ✗ Colores de categoría o decorativos (azul, verde, rosa, mostaza…) fuera de su uso como estado. - ✗ Colores asignados por posición o índice (`nth-child`). - ✗ Tarjetas con rellenos saturados o degradados. - ✗ Sombra de color bajo los botones, ni sombra en superficies apoyadas. - ✗ Elevar tarjetas al pasar el ratón. - ✗ Gradientes multicolor o animados en bucle. - ✗ Texto con gradiente. - ✗ Em-dashes como separador en copy. - ✗ Jerga corporativa (sinergia, unleash, etc.). - ✗ Fraunces en cursiva — se juega con pesos 300/400/700. - ✗ Negros puros (#000) ni grises sueltos (#eee, #ccc) fuera de los tokens. - ✗ `scale` en hover de botones o iconos, ni para estados activos. - ✗ Frosted glass en modales; usar papel blanco sólido. - ✗ Patrones repetidos o texturas de fondo. --- ## 13. Layout - **Marca y landing:** 12 columnas, max-width 1280px, padding lateral 40px (desktop) / 24px (mobile). Ritmo vertical: 96px entre secciones en desktop, 64px en mobile. - **Herramientas y paneles:** max-width 1440px, padding lateral 36px, 32–48px entre secciones, filas separadas por filete `#EEEEF0`. - Sticky top nav 72px de alto. - Hero full-bleed por defecto en B2B, inside-the-max en secciones de evidencia. - Las capas decorativas de fondo a sangre usan `position: fixed; inset: 0` y permanecen detrás del contenido. - Cabecera, navegación y elementos fijos usan `position: relative` con un `z-index` superior al fondo decorativo. - Las tarjetas se dimensionan según su contenido; los iconos se alinean junto al texto para evitar alturas vacías. --- ## 14. Recursos Disponibles en el repositorio del Marketing HUB (`/identidad/beta-2026-assets/`): - **PDF oficial completo** — `arbitrade-identidad-2026.pdf` - **Logos SVG** — wordmark + isotipo - **Fuentes** — Fraunces Variable TTF + DM Sans Variable TTF - **`tokens.css`** — variables del sistema (colores, tipografía, espaciado, sombras) - **Fotografía y cutouts** — `/img/photos/`, `/img/cutouts/`, `/img/social/` - Esta misma doc — `arbitrade-design-instructions.md` **Paleta de referencia en código:** el `:root` de `seguimiento-ceo/index.html` del Marketing HUB. Manual web interactivo: **Versión portable para asistentes IA:** skill `arbitrade-brand-system` (`SKILL.md`, cinco referencias, wordmark, isotipo y las dos fuentes variables). No incluye el PDF, la fotografía, los cutouts, las plantillas sociales, `tokens.css` ni el repositorio del HUB. --- *Marketing HUB · Arbitrade · Brand Refresh 2026 · v1.3 (octubre 2026)*