Este manual define cómo se usa la marca SocioCompras: el logo y sus versiones, áreas de protección, usos correctos e incorrectos, color, tipografía, tokens, componentes, voz y aplicaciones. Es la pieza única que unifica todo el contenido de marca — el detalle técnico de tokens vive en SOCIOCOMPRAS-BRAND-SYSTEM.md y design-system/tokens.css.
La Marca
Visión, pilares, personalidad y el concepto que da nombre y símbolo a SocioCompras: el pinky promise.
Visión
Ser la red de abastecimiento más eficiente y confiable de Latinoamérica para el sector gastronómico, revolucionando la manera en que los pequeños y medianos negocios acceden a sus insumos.
Esta visión guía toda decisión de marca. Cada pieza visual debe transmitir sus tres pilares.
Los 3 pilares
Eficiente
Sin fricción, datos al frente, operación clara. Layout limpio, números concretos, cero adorno gratis.
Confiable
Cumplimos lo que prometemos. El sello del pinky promise, cifras reales, tono honesto.
En expansión
De Chile a Latam, escalable. Marca moderna y regional, no hiper-localista.
Personalidad
Cercana pero profesional · directa · honesta · con los pies en la tierra (chacra) · optimista sin ser ingenua. No es corporativa fría, no es startup hype, no promete imposibles.
El concepto: pinky promise
El meñique entrelazado es la metáfora central de SocioCompras: el trato entre socios. Une los dos lados del nombre — Socio (la comunidad que se une) + Compras (el abastecimiento confiable) — en un solo símbolo.
Es una promesa que se cumple: restaurantes que se unen para comprar mejor, y la promesa de SocioCompras de abastecerlos de forma confiable.
Logo & Isotipo
El logo combina el isotipo (pinky promise — meñiques entrelazados + chispas) con el wordmark SocioCompras en Calistoga: "Socio" lima + "Compras" blanco/tinta.
Isotipo — variantes de color
Isotipo fiel vectorizado del EPS original (curvas Bézier reales, un <path fill-rule="nonzero">, viewBox 0 0 2209.3 1016.7). Fuente verbatim: brand/logo/sociocompras-isotipo.svg (currentColor, recoloreable).
Lockups — versiones del logo
Área de protección (clearspace)
Reservá alrededor del logo un margen mínimo igual a la altura del isotipo ÷ 2 (o la altura de la "S" del wordmark). Ningún otro elemento (texto, foto, borde) entra en esa zona.
Tamaño mínimo
Por debajo de esos tamaños, usá solo el isotipo — nunca el wordmark ilegible.
Variantes de color del logo
Full color sobre oscuro
Default de marca. Isotipo lima #AED440, "Socio" lima, "Compras" blanco, fondo #13140F / #1E1F18.
Full color sobre claro
Isotipo tinta #13140F (o lima oscuro #7BC22E), "Socio" lima oscuro #7BC22E, "Compras" tinta. Fondo blanco / #F9FAFB. (El #63991F es la lima de impresión/merch — §11 — no el brand-dark de UI.)
Monocromo lima
Todo #13140F sobre fondo lima #AED440. Para stickers y piezas de marca.
Monocromo blanco / negro
Todo blanco sobre fotos oscuras o color sólido. Mono negro #13140F para 1 tinta, sellos, grabado.
Usos correctos e incorrectos
✓ Hacer
- Sobre oscuro → versión full color (default).
- Sobre blanco / gris claro → versión sobre claro.
- Sobre lima → versión monocromo tinta.
- Sobre foto → mono blanco, oscureciendo la foto si hace falta.
- Mantener "Socio" lima + "Compras" blanco/tinta, siempre en Calistoga.
- Respetar clearspace y tamaños mínimos.
✕ No hacer
- No deformar (estirar / aplastar) — mantené proporción.
- No rotar el logo ni el isotipo.
- No cambiar los colores de marca por otros.
- No reordenar (wordmark izquierda + isotipo derecha).
- No agregar sombras, degradados, bordes ni outline.
- No usar el wordmark en otra tipografía.
- No separar "Socio" de "Compras" ni cambiar su color.
- No ponerlo sobre fondos sin contraste suficiente.
- No encajarlo en cajas/formas ajenas al sistema.
- No usar el favicon viejo (cuadrado + "S") como logo.
Color
Fondo claro y aireado, tinta para el texto y las secciones oscuras, lima como acento de marca. Es la paleta de sociocompras.com/reunion, la referencia vigente del sitio.
Marca · lima
--acc--acc-h--acc-d--acc-tSuperficies
--bg--bg-alt--tint--tint-b--line--ink / --darkTexto
--ink--txt--muted--softAcentos y estados
Anillos (geo · Marketplace)
Proporción 60 / 30 / 10
60% claro (blanco, gris alterno y tinte lima) · 30% tinta (texto, secciones oscuras y footer) · 10% lima (botones, énfasis y banner). Las secciones alternan claras y oscuras para dar ritmo.
- El lima
#AED440es fondo o subrayado, nunca texto sobre blanco. Para texto verde usa#4E6B0F. - Sobre lima, el texto siempre va en tinta.
- Sobre tinta, el lima sí funciona como texto (títulos, cifras, chips).
design-system/tokens.css todavía tiene la paleta anterior (fondo oscuro por defecto). Se actualiza en un cambio aparte porque afecta a todas las páginas del sitio.
Tipografía
Calistoga para display y wordmark, Inter para todo el texto y la UI, JetBrains Mono para datos técnicos.
Calistoga (serif, display) — H1/H2, números grandes, hero y el wordmark. Regla: el wordmark siempre en Calistoga.
Inter (sans, body) — body, UI, formularios, H3–H6. JetBrains Mono (opcional) — códigos de referido, IDs, datos técnicos.
Jerarquía (sistema /reunion)
H1 · clamp 35–59pxCompra como los grandesH2 · clamp 29–43pxAsí funciona la redH3 · Inter 800 · 18.5pxRecibes al día siguienteCuerpo · 17px / 1.65Los restaurantes de tu comuna compran juntos, por volumen.Bajada · 17.6px apagadoAgenda 30 minutos y cotizamos tu factura.Chip · 11.8px 800 .12emCómo funcionaEtiqueta · Mono 11.5pxPaso 01 · compras soloCifra · Calistoga10:00–16:00Títulos con text-wrap: balance y párrafos con text-wrap: pretty. Pesos de Inter en la web: 400, 600, 700 y 800.
Tokens
Radios, sombras, espaciado y movimiento del sistema de /reunion. Esquinas grandes, sombras suaves y mucho aire entre secciones.
Radios
--r-lg 28px para tarjetas grandes, formularios y ofertas · --r-md 20px para tarjetas chicas, pasos y estadísticas · 14px campos de formulario · 999px botones, chips y pastillas · 32px el banner lima.
Sombras
--sh · tarjetas--sh-lg · hover, formularios, bannerbrillo lima · botón principalSombras siempre en tinta con muy poca opacidad (3-9%), nunca negras ni duras.
Espaciado y grilla
gutter24pxgrid gap22pxsec-head58pxsección · móvil66pxsección · tablet80pxsección104pxAncho máximo --max 1180px. Encabezados de sección centrados a 820px. Grillas de 4 → 2 → 1 columnas (cortes en 1024px y 600px).
Movimiento
prefers-reduced-motion: con esa preferencia, el CTA y la cinta quedan quietos.Componentes
Las piezas de /reunion, vivas. Copia la clase tal cual: el CSS está al inicio de esa página.
Botones
.btn-p principal lima con brillo (uno por pantalla) · .btn-o secundario de contorno · .btn-d tinta, solo sobre el banner lima · WhatsApp siempre con texto tinta. Píldora, peso 800, 17px de alto de relleno.
Chips, pastillas y énfasis
Tu restaurante compra como los grandes
Comprar solo es pagar de más
.chip va sobre cada H2 (mayúscula, 800, espaciado .12em). em.acc subraya en lima las palabras clave del título; sobre tinta pasa a texto lima. Una sola frase subrayada por título.
Tarjetas
Agenda 30 minutos
Revisamos tu factura actual producto por producto.
Compras con tu comuna
Se juntan los pedidos y se negocia por volumen.
Recibes al día siguiente
Despacho entre 10:00 y 16:00.
.card blanca, --r-lg, ícono de trazo en cuadro tinte de 54px · .step con número en mono. Íconos de línea (stroke 2, currentColor), en la web no van emojis (ver Iconografía).
Cifras
Formulario
Etiqueta en 800 sobre el campo, borde --line, foco con borde lima oscuro y anillo lima al 30%. Error en #B3261E junto al campo que lo causó.
Preguntas frecuentes
01¿Tengo que firmar un contrato?
No. Sin contrato anual ni cuota fija.
02¿Qué comunas despachan?
Toda la Provincia de Santiago y Antofagasta.
Patterns
Las composiciones que arman una página. El orden de /reunion alterna claro y oscuro: hero tinte → franja oscura → secciones blancas y grises → banner lima → cierre.
Hero
Tu restaurante compra fruta y verdura como los grandes
Los restaurantes de tu comuna compran juntos, por volumen. Agenda 30 minutos y cotizamos tu factura.
Degradado #F4F9E6 → #FFF, lockup sobre claro (isotipo tinta, "Socio" #7BC22E), pastilla con check, H1 con un subrayado lima, bajada apagada y un solo CTA.
Sección oscura con contraste
Solo, pagas al detalle
Para la postura de marca (ver Voz): fondo tinta, chip lima translúcido, la opción SocioCompras marcada en lima.
Tabla comparativa
| Tu proveedor de hoy | SocioCompras | |
|---|---|---|
| Precio por producto a la vista | No siempre | Sí, en cada pedido |
| Contrato | Depende | Sin contrato |
Banner lima
Un banner por página, para la oferta. Chip blanco translúcido y botón tinta. La oferta siempre con su respaldo (ver Voz).
Promesa
Si no ganamos juntos, no es trato
Ves cada precio, pagas lo acordado y, si algo falla, te enteras por nosotros.
Iconografía
Emoji-first: universalmente reconocibles, cero bytes extra, calidez visual. El isotipo es el sello de marca, no un ícono de UI.
/reunion) usan íconos de trazo en un cuadro tinte de 54px, no emojis. El mapa de emojis de abajo sigue vigente para WhatsApp, redes sociales y la app.Mapping consistente
comunidad / redproducto / frescuradespachorestauranteahorrocarritofood costrondas semanalestiempos / urgencianodo localgeo / ubicaciónpremium / FundadorAnillos geo
Anillo 1 · activoAnillo 2 · activandoAnillo 3 · VIPEl isotipo como sello
El isotipo (pinky promise) es el sello de marca, no un ícono funcional: se usa como logo, watermark, sticker o detalle gráfico — nunca como botón. Para flechas, checks y chevrons usá Heroicons outline (stroke 1.5, currentColor).
Voz de marca
Hablamos como un socio que conoce el negocio: cercano, directo y con postura. Una marca que quiere caerle bien a todos no la recuerda nadie, así que SocioCompras dice lo que piensa del abastecimiento, aunque a algunos no les guste.
La regla de la incomodidad
Una voz recordable genera cierta incomodidad en una parte del público (cerca de un 30%). En nuestro caso, esa parte es la que vive de que el restaurante compre solo y a ciegas: intermediarios que suman manos, facturas globales que esconden el precio por producto y la costumbre de "siempre le he comprado al mismo". Al dueño de restaurante lo tratamos como socio. Lo que cuestionamos es la forma en que hoy le toca comprar.
Personalidad
Cercana, como un socio
Tú, frases cortas, calidez. Habla de "tu cocina" y "tu comuna", no de "clientes" ni "usuarios".
Concreta
Números reales ($, %, kg, horas). Cada afirmación se puede mostrar con una factura o un pedido.
Con postura
Nombra lo que está mal en cómo se compra hoy. No pide permiso para opinar y tampoco grita.
Optimista con los pies en la tierra
Cree que juntos se compra mejor y lo demuestra con datos, sin promesas imposibles ni "revoluciones".
Lo que defendemos (y a quién incomoda)
| Postura | Cómo suena | A quién incomoda |
|---|---|---|
| Comprar solo es pagar de más | "Solo, pagas al detalle. Juntos, compras como los grandes." | Al que cree que ya negocia bien por su cuenta |
| Cuentas claras o nada | "Si no ves el precio de cada producto, no sabes cuánto estás pagando de más." | A quien factura en global y sube precios sin avisar |
| Sobran manos en la cadena | "Buscamos que tu fruta venga directo del agricultor, sin pasar por tres bodegas." | A los intermediarios que solo suman costo |
| No somos para todos | "Si solo buscas el precio más bajo de hoy, sin pensar en el resto de la semana, no somos tu opción." | Al cazador de ofertas de un día |
| Prometemos poco y cumplimos | "Preferimos decirte que no a prometerte algo que no podemos cumplir." | A la competencia que vende "ahorros" sin respaldo |
| Si no ganamos juntos, no es trato | "Gana tu cocina, gana el productor, gana tu barrio. Si uno pierde, no es trato." | A quien entiende el abastecimiento como ganar a costa del otro |
Los límites de la postura
✓ Incomodar con
- Prácticas: la factura global, el precio que sube sin aviso, las manos de más.
- Costumbres: "siempre le compro al mismo", "no tengo tiempo de comparar".
- Datos verificables: precio por producto contra la factura actual.
- Preguntas que obligan a mirar: "¿Sabes cuánto pagaste por kilo de tomate el mes pasado?"
✕ Nunca
- Atacar a personas, ferias o competidores por su nombre.
- Burlarse del restaurante ni hacerlo sentir tonto por cómo compra.
- Usar miedo o urgencia falsa ("últimos cupos" que no son reales).
- Inventar cifras o prometer un ahorro sin respaldo escrito.
- Opinar de política, religión o temas ajenos al abastecimiento.
Cómo escribimos
Español de Chile, tú (nunca voseo), cercano pero sin modismos de calle ("al tiro", "cachai", "bacán", "te tinca") y sin jerga técnica ("HORECA", "nodo", "KPI"). Números concretos. El rango de ahorro siempre con su respaldo: "ahorra entre 5% y 40% por producto; 5-10% garantizado como Restaurante Fundador", o "hasta un 30%" siempre junto al 5-10% garantizado. Nunca "ahorro típico 15-25%".
Hacer / No hacer
| Hacer | No hacer |
|---|---|
| "Crear cuenta" | "Comienza tu viaje gratis" |
| "Hacer pedido" | "Sumarte a la revolución" |
| "Ahorra entre 5% y 40% por producto. 5-10% garantizado como Restaurante Fundador" | "Ahorra hasta 50%" |
| "Despacho 10:00–16:00 al día siguiente" | "Despacho express" |
| "Sin contrato anual ni cuota fija" | "Sin compromisos!!" |
| "Solo, pagas al detalle" | "Ahorra con nosotros, ¡te va a encantar!" |
| "Restaurante" | "Negocio gastronómico" |
Errores: buenos vs malos
| Malo | Bueno |
|---|---|
| ✕"Error: la operación falló" | ✓"No pudimos guardar tu pedido. Revisa tu conexión y vuelve a intentarlo." |
| ✕"Usuario no autorizado" | ✓"Necesitas iniciar sesión para ver esto. [Iniciar sesión]" |
| ✕"Campo requerido" | ✓"Necesitamos tu email para confirmar el pedido" |
Aplicaciones
La versión correcta del logo según cada pieza: web, app, favicon, redes, flyer, WhatsApp y firma de correo.
favicon.svg — cuadrado tinta + mark lima, legible a 16px.Firma de correo
Plantilla con el logo oficial (Socio lima + Compras blanco) sobre chip oscuro, tabla con estilos inline (compatible Gmail, Outlook y Apple Mail). El logo PNG se ve nítido en modo claro y oscuro. Reemplazá Nombre y Cargo.
 |
| Nombre Apellido |
| Cargo · SocioCompras (F413 SpA) |
| hola@sociocompras.com · sociocompras.com |
| El trato entre socios — fruta y verdura fresca, por comuna. |
|
| Nombre Apellido |
| Cargo · SocioCompras (F413 SpA) |
| hola@sociocompras.com · sociocompras.com |
| El trato entre socios — fruta y verdura fresca, por comuna. |
Abrir la plantilla para copiar — con botón de copia e instrucciones (Gmail · Outlook · Apple Mail) →
Checklist antes de publicar
✓ Antes de cada pieza
- ¿Logo en la versión correcta para el fondo?
- ¿Respeta clearspace y tamaño mínimo?
- ¿Colores exactos (#AED440 / #13140F / #FFD034)?
- ¿"Socio" lima + "Compras" blanco/tinta, en Calistoga?
- ¿Copy con números concretos, tono chileno, con el rango real (5-40% por producto o hasta 30%) y el piso 5-10% garantizado?
- ¿Sin deformar, rotar, ni efectos sobre el logo?
Merch & material físico
La marca también vive en lo físico: la polera del equipo y la bolsa compostable que llega con cada pedido. Logo protagonista = el isotipo pinky promise (el trato entre socios). Estos son conceptos de marca: los vectores para imprenta (texto en curvas) vienen en el Brand Kit, carpetas merch/poleras-vector/ y merch/bolsas-camiseta-vector/.
Poleras — 6 diseños (frente + espalda)
Misma familia visual que las bolsas: titular en Calistoga bicolor en oración, frases del "trato entre socios" + subcopy en Inter. El uniforme del equipo usa la #1 Hecho el trato (kraft, hero) y la #2 Repartiendo frescura (lima, repartidor). Ver los 6 completos →
Bolsas PLA compostables — 10 conceptos
La bolsa es un touchpoint físico: llega con el pedido y refuerza el atributo sustentable (PLA compostable, "vuelve a la tierra"). Impresión flexo a 1–2 tintas; el kraft natural del material cuenta como tercer color. Detalle de copy y separación de tintas en brand/bolsas/CONCEPTOS.md. Ver preview →
1 · Compras con tu comuna — comunidad · 1 tinta
SocioComprasCompras con tu comuna.
El trato que abastece tu cocina: fresco del campo y sin pagar de más.
2 · Hecho el trato — sello · 1 tinta / kraft
Tu comuna compra junta: mejor, más fresco, más barato. Y la bolsa vuelve a la tierra.
SocioCompras3 · Juntos pesamos más — poder de compra · 2 tintas
Más cocinas pidiendo lo mismo = mejor precio para todas. Así negocia tu comuna.
SocioCompras4 · Directo del agricultor — frescura · 2 tintas
cocina
Menos manos en el camino: más fresco cuando lo recibes, más justo para quien lo cultiva.
5 · Solos al detalle, juntos 5-40% — ahorro honesto · 2 tintas
Esta caja la pediste con otros restaurantes de tu comuna. Comprar en bloque baja el precio.
6 · Vuelve a la tierra — sustentable · 2 tintas / kraft
PLA compostable: del campo a tu cocina, y de vuelta al suelo. Cero plástico que sobra.
7 · Tu comuna abastece a tu comuna — local · 2 tintas
La red de fruta y verdura que crece de barrio en barrio. Aquí tu cocina ya es parte.
· PROVIDENCIA ·8 · Ya eres socio — pertenencia · lima+gold / tinta
Esta bolsa la recibe quien compra mejor, junto a su comuna.
SocioCompras9 · Vuelve a la tierra / suma al de al lado — referido · 1 tinta
vuelve a la
tierra.
Invita a otro de tu comuna y comprueben juntos.
10 · El trato es de a dos — referido · 1 tinta / lima sólido
Trae al de al lado y comprueben juntos el ahorro, con datos reales.
SocioComprasSub-marcas & Iconos de App
Extensiones de la marca que derivan del sistema SocioCompras (isotipo pinky-promise + paleta lima/tinta): el lockup Partner, el logo de Costy y los iconos de las apps operativas.
SocioCompras Partner
Lockup oficial + descriptor Partner en gold #FFD034, para el programa de franquicia (partner.sociocompras.com). El descriptor va como palabra aparte, separado por una barra fina; nunca reemplaza al wordmark.
Costy · asistente de compras por WhatsApp
Wordmark Calistoga + círculo lima con la “C” (igual al avatar del chat de Costy) + la firma by SocioCompras.com. Se usa para todo lo de Costy (costy.html).
Iconos de App
Cada app operativa tiene su propio icono (glifo + color de fondo) para no confundirse en el celular. Comparten la paleta de marca pero nunca usan el isotipo solo — ese es la app principal del marketplace.
- Se entregan a sangre completa 1024×1024 (iOS/Android enmascaran las esquinas — el redondeado es solo previsualización).
- Nunca uses el isotipo pinky-promise solo como icono de estas apps: colisiona con la app principal del marketplace.
- Todos vienen en el Brand Kit descargable.
Redes sociales
Íconos de perfil y portadas listas para WhatsApp, Instagram, Facebook y LinkedIn. Todo deriva del sistema de marca (isotipo + paleta lima/tinta) y viene en el Brand Kit.
Ícono de perfil
El isotipo centrado, seguro para el recorte circular de todas las redes. Dos fondos: tinta (oficial) o lima (más llamativo en el feed). El de fondo tinta es el oficial — es el mismo que el sitio usa como favicon, app icon y OG. Tamaños incluidos: WhatsApp 640², Instagram 1080², Facebook 500², LinkedIn 400².
Portadas · minimalista
Versión limpia: gradiente de marca + lockup + tagline. Incluye Facebook (1640×624), LinkedIn empresa (1128×191) y LinkedIn personal (1584×396).
Portadas · con fotografía
Versión con fotografía de producto (feria/agricultor) + lockup y tagline, en 3 formatos: Facebook (1640×624), LinkedIn empresa (1128×191) y LinkedIn personal (1584×396).
- El ícono se muestra en círculo en todas las redes: el isotipo va centrado con aire.
- Facebook tapa la esquina inferior-izquierda de la portada con la foto de perfil, por eso el texto va arriba-izquierda.
- WhatsApp e Instagram no tienen portada de perfil (solo ícono).
- Todo está listo para descargar en el Brand Kit (carpeta
social/).
Brand Kit · Kit de prensa
Todo el material descargable de la marca en un solo archivo, para prensa, partners, proveedores y aliados. Cada logo viene en 3 formatos: JPG de alta resolución para imprimir, PNG con fondo transparente y SVG vector — más una guía rápida de colores, tipografías y uso correcto.
jpg-impresion/— JPG de alta resolución (300 DPI, ~3000 px) listos para imprenta y documentos. El fondo (blanco u oscuro) va indicado en el nombre.png-transparente/— PNG sin fondo, misma resolución, para montar el logo sobre cualquier color o foto.vector-svg/— vector original (escala infinita, lo mejor para gran formato).logos/eisotipos/— lockups horizontal y apilado, wordmark, y el isotipo pinky-promise en sus variantes.merch/poleras-vector/(6 poleras, frente y espalda) ymerch/bolsas-camiseta-vector/(10 bolsas camiseta): SVG para imprenta con el texto en curvas.sub-marcas/(Partner, Costy) ·app-icons/(Despacho, Rendición) ·redes-sociales/(íconos de perfil + portadas) ·social-y-favicon/+LEEME.txt.
Archivo único · logos, sub-marcas, iconos de app y redes sociales en JPG (300 DPI) + PNG + SVG, más poleras y bolsas camiseta en vector. Las fuentes Calistoga e Inter son gratis en Google Fonts (no se incluyen por licencia; el LEEME trae los enlaces).