# 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. --- ## 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 en Fraunces:** 3–6 palabras, rítmicos, benefit-led, noun phrases. *"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:** Fraunces muy grande + 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 (paleta definitiva V3) La paleta se organiza en **3 grupos** según el uso: ### 4.1 Color principal — Naranja Arbitrade | Paso | Hex | Uso | |---|---|---| | 100 | `#FFE9D4` | Fondo soft, hover light | | 300 | `#FFA770` | Acento cálido | | **500 (default)** | **`#FF5F15`** | Brand puro · CTAs · stats · focus | | 700 | `#C72D07` | Estados press, oscurecido | **Pantone:** 172 C **Uso:** Identificar la marca, llamar a la acción, dirigir atención. Aparece poco y bien — nunca como fondo grande. ### 4.2 Neutrales — Beige + Dark | Paso | Hex | Uso | |---|---|---| | Beige 50 | `#F4F0EA` | Fondo base de páginas | | Beige 100 | `#EFE2DC` | Surface elevada, hover | | Beige 300 | `#D49E98` | Borders, acentos cream-rosados | | Dark 800 | `#221011` | Texto sobre cream | | (cream-900 actual `#38191A` se mantiene como texto principal por legibilidad) | ### 4.3 Colores de apoyo — Categorías Cada categoría tiene 4 valores: 100 fondo · 300 soft · 500/600 puro (default) · 700 oscuro. | Categoría | 100 | 300 | Default | 700 | |---|---|---|---|---| | **Café** | `#EDE0D8` | `#BC8E76` | `#914444` (500) | `#673437` | | **Energía** (amarillo) | `#FAFAC8` (50) | `#F0E959` | `#DDCA19` (500) | `#8F7411` | | **Saludable** (verde) | `#E6F6D1` | `#A2D36A` | `#60A022` (600) | `#314C1B` | | **Refrescante** (azul) | `#D7EEFF` | `#83CFFF` | `#0676FF` (500) | `#134695` | | **Vitalidad** (rosa) | `#FAE9F4` | `#F9C2E9` | `#DD66AD` (500) | `#8F255B` | ### 4.4 Reglas B2C vs B2B - **B2C:** solo neutrales + naranja. Comunicaciones cálidas pero contenidas. Las categorías se reservan para diferenciar producto puntualmente. - **B2B:** paleta completa permitida para diferenciar líneas de producto, sectores o categorías. El naranja sigue siendo el ancla. ### 4.5 Frecuencia de uso aproximada - **Neutrales** ~45% (fondos, ambiente, tipografía) - **Naranja** ~35% (CTAs, atención, identidad) - **Apoyo** ~20% (énfasis y categorías) --- ## 5. Gradientes líquidos Son el hallmark visual del sistema. Mezclas de bajo contraste, orgánicas, como si el color fluyera. **Sistema interactivo en web** (drift continuo + parallax al cursor + flash al click). En piezas estáticas, se usan las versiones canónicas. ### 5.1 Variantes oficiales - **Marca** (principal) — naranja · amarillo · rosa. Hero, social, CTAs. - **Dark + Brand** — negro `#160708` protagonista con un foco naranja brillante en una zona. Para máquinas y signage oscuro. - **Café** — marrones cálidos. Productos de café. - **Saludable** — verde vibrante. Snacks sanos. - **Refrescante** — azul vivo. Refrescos, agua. - **Vitalidad** — rosa con naranja. B2C de impacto. - **Energía** — naranja con amarillo. Vitalidad, café energético. ### 5.2 Reglas - Bajo contraste, **nunca** gradientes púrpura/azul saturados tipo tech startup. - Se construyen con varios `radial-gradient` superpuestos (5–6 puntos de color con blur 46–60px). - **Nunca aplicar gradiente a texto** (el texto siempre sólido). --- ## 6. Tipografía ### Dos familias. Ninguna más. - **Display → Fraunces (variable).** Serif contemporánea con axis `opsz`, `SOFT`, `WONK`. - **Body/UI → DM Sans (variable).** Sans geométrico moderno. ### Reglas Fraunces - Solo para headlines, stat numbers, citas. - **Pesos:** 300 (light), 400 (regular), 700 (bold). Contraste por peso, no por itálica. - **Nunca cursiva.** - **Axis recomendado:** - Título 1: `opsz 144, SOFT 30, WONK 0` - Título 2: `opsz 96, SOFT 40, WONK 0` - Título 3: `opsz 72, SOFT 40, WONK 0` - **WONK 0 siempre.** - Letter-spacing negativo leve (-0.02em a -0.03em) en display grande. ### Reglas DM Sans - Todo lo que no sea display: body, navegación, UI, labels, metadata, buttons. - **Pesos:** 400 body, 500–600 UI labels, 600–700 botones. - Kickers: **600, mayúsculas, letter-spacing 0.14em.** ### Escala (nomenclatura del manual) ``` Kicker → 12px DM Sans 600 uppercase 0.14em Título 1 → 112px Fraunces 400 opsz144 SOFT30 Título 2 → 80px Fraunces 400 opsz96 SOFT40 Título 3 → 60px Fraunces 450 opsz72 SOFT40 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 ### Esquinas - **Redondeadas, generosas.** Arbitrade redondea. - Radios disponibles: 6, 10, 16, 24, 32, 44, 999 (pill). - Cards: `radius-lg` 24px. Hero tiles: `radius-xl` 32–44px. Buttons/chips: `radius-pill` 999px. ### Sombras - **Siempre tintadas en marrón**, nunca negro puro. Color de la sombra: `rgba(56, 25, 26, X)`. - Escala soft (xs → xl). Shadow-brand tinta naranja bajo CTAs primarios: `0 16px 36px -12px rgba(255, 95, 21, 0.35)`. - **Nunca** inner shadows, hard shadows, offsets simétricos puros. ### Borders - Low-contrast, tintados cream (`--cream-200 / --cream-300`). - **Nunca** `#eee` o grises neutros puros. - 1px por defecto. 2px solo para focus ring (naranja). --- ## 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, cream. - **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 gradientes de categoría. Solo para banners, stoppers en máquinas, 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, beige 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 - **Easing principal:** `cubic-bezier(0.32, 0.72, 0.28, 1)` — suave, "líquido". - **Duraciones:** 140ms (micro), 240ms (base), 420ms (slow). - **Nada de bouncy springs.** Arbitrade es refinada, no juguetona. - Reveals: fade + translate corto (4–8px). - Hover: transición de color/shadow 140ms. **Nunca scale en botones.** - Cards hover: shadow lift (sm → md) + translate-y -2/-4px. - Gradientes líquidos (web): drift continuo 24–40s, parallax suave al cursor, flash orgánico al click. --- ## 11. Aplicaciones por tipo de pieza ### Post para redes (1080×1080 o 1080×1350) - Fondo cream o gradient suave. - 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 con gradiente principal o foto lifestyle a la derecha. - Kicker uppercase en orange-700. - Título Fraunces display (44–88px en desktop). - Lede DM Sans 18–20px. - CTA naranja sólido + shadow-brand. - Tags de prueba social abajo: kicker + h5 Fraunces en columnas. ### Cartelería máquina (vending signage) - Formato 4:5 vertical. - **Gradiente Dark + Brand** dominante: el negro abarca casi todo, el naranja como acento sutil. - Wordmark blanco sobre el dark. - 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. - Alternar fondo cream con variante de color cada 2–3 slides. - Stats en Fraunces hasta 320px. ### Email corporativo - Fondo cream-100. - Máximo 600px de ancho. - CTAs naranja redondeados pill. - DM Sans en todo el cuerpo. --- ## 12. Reglas de oro (resumen) ### SIEMPRE - ✓ Cream `#F4F0EA` como lienzo, blanco puro solo en cards elevadas. - ✓ Texto en marrón cálido (`#38191A` o `#221011`), no negro puro. - ✓ Naranja `#FF5F15` para atención — CTAs, stats, kickers — nunca como fondo grande. - ✓ Fraunces solo en display; DM Sans en todo lo demás. - ✓ Sombras tintadas en marrón. - ✓ Borders tintados cream. - ✓ Radios generosos en casi todo. - ✓ Iconos Lucide stroke **1.2**. ### NUNCA - ✗ Emoji en el sistema formal. - ✗ Iconos unicode decorativos. - ✗ Gradientes de alto contraste tipo tech startup (púrpura/azul saturado). - ✗ 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 puros (#eee). Siempre tintados. - ✗ Scale en hover de botones. - ✗ Frosted glass en modales (modales sólidos cream). - ✗ Patrones repetidos o texturas de fondo. --- ## 13. Layout - 12 columnas, max-width 1280px, padding lateral 40px (desktop) / 24px (mobile). - Ritmo vertical: 96px entre secciones en desktop, 64px en mobile. - Sticky top nav 72px de alto. - Hero full-bleed por defecto en B2B, inside-the-max en secciones de evidencia. --- ## 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` Manual web interactivo: --- *Marketing HUB · Arbitrade · Brand Refresh 2026 · v1.0 (mayo 2026)*