Sistema de Diseño
Documento único y vigente del sistema de interfaz de la Intranet UAI. Define objetivos, principios, grilla, tokens y el uso correcto de cada componente compartido. Los ejemplos de esta página renderizan los componentes reales del producto: si un componente cambia, esta página cambia con él.
Introducción y filosofía
El Sistema de Diseño de la Intranet UAI existe para que cualquier pantalla nueva se resuelva con piezas ya decididas, se vea como el resto del producto y no obligue al usuario a reaprender la interfaz. No es una guía de estilo decorativa: es una herramienta operativa que reduce la incertidumbre de diseño y acelera la implementación.
Filosofía del sistema
- Claridad antes que decoración. Ningún efecto visual puede competir con la lectura del contenido ni con la identificación de la acción.
- Contenido primero, contenedor después. Se elige el componente que mejor presenta el dato, no el que se ve mejor vacío.
- Evolución controlada. Se extiende un componente existente antes de crear uno nuevo. Crear uno nuevo exige documentarlo aquí.
- Compatibilidad con la plataforma. La Intranet vive dentro de Ellucian Experience. Todo lo que se diseña debe poder implementarse dentro de las tarjetas de la plataforma.
La plataforma: Ellucian Experience
La Intranet UAI no es un sitio independiente: se monta sobre Ellucian Experience, el portal institucional que agrupa servicios, aplicaciones y contenidos en una experiencia unificada. Entender quién controla qué en esa plataforma es condición necesaria para entender las decisiones de este sistema.
El modelo de tarjetas
En Ellucian Experience, la unidad básica de interfaz es la tarjeta (card). El panel de inicio del usuario es una grilla de tarjetas cuadradas. Cada tarjeta tiene una barra de título fija, un ícono y un menú; el equipo UAI solo diseña el cuerpo que aparece "bajo la costura".
- Título e ícono de tarjeta
- Posición en el panel
- Barra superior y menú
- Cuerpo de la tarjeta
- Vistas internas (detalle)
- Jerarquía visual interna
Qué controla Ellucian
| Elemento | Restricción | Consecuencia en el sistema UAI |
|---|---|---|
| Barra de título | Tipografía sans-serif del sistema, fondo neutro, alto y padding fijos. | No se diseña la barra. La jerarquía visual se resuelve dentro del cuerpo. |
| Grilla del panel | El panel es una grilla de tarjetas cuadradas modulares. | Cada tarjeta debe ser autoexplicativa. No hay encabezados de sección entre filas. |
| Límite de contenido | Máximo 5 filas de lista o 6 botones por tarjeta, más una fila 'Ver todos'. | Se prioriza la tarea principal. El resto se mueve a la vista interna. |
| Posición | El usuario y la plataforma deciden dónde aparece cada tarjeta. | No se diseña un orden fijo. Cada tarjeta debe funcionar sola. |
Qué controla el equipo UAI
Aunque el contenedor pertenece a Ellucian, el cuerpo de la tarjeta y las vistas internas (las pantallas que se abren al hacer clic en una tarjeta) sí están bajo nuestro control. En esas vistas internas se admiten columnas, tablas, bloques de contenido y layouts más flexibles.
Convivencia con la marca
El color institucional UAI se aplica solo donde la plataforma lo permite. No se pelea con el chrome de Ellucian: la barra de título, los bordes y los fondos del portal usan la paleta de la plataforma. Nuestro acento azul (#385F82) reserva su uso para acciones, íconos y jerarquía dentro del cuerpo de la tarjeta.
Objetivos del sistema
El sistema existe para que cualquier pantalla nueva de la Intranet se resuelva con piezas ya decididas, se vea como el resto del producto y no obligue al usuario a reaprender la interfaz.
| Objetivo | Qué significa en la práctica |
|---|---|
| Un solo lenguaje de interacción | El usuario reconoce qué es clicable y qué no, sin importar el rol ni la sección en que esté. |
| Acceso en 1 o 2 clics | Toda tarea frecuente se alcanza desde el panel en un máximo de dos interacciones. |
| Escalar sin rediseñar | Agregar una sección se hace componiendo componentes existentes; no se crean variantes nuevas por conveniencia. |
| Consistencia entre roles | Estudiante, Docente, Administrativo y perfiles duales comparten los mismos patrones y la misma jerarquía visual. |
| Compatibilidad con la plataforma | Todo lo que se diseña debe poder implementarse dentro de las tarjetas de Ellucian Experience. |
| Mantención barata | Un cambio de estilo se hace en un componente o en un token, nunca en decenas de pantallas. |
Principios de diseño
Cinco reglas que resuelven las discusiones antes de que ocurran. Cuando dos opciones parecen válidas, gana la que cumple el principio de más arriba.
| # | Principio | Consecuencia de diseño |
|---|---|---|
| 1 | Claridad antes que decoración | Ningún efecto visual puede competir con la lectura del contenido ni con la identificación de la acción. |
| 2 | Una sola acción principal por tarjeta | Un CTA sólido por tarjeta. El resto son acciones secundarias o terciarias. |
| 3 | El color comunica jerarquía, no categoría | El celeste indica acento institucional y acción. No se usa color para distinguir facultades ni áreas. |
| 4 | Contenido primero, contenedor después | Se elige el componente que mejor presenta el dato, no el que se ve mejor vacío. |
| 5 | Evolución controlada | Se extiende un componente existente antes de crear uno nuevo. Crear uno nuevo exige documentarlo aquí. |
Grilla y layout
Grilla de 12 columnas, mobile-first. El panel usa tiles cuadrados; las vistas internas combinan spans de 4, 6, 8 y 12.
| Contexto | Móvil (<768px) | Tablet (768–1023px) | Escritorio (≥1024px) |
|---|---|---|---|
| Tile del panel (square) | 1 por fila | 2 por fila | 4 por fila |
| Tarjeta span 4 | 1 por fila | 3 por fila | 3 por fila |
| Tarjeta span 6 | 1 por fila | 2 por fila | 2 por fila |
| Tarjeta span 12 | ancho completo | ancho completo | ancho completo |
Reglas de espaciado
| Regla | Valor |
|---|---|
| Gutter de la grilla | 12px en móvil · 16px desde tablet |
| Padding del cuerpo de tarjeta | 20px horizontal · 16px vertical |
| Alto mínimo del tile cuadrado | 240px en escritorio · sin mínimo bajo 1024px |
| Radio de esquina | var(--radius) = 6px |
| Escala de espaciado | 4 · 8 · 12 · 16 · 20 · 24 px |
Color y tokens
Los valores viven en src/styles.css y son la única fuente de verdad. Toda pantalla nueva debe consumir tokens; escribir un hexadecimal en un componente se considera deuda técnica.
Regla de color por facultad
--color-faculty-accent, -bg y -fg — que resuelve al celeste institucional (--color-accent). Los 24 tokens por escuela fueron retirados del CSS.Tipografía e iconografía
Roboto es la tipografía oficial UAI y cubre toda la interfaz. La única excepción es la barra de título de la tarjeta, que pertenece a Ellucian.
Escala tipográfica
Reglas de iconografía
| Regla | Valor |
|---|---|
| Set | Lucide, estilo outline |
| Grosor de trazo | 1.5px, aplicado por el wrapper (no se sobrescribe) |
| Tamaños | 14px en línea · 18px en barra de título · 24px en bloque de CardActionButton |
| Color | Hereda del contexto; en tarjeta clara usa --color-accent-strong |
| Significado | El ícono acompaña a la etiqueta; nunca reemplaza al texto salvo en acciones de cierre |
Jerarquía de acción (botones)
Tres niveles de acción y dos componentes especializados. Toda acción nueva debe caber en esta tabla; si no cabe, el problema es el flujo, no el botón.
| Nivel | Componente | Aspecto | Regla |
|---|---|---|---|
| Primaria | PrimaryActionButton variant='primary' | Sólido #385F82, texto blanco | Una sola por tarjeta o por pantalla |
| Secundaria | PrimaryActionButton variant='secondary' | Contorno #385F82 sobre blanco | Acciones de apoyo que compiten con la principal |
| Terciaria | PrimaryActionButton variant='tertiary' | Sólo texto azul, subrayado en hover | Consultas, enlaces auxiliares y salidas externas |
| CTA inline | InlineCTA | Caja compacta #385F82 (sólida o contorno) | Acción anclada a un ítem: fila, celda de tabla o pie de tarjeta |
| Acción de tarjeta | CardActionButton | Ancho completo, bloque de ícono celeste a la izquierda | Accesos del panel hacia una sección o servicio |
| Acción de superficie | WireframeButton | MAYÚSCULAS, borde 2px | Sólo SSO, Mi perfil, SearchBar y CTA de fila en detalle |
Galería de estados
Listas y navegación interna
Las listas son el patrón más frecuente dentro de una tarjeta. Cada ítem debe tener un título claro, un metadato opcional y una acción puntual si corresponde.
| Patrón | Uso | Qué evitar |
|---|---|---|
| Lista de enlaces | Navegación rápida hacia secciones o servicios frecuentes. | Más de 5 filas por tarjeta; mezclar acciones de distinta jerarquía. |
| Lista con metadato | Mostrar estado, fecha o categoría junto al título. | Ocultar el metadato en móvil; debe permanecer visible. |
| Lista con acción inline | CTA puntual como 'Inscribir' o 'Ver detalle' al final de la fila. | Más de una acción sólida por fila. |
Tarjetas y contenedores
Los contenedores organizan la información dentro del cuerpo de una tarjeta o vista interna. Cada nivel tiene un propósito claro.
| Contenedor | Uso | Apariencia |
|---|---|---|
| Nivel 1 | Contenedor principal dentro de una tarjeta o vista interna. | Fondo blanco, padding estándar, borde sutil. |
| Nivel 2 | Subdivisión dentro de Nivel 1 para agrupar contenido relacionado. | Fondo blanco con franja izquierda de acento de 4px. |
| Nivel 3 / AccentPanel | Contenedor de una entidad (curso, carrera, bloque de resumen) dentro de una pantalla ya abierta. | Fondo sutil, franja izquierda de acento de 4–6px. |
| Tile del panel | Tarjeta cuadrada del panel de inicio. | Fondo degradado celeste o institucional, contenido centrado o alineado arriba. |
Datos: tablas y estados
Las tablas se usan en vistas internas donde hay que comparar varios registros. Nunca dentro de un tile del panel.
| Estado | Apariencia | Uso |
|---|---|---|
| Default | Fila con texto oscuro sobre fondo blanco | Registro sin estado particular |
| Hover | Fondo sutil | Indica que la fila es interactiva |
| Seleccionado | Fondo de acento sutil | Fila activa o marcada por el usuario |
| Deshabilitado | Texto atenuado | Registro no disponible para acción |
Búsqueda y campos
Los campos de búsqueda y filtros deben ser descubribles, accesibles y consistentes con el resto de la interfaz.
| Componente | Uso | Regla |
|---|---|---|
| SearchBar | Búsqueda global dentro de una sección. | Siempre acompañada de filtros visibles o un botón de búsqueda. |
| Input de texto | Formularios cortos dentro de vistas internas. | Etiqueta visible, estado de error claro, mensaje de ayuda opcional. |
| Select / Dropdown | Filtrar por categoría, rol o estado. | Opciones ordenadas alfabéticamente; valor por defecto explícito. |
Accesibilidad
La accesibilidad no es un enhancement: es un requisito. La plataforma Ellucian hereda ciertas garantías, pero el cuerpo de la tarjeta depende de nosotros.
| Área | Regla |
|---|---|
| Contraste | Todo texto legible cumple WCAG AA como mínimo (4.5:1 para cuerpo, 3:1 para grandes). |
| Navegación por teclado | Todo elemento interactivo es alcanzable con Tab y activable con Enter/Espacio. |
| Orden de lectura | El DOM coincide con el orden visual de arriba hacia abajo y de izquierda a derecha. |
| Textos alternativos | Las imágenes informativas llevan alt; las decorativas usan alt vacío. |
| Estados de foco | El anillo de foco es visible y usa --color-ring. No se oculta. |
| Mensajes de error | Los formularios indican claramente qué campo falló y cómo corregirlo. |
Gobernanza y proceso de actualización
El sistema de diseño vive y cambia con la Intranet. Esta sección define quién actualiza qué y cómo se mantiene la documentación al día.
Qué se actualiza automáticamente
- Los ejemplos de componentes reales se actualizan al redeployar, porque esta página los importa directamente desde el código fuente.
- Los tokens de color reflejan los valores de
src/styles.cssmientras no se modifique el archivo.
Qué se actualiza manualmente
- Textos explicativos, tablas de uso y reglas de restricciones.
- Ejemplos de código, decisiones de diseño y el capítulo de Ellucian.
- Historial de versiones y checklist de cambios.
Checklist de cambio
| Cuando cambias… | Revisa… |
|---|---|
| Un token de color o tipografía | Todas las secciones de fundamentos y los ejemplos visuales. |
| Un componente | Su sección correspondiente, los estados mostrados y las reglas de uso. |
| Una restricción de Ellucian | El capítulo 02 y las decisiones que dependen de ella. |
| Un principio o regla | Las tablas de principios, objetivos y la sección de gobernanza. |
Historial de versiones
| Versión | Fecha | Cambios principales |
|---|---|---|
| 2.0 | 08 de septiembre de 2026 | Consolidación tras la limpieza del inventario. Retiro de tokens por facultad. Documentación reorganizada. |
| 1.x | 2025 | Versiones previas con tokens por escuela y estructura de landing lineal. |