Buffalo Waffles · DS web v2
Design system para el sitio de captación de franquiciados (buffalofranquicias.com). Tokens heredados del DS de consumidor + capa web: tipografía fluida, grilla, temas de sección con contraste AA verificado, motion con reduced-motion y 20 componentes HTML/CSS listos para mapear a módulos de HubSpot. Compilado el 2-oct-2026 a partir de las cards de components/. Lee primero GUIA-DISENADORES.md.
Los componentes NO usan estos colores directo: usan los tokens semánticos del tema (abajo). Ratios WCAG 2.x calculados.
Una clase en la <section> cambia texto, links, CTAs, bordes y foco. Pares verificados:
.bw-theme-crema
| Texto | #191410 / #f6e7c6 | 14.94:1 · AA |
| Texto apagado | #665540 / #f6e7c6 | 5.84:1 · AA |
| Link / kicker | #b71862 / #f6e7c6 | 5.17:1 · AA |
| CTA: texto ink / oro | #191410 / #f5b60e | 10.08:1 · AA |
| CTA: borde ink vs fondo | #191410 / #f6e7c6 | 14.94:1 · AA grande/UI |
| Foco ink vs fondo | #191410 / #f6e7c6 | 14.94:1 · AA grande/UI |
| Borde input vs blanco | #7c7362 / #ffffff | 4.68:1 · AA grande/UI |
.bw-theme-papel
| Texto | #191410 / #fbf4e6 | 16.70:1 · AA |
| Texto apagado | #665540 / #fbf4e6 | 6.53:1 · AA |
| Link | #b71862 / #fbf4e6 | 5.78:1 · AA |
| Foco ink | #191410 / #fbf4e6 | 16.70:1 · AA grande/UI |
.bw-theme-blanco
| Texto | #191410 / #ffffff | 18.28:1 · AA |
| Texto apagado | #665540 / #ffffff | 7.15:1 · AA |
| Link | #b71862 / #ffffff | 6.32:1 · AA |
| Borde input | #7c7362 / #ffffff | 4.68:1 · AA grande/UI |
.bw-theme-noche
| Texto crema | #f6e7c6 / #191410 | 14.94:1 · AA |
| Texto apagado | #b4a88f / #191410 | 7.78:1 · AA |
| Link / kicker / cifras oro | #f5b60e / #191410 | 10.08:1 · AA |
| Texto en tarjeta charcoal | #f6e7c6 / #241d18 | 13.58:1 · AA |
| Apagado en charcoal | #b4a88f / #241d18 | 7.07:1 · AA |
| Magenta texto (300) | #ee7bae / #191410 | 7.03:1 · AA |
| Foco oro vs ink | #f5b60e / #191410 | 10.08:1 · AA grande/UI |
.bw-block-oro
| Texto ink | #191410 / #f5b60e | 10.08:1 · AA |
| Texto apagado ink-soft | #3a2f27 / #f5b60e | 7.17:1 · AA |
| CTA crema / ink | #f6e7c6 / #191410 | 14.94:1 · AA |
| CTA ink vs oro | #191410 / #f5b60e | 10.08:1 · AA grande/UI |
| Foco ink | #191410 / #f5b60e | 10.08:1 · AA grande/UI |
.bw-block-magenta
| Texto ink | #191410 / #e74691 | 4.95:1 · AA |
| Blanco: SOLO titular ≥ 24 px | #ffffff / #e74691 | 3.70:1 · AA grande/UI |
| CTA crema / ink | #f6e7c6 / #191410 | 14.94:1 · AA |
| Foco ink | #191410 / #e74691 | 4.95:1 · AA grande/UI |
.bw-block-teal
| Texto crema | #f6e7c6 / #1f6e6a | 4.91:1 · AA |
| Titular blanco | #ffffff / #1f6e6a | 6.01:1 · AA |
| CTA ink / oro | #191410 / #f5b60e | 10.08:1 · AA |
| CTA oro vs teal | #f5b60e / #1f6e6a | 3.31:1 · AA grande/UI |
| Foco crema | #f6e7c6 / #1f6e6a | 4.91:1 · AA grande/UI |
Isla clara dentro de noche
.bw-island
| Oro sobre blanco | #f5b60e / #ffffff | 1.81:1 · NO |
| Oro sobre crema | #f5b60e / #f6e7c6 | 1.48:1 · NO |
| Oro / magenta | #f5b60e / #e74691 | 2.04:1 · NO |
| Blanco / magenta (16 px) | #ffffff / #e74691 | 3.70:1 · NO |
| Blanco / strawberry | #ffffff / #e23a2b | 4.31:1 · NO |
| Teal / ink | #1f6e6a / #191410 | 3.04:1 · NO |
| Muted original #8a7a63 / crema | #8a7a63 / #f6e7c6 | 3.40:1 · NO |
| Magenta 700 A2 #c71a6a / crema-deep | #c71a6a / #efd9a9 | 4.01:1 · NO |
clamp(rem, rem + vw, rem): escala de 360 px a 1440 px y respeta el zoom. Mostin (titulares, botones, cifras) · Montserrat (texto, datos) · Teenage Dreams (1–3 palabras, DEMO).
Alturas de línea: --lh-display 1 · --lh-heading 1.05 · --lh-snug 1.15 · --lh-normal 1.45 · --lh-body 1.6. Tracking: --ls-caps .06em (botones, badges) · --ls-caps-wide .12em (micro-etiquetas). Medidas: --measure-body 68ch.
--space-14px--space-28px--space-312px--space-416px--space-624px--space-832px--space-1248px--space-1664px--space-2496px--space-32128px--gutter | 16 → 40 px (mín. 16 en móvil) |
--grid-gap | 16 → 32 px |
--section-y-sm | 48 → 80 px |
--section-y | 64 → 128 px |
--section-y-lg | 80 → 176 px |
--stack-sm/md/lg/xl | 12→17 · 16→26 · 24→44 · 32→65 px |
--container-max | 1280 px (wide 1440 · narrow 896 · text 672) |
| xs 360 | mínimo soportado: probar 360 y 375 |
| sm 480 | CTA entra al header |
| md 768 | 8 columnas · sale la barra sticky |
| lg 1024 | 12 columnas · nav completa |
| xl 1280 / 2xl 1440 | contenedor máx. · referencia de diseño |
--dur-instant | 80 ms · press |
--dur-fast | 120 ms · hover, color |
--dur-base | 180 ms · elevación, foco |
--dur-slow | 280 ms · acordeón, menú, paso de formulario |
--dur-slower | 480 ms · entrada de mascota/stickers |
--ease-standard | cubic-bezier(.4,0,.2,1) |
--ease-out | cubic-bezier(.16,1,.3,1) · entradas |
--ease-sticker | cubic-bezier(.34,1.56,.64,1) · solo énfasis |
Obligatorio: con prefers-reduced-motion: reduce todas las duraciones pasan a 0 (tokens/motion.css). Nunca animar cifras, requisitos, formularios ni texto al hacer scroll.
Foco: anillo sólido de 3 px a 3 px del elemento, color del tema. Navega con Tab por esta página para verlo.
Tema crema (por defecto)
Tema noche
Bloques oro · magenta · teal (el CTA se invierte solo)
Tonos (todos AA)
Estados de disponibilidad (mapa y lista) — siempre con texto
Con kicker script (tema crema)
Buffalo Waffles es una marca validada, con más de 50 locales y una propuesta que ya conecta con miles de clientes.
Centrado, tema noche
Nosotros ponemos la marca, el sistema y el acompañamiento. Tú pones la energía para hacerlo crecer.
Kicker en Mostin (.bw-kicker--mostin) — para textos con tildes o ñ mientras Teenage Dreams sea DEMO
Arte maestro PNG, positivo/negativo, tamaños mínimos del brandbook. Hereda Logo.jsx. · Card · Notas
Logotipo horizontal (web: header y footer) · positivo y negativo
Isologotipo (badge) · mín. 113 px · rotación ≤ 45° antihorario
Inputs, selects, opciones tipo tarjeta y consentimiento. Hereda Input.jsx. · Card · Notas
Campos (reposo, error, select, textarea)
Revisa el correo: le falta el dominio (por ejemplo, @gmail.com).
Opciones tipo tarjeta y consentimiento
Sticky, opaco, logo fluido, CTA siempre visible y menú móvil con <details>. · Card · Notas
Claro (papel) — por defecto
Oscuro (noche) — logo negativo
H1 de propiedad + inversión + KPI con nota + 2 CTAs. Variantes foto, mascota y split. · Card · Notas
Foto (tema noche) — H1 real del sitio, KPI con notas
Emprende con el respaldo de una marca consolidada. Un modelo probado, soporte continuo y una red de +50 locales que sigue creciendo.
Inversión total desde $40.000.000
Toma 1 minuto · Te contactamos en [X] horas hábiles
Mascota (bloque oro) — mascota a sangre, sin cifras al lado
Nosotros ponemos la marca, el sistema y el acompañamiento. Tú pones la energía para hacerlo crecer.
Inversión total desde $40.000.000
Split (tema crema) — producto en mano + sticker
Buffalo Waffles es una marca validada, con más de 50 locales y una propuesta que ya conecta con miles de clientes.
Inversión total desde $40.000.000 · contrato de 20 años
Cifras en HTML con superíndice y disclaimer obligatorio. Franja o bento. · Card · Notas
Franja (--bar) sobre crema
Bento (--bento) sobre noche, con tarjeta destacada
Diferenciales del negocio en bento, con dato verificable por tarjeta. · Card · Notas
Bento sobre papel — diferenciales del negocio (contenido real)
Un modelo probado, con productos de calidad y una experiencia que marca diferencia.
Una marca chilena, cercana y dinámica que ha desafiado las reglas de la comida rápida con una propuesta innovadora y una identidad propia.
Más de cincuenta locales activos, operando con un modelo probado. Marca instalada con demanda real y crecimiento sostenido.
+50 locales · de Arica a Punta Arenas
La operación diaria no requiere un equipo grande: puedes operarlo tú o delegar en un administrador.
2 personas full time + 2 part time (fin de semana)
Las ventas provienen de clientes presenciales y de plataformas de delivery, para aprovechar distintos momentos de consumo.
2 canales de venta
Campañas de marketing digital, promociones y posicionamiento que benefician a toda la red.
Fondo de marketing: 2% de las ventas netas
Línea de tiempo (tema crema) — 7 pasos reales + plazo firma → apertura
Siete pasos claros, con acompañamiento en cada uno.
Toma 1 minuto. Con eso preparamos la primera conversación.
Conoces el modelo con un ejecutivo de franquicias y resuelves tus dudas.
Revisamos juntos tu perfil y tu capacidad de inversión.
Nuestro equipo te acompaña a buscar, evaluar y negociar la ubicación.
Contrato de franquicia por 20 años. El derecho de franquicia ($10.000.000 + IVA) se paga al firmar.
Capacitación para ti y tu equipo, y habilitación y equipamiento del local.
Apoyo comercial y de marketing para el lanzamiento, y acompañamiento presencial en la inauguración.
2 a 4 meses desde la firma hasta la apertura (pasos 5 a 7), según la disponibilidad del local y los tiempos de habilitación.
Postular no tiene costo. «Sin compromiso»: confirmar con el cliente antes de usarlo.
Manifiesto real + requisitos medibles + buscamos/no buscamos + tabla de costos. · Card · Notas
Tema blanco (capa de datos) — manifiesto real + requisitos medibles + costos publicados
Buffalo Waffles es un modelo probado, pero necesita de alguien que lo ejecute bien. Buscamos personas con mentalidad emprendedora, foco en la operación y ganas reales de construir algo propio.
Nosotros ponemos la marca, el sistema y el acompañamiento. Tú pones la energía para hacerlo crecer.
Si te hace sentido, este puede ser tu lugar.
| Concepto | Monto | Frecuencia |
|---|---|---|
| Inversión total | Desde $40.000.000 | Al inicio |
| Derecho de franquicia | $10.000.000 + IVA | Pago único, al firmar |
| Royalty | 7% de las ventas netas | Mensual |
| Fondo de marketing | 2% de las ventas netas | Mensual |
| Duración del contrato | 20 años | — |
Fuente: artículo «Cómo funciona una franquicia de comida» (blog de buffalofranquicias.com, 12-ago-2026) y FAQ del sitio. Formatos de local (m² y rango por formato): pendiente.
Bloque teal — por etapa + KAM (contenido real del blog y la FAQ)
1 : 10
Cada KAM (consultor de franquicia) acompaña a un máximo de 10 franquiciados: seguimiento cercano en la apertura y durante toda la operación.
Grilla de testimonios reales (tema papel) + variante video
Ser parte de la red de franquicias de Buffalo Waffles ha significado trabajar junto a una marca que entrega confianza, cercanía y un verdadero acompañamiento en cada etapa. Más que una franquicia, hemos encontrado un espacio donde nuestros objetivos pueden crecer con respaldo, apoyo humano y una visión compartida de éxito.
Gracias a nuestra pasión, la dedicación de todo nuestro equipo y una marca excepcional como Buffalo Waffles hemos conseguido instalar un negocio exitoso que ha conectado con las personas de Iquique y esperamos dejar huellas en la región de Tarapacá.
0:45 · con subtítulos
Placeholder: video de 30–60 s de un franquiciado hablando del negocio (no hay material aún).
Mapa placeholder + lista de regiones (tema crema)
Hoy tenemos locales en 11 regiones y buscamos crecer en distintas zonas del país. Evaluamos cada caso según el potencial comercial, la cobertura actual y la disponibilidad territorial.
Estados de disponibilidad por zona: pendientes. Mostrar «Pocas plazas» solo con datos reales.
3 pasos con progreso, tramos coherentes con $40M, consentimiento y gracias con Pipedrive. · Card · Notas
Formulario de 3 pasos (dentro de sección noche, en isla clara). Prueba "Siguiente" con campos vacíos.
Completa tu postulación y un ejecutivo de franquicias revisará tu perfil. Después puedes elegir tu reunión inicial.
¡Buena! Ya tenemos tu postulación
Un ejecutivo de franquicias revisará tu perfil y te contactará en [X] horas hábiles. ¿Quieres adelantar? Elige tu reunión inicial.
Acordeón <details> en 4 categorías — las 17 preguntas y respuestas reales (tema papel)
¿Tienes preguntas sobre cómo empezar? Aquí las respondemos.
La inversión total depende del formato y ubicación del local, pero generalmente parte desde los $40 millones de pesos. Este monto considera la habilitación del local, equipamiento, capacitación y otros elementos necesarios para comenzar a operar.
La inversión considera el derecho de franquicia, capacitación inicial, apoyo en la apertura, manuales operativos, acompañamiento comercial y acceso a proveedores homologados. El detalle específico se entrega durante el proceso de evaluación.
Sí. Existen franquiciados que participan activamente en la operación y otros que administran el negocio a través de un encargado. En ambos casos, recomendamos involucrarse en el seguimiento de los indicadores del local.
Sí. Varios de nuestros franquiciados han continuado creciendo junto a la marca incorporando nuevos locales una vez consolidada su primera operación.
No. Muchos de nuestros franquiciados provienen de rubros completamente distintos. Lo más importante es tener compromiso con la operación, capacidad de gestión y ganas de hacer crecer el negocio.
Depende del formato y volumen de ventas, pero normalmente un local opera con equipos pequeños, lo que facilita la gestión y el control de costos.
Las ventas provienen tanto de clientes presenciales como de plataformas de delivery, permitiendo diversificar los ingresos y aprovechar distintos momentos de consumo.
Sí. Buffalo Waffles desarrolla campañas de marketing digital, promociones y acciones de posicionamiento de marca que benefician a toda la red de franquicias.
Acompañamos a nuestros franquiciados antes, durante y después de la apertura. Esto incluye capacitación, soporte operacional, marketing, asesoría comercial, desarrollo de productos y seguimiento permanente del negocio.
Dependiendo de la disponibilidad del local y los tiempos de habilitación, el proceso suele tardar entre 2 y 4 meses desde la firma hasta la apertura.
Buscamos crecer en distintas regiones del país. Evaluamos cada caso según el potencial comercial de la zona, la cobertura actual de la marca y la disponibilidad territorial.
Sí. Nuestro equipo acompaña a los franquiciados en la búsqueda, evaluación y negociación de ubicaciones que cumplan con los estándares de la marca.
Buscamos personas con capacidad de inversión, compromiso con la marca, orientación comercial y disposición para seguir los estándares operativos establecidos.
Completa el formulario de contacto y uno de nuestros ejecutivos te ayudará a evaluar si Buffalo Waffles es la oportunidad adecuada para ti.
El contrato de franquicia otorga al franquiciado el derecho a usufructuar la marca y operar bajo el modelo Buffalo Waffles por un período de 20 años. Esto entrega estabilidad y una visión de largo plazo para desarrollar y hacer crecer el negocio junto a la marca.
No somos una franquicia tradicional. Buffalo Waffles es una marca chilena, cercana y dinámica que ha desafiado las reglas de la comida rápida con una propuesta innovadora y una identidad propia. Contamos con más de 50 locales operando a lo largo de Chile, un modelo de negocio probado y un equipo que acompaña a los franquiciados en cada etapa del camino. Más que una franquicia, buscamos construir una comunidad de emprendedores que crecen junto a la marca.
Bloque oro con mascota
Buscamos socios para seguir creciendo. Súmate y construye tu propio negocio con una marca en expansión.
Tema noche, sin mascota
Barra móvil WhatsApp + Agendar (vista estática; en la card real aparece fija bajo 768 px)
Alternativa recomendada por A1: Postula + WhatsApp (ver notas)
