Brand Foundation
La identidad de ALTUM está construida sobre cuatro pilares: confianza institucional, accesibilidad digital, profesionalismo moderno y claridad comunicativa. Cada decisión visual refuerza estos pilares.
Color System
Paleta basada en el Manual de Identidad de ALTUM. Azul institucional como color dominante (64%), dorado como acento (21%), blanco como espacio de respiro (15%). Expandida con escala completa de neutrales y estados semánticos.
Gray-50 → Gray-900 — 10 pasos. Fondos, bordes, texto secundario y texto principal.
Typography System
DM Sans como tipografía display por su geometría humanista y modernidad edtech. Inter como tipografía de cuerpo por su legibilidad excepcional en pantalla a cualquier tamaño.
Spacing System
Sistema base-8. Todo el espaciado es múltiplo de 4px, preferentemente de 8px. Garantiza alineación perfecta en cualquier dispositivo y simplifica implementación para desarrolladores.
Grid System
Sistema de columnas fluido con breakpoints en 375px, 768px, 1024px y 1280px. Max-width de contenido: 1200px. Gutter de 24px en desktop, 16px en mobile.
Elevation System
5 niveles de elevación con sombras tonificadas en azul institucional. Comunican jerarquía e interacción sin distorsionar la paleta de marca.
Border Radius System
Escala de bordes que va de sharp (UI técnica) a pill (badges y chips). La tarjeta de carrera usa lg (12px), los CTAs principales usan md (8px).
Buttons
4 variantes de botón. Primary (azul) para la acción principal de cada pantalla. Gold para CTAs de alta conversión (WhatsApp, inscripción). Secondary y Ghost para acciones secundarias.
Forms & Inputs
Formularios claros y accesibles. Borde 1.5px en gris, azul en focus con halo de 3px. Mensajes de error directos en rojo. Todos los inputs tienen label explícita.
Cards
Las cards son el componente más frecuente en la plataforma. Fondo blanco, borde sutil, border-radius xl. Efecto de elevación en hover: transform translateY(-2px) + shadow-md.
Modals
Modal centrado con backdrop semi-transparente. Border-radius xl, box-shadow xl. Nunca más de 520px de ancho. Siempre con botón de cierre en header.
Un asesor académico se pondrá en contacto contigo en menos de 24 horas.
Alerts & Badges
Alertas con borde izquierdo de 3px en el color semántico correspondiente. Badges con border-radius pill para máxima legibilidad en espacios reducidos.
Tabs & Accordions
Tabs para alternar vistas relacionadas (plan de estudios por cuatrimestre). Acordeones para FAQ y contenido colapsable que reduce la carga cognitiva en mobile.
El plan de estudios de la Licenciatura en Derecho está organizado en 9 cuatrimestres con 36 materias, diseñadas para desarrollar competencias legales, digitales y administrativas.
Hero Sections
El hero es la primera impresión. Fondo azul institucional con degradado profundo, título en DM Sans 800, acento dorado en palabra clave, stats de credibilidad, dos CTAs.
desde donde estás
Testimonial Cards
Prueba social visible en Home y páginas de carrera. Cita en cursiva, avatar con iniciales, nombre y carrera. Máximo 3 por sección.
Accessibility — WCAG AA
Todos los pares de color cumplen WCAG 2.1 AA (ratio mínimo 4.5:1 para texto, 3:1 para UI grande). Focus states visibles. Navegación por teclado completa.
outline: 2px solid #0066AD; outline-offset: 3px visible. No se usa outline: none sin alternativa.alt="". Iconos sin texto tienen aria-label. Alertas usan role="alert".Motion System
Las animaciones deben ser sutiles y funcionales. Nunca decorativas por sí solas. Duración máxima de 400ms para interacciones. Respeta prefers-reduced-motion.
120ms ease
200ms ease
350ms ease-in-out
400ms spring
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }Landing Page Patterns
Componentes específicos para las páginas principales de ALTUM. Cada página tiene un objetivo único de conversión.
Design Tokens
Tokens listos para implementación en CSS Variables y JSON. La fuente de verdad única para diseñadores y desarrolladores.
/* ALTUM Design System — CSS Variables v1.0 */
/* ============================================= */
:root {
/* === COLORS === */
/* Brand Primary */
--color-blue: #0066AD;
--color-blue-dark: #004d82;
--color-blue-mid: #3385BE;
--color-blue-light: #E6F1FB;
--color-blue-50: #F0F7FD;
/* Brand Accent */
--color-gold: #F9C80E;
--color-gold-dark: #C9A00B;
--color-gold-light: #FDF4C4;
/* Neutral Scale */
--color-gray-50: #F7F9FC;
--color-gray-100: #EEF2F7;
--color-gray-200: #D9E2EC;
--color-gray-300: #BCCCDC;
--color-gray-400: #9FB3C8;
--color-gray-500: #627D98;
--color-gray-600: #486581;
--color-gray-700: #334E68;
--color-gray-800: #243B53;
--color-gray-900: #102A43;
/* Semantic States */
--color-success: #1B7A4E;
--color-success-bg: #E3F7ED;
--color-warning: #B45309;
--color-warning-bg: #FEF3C7;
--color-error: #C62828;
--color-error-bg: #FFEBEE;
--color-info: #0277BD;
--color-info-bg: #E1F5FE;
/* === TYPOGRAPHY === */
--font-display: 'DM Sans', 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--text-xs: 12px;
--text-sm: 14px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 32px;
--text-4xl: 40px;
--text-5xl: 48px;
--text-6xl: 64px;
/* === SPACING (8pt grid) === */
--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;
--space-20: 80px;
--space-24: 96px;
/* === BORDER RADIUS === */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* === SHADOWS === */
--shadow-xs: 0 1px 2px rgba(0,102,173,0.06);
--shadow-sm: 0 2px 8px rgba(0,102,173,0.08);
--shadow-md: 0 4px 16px rgba(0,102,173,0.12);
--shadow-lg: 0 8px 32px rgba(0,102,173,0.16);
--shadow-xl: 0 16px 48px rgba(0,102,173,0.20);
/* === TRANSITIONS === */
--transition-fast: 120ms ease;
--transition-base: 200ms ease;
--transition-slow: 350ms cubic-bezier(0.4,0,0.2,1);
--transition-spring: 400ms cubic-bezier(0.34,1.56,0.64,1);
/* === BREAKPOINTS (reference only, use in media queries) === */
/* --bp-mobile-sm: 375px */
/* --bp-mobile-lg: 480px */
/* --bp-tablet: 768px */
/* --bp-desktop: 1024px */
/* --bp-wide: 1280px */
}
{
"altum": {
"color": {
"brand": {
"blue": { "value": "#0066AD", "type": "color" },
"blue-dark": { "value": "#004d82", "type": "color" },
"blue-light": { "value": "#E6F1FB", "type": "color" },
"gold": { "value": "#F9C80E", "type": "color" },
"gold-dark": { "value": "#C9A00B", "type": "color" },
"white": { "value": "#FCFEFF", "type": "color" }
},
"neutral": {
"50": { "value": "#F7F9FC" },
"100": { "value": "#EEF2F7" },
"200": { "value": "#D9E2EC" },
"300": { "value": "#BCCCDC" },
"500": { "value": "#627D98" },
"700": { "value": "#334E68" },
"900": { "value": "#102A43" }
},
"semantic": {
"success": { "value": "#1B7A4E" },
"warning": { "value": "#B45309" },
"error": { "value": "#C62828" },
"info": { "value": "#0277BD" }
}
},
"typography": {
"fontFamily": {
"display": { "value": "DM Sans, Inter, sans-serif" },
"body": { "value": "Inter, sans-serif" },
"mono": { "value": "JetBrains Mono, monospace" }
},
"fontSize": {
"xs": { "value": "12px" }, "sm": { "value": "14px" },
"md": { "value": "16px" }, "lg": { "value": "18px" },
"xl": { "value": "20px" }, "2xl": { "value": "24px" },
"3xl": { "value": "32px" }, "4xl": { "value": "40px" },
"5xl": { "value": "48px" }, "6xl": { "value": "64px" }
}
},
"spacing": {
"1": "4px", "2": "8px", "3": "12px",
"4": "16px", "6": "24px", "8": "32px",
"12": "48px", "16": "64px", "20": "80px"
},
"borderRadius": {
"xs": "2px", "sm": "4px", "md": "8px",
"lg": "12px", "xl": "16px", "2xl": "24px",
"full": "9999px"
},
"shadow": {
"xs": "0 1px 2px rgba(0,102,173,0.06)",
"sm": "0 2px 8px rgba(0,102,173,0.08)",
"md": "0 4px 16px rgba(0,102,173,0.12)",
"lg": "0 8px 32px rgba(0,102,173,0.16)",
"xl": "0 16px 48px rgba(0,102,173,0.20)"
},
"transition": {
"fast": "120ms ease",
"base": "200ms ease",
"slow": "350ms cubic-bezier(0.4,0,0.2,1)",
"spring": "400ms cubic-bezier(0.34,1.56,0.64,1)"
},
"breakpoint": {
"sm": "375px", "md": "768px",
"lg": "1024px", "xl": "1280px"
}
}
}