Qrovia: Guía de Marca y Sistema de Diseño
La fuente única para diseñar, escribir y construir Qrovia de forma coherente — en pantalla y en papel. Pensada para enviarse a diseñadores, desarrolladores, agencias, imprentas y equipos de marketing.
Menos banca, más herramienta de cobro
Qrovia ayuda a los comercios venezolanos a cobrar hoy, sin datáfono ni fricción, con seguridad de nivel bancario. La marca actual tiene un buen nombre y un buen gesto —la “Y” como señal de triunfo— pero su ejecución (neón cian + rojo cómic sobre negro) resta profesionalismo y choca con el lenguaje del propio producto, donde el rojo significa “pago rechazado”.
Esta guía propone una evolución, no una ruptura: conserva el equity azul y el check verde de la marca, y lo sistematiza en un isotipo escalable (teselado + check + píxeles QR = pago aprobado + ruta rápida), profundiza el azul para transmitir confianza, y reserva el rojo exclusivamente para errores. Sumamos un verde “Pago aprobado” como el momento emocional del producto.
Confianza sin frialdad
Azul profundo + jerarquía clara. Se ve serio y seguro, no como un banco viejo.
Rapidez como sistema
El check ascendente, el cian y el verde de “aprobado” codifican velocidad y éxito.
Cercanía con el comercio
Voz directa, tuteo, cero letra chica. “Si puedes vender, puedes cobrar — hoy.”
Estrategia y voz de marca · sistema de color con HEX/RGB/CMYK · tipografía · logotipo oficial en SVG (6 variantes) · tokens de diseño (CSS + JSON) · especificaciones de componentes con estados · aplicaciones digitales y físicas.
Confianza en movimiento
Qrovia existe para que cobrar deje de ser un problema. La dirección creativa —“Confianza en movimiento”— combina geometría limpia y seria con un gesto ascendente que codifica velocidad y aprobación. Se siente segura como un banco, pero se usa como una herramienta.
Esencia
Cobrar, fácil. El pago que no estorba.
Propósito
Que cualquier comercio en Venezuela acepte pagos sin fricción, sin miedo al fraude y sin depender de un banco.
Promesa de marca
“Si puedes vender, puedes cobrar — hoy.”
Posicionamiento
Para el comercio venezolano que quiere cobrar sin complicarse, Qrovia es la pasarela que une seguridad bancaria (PCI DSS, 3D-Secure) con la simpleza de un link — activa en minutos y acompañada por IA (soporte).
Personalidad
Arquetipo: el Aliado ágil — cercano y resolutivo, con un toque de “mago” por la tecnología que hace invisible lo complejo. Habla claro, va al grano y celebra contigo cuando el pago entra.
Valores
- Claridad — si hay que explicarlo dos veces, está mal diseñado.
- Rapidez — el tiempo del comercio es dinero; cada paso de más es una venta menos.
- Seguridad sin drama — protegemos en silencio; el comercio solo ve “aprobado”.
- Cercanía — hablamos como un colega, no como un contrato.
Diferenciadores
Pago al Toque
Tap-to-phone: cobra con tarjeta sin datáfono, solo con el celular.
Link + Botón de Pago
Cobra por WhatsApp o web en segundos; API para integrarlo todo.
Antifraude
3D-Secure, tokenización y monitoreo que reducen contracargos hasta 70%.
Atributos que debe transmitir visualmente
| Atributo | Cómo se codifica |
|---|---|
| Confianza / seguridad | Azul profundo, jerarquía clara, espacio en blanco, sellos visibles. |
| Innovación tecnológica | Verde secundario, píxeles QR, datos en tipografía mono/tabular. |
| Facilidad de uso | Un solo acento por pantalla, radios amables, pasos numerados. |
| Rapidez | Gesto ascendente, microinteracciones cortas, verde de “aprobado”. |
| Cercanía | Voz en tú, fotografía de comercios reales, lenguaje sin jerga. |
Percepción objetivo. Comercio: “esto es fácil y me protege”. Consumidor: “pago seguro y rápido, se ve serio”.
Claro, humano y directo
Una sola voz para todo Qrovia —web, app, checkout, correos, redes y documentos fiscales— que cambia de tono según el momento, nunca de personalidad. Regla base: tuteo cercano por defecto; “usted” solo en documentos legales y fiscales.
Tono por momento
| Momento | Tono | Ejemplo |
|---|---|---|
| Comercial | Motivador, concreto | “Empieza a cobrar hoy. Gratis y sin datáfono.” |
| Proceso de pago | Tranquilo, guía | “Estás pagando a Panadería La 15. Monto: $38.000.” |
| Éxito / aprobado | Celebratorio, breve | “¡Listo! Pago aprobado. Ya está en tu cuenta.” |
| Error / rechazo | Calmado, con salida | “El banco rechazó el pago. Pídele a tu cliente otra tarjeta.” |
| Seguridad | Tranquilizador, concreto | “Protegido con 3D-Secure. Nosotros vigilamos; tú vendes.” |
| Soporte | Humano, resolutivo | “Cuéntame qué pasó y lo resolvemos juntos.” |
Cómo hablamos a cada quien
A comercios
Como un colega que sabe de negocio: enfocado en tiempo, dinero y tranquilidad. “Tu plata, más rápido y más segura.”
A consumidores
Breve y confiable en el momento del pago: quién cobra, cuánto y que es seguro. Cero jerga, cero sorpresas.
Palabras que usamos / que evitamos
- fácil · listo · hoy · al toque
- cobra · tu negocio · tu plata
- aprobado · seguro · sin enredos
- contracargo (no “chargeback”)
- jerga: gateway, settlement, onboarding*
- “estimado cliente”, tono bancario frío
- “revolucionario”, superlativos vacíos
- alarmismo o culpar al usuario en errores
* Términos técnicos solo en documentación para desarrolladores, nunca en producto de cara al comercio o consumidor.
Ejemplos listos para usar
Color, tipografía y sistema gráfico
Toca cualquier muestra para copiar su HEX. La paleta se organiza en cuatro capas: neutros (70–90% de la interfaz), un acento de marca, colores semánticos y, muy puntualmente, efectos.
Colores de marca
Semánticos
Neutros (Tinta)
Texto normal ≥ 4.5:1, texto grande ≥ 3:1. Para texto/enlaces azules sobre blanco usa Azul 700 (el 600 queda para rellenos y botones, donde el blanco encima sí cumple). El rojo se reserva para error; nunca como fondo amplio.
Gradiente de marca
Azul 600 → Verde 500 (135°). Uso restringido: solo el isotipo y el momento “aprobado”. Nunca como fondo genérico de héroe — es el tropo fintech más gastado y resta credibilidad. Los héroes van en plano (Noche o blanco).
Tipografía
| Rol | Familia | Uso |
|---|---|---|
| Display / Títulos | Sora | Titulares, marca, cifras destacadas. Pesos 600/700/800. |
| Cuerpo / UI | Inter | Párrafos, formularios, etiquetas, botones. Pesos 400/500/600. |
| Datos financieros | IBM Plex Mono | Montos, IDs de transacción, referencias, códigos. Siempre tabular-nums. |
Todas son de código abierto y uso comercial (Google Fonts). Regla financiera: montos con separador de miles y decimales alineados; nunca abreviar montos en recibos.
Fuentes públicas · referencias y descarga
Las tres son gratuitas, de uso comercial y con licencia SIL Open Font License 1.1. En web se cargan por Google Fonts; para impresión, descarga los .ttf/.otf desde los enlaces. Fallback del sistema: system-ui, Segoe UI, sans-serif.
Sistema gráfico
- Geometría: teselado redondeado (squircle) del isotipo; el gesto del check ascendente es el patrón gráfico raíz.
- Radios: 8 / 12 / 16 / 24 px + pill. Amable, no infantil.
- Iconografía: monolínea, trazo 1.75px, currentColor, esquinas redondeadas. Sin emojis como iconos.
- Fotografía: comercios reales venezolanos, luz natural, manos y producto; evitar stock corporativo genérico.
- Elevación: sombras suaves (3 niveles), no bordes gruesos. Fondos planos; el gradiente solo en marca/aprobado.
- Movimiento: microinteracciones cortas (120–200ms, easing suave). El botón baja 1px al presionar; “aprobado” hace un check breve. Respeta prefers-reduced-motion.
Componentes con estados reales
Mobile-first, accesible y tokenizado. Toca cualquier token para copiarlo. Todos los componentes principales muestran sus estados: default, hover, focus, active, disabled, loading, success y error.
Fundamentos
Espaciado (grid 8px)
Radios
Breakpoints
600 · 768 · 1024 · 1280 · 1536 px
Botones
Una sola primaria por vista. Foco visible obligatorio (anillo azul 3px). Altura táctil mínima 44px en móvil.
Campos de formulario
Controles
Estados y feedback
Badges de transacción
Skeleton loader
Alertas
Estado vacío
Aún no tienes cobros
Crea tu primer link de pago y compártelo por WhatsApp. Cada transacción aparecerá aquí.
Momentos de producto
Confirmación de pago
QroviaPanadería La 15 · TXN-8F42A1
Recibo digital
Link / QR de pago
Especificación del resto de componentes
Todos comparten los mismos tokens (color, radio, sombra, foco) y el mismo set de estados. Referencia rápida:
| Componente | Estados | Nota clave |
|---|---|---|
| Selectores / dropdown | default · hover · focus · open · disabled | Menú con sombra-2, radio-md, ítem activo en Azul 50. |
| Tabs | default · active · hover · focus | Indicador inferior en Azul 600, 2px. |
| Tablas | default · hover fila · orden | Bordes hairline, sin cebra; montos tabular a la derecha. |
| Modales | open · closing | Overlay rgba(11,21,36,.5); radio-xl; foco atrapado. |
| Tooltips | hover · focus | Tinta 900, texto blanco, 12px, delay 150ms. |
| Menús / Nav | default · active · hover | Ítem activo Azul 700 sobre Azul 50. |
| Breadcrumbs | default · current | Separador “/”, actual en Tinta 900. |
| Indicador de progreso | 0–100 · indeterminate | Pista Tinta 200, avance Azul 600; checkout con pasos. |
| Estado vacío | default | Icono monolínea + 1 acción; nunca dejar en blanco. |
| Checkout | datos · 3DS · éxito · error | Un paso por pantalla en móvil; resumen fijo del monto. |
| Panel admin | — | Densidad de datos, mono tabular, filtros persistentes. |
Digital y físico
La misma marca, coherente donde aparezca: producto, comunicación y materiales impresos para comercios.
Digital
Sitio, dashboard, checkout, links y QR de pago, correos, publicidad y redes. Isotipo teselado + azul primario; fondos planos.
Comunicación
Correos transaccionales (recibo/confirmación), presentaciones, plantillas de redes. Voz del cap. 04.
Físico / Comercio
Stickers “Aquí paga con Qrovia”, señalética de caja, tarjetas, papelería, facturas, uniformes y material POP.
Sticker para comercios (ejemplo)
Composiciones: correcto / incorrecto
- Isotipo con su área de seguridad respetada.
- Un acento por pieza; el resto neutros.
- Verde solo para “aprobado”; rojo solo para error.
- Fotografía real de comercios venezolanos.
- Gradiente azul→cian como fondo de todo.
- Rojo decorativo o líneas cómic del borrador.
- Estirar, rotar o recolorear el isotipo.
- Mezclar más de dos tipografías o usar Sora en cuerpo largo.
De dónde viene Qrovia
El nombre y el logo cifran cuatro ideas en una sola palabra: QR (escanea y paga), la “o” como cierre de seguridad (cada transacción blindada, PCI-DSS), el check verde (pago exitoso y al instante) y la “iA” — usamos inteligencia artificial en todos nuestros procesos de seguridad. Qrovia = pagar por QR, seguro, aprobado y con IA vigilando.
El concepto en cuatro señas
QR — escanea y paga
El pago nace de un escaneo: el código QR es la puerta de entrada, no el datáfono.
“o” — cierre de seguridad
El anillo es un candado cerrado: cada pago va blindado (PCI-DSS, tokenización). La seguridad rodea la transacción.
Check verde — aprobado
La “V” es un check: pago exitoso y rápido, el “sí, entró” al instante.
“iA” — inteligencia
Usamos IA en todos nuestros procesos de seguridad: tecnología moderna que vigila cada operación.
Anatomía del logo
Territorio visual
Cultura de QR y Pago Móvil
Venezuela cobra por QR, Pago Móvil y C2P a diario. El logo habla ese idioma, no el del datáfono.
Fintech limpio y geométrico
Trazo redondeado, sólido y moderno — referencias tipo Wise, Nubank, Mercado Pago; nunca banco tradicional.
Verde de “aprobado”
El verde no es decorativo: es el color del “sí, entró la plata”. Azul para confiar, verde para aprobar.
Significado del color
| Color | En el logo | Qué comunica |
|---|---|---|
| Azul #0067FD | “iA” + primario | Confianza, seguridad, tecnología. La base de toda la marca. |
| Verde #03BE42 | Check “V” | Aprobado, éxito, dinero recibido. El momento emocional del producto. |
| Carbón #1A1C24 | “QR” + píxeles | Seriedad y peso; lo digital/escaneable sin ser frío. |
| Gris #CACBCE | “o” · cierre | El anillo de seguridad que envuelve cada pago; sobrio y neutro. |
“Escanea, se asegura, aprueba — con IA detrás.” Todo el sistema visual (color, tipografía, gestos) debe reforzar ese recorrido: QR → seguridad → aprobado.
El logotipo oficial de Qrovia
El wordmark Qrovia reúne las cuatro señas —QR, el cierre de seguridad, el check y la IA— y se sistematiza en un isotipo compacto (teselado + QR + check) para usos cuadrados. La misma historia —escanea, asegura, aprueba— en una forma escalable.
Wordmark oficial
- QR = escanea y paga; el punto de partida.
- “o” = cierre de seguridad (PCI). Check = aprobado. iA = IA en seguridad.
Isotipo y lockup vertical
- Escala de 16px a valla; sólido y reproducible en 1 tinta.
- Cuatro señas en una: QR, cierre de seguridad, check de aprobado e IA.
- Bajo riesgo de parecerse a otras fintech: no es tarjeta, ni escudo, ni rayo genérico.
Variantes
Cada variante se descarga en SVG (vectorial, editable) o PNG de alta resolución generado con la tipografía real. Para todo junto, usa el pack oficial.
Área de seguridad y tamaño mínimo
Margen libre igual a la mitad del alto del teselado (½X) en los cuatro lados. Tamaño mínimo: isotipo 20px / lockup 24px de alto. Favicon: versión sin chispa para no ensuciar a 16px.
Códigos de color del logo
- Sobre blanco, Nube o Noche.
- Isotipo solo cuando el espacio manda.
- Negativo (blanco) sobre fondos oscuros.
- Recolorear, rotar o inclinar el mark.
- Añadir sombras, contornos o degradados ajenos.
- Colocar sobre fondos de bajo contraste o fotos sin capa.
Concepto en una línea: “Qrovia: la ruta QR que termina en aprobado.” Los seis SVG están en el cap. 09, limpios y editables.
Listo para producción
Descarga oficial de los recursos de marca: logos en SVG y PNG, la paleta en formatos profesionales, los tokens listos para desarrollo y las tipografías públicas. Todo individual o en un solo pack.
Pack oficial de marca
Logos (SVG + PNG), paleta (CSS/HEX/GPL), tokens y guía rápida — en un solo .zip para tu equipo, agencia o imprenta.
Logotipo · SVG + PNG
Los PNG se generan al momento, a alta resolución y con la tipografía real cargada (isotipo/favicon 1024px; lockups a 8× con fondo transparente).
Favicon e íconos de app
Ya enlazados en el <head>: favicon.ico multiescala, SVG y apple-touch-icon. Para PWA: icon-192.png / icon-512.png.
Paleta · formatos profesionales
.ASE importa directo en Illustrator/Photoshop · .GPL en GIMP/Inkscape/Krita · CSS/SCSS/JSON para desarrollo. Todas incluyen HEX y RGB.
Tipografía
Design tokens
Además: brand-spec.md con la extracción de marca en OKLch. Importa tokens.css y usa siempre variables (var(--accent)), nunca hex sueltos.