01. Logo.
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.
02. Color palette.
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 CTAs, 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.
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.
03. Tipografía.
Dos tipografías open source trabajando juntas. Plus Jakarta Sans aporta personalidad y carácter en encabezados, títulos y elementos de UI. DM Sans es la cara funcional para cuerpo de texto, datos numéricos y descripciones largas. Ambas son gratuitas en Google Fonts, lo que asegura consistencia en todos los entornos sin licencias adicionales.
Dd Ee Ff Gg
Dd Ee Ff Gg
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.
- Titulares y encabezados — H1, H2, H3 de páginas y secciones
- Números grandes destacados — métricas, KPIs, stats en dashboards
- Hero text y landing — mensajes de bienvenida, CTAs grandes
- Labels de marca — el logotipo, nombres de módulos
- Weight 700-800 para máximo impacto visual
- 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
04. Cómo aplicar la marca.
Combinaciones aprobadas para asegurar legibilidad y coherencia visual. Siempre prioriza el logo sobre fondo blanco — es la combinación principal y la más fiel a la identidad. Los fondos oscuros y de color son válidos pero deben usarse en contextos específicos donde el contraste lo permita.
Ok
Original on White
Ok
Original on Neutral 50
Ok
Original on Neutral 100
Ok
Dark on White
Ok
Dark on Neutral 50
Ok
Dark on Neutral 100
Ok
White on Dark
Ok
White on Mid
Ok
White on Blue
Ok
White on Red
Ok
White on Green
White on Orange
Blue on White
Red on White
Orange on White
Green on White
Dark on Orange
Para enfatizar frases clave en titulares y manifiestos, usa los colores de marca como destacados en bloques sólidos. Cada color mantiene su rol semántico: azul para datos importantes, rojo para llamadas a la acción, naranja para urgencias y verde para logros y métricas positivas. Úsalos con moderación — uno o dos destacados por bloque mantienen el impacto sin saturar.
05. Sistema de componentes.
Vivook es ante todo una webapp. Su design system está construido para que cada elemento de interfaz refuerce la identidad: botones con la firma del rojo CTA, etiquetas que reusan los colores semánticos, métricas con la tipografía de marca y estados visuales claros. Estos son los bloques fundamentales de la interfaz.