Confidencial — v1.0
Sistema de Diseño VITTAE
La fuente de verdad visual del producto. Todas las decisiones de diseño y desarrollo deben respetar estas definiciones.
01 — Fundamentos
Principios de Diseño
Valores que guían cada decisión visual y de interacción en VITTAE.
Claridad
El usuario siempre sabe dónde está y qué puede hacer. Nada debe ser ambiguo.
Accesible
Cualquier persona puede usar VITTAE sin manual ni curva de aprendizaje.
Profesional
El producto transmite confianza. El usuario está construyendo su futuro laboral.
Limpio
El espacio en blanco es parte del diseño. Menos es más, siempre que no sacrifique funcionalidad.
Consistente
Un componente siempre se ve y se comporta igual, sin importar en qué pantalla aparezca.
02 — Fundamentos
Paleta de Colores
Nunca usar valores hex directamente en componentes. Siempre referenciar las variables CSS.
Colores principales
Slate 900
--vittae-color-dark
#0F172A
Textos, encabezados, fondo logo
Blue 600
--vittae-color-primary
#2563EB
Botones primarios, links, interactivos
Slate 50
--vittae-color-surface
#F8FAFC
Fondo general de la aplicación
Slate 500
--vittae-color-text-secondary
#64748B
Textos secundarios, placeholders
Slate 200
--vittae-color-border
#E2E8F0
Bordes, divisores, separadores
Slate 100
#F1F5F9
Fondos hover, filas alternas
Colores de acento
Violet 600
--vittae-color-ai
#7C3AED
IA y Plan Pro — exclusivo IA
Violet 100
--vittae-color-ai-light
#EDE9FE
Fondos de elementos IA
Emerald 500
--vittae-color-success
#10B981
Éxito, confirmaciones, ATS match
Amber 500
--vittae-color-warning
#F59E0B
Advertencia, oportunidades ATS
Red 500
--vittae-color-error
#EF4444
Error, brechas ATS, acciones destructivas
Variables CSS
:root {
--vittae-color-primary: #2563EB;
--vittae-color-primary-dark: #1D4ED8;
--vittae-color-primary-light: #DBEAFE;
--vittae-color-dark: #0F172A;
--vittae-color-surface: #F8FAFC;
--vittae-color-border: #E2E8F0;
--vittae-color-text-secondary: #64748B;
--vittae-color-ai: #7C3AED;
--vittae-color-ai-light: #EDE9FE;
--vittae-color-success: #10B981;
--vittae-color-warning: #F59E0B;
--vittae-color-error: #EF4444;
}
--vittae-color-primary: #2563EB;
--vittae-color-primary-dark: #1D4ED8;
--vittae-color-primary-light: #DBEAFE;
--vittae-color-dark: #0F172A;
--vittae-color-surface: #F8FAFC;
--vittae-color-border: #E2E8F0;
--vittae-color-text-secondary: #64748B;
--vittae-color-ai: #7C3AED;
--vittae-color-ai-light: #EDE9FE;
--vittae-color-success: #10B981;
--vittae-color-warning: #F59E0B;
--vittae-color-error: #EF4444;
}
03 — Fundamentos
Tipografía
Montserrat en 4 pesos: 400, 500, 600, 700. No cargar pesos adicionales.
Hoja de Vida
Experiencia Laboral
Frontend Developer
Habilidades Técnicas
Desarrollador con 5 años de experiencia en arquitectura de componentes, liderando equipos de frontend en proyectos de alta escala.
Ene 2020 — Mar 2024 · Bogotá, Colombia
Cargo Actual
--vittae-color-primary
04 — Fundamentos
Sistema de Espaciado
Escala basada en múltiplos de 4px. Nunca usar valores arbitrarios.
--space-1
4px · 0.25rem — Badges, chips, separación interna
--space-2
8px · 0.5rem — Gap ícono/label, padding interno inputs
--space-3
12px · 0.75rem — Gap entre elementos de una fila
--space-4
16px · 1rem — Padding de cards, separación entre campos
--space-5
20px · 1.25rem — Separación entre grupos de campos
--space-6
24px · 1.5rem — Separación entre secciones del CV
--space-8
32px · 2rem — Separación entre módulos del canvas
--space-10
40px · 2.5rem — Márgenes externos de contenedores
05 — Fundamentos
Bordes y Radios
Escala de radios y estilos de borde para cada tipo de componente.
Radios
--radius-sm
4px — Badges, chips
--radius-md
8px — Inputs, botones
--radius-lg
12px — Cards, panels
--radius-xl
16px — Cards destacadas
--radius-full
9999px — Avatares, toggles
Estilos de borde
Default
0.5px solid #E2E8F0
Cards, divisores
Emphasis
1px solid #CBD5E1
Inputs en estado normal
Focus
2px solid #2563EB
Inputs con foco activo
Error
1px solid #EF4444
Inputs con error
AI Border
1px solid #7C3AED
Paneles y elementos IA
06 — Componentes
Botones
Altura estándar 40px. Font Montserrat 600. Border radius 8px. Transición 150ms ease.
Variantes
Tamaños
Con íconos y estado disabled
07 — Componentes
Inputs y Formularios
Altura 40px. Borde 1px por defecto, 2px en focus. Todos los inputs requieren label visible.
Selecciona la empresa destino
Ingresa un email válido
Escribe en lenguaje informal — la IA lo reformulará
08 — Componentes
Cards
Fondos blancos, borde 0.5px, sin sombras. La jerarquía se logra con el radio y el padding.
Card — radius-lg
Experiencia en EPAM
Ene 2020 — Mar 2024
Lideré el equipo de arquitectura de componentes para 3 productos enterprise.
Sugerencia IA
Lideré la arquitectura de componentes para 3 plataformas enterprise, mejorando el tiempo de desarrollo en un 40%.
Tech Lead Frontend
EPAM Systems · 2020–2024
Arquitectura de componentes para plataformas enterprise de alta escala.
Google
EPAM
Meta
Skeleton Loader
09 — Componentes
Badges y Chips
Badges para categorías y estados. Chips para tags y empresa destino.
Badges
PRO
ATS Match
Brecha
Oportunidad
Versión 2 de 3
Chips — Tags de empresa
Google
EPAM
Mercado Libre
Meta
Agregar empresa
10 — Componentes
Estados de Componentes
Transiciones siempre a 150ms ease. Evitar animaciones largas.
Default
Borde #CBD5E1
Hover
Borde #94A3B8
Focus
Borde 2px #2563EB
Error
Borde #EF4444
Success
Borde #10B981
AI Active
Borde #7C3AED
Disabled
Opacidad 40%
11 — Componentes
Iconografía
PrimeIcons como librería principal. 16px inline · 20px acción · 24px decorativo.
pi-file-editEditar sección
pi-sparklesSugerencia IA
pi-chevron-leftNavegar perfiles
pi-chevron-rightNavegar perfiles
pi-plusCrear versión
pi-trashEliminar
pi-checkAceptar IA
pi-timesDescartar IA
pi-downloadExportar PDF
pi-tagTag empresa
pi-historyHistorial
pi-searchAnálisis vacante
pi-userPerfil usuario
pi-check-circleCoincidencia ATS
pi-exclamation-circleOportunidad ATS
pi-times-circleBrecha ATS
12 — Feedback
Toasts y Notificaciones
Posición top-right. Duración 3 segundos. Borde izquierdo como indicador semántico.
CV exportado correctamente
Tu hoja de vida fue exportada en PDF sin marca de agua.
No se pudo conectar con la IA
Verifica tu conexión e intenta nuevamente.
Límite de versiones alcanzado
El plan gratuito permite máximo 3 versiones por sección.
La IA necesita más información
Agrega al menos una experiencia laboral para continuar.
13 — Feedback
Análisis ATS
Indicadores visuales del cruce entre el CV del usuario y una oferta laboral.
Arquitectura de componentes
La vacante menciona "component architecture" 3 veces. Tu descripción en EPAM cubre exactamente esto — solo necesitas usar ese término.
Metodologías ágiles — oportunidad oculta
La vacante pide "Scrum experience". Trabajaste con sprints en EPAM pero no lo nombraste. Agrégalo a tu sección de habilidades.
AWS Certified Solutions Architect — brecha real
La vacante requiere certificación AWS que no aparece en tu perfil. Esta es una brecha real que VITTAE no puede solucionar por ti.