Aquí puedes jugar con el logo de Vivook y ver cómo se ve en diferentes situaciones. Cámbiale el color, ponlo con o sin el aro, pruébalo sobre distintos fondos — todo en vivo. Cuando encuentres la versión que te gusta, descárgala en el tamaño que necesites con los botones de abajo. Fácil.
Color del logo
Aro
Fondo
Tamaño personalizado · Redimensiona y descarga a la medida
Mueve el slider para previsualizar · Escribe el tamaño exacto en píxeles · Descarga
Vista previa280px
80200320440560
px
Editables · Archivos vectoriales
Para diseño profesional · Escala infinita sin pérdida · Editable en Illustrator / Figma
02. Paleta de color.
Seis colores que cuentan la historia de Vivook. Los cuatro principales — azul, rojo, naranja y verde — salen directo del logo y cada uno tiene su rol: el azul manda en la navegación y acciones principales, el rojo pide atención en alertas y llamadas a la acción, el naranja avisa sin alarmar, y el verde celebra los momentos buenos. Los dos tonos oscuros son el esqueleto: textos importantes y fondos con carácter. Pasa el cursor sobre cada color para verlo en grande.
01
Blue
Principal
02
Red
CTA
03
Orange
Aviso
04
Green
Éxito
05
Dark
Texto · Encabezados
06
Mid
Soporte
RGB y HEX para uso digital. CMYK para impresión. Los cuatro colores de marca (Blue, Red, Orange, Green) provienen directamente del logo de Vivook y deben mantener su rol semántico en toda la interfaz: el azul para elementos principales y de navegación, el rojo exclusivamente para acciones primarias y errores críticos, naranja para advertencias y verde para estados de éxito.
Color ramps · 10 pasos · click para copiar
Pasa el cursor para ver uso · click para copiar hex
Blue
10 pasos
Red
10 pasos
Orange
10 pasos
Green
10 pasos
Ejemplo en contexto
Así se ven los ramps aplicados a un módulo real de la webapp — una tarjeta de pagos del condominio. Cada elemento usa un paso distinto del ramp (fondos 50-100, bordes 200-300, texto 700-800, botones 500-600) para mostrarte cómo los 10 tonos trabajan juntos en una interfaz real. Cambia el color con los botones de la derecha para ver el mismo componente con cada ramp de marca.
Nuevo
Cuota de mantenimiento
Tu cuota de octubre está lista. El pago vence el 15 de este mes para evitar recargos.
Tip · Configura pagos automáticos desde tu perfil para no preocuparte.
Bordes suaves · Dividers con identidad · Disabled states
03. Tipografía.
En Vivook usamos solo dos tipografías, cada una con un propósito bien definido. Plus Jakarta Sans se usa exclusivamente para titulares, números grandes y elementos de marca — es la cara con personalidad. DM Sans se usa exclusivamente para cuerpo de texto, descripciones, tablas y formularios — es la cara funcional. Esta división no es opcional: mezclarlas al revés rompe la jerarquía visual y hace que la interfaz se sienta inconsistente. Ambas son gratuitas en Google Fonts, así que no hay excusa para no tenerlas instaladas.
Plus Jakarta Sans
Tipografía de display Gratis
En Vivook, Plus Jakarta Sans se usa solo para titulares, números grandes de métricas, nombres de módulos y elementos de marca. Es una sans-serif geométrica con formas humanistas que mantiene legibilidad incluso en pesos 700 y 800. Nunca la uses para párrafos largos — cansa la vista en textos de más de 2 líneas.
En Vivook, DM Sans se usa solo para cuerpo de texto, descripciones, labels de formulario, datos en tablas y UI secundaria. Su estructura low-contrast está diseñada específicamente para lectura cómoda en pantallas durante sesiones largas. Nunca la uses para titulares grandes — pierde la personalidad que Jakarta sí aporta.
Gestiona cuotas, comunicación y seguridad de tu condominio.
Prueba gratis 15 días.
RegularMediaNegrita
1234567890 — $%&/()¿?@#*:;{}[]
Cómo trabajan juntas
Plus Jakarta Sans y DM Sans son compañeras — una aporta carácter y la otra legibilidad. Primero entiende cuándo usar cada una, luego mira varios ejemplos reales de cómo se ven trabajando juntas en la webapp de Vivook.
01Guía rápida · Cuándo usar cada una
Plus Jakarta Sans
Display · Personalidad · Impacto
Úsala cuando quieras que el texto tenga carácter
Titulares y encabezados — H1, H2, H3 de páginas y secciones
Números grandes destacados — métricas, KPIs, stats en dashboards
Texto hero y landing — mensajes de bienvenida, CTAs grandes
Labels de marca — el logotipo, nombres de módulos
Weight 700-800 para máximo impacto visual
Pagos al día
✓ Con personalidad
DM Sans
Cuerpo · Funcional · Legible
Úsala cuando la legibilidad sea lo primero
Cuerpo de texto largo — descripciones, explicaciones, artículos
Datos en tablas — filas, columnas, celdas numéricas
Formularios — labels, placeholders, mensajes de ayuda
UI secundaria — tooltips, breadcrumbs, metadatos
Weight 400-500 para lectura cómoda, 700 para énfasis
Tu cuota mensual vence el día 15 de cada mes.
✓ Cómoda de leer
Sí / No · El mismo contenido, una elección distinta
Mira exactamente el mismo texto con las tipografías asignadas correctamente vs al revés. La diferencia es dramática.
✓ Correcto
Plus Jakarta Sans
Cuota de mantenimiento
DM Sans
Tu pago del mes de octubre ya fue procesado correctamente y aparecerá en tu historial en las próximas horas.
¿Por qué funciona?Plus Jakarta Sans en el título aporta peso visual y personalidad — hace que tu ojo se enfoque primero ahí y entiendas inmediatamente de qué trata la tarjeta. DM Sans en el cuerpo está diseñada específicamente para lectura en pantalla: sus formas low-contrast y el espaciado generoso te permiten leer el párrafo completo sin fatiga visual. Las dos tipografías se complementan porque cada una resuelve un problema distinto — impacto vs legibilidad.
✕ Incorrecto
DM Sans ✕
Cuota de mantenimiento
Plus Jakarta Sans ✕
Tu pago del mes de octubre ya fue procesado correctamente y aparecerá en tu historial en las próximas horas.
¿Por qué no funciona?DM Sans en el título lo hace ver "como un párrafo más" — pierde jerarquía y el usuario no sabe dónde enfocar primero. Plus Jakarta Sans en el cuerpo es peor aún: sus trazos con más contraste y formas geométricas estaban diseñadas para verse de lejos en titulares, no para párrafos largos — los ojos se cansan rápido y la lectura se vuelve incómoda. Regla simple: si es grande y se lee de un vistazo, Jakarta. Si es pequeño y se lee palabra por palabra, DM Sans.
02Ejemplos reales · Ambas trabajando juntas en la webapp
Mira 4 aplicaciones distintas en vivo
1/4
Estado financiero
Tu condominio está al corriente.
Todas las cuotas del mes fueron recibidas a tiempo. El fondo de reserva creció 12% respecto al trimestre anterior, y no hay reportes de incidencias pendientes en ninguna torre.
98.4%
Tasa de cobro
$847K
Fondo de reserva
0
Incidencias abiertas
DashboardJakarta en label del módulo, titular y números grandes · DM Sans en descripción y labels de métricas
⚠ Atención requerida
3 cuotas vencen esta semana.
Los departamentos B-204, C-307 y D-101 tienen pagos pendientes que vencen antes del viernes. Envía un recordatorio automático o marca el caso como prioritario desde el panel de cobranza.
AlertaJakarta en el label de atención y el titular impactante · DM Sans en la descripción y los botones de acción
✓ Pago confirmado
Cuota de octubre pagada.
Tu pago fue procesado exitosamente el 14 de octubre a las 10:32 AM. Recibirás el comprobante por correo en los próximos minutos. Gracias por mantener tu cuenta al día.
Monto$4,850.00 MXN
ReferenciaVVK-2026-104-B
MétodoTransferencia SPEI
ÉxitoJakarta en label y titular de confirmación · DM Sans en descripción y datos del recibo para máxima legibilidad
Webapp · Vivook
Tu condominio, simple y transparente.
Gestiona cuotas, comunícate con tus vecinos, reporta incidencias y mantente al día con el estado financiero de tu comunidad — todo desde un solo lugar.
LandingJakarta en titular grande de alto impacto · DM Sans en descripción de la propuesta de valor y botones
04. Cómo aplicar la marca.
La manera en que aplicas el logo determina qué tan rápido tus usuarios reconocen a Vivook. Esta sección no es una lista de "combinaciones bonitas" — es un sistema basado en contraste medible (WCAG 2.1), teoría de branding (principio 80/15/5) y el rol semántico de cada color de marca. Cada combinación está clasificada en tres tiers según un criterio objetivo: ratio de contraste, fidelidad de marca y aplicabilidad en contexto real.
01
Consistencia antes que creatividad
Un logo usado consistentemente en su lockup primario puede generar hasta 80% más recordación de marca (Loyola University Study). Resiste la tentación de variar — la repetición es lo que construye reconocimiento.
02
Contraste medible, no estético
Cada combinación muestra su ratio WCAG. Los logos están técnicamente exentos de contraste obligatorio, pero las mejores guías de marca (Asana, Mailchimp, UCLA) lo exigen igual por accesibilidad y reconocimiento robusto.
03
Proporción 80 / 15 / 5
80% Primary lockups · 15% Secondary con justificación contextual · 5% variantes alternas monocromas. Todo lo que no esté aquí listado es no aprobado.
Aro
01
Lockups primarios
Usa estas 5 combinaciones el 80% del tiempo
Contraste ≥ 4.5:1 · WCAG AA
11.7:1Original · White
11.1:1Original · Neutral 50
11.7:1Dark · White
11.7:1White · Dark
6.3:1White · Mid
02
Secundarios / Acentuados
Para contextos específicos con justificación — máximo 15% del uso
Contraste ≥ 3.0:1 · WCAG AA grandes
10.4:1Dark · Neutral 100
4.0:1White · Red
5.6:1Dark · Orange
6.3:1Mid · White
3.0:1White · Blue
4.4:1White · Green
03
Combinaciones a evitar
Por qué estas combinaciones dañan la marca — ejemplos representativos
Contraste < 3.0:1 · No aprobadas
✕DeformadoProporciones alteradasNunca estires, comprimas o cambies las proporciones del logo. Siempre escálalo manteniendo su ratio original.
✕RotadoInclinación arbitrariaEl logo siempre va horizontal. No lo rotes, inclines ni lo coloques en diagonal por "diseño".
✕2.9:1Original sobre color de marcaEl logo multicolor choca con cualquier fondo de marca sólido. Usa el White lockup sobre fondos de color.
✕EfectosSombras y glowsNo agregues sombras, glows, outlines, degradados ni efectos decorativos. El logo es plano por diseño.
✕Fondo complejoFondo con patrones/fotoNunca pongas el logo sobre fotos, patrones o fondos con ruido. Usa un fondo sólido o agrega un contenedor plano debajo.
✕Fuera de paletaColor fuera de la paletaNo pintes el logo con colores que no estén en la paleta oficial. Usa solo las 10 variantes aprobadas.
Proporción de uso recomendada · Regla 80 / 15 / 5
80%Primario
15%Secundario
5%Alterno
Esta proporción está inspirada en las guías de marca de Asana, Mailchimp y McLaren. Priorizar un lockup primario con disciplina es lo que hace que marcas como Google, Spotify o Tiffany sean reconocibles de un vistazo.
05. UX · La marca en el producto.
El branding no vive en este documento — vive en cada pantalla que tu usuario toca. Esta sección muestra cómo las reglas de tipografía, color y contraste que definimos antes se traducen en decisiones reales de diseño de producto. Las pantallas de abajo son un prototipo navegable de un flujo real de Vivook: login, dashboard, pago y confirmación. Puedes hacer clic en los elementos interactivos para avanzar por la experiencia y ver cómo los principios de marca se aplican en contexto.
Aa
Jerarquía tipográfica clara
Plus Jakarta Sans para titulares y números grandes crea puntos de entrada visuales. DM Sans para cuerpo y UI asegura lectura cómoda. El usuario siempre sabe dónde mirar primero.
●
Color con significado semántico
Azul para acciones primarias, verde para éxito, naranja para avisos, rojo para CTAs críticos. Cada color dice algo — no es solo decoración. Usar rojo en un botón "Cancelar" es tan malo como usar verde en un error.
◆
Ritmo y espacio consistente
Espaciado en múltiplos de 4px, cards con padding 24-32px, radios de 10-14px. El ritmo visual repetido hace que la interfaz se sienta predecible — y una interfaz predecible es una interfaz que el usuario aprende rápido.
Prototipo navegable · Flujo de pago de cuota
Pantalla 1 de 4 · Login
vivook.app
Administración de condominios
Bienvenido de vuelta
Ingresa con tu correo para continuar al panel de tu condominio.
Este es el estado actual de tu condominio, Torre A, Depto 402.
Tu cuota de octubre
$4,850 MXN
Vence en 3 días
Estado del condominio
98.4%
Tasa de cobro del mes
Fondo de reserva
$847K
+12% vs. trimestre pasado
Avisos recientes
!
Mantenimiento del elevador principal
Mañana 8:00 AM — 12:00 PM · Torre A
Aviso
i
Asamblea mensual confirmada
Sábado 12 · 10:00 AM · Salón de usos múltiples
Info
✓
Pago de septiembre confirmado
Recibido el 14 sep · Referencia VVK-2026-09-402
Éxito
← Volver al dashboard
Paso 2 de 3 · Confirmar pago
Revisa los detalles de tu pago
Verifica que todo esté correcto antes de confirmar. El cargo se aplicará inmediatamente y recibirás tu comprobante por correo.
ConceptoCuota ordinaria — Octubre 2026
DepartamentoTorre A · Depto 402
Método de pagoVisa terminada en 4829
Fecha límite15 de octubre, 2026
Total a pagar$4,850.00 MXN
🔒
Pago seguro
Tus datos están protegidos con cifrado de nivel bancario. Vivook nunca almacena los detalles completos de tu tarjeta.
✓ SSL 256-bit✓ PCI DSS✓ 3D Secure
¡Pago confirmado!
Tu cuota de octubre fue procesada correctamente. Recibirás el comprobante en maria@torre-a.condominio.mx en los próximos minutos.
Monto$4,850.00 MXN
ReferenciaVVK-2026-10-402
Fecha14 oct, 2026 · 10:32 AM
Decisiones de marca en esta pantalla
Qué principios se están aplicando aquí y por qué
Tipografía
El título "Vivook" usa Plus Jakarta Sans en peso 800 — el wordmark se comporta como firma de marca. El subtítulo y los labels de campo usan DM Sans 500 para lectura funcional.
Color
El botón "Entrar al dashboard" usa Azul primario #07A1C2 — es la acción más importante de la pantalla. El fondo n50 no compite, solo sostiene.
Espacio
Card centrada con max-width 420px — en forms largos la línea no debe exceder 60 caracteres. Padding interno 32px, gap entre campos 20px (múltiplos de 4).
Tipografía
"Hola, María" en Plus Jakarta Sans 800 a 32px — punto de entrada visual del dashboard. Los números grandes ($4,850 / 98.4% / $847K) también en Jakarta 800 porque son el "titular" de cada métrica.
Color semántico
La tarjeta de cuota pendiente tiene borde naranja (#F2A23E) porque es un aviso — vence en 3 días. El 98.4% usa verde porque es estado positivo. El status dot naranja/verde repite el mismo lenguaje — consistencia cross-componentes.
Jerarquía
La única acción primaria (azul sólido) es "Pagar ahora". Todo lo demás — tabs, avisos, links — usa colores secundarios o neutrales. Regla: una pantalla, una acción primaria clara.
Tipografía
El total "$4,850.00 MXN" usa Plus Jakarta Sans 800 — en pantallas de pago, el monto es la información más crítica y debe leerse de un vistazo. Las etiquetas del recibo usan DM Sans con `font-variant-numeric: tabular-nums` para que las cifras alineen verticalmente.
Par de acciones
Dos botones: Azul primario para "Confirmar y pagar" (acción deseada) + Ghost gris para "Cancelar" (acción reversible). Nunca uses dos botones primarios juntos — el usuario no sabría cuál es la acción preferida.
Confianza
La columna lateral con el ícono de candado y "Pago seguro" aplica la regla de reducir fricción en momentos de alta ansiedad (entregar datos de tarjeta). Usa color mid teal #07697D que sugiere seguridad sin competir con el azul primario.
Verde semántico
Todo en esta pantalla — el check, el título, el borde del recibo — usa Verde Vivook #65B03B porque es el color de éxito en la paleta. El usuario ve verde y siente que algo salió bien, antes incluso de leer el texto.
Celebración mesurada
"¡Pago confirmado!" en Plus Jakarta Sans 800 32px — suficientemente grande para celebrar, no tan grande para ser gritón. El párrafo siguiente en DM Sans baja el tono a informativo.
Salida clara
Dos acciones post-éxito: "Descargar comprobante" (ghost, opcional) y "Volver al dashboard" (primario, camino esperado). Nunca dejes al usuario en una pantalla de éxito sin un siguiente paso obvio.
Tip · Haz clic en los botones dentro de las pantallas para navegar como lo haría un usuario real, o usa los pasos de arriba para saltar directo a una pantalla específica.
Para AICanon v1.0
Reglas de diseño para AI
Todo lo que Vivook necesita para que Claude, Cursor, ChatGPT u otra AI diseñen producto siguiendo el branding sin improvisar. Es un documento único con los tokens, las reglas tipográficas, los patrones de componente y los snippets de código — escrito en lenguaje imperativo para que la AI lo tome como verdad operativa, no como inspiración.
10
Secciones de reglas
~16
KB · cabe en cualquier contexto
7
Snippets de componentes
4
Patrones de pantalla
Cómo usarlo en 3 pasos
01
Copia o descarga el canon
Usa los botones de abajo. Puedes copiarlo al portapapeles o descargarlo como vivook-design-rules.md para guardarlo en tu repo.
02
Pégalo al inicio del chat con tu AI
Primer mensaje en el chat, antes de cualquier otra instrucción. En Claude Code y Cursor, guárdalo como CLAUDE.md o .cursorrules en la raíz del proyecto y se aplica automáticamente.
03
Pide tu diseño con confianza
Ahora puedes pedir "diseña una pantalla de onboarding", "haz un modal de confirmación", "crea un empty state" — la AI va a usar los tokens, tipografías y patrones correctos sin que se los repitas.
Vista previa · vivook-design-rules.md
⚡
¿Vas a convertirlo en Claude Skill?
Este canon está escrito en el formato compatible con Claude Skills de Anthropic. Si quieres dar el siguiente paso, crea una carpeta vivook-design-skill/, guarda este archivo como SKILL.md dentro, y súbelo en Settings → Capabilities → Skills → Upload custom skill. Cuando la skill esté instalada, Claude la va a cargar automáticamente en cualquier conversación donde detecte que estás trabajando en producto Vivook — sin tener que copiar nada cada vez.
06. Contenido en redes sociales.
Esta sección existe porque social media es donde la marca se desgasta más rápido. Mientras el dashboard lo construye un equipo de producto siguiendo el design system, los posts los hace cualquier persona del equipo de marketing un martes a las 10pm con prisa. Si cada pieza interpreta la marca a su manera, en tres meses tu feed parece de cinco marcas distintas. Esta sección define plantillas concretas, reglas de fotografía y un sistema de color por tipo de contenido para que cualquier persona pueda producir contenido que se sienta inconfundiblemente Vivook — sin tener que improvisar cada vez.
01
Una pieza, una idea
Cada post tiene un solo mensaje y un solo CTA. Si necesitas decir tres cosas, son tres posts. La tentación de meter "todo lo importante" en una sola pieza es lo que hace que nadie recuerde nada.
02
Color por tipo de contenido
El color del fondo o del acento dice qué tipo de pieza es antes de leer una palabra: azul = educativo / feature, verde = caso de éxito / testimonial, naranja = aviso / comunidad, rojo = urgente / pago.
03
El logo es ancla, no protagonista
El logo va siempre en la misma esquina (arriba-izquierda en posts, arriba-centro en stories) y nunca compite con el mensaje. Lo importante es lo que dice la pieza, no que el logo sea grande.
Anatomía · Las 6 zonas de un post Vivook
Cualquier post — Instagram, LinkedIn, story — sigue esta misma estructura. Memoriza estas 6 zonas y nunca tendrás que diseñar desde cero.
1
● TIP DE LA SEMANA2
Cobra cuotas a tiempo sin perseguir a nadie.
3
Recordatorios automáticos por WhatsApp 5 días antes del vencimiento. 87% de los condominios que los usan suben su tasa de cobro en menos de un mes.
4
Conoce cómo →5
1
Logo — Siempre arriba-izquierda. Tamaño 12-15% del ancho. Versión blanca sobre fondos de color, original sobre fondos claros.
2
Tag de categoría — Una sola palabra mono uppercase con bullet de color. Identifica el tipo de pieza al instante: TIP, FEATURE, ÉXITO, AVISO, NÚMERO.
3
Headline — Plus Jakarta Sans 800. Máximo 8 palabras. Si no cabe en dos líneas, es porque sobra. Esta es la única cosa que tu audiencia va a recordar.
4
Cuerpo / soporte — DM Sans 400-500. Máximo 3 líneas. Aquí va el dato, la cifra, la prueba. Nunca el headline repetido en más palabras.
5
CTA — Una sola acción, en formato texto-flecha o pill. Nunca dos CTAs en el mismo post — si quieres dos acciones, son dos posts.
6
Footer firma — vivook.app en mono pequeño. Discreto, esquina inferior. Es la firma, no el mensaje.
Galería de plantillas · 7 piezas listas para producción
Cada plantilla aplica los principios de arriba a un formato distinto. Usa el selector para navegar entre formatos. Todas son piezas reales renderizadas con la paleta y tipografía de Vivook — listas para que un diseñador las reproduzca en Figma o Canva.
Pieza 1 de 7 · Instagram · Tip educativo
Instagram post · 1:1 · 1080×1080
● TIP DEL ADMIN
Cobra cuotas a tiempo sin perseguir a nadie.
Recordatorios automáticos por WhatsApp 5 días antes del vencimiento. 87% de los condominios que los usan suben su tasa de cobro en menos de un mes.
Aprende cómo configurarlos →vivook.app
AudienciaAdministradores
TipoEducativo · Tip operativo
Color Azul · Educativo
TipografíaJakarta 800 + DM Sans 400
Instagram post · 1:1 · 1080×1080
● EL NÚMERO
12hrs
Es lo que un administrador promedio ahorra cada mes usando Vivook para conciliar pagos y enviar avisos a residentes.
Calcula tu ahorro →vivook.app
AudienciaAdministradores
TipoEstadística · Hook numérico
Color Verde · Caso positivo
TipografíaJakarta 800 — número gigante
Instagram Story / Reel · 9:16 · 1080×1920
● NUEVO
Conciliación automática de pagos.
Conecta tu cuenta bancaria una vez. Vivook concilia los depósitos con las cuotas de cada residente automáticamente.
Activar ahoravivook.app/conciliacion
AudienciaAdministradores
TipoAnuncio de feature · Lanzamiento
Color Dark · Premium / serio
IlustraciónSVG vectorial · diagrama de flujo
LinkedIn post · 1.91:1 · 1200×628
● CASO DE ÉXITO
"Pasamos de cobrar el 64% al 94% de cuotas a tiempo en 4 meses."
Retrato profesional
Administrador en su entorno de trabajo
Luz natural · ángulo medio
Overlay azul 15% para integrarse a marca
AudienciaAdministradores · decisores B2B
TipoCaso de éxito · social proof
Color Verde · Resultado positivo
FotoReal · ver specs en placeholder
Blog hero · 16:9 · 1600×900
● WEBINAR GRATUITO
Cómo automatizar el cobro de cuotas en 7 pasos.
Una sesión de 45 minutos con casos reales de administradores que pasaron del Excel a un sistema profesional sin fricción para sus residentes.
📅 Jueves 24 de octubre · 11:00 AM CDMX⏱ 45 minutos + Q&A
Reservar mi lugar →
AudienciaAdministradores
TipoWebinar / Curso · Lead magnet
Color Naranja · Aviso / convocatoria
IlustraciónSVG · cluster de torres en colores de marca
Flyer / Portada de curso · Vertical · Carta
CURSO PROFESIONAL
Administración Digital de Condominios
El #1 software para administración de condominios en México
Lo que vas a aprender
1Cómo migrar de Excel a un sistema profesional sin perder datos
2Configurar conciliación bancaria automática
3Diseñar un flujo de avisos efectivo a residentes
4Gestionar incidencias sin perder hilo
8
Sesiones en vivo
100%
Casos reales
$0
Costo
AudienciaAdministradores
TipoPortada de curso · documento descargable
Color Dark + paleta completa
NotasUsa los 4 colores como bullets numerados
Instagram post · 1:1 · 1080×1080 · Audiencia residente
● VIDA EN COMUNIDAD
FOTO REAL
Vida en condominio
Familia / vecinos en área común
Luz natural cálida · momento auténtico
Tu condominio es tu segunda familia.
Reserva, paga, reporta — todo desde tu celular en menos de un minuto.
Descarga la app →vivook.app
AudienciaResidentes (B2C)
TipoComunitario · cálido
Color Naranja · cálido / familiar
FotoReal obligatoria · ver placeholder
Sistema de color por tipo de contenido
El color de fondo o de acento de cada pieza dice qué tipo de contenido es antes de leer una sola palabra. Esta es la regla más importante de toda la sección — síguela y tu feed va a tener consistencia visual sin que el equipo tenga que pensarlo.
● AZUL
Educativo · Feature
Tips operativos, anuncios de funciones nuevas, tutoriales, demos del producto, contenido evergreen.
Usar cuando la pieza enseña algo o informa de una capacidad nueva.
● VERDE
Caso de éxito · Resultado
Testimoniales, cifras de impacto, hitos de la empresa, antes/después de un cliente, milestones celebratorios.
Usar cuando la pieza demuestra un resultado positivo medible.
● NARANJA
Aviso · Convocatoria
Webinars, eventos, lanzamientos próximos, llamados a inscripción, contenido cálido para residentes.
Usar cuando hay una fecha o una acción a tomar pronto.
● ROJO
Urgente · Pago
Recordatorios de pago, errores que solucionar, alertas críticas, contenido de retención. Úsalo poco — pierde fuerza si lo gastas.
Usar solo cuando hay algo que se vence o se pierde si no se actúa.
● DARK
Premium · Serio
Anuncios de marca grandes, lanzamientos importantes, comunicados ejecutivos, piezas dirigidas a decisores B2B.
Usar para piezas que necesitan sentirse "corporativas" sin ser frías.
● CLARO
Default · Editorial
Posts informativos sin urgencia, contenido de blog, artículos largos, infografías, datos puros.
Usar cuando ninguno de los anteriores aplica claramente.
Reglas de fotografía
Las fotos son el elemento más fácil de equivocar y el más caro de reemplazar. Estas reglas valen tanto si las produces tú con un fotógrafo como si las eliges de un banco.
✓ SíLo que sí buscamos
Administradores reales en su entorno de trabajo — escritorio, junta, intercomunicador, recorrido por el condominio
Torres residenciales mexicanas — fachadas, áreas comunes, vista desde la calle, ángulos amplios
Luz natural — preferentemente mañana o tarde, sombras suaves, no flash directo
Momentos auténticos — no posados, no sonrisa de stock, gente trabajando o conviviendo de verdad
Encuadres limpios — espacio negativo para texto, regla de tercios, sin elementos compitiendo
Tratamiento sutil — overlay azul de marca al 10-15% para integrar la foto al sistema visual
✕ NoLo que nunca
Stock genérico — oficinistas felices con corbata, manos sosteniendo tarjetas de crédito, gráficas 3D cursis
Edificios genéricos americanos — rascacielos de Nueva York, residenciales de Miami, cualquier cosa que no se sienta mexicana
Flash directo / sobre-iluminación — fotos que se ven publicitarias / catálogo de los 90s
Modelos en pose forzada — sonrisas exageradas, "hombre de negocios señalando la cámara"
Fotos saturadas con texto encima — fondos llenos donde el headline pelea con la imagen
Filtros de Instagram — duotones artificiales, blanco y negro, sepia, vintage. Mantén las fotos limpias.
Sí / No · Una pieza, dos versiones
Mismo contenido, mismas decisiones de marca aplicadas bien vs aplicadas mal. La diferencia no es estética — es de claridad y respeto por la atención del usuario.
✓ Bien hecho
● TIP
Cobra cuotas a tiempo.
Recordatorios automáticos por WhatsApp 5 días antes del vencimiento.
Aprende cómo →vivook.app
✓ Una sola idea — recordatorios
✓ Logo en su esquina, tamaño correcto
✓ Headline corto en Jakarta 800
✓ Cuerpo en DM Sans, una línea
✓ Un solo CTA claro
✓ Color azul = pieza educativa
✕ Mal hecho
¡¡OFERTA!! NUEVO LANZAMIENTO TIPS GRATIS
¡Aprende a cobrar cuotas a tiempo en menos de 5 minutos al día con nuestro nuevo sistema profesional!
Descubre todos los beneficios de Vivook: recordatorios, conciliación, reportes, comunicación, gestión, tickets, encuestas, eventos, cuotas, pagos y MUCHO MÁS!
¡COMPRA YA!DESCARGA GRATISMÁS INFO
✕ 6 ideas peleando — no se entiende ninguna
✕ Logo gigante, compite con el mensaje
✕ Headline de 18 palabras, ilegible
✕ Lista exhaustiva de features en el cuerpo
✕ Tres CTAs distintos — el usuario no sabe qué hacer
✕ Cuatro colores de marca peleando en la misma pieza
11.7:1
Dark · White
11.7:1
White · Dark
6.3:1
Mid · White
06. Contenido en redes sociales.
Esta sección existe porque social media es donde la marca se desgasta más rápido. Mientras el dashboard lo construye un equipo de producto siguiendo el design system, los posts los hace cualquier persona del equipo de marketing un martes a las 10pm con prisa. Si cada pieza interpreta la marca a su manera, en tres meses tu feed parece de cinco marcas distintas. Esta sección define plantillas concretas, reglas de fotografía y un sistema de color por tipo de contenido para que cualquier persona pueda producir contenido que se sienta inconfundiblemente Vivook — sin tener que improvisar cada vez.
Cobra cuotas a tiempo
3sin perseguir a nadie.
Recordatorios automáticos por WhatsApp 5 días antes del vencimiento. 87% de los condominios que los usan suben su tasa de cobro en menos de un mes.
4Cobra cuotas
a tiempo sin
perseguir a nadie.
Recordatorios automáticos por WhatsApp 5 días antes del vencimiento. 87% de los condominios que los usan suben su tasa de cobro en menos de un mes.
Es lo que un administrador promedio ahorra cada mes usando Vivook para conciliar pagos y enviar avisos a residentes.
Conciliación
automática
de pagos.
Conecta tu cuenta bancaria una vez. Vivook concilia los depósitos con las cuotas de cada residente automáticamente.
"Pasamos de cobrar el 64% al 94% de cuotas a tiempo en 4 meses."
Roberto Méndez
Administrador · Residencial Las Palmas, CDMX · 142 deptos
Administrador en su entorno de trabajo
Luz natural · ángulo medio
Overlay azul 15% para integrarse a marca
Cómo automatizar el cobro de cuotas en 7 pasos.
Una sesión de 45 minutos con casos reales de administradores que pasaron del Excel a un sistema profesional sin fricción para sus residentes.
Administración
Digital de
Condominios
El #1 software para administración
de condominios en México
Familia / vecinos en área común
Luz natural cálida · momento auténtico
Tu condominio es tu segunda familia.
Reserva, paga, reporta — todo desde tu celular en menos de un minuto.
Cobra cuotas
a tiempo.
Recordatorios automáticos por WhatsApp 5 días antes del vencimiento.
¡Aprende a cobrar cuotas a tiempo en menos de 5 minutos al día con nuestro nuevo sistema profesional!
Descubre todos los beneficios de Vivook: recordatorios, conciliación, reportes, comunicación, gestión, tickets, encuestas, eventos, cuotas, pagos y MUCHO MÁS!