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.
SocioCompras