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
Verde lima de chacra como marca, gold para urgencia/Fundador, tinta oscura como base. Paleta completa con uso.
Brand
Neutrales oscuros (default dark)
Grises (UI light mode)
Semánticos
Anillos (geo · Marketplace)
Proporción 60 / 30 / 10
60% tinta oscura (fondo) · 30% blanco/gris (texto y aire) · 10% lima (marca y CTAs). El gold es acento puntual (Fundador/urgencia), no se reparte como base.
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.
Escala de tamaños
xs · 12pxEl veloz zorro — labels, captions, metasm · 14pxEl veloz zorro — body 2°, nav, footerbase · 16pxEl veloz zorro — body principal (mín. legible)lg · 18pxEl veloz zorro — lead paragraphxl · 20pxEl veloz zorro — H4, callouts2xl · 24pxDistribuidor FyV — H33xl · 30pxDistribuidor FyV4xl · 36pxSocioCompras5xl · 48pxSocioCompras6xl · 60px22%Tokens
Spacing en grilla de 4px, border-radius, shadows (incluido el glow lima signature) y motion. Fuente: design-system/tokens.css.
Spacing (grilla 4px)
space-14pxspace-28pxspace-312pxspace-416pxspace-624pxspace-832pxspace-1248pxspace-1664pxspace-2080pxspace-2496pxBorder radius
Shadows
shadow-smshadowshadow-mdshadow-lgshadow-xlshadow-brand · glow lima (signature)Motion
prefers-reduced-motion. Fallback: transition: none.Componentes
Botones, cards, badges y forms — ejemplos vivos reutilizados del design system.
Botones
Primary · Accent · Ghost · WhatsApp
Secondary (sobre dark)
Cards
Card default
bg-gray-50 con border sutil. La opción más usada sobre bg-white.
Card floating
bg-white con shadow sutil, ideal sobre secciones gray-50.
Card accent
Borde dorado. Para destacar el programa Fundador u ofertas.
Card brand
Borde lima. Para marcar la opción recomendada en una comparativa.
Card dark
Para usar sobre backgrounds dark como hero gradient o footer.
Pasá el cursor sobre cualquier card para ver el efecto "card-hover signature" (translateY -6px + glow lima).
Badges / Pills
Patrón Anillo (Marketplace)
Forms
Ingresá un número de teléfono válido
Patterns
Composiciones recurrentes del sitio: comparación antes/después, stat callout, empty state y el hero gradient signature.
Comparación (antes / después)
Proveedor individual
Compra grupal
Stat callout
Empty state
Tu carrito está vacío
Agregá productos de tu comuna para empezar.
Hero gradient (signature)
Distribuidora de Frutas
y Verduras en Recoleta
Los restaurantes de Recoleta compran frutas, verduras e insumos al por mayor directo del agricultor. Sin intermediarios, entrega al día siguiente entre 10:00 y 16:00.
Iconografía
Emoji-first: universalmente reconocibles, cero bytes extra, calidez visual. El isotipo es el sello de marca, no un ícono de UI.
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 & Tono
Español de Chile, tú, profesional pero cercano. Números concretos ($CLP, %, kg). Sin exageraciones: "ahorro típico 15-25%", no "hasta 30%".
Hacer / No hacer
| Hacer | No hacer |
|---|---|
| "Crear cuenta" | "Comienza tu viaje gratis" |
| "Hacer pedido" | "Sumarte a la revolución" |
| "Ahorro típico 15-25%" | "Ahorra hasta 50%" |
| "Despacho 10:00–16:00 al día siguiente" | "Despacho express" |
| "Sin contrato anual ni cuota fija" | "Sin compromisos!!" |
| "Restaurante" | "Negocio gastronómico" |
Errores: buenos vs malos
| Malo | Bueno |
|---|---|
| ✕"Error: la operación falló" | ✓"No pudimos guardar tu pedido. Revisá tu conexión y volvé a intentar." |
| ✕"Usuario no autorizado" | ✓"Necesitás 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, sin "hasta 30%" default?
- ¿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, no arte final de imprenta.
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 15-25% — 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.sub-marcas/(Partner, Costy) ·app-icons/(Despacho, Rendición) ·redes-sociales/(íconos de perfil + portadas) ·social-y-favicon/+LEEME.txt.
Archivo único · ~4 MB · logos, sub-marcas, iconos de app y redes sociales en JPG (300 DPI) + PNG + SVG. Las fuentes Calistoga e Inter son gratis en Google Fonts (no se incluyen por licencia; el LEEME trae los enlaces).