VVO Publicidad — Sistema de diseño

Consistencia visual
en todos los productos

Tokens, componentes y guías para mantener la identidad de marca VVO en cada producto digital: ERP interno y sistema de fidelización.

Sistema de gestión VVO ERP
Fidelización VVO Fideliza

Tokens

Paleta de colores

Todos los colores de la marca. El fondo siempre es púrpura oscuro — nunca blanco ni gris.

Fondos — Familia púrpura

Purple Dark
#3d1450
Fondo principal, sidebar
Purple
#4a1a5c
Cards, fondo secundario
Purple Light
#6b2d7a
Hover, bordes activos
Surface
#5a2268
Inputs, tablas elevadas
Navy
#1a1a3e
Detalles del logo

Acento — Magenta

Magenta
#e91e8c
Acento principal, CTAs
Magenta Dark
#c4176f
Hover del acento
Magenta Light
#f472b6
Versión suave, ilustraciones

Secundario — Violeta

Violet
#7c3aed
Links, selección, botones UI
Violet Dark
#6d28d9
Hover

Semánticos — Estados

Green
#22c55e
Aprobado, activo, pagado
Amber
#f59e0b
Pendiente, advertencia
Red
#ef4444
Rechazado, vencido, error
Blue
#3b82f6
En producción, info

Fideliza — Gold & Tiers

Bronze
#cd7f32
Tier inicial
Silver
#c0c0c0
Tier intermedio
Gold
#f59e0b
Tier premium, puntos
CTA Gradient
magenta → violet
Botones principales Fideliza

Tokens

Tipografía

Display / Headings
Montserrat Black
Pesos: 900, 700, 600, 400
Cotización
COT-2026-001
Interface
Montserrat SemiBold
Navegación, labels, botones
Guardar cambios
Nueva cotización
Monospace / Números
DM Mono
Pesos: 400, 500
$1.240.000
76.461.256-6
COT-2026-042
hero
56px / 900
VVO
5xl
40px / 900
$1.240.000
4xl
32px / 700
Dashboard
3xl
24px / 700
Cotizaciones
xl
17px / 600
Total: $340.000
md
14px / 400
Texto de contenido principal
base
13px / 400
Texto de interfaz — el tamaño más común
sm
12px / 400
Metadata, fechas, notas secundarias
2xs
10px / 600
LABEL DE SECCIÓN

Tokens

Espaciado y radios

Escala de espaciado (base 4px)

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
space-10
40px
space-12
48px
space-16
64px

Border Radius

sm — 4px
Badges, tags pequeños
md — 6px
Inputs, botones (ERP)
lg — 8px
Cards, paneles (ERP)
xl — 12px
Modals, drawers
2xl — 16px
Cards Fideliza
full — 9999px
Pills, avatares, badges

Componentes

Biblioteca de componentes

Botones

Badges de estado — ERP

Aprobada Pagada Pendiente En producción Rechazada Vencida Enviada Borrador Anulada

Tiers de membresía — Fideliza

🥉 Bronze 🥈 Silver ⭐ Gold 💎 Platinum 👑 Black

Inputs

Cards KPI

Por cobrar
$840.000
facturas pendientes
Cobrado este mes
$1.240.000
pagadas en mayo
Vencidas
3
requieren atención
Puntos acumulados
2.450
Nivel Gold

Alertas

✓Cotización enviada correctamente al cliente.
⚠La cotización origen fue editada después de crear esta OT.
✕No se pudo enviar el email. Verifica la dirección del cliente.
ℹSincronizando facturas con el SII. Esto puede tomar 2 minutos.

Tabla

N° Cotización Cliente Estado Fecha Total
COT-2026-042 Agencia Creativa Ltda. Pendiente 28/05/2026 $340.000
COT-2026-041 PrintMax S.A. Aprobada 26/05/2026 $892.000
COT-2026-040 Diseños VQ Spa Rechazada 24/05/2026 $156.000

Productos

Aplicaciones VVO

Misma marca, distintos contextos de uso.

⚙️
VVO ERP
sistema.vvo.cl

Sistema de gestión interno para cotizaciones, órdenes de trabajo, facturación y clientes. Máximo 3 usuarios. Data-dense, funcional, eficiente.

Tabla-heavy Radius 6–8px Sin gradientes Modo oscuro Next.js 15 Supabase
🌟
VVO Fideliza
fideliza.vvo.cl

Sistema de fidelización orientado al cliente. Puntos, recompensas, tiers de membresía. Visual, celebratorio, motivacional.

Orientado cliente Radius 12–20px Gradientes Gold tier Animaciones Mobile-first

Diferencias de aplicación

Aspecto VVO ERP VVO Fideliza
AudienciaEquipo interno (2–3)Clientes de VVO
TonoFuncional, densoVisual, celebratorio
Border radius6–8px12–20px
GradientesCasi ningunoFrecuentes (CTAs, heroes)
AnimacionesMínimas (transitions)Presentes (glow, pulse)
Color goldNoSí — puntos, tiers
TablasMuchas, compactasPocas, espaciosas