Entrega · Sistema de Diseño Andes · Fase 1 · Sprint 2
Definición de tokens del sistema de diseño de Uniandes
Todos los tokens del sistema en tres capas, con su valor por marca, fondo y dispositivo, el token actual de Figma y de Storybook que reemplazan y el plan para llevarlos a los dos.
Qué se entrega
La definición de los tokens
Todos los tokens del sistema en tres capas, con su valor por marca, fondo y dispositivo, por qué se definieron así y el token actual de Figma y Storybook que reemplaza cada uno.
Los archivos para implementar
tokens.json (formato estándar DTCG, para importar en Figma y generar el código), tokens.css (listo para Storybook) y este documento en Markdown.
El plan y el seguimiento
El plan para implementar en Storybook (esinergia) y para migrar en Figma (Uniandes con asesoría de esinergia), los pendientes con su responsable y los 63 hallazgos de la auditoría con su resolución.
Cómo se aprueba
El token está definido con evidencia y no depende de ninguna decisión. Lo aprueban Jhina y Ossman (Uniandes).
Depende de una decisión de Uniandes o incluye un ajuste de valor. Se aprueba cuando se cierra la decisión en Pendientes y aprobaciones.
Falta un insumo de Uniandes (la paleta de Medicina). Se completa cuando llegue.
La definición por categoría
Arquitectura
Tres capas, cuatro colecciones y el contexto en modos
Una decisión se cambia en un solo lugar y todos los componentes la reciben. Es el patrón que Uniandes ya usa en Color System V2, extendido a todas las categorías.
El valor
Paletas, escalas y medidas sin intención. Nunca se usan directo en un componente.
01-primitive/color/palette/neutral/900 = #1F1F1CLa intención
Para qué se usa el valor. Cambia por marca, fondo o dispositivo. Solo apunta a primitivos.
02-semantic/color/text/defaultEl contrato
Lo que lee cada componente. Solo apunta a semánticos y se crea solo cuando el componente necesita su propio control.
03-component/chip/radiusColecciones y modos en Figma
| Colección | Modos | Contiene | Por qué |
|---|---|---|---|
01-primitive | 1 | Paletas, tipografía, espaciado, radio, grosor, sombra, desenfoque, opacidad, z-index, duraciones, curvas, breakpoints y tamaños. | Un valor crudo no depende del contexto (respuesta 1). |
02-semantic · theme | 6: Institucional, Economía y Medicina × Light y Dark | Color, familia tipográfica, radio, grosor, elevación, opacidad, z-index, movimiento e íconos. | Todo lo que puede cambiar por marca o por fondo. Hoy las unidades solo cambian color; la estructura queda lista para temas que cambien más. |
02-semantic · responsive | 3: Desktop, Tablet, Mobile | Tamaño, interlineado y letter-spacing por rol; espaciado semántico; grilla y spans. | Un frame en modo Mobile recibe los valores de Mobile sin cambiar de estilo. |
03-component | 1 | Contratos por componente. | Hereda el modo del frame. |
Light y Dark son el fondo del componente, no un tema oscuro del sitio: son los sufijos -lightbg y -darkbg de hoy y la propiedad M-Background de las variantes.
El mismo token en Figma, en código y en JSON
| Figma | CSS (Storybook) | JSON (DTCG) |
|---|---|---|
02-semantic/color/text/default | var(--ua-02-semantic-color-text-default) | {02-semantic.color.text.default} |
01-primitive/space/16 | var(--ua-01-primitive-space-16) = 1rem | 01-primitive.space.16 = 16 |
primary/body-l/regular (estilo de texto) | .ua-typography-primary-body-l-regular | typography |
02-semantic/elevation/raised (estilo de efecto) | var(--ua-02-semantic-elevation-raised) | shadow |
Reglas de escritura
Inglés, minúsculas, kebab-case y / como jerarquía. Sin abreviaturas salvo tallas (2xs a 3xl). Sin unidades ni comas: el valor va en px y la exportación genera rem. El estado va al final. El contexto va en modos, nunca en el nombre.
Metadatos de cada variable
Scope específico (por ejemplo, solo relleno de texto o solo radio), descripción de uso en español y code syntax WEB con su var(--ua-…). z-index, movimiento y breakpoints van sin scope: en Figma son documentación.
Cómo se aplica: la cadena en código
Cada capa es una variable que apunta a la anterior. El componente solo conoce su token; si Uniandes cambia una decisión, se cambia el semántico y todos los componentes la reciben sin tocar su código.
En Figma
Cada variable apunta a la de la capa anterior con un alias. En el panel de variables se ve la cadena completa y el valor que resuelve en el modo del frame.
En código
Style Dictionary genera las tres capas como variables CSS. El componente usa siempre la capa 03 (o la 02 si no tiene token propio), nunca un primitivo ni un valor escrito a mano.
/* 01 · primitive: el valor */
--ua-01-primitive-color-palette-neutral-950: #191916;
/* 02 · semantic: la intención (cambia por marca y fondo) */
--ua-02-semantic-color-action-background-primary-default:
var(--ua-01-primitive-color-palette-neutral-950);
/* 03 · component: el contrato del botón */
--ua-03-component-button-background-primary-default:
var(--ua-02-semantic-color-action-background-primary-default);
/* El componente solo usa su token */
.button--primary {
background: var(--ua-03-component-button-background-primary-default);
}Definición · Color
Color: una sola fuente, marcas y fondos en modos
Color System V2 es la base: 57 primitivas (paleta institucional, Economía, Medicina y transparencias) y 72 semánticos en 6 modos. Los componentes nunca usan una primitiva: leen un semántico que cambia según la marca del sitio y el fondo del contenedor.
Por qué se definió así
- V2 como fuente única (respuesta 1 de Uniandes): ya estaba organizado en tres capas; se depreca la colección Colores con un reemplazo para cada una de sus 96 variables.
- Primitivas sin modos (respuesta 1): un valor crudo no depende del contexto. Solo el semántico cambia por marca o por fondo.
- Light y Dark son el fondo del componente, no un tema del sitio: reemplazan los pares -lightbg y -darkbg y la variante M-Background.
- Economía aplica su color principal en fondos, acciones y titulares (respuesta 3); el resto se mantiene institucional. Se crean text/heading, surface/brand y text/on-brand para eso.
- Contrato de estados completo (P47): default, hover, focus, selected y disabled en fondo, borde y contenido.
- Donde la ficha y la variable no coinciden, vale la variable (P21): es el valor que ven hoy los componentes.
Ejemplo en vivo: marcas y fondos
El mismo bloque en los seis modos de 02-semantic · theme. Economía aplica su azul en el titular, la acción principal y la banda de marca; el resto se mantiene institucional. Medicina es un borrador con el único color verificable (#557DC4).
Cómo sucede: el contexto se hereda del padre
El componente no cambia ni tiene un modificador en el nombre del token. El botón siempre lee var(--ua-03-component-button-background-primary-default). Lo que cambia es el valor de esa variable, según dos atributos que se ponen en un elemento padre. Las variables CSS se heredan como el color del texto: todo lo que está dentro del padre recibe sus valores.
Marca · data-ua-brand
Una sola vez, en <html>. Un sitio pertenece a una unidad, así que la marca se fija para toda la página. La pone el tema de Drupal de cada sitio (economía, medicina). El institucional no lleva atributo: es el valor por defecto.
Fondo · data-ua-surface
En el contenedor donde cambia el fondo. Una página mezcla zonas claras y oscuras: una banda oscura, un banner, el footer. Ese contenedor lleva data-ua-surface="dark" y todos los componentes dentro toman los valores Dark. Si dentro hay una zona clara otra vez, lleva "light". Lo claro es el valor por defecto.
<html data-ua-brand="economia"> ← lo pone el tema del sitio, una vez
<main>
<section> ← claro (por defecto)
<a class="button">…</a> → azul #122EE7, texto claro
</section>
<section data-ua-surface="dark"> ← banda oscura
<a class="button">…</a> → mismo componente: azul claro #A5C3FB, texto oscuro
</section>
</main>
</html>
| Dónde se pone | Marca | Fondo |
|---|---|---|
| Componente por componente | No: repetiría lo mismo en cada pieza. | Solo cuando el propio componente pinta su fondo oscuro (por ejemplo, una card oscura sobre fondo claro). |
| Contenedor de sección, banner o footer | No hace falta. | Sí: es el lugar normal. Es donde el fondo cambia. |
<html> o <body> | Sí: es el lugar normal. | Solo si toda la página es oscura. |
Qué reemplaza
Hoy cada componente decide su versión con la variante M-Background y con variables distintas (…-lightbg y …-darkbg). Con los modos, el componente no necesita saber sobre qué fondo está: lo hereda. Los temas de Economía y Medicina dejan de sobrescribir variables una por una.
En Figma es igual
Los modos se fijan en el frame padre: la página en Economía, la sección en Dark. Las instancias dentro quedan en modo automático y heredan. Cuando todos los componentes estén migrados, la propiedad M-Background podría retirarse; mientras tanto, cada variante Dark fija el modo Dark.
Estado y pendientes
| Qué queda abierto | Qué falta | Desbloquea | Aprueba |
|---|---|---|---|
| Paleta de Medicina | Compartir el archivo Web_Medicina (hoy sin acceso) o la lista de sus variables, para completar los modos Medicina · Light y Dark. | Uniandes | Jhina y Ossman |
| Paleta de Economía | Validar que la paleta final de la sección Paleta Economía reemplaza a Brand B y que el azul se aplica en fondos, acciones y titulares. | Uniandes | Jhina y Ossman |
| Grises casi idénticos | Decidir si se unen neutral/825 con 800 y 675 con 650 (P04). Mientras tanto se conservan. | Uniandes | Jhina y Ossman |
Definición · Tipografía
Tipografía: 34 roles y un estilo por familia, rol y peso
Los 348 estilos actuales, triplicados por dispositivo, pasan a 85 estilos {familia}/{rol}/{peso}. El tamaño, el interlineado, el letter-spacing y el espacio entre párrafos de cada rol son variables con modos Desktop, Tablet y Mobile.
Por qué se definió así
- Roles de la homologación de Uniandes (respuesta 2): display, data, heading 1 a 8, body, label, action, badge, caption y helper, con sus decisiones (títulos de card en Medium, labels al 4 %, headings 1 y 2 a -2 %).
- Un estilo por rol, no por dispositivo (P05, P50): el frame en modo Mobile recibe el tamaño de Mobile. Los 489 textos que hoy usan el estilo de otro dispositivo dejan de ser posibles.
- Familia como variable (P15): primary, secondary y mono, listas para que un tema futuro cambie la familia sin renombrar estilos.
- Primitivas sin unidad ni coma (P10): 01-primitive/font/size/60 en lugar de _fontSize/3,75rem.
- Rol propio cuando las métricas difieren: breadcrumb y button-l conservan su interlineado de 20, por decisión de Uniandes.
Ejemplo en vivo: roles por dispositivo
34 roles de la homologación de Uniandes. Cambie el dispositivo para ver el valor de cada modo.
| Rol | Tamaño / interlineado | Letter-spacing | Muestra |
|---|
Cómo se aplica
Un estilo de texto ya no existe tres veces (Desktop, Tablet y Mobile). Hay uno por familia, rol y peso, y el tamaño cambia según el dispositivo porque sus valores son variables con modos.
En Figma
Se aplica el estilo (por ejemplo, primary/heading-1/bold) al texto. El frame de la pantalla fija el modo Desktop, Tablet o Mobile y el texto cambia de tamaño solo; no hay que cambiar de estilo al pasar de una variante a otra.
En código
Cada estilo es una clase. Sus variables cambian en los breakpoints, así que el componente no necesita media queries para la tipografía.
.ua-typography-primary-heading-1-bold {
font-family: var(--ua-02-semantic-typography-font-family-primary);
font-size: var(--ua-02-semantic-typography-heading-1-font-size); /* 32 · 40 · 48 */
line-height: var(--ua-02-semantic-typography-heading-1-line-height);
letter-spacing: var(--ua-02-semantic-typography-heading-1-letter-spacing);
font-weight: var(--ua-01-primitive-font-weight-700);
}
:root { --ua-02-semantic-typography-heading-1-font-size: 2rem; } /* Mobile */
@media (min-width: 768px) { :root { --ua-02-semantic-typography-heading-1-font-size: 2.5rem; } } /* Tablet */
@media (min-width: 1272px) { :root { --ua-02-semantic-typography-heading-1-font-size: 3rem; } } /* Desktop */
<h1 class="ua-typography-primary-heading-1-bold">Admisiones 2027</h1>El subrayado de las variantes -un- se aplica en el estado del componente (por ejemplo, .card:hover .card__title { text-decoration: underline; }), no como un estilo aparte.
La validación de las 12 fichas tipográficas con discrepancia está en Seguimiento · Las 12 fichas.
Estado y pendientes
| Qué queda abierto | Qué falta | Desbloquea | Aprueba |
|---|---|---|---|
| Subrayado como estado | Confirmar que las variantes -un- se resuelven como decoración de estado del componente y no como estilos aparte. | Uniandes | Jhina y Ossman |
| Las 12 fichas con discrepancia | Confirmar la resolución aplicada a cada ficha a partir de la homologación tipográfica de Uniandes. | Uniandes | Jhina y Ossman |
Definición · Espaciado
Espaciado: la escala base 4 con intención
Las 16 primitivas de la escala base 4 se conservan (0 a 240). Se agrega la capa semántica: inset (relleno), stack (separación vertical) e inline (separación horizontal), en la colección responsive.
Por qué se definió así
- La escala actual es correcta (respuesta 2): solo cambia el nombre (01-primitive/space/16) y se elimina el modo rem, que daba 1 px donde se esperaban 16 (P11).
- Capa semántica (P45): el componente pide «relleno mediano», no «16 px». Si la decisión cambia, se cambia el semántico.
- Mismo valor en los tres dispositivos al empezar: así nada cambia al migrar. Si un componente necesita otro espaciado en Mobile, se ajusta el modo, no el componente.
- Tamaños de ícono fuera de la escala de espaciado: hoy se escriben con space(); pasan a icon-size.
Cómo se aplica
En Figma
Padding y gap del auto layout se enlazan a space/inset, stack o inline. El frame con modo Mobile recibe los valores de Mobile.
En código
El componente lee el semántico de su uso o su token de componente. space() sigue funcionando durante la migración.
.card {
padding: var(--ua-02-semantic-space-inset-md); /* 16 */
display: grid;
gap: var(--ua-02-semantic-space-stack-sm); /* 12 */
}
.chip { padding-inline: var(--ua-03-component-chip-padding-x); } /* → inset/xs · 8 */Estado y pendientes
| Qué queda abierto | Qué falta | Desbloquea | Aprueba |
|---|---|---|---|
| Espaciado de sección | Validar los valores de stack/section-sm, md y lg con los primeros componentes de página del Sprint 4. | Diseño Uniandes con esinergia | Jhina y Ossman |
Definición · Radio y borde
Radio y grosor de borde: de valores a mano a cuatro tokens cada uno
No existía ningún token de radio ni de grosor. Radio queda en none (0), subtle (4), full (9999) y la propuesta rounded (16). Grosor queda en none, default (1), strong (2) e indicator (4).
Por qué se definió así
- none es el default de Uniandes: lo confirman el panel de Buttons (--radius0) y el Plan de refactorización.
- full = 9999 aprobado (respuesta 5): reemplaza 13 valores de píldora y círculo y funciona en cualquier tamaño; 90 solo funciona hasta 180 px de alto.
- subtle = 4 se mantiene (respuesta 5), aunque hoy solo lo usa Local menu.
- rounded = 16 es una propuesta: tres componentes de Building blocks usan 8, 16 y 20 en contenedores y no caben en los otros tres.
- Grosor (P32): siete valores escritos a mano (0,5 a 5 px) pasan a cuatro; los menores de 1 px se pintan distinto según el navegador.
Los valores
Cómo se aplica
.chip { border-radius: var(--ua-03-component-chip-radius); } /* → radius/full */
.button { border: var(--ua-03-component-button-border-width) solid
var(--ua-03-component-button-border-primary-default); } /* 1 px */
.button:focus-visible { outline: var(--ua-03-component-button-focus-border-width) solid
var(--ua-03-component-button-border-primary-focus); } /* 2 px */Ver los tokens de radio Ver los tokens de borde
Estado y pendientes
| Qué queda abierto | Qué falta | Desbloquea | Aprueba |
|---|---|---|---|
| Radio rounded | Aprobar radius/rounded = 16 para Cards - Podcast, Heros - Podcast y Wall Gallery, o pasar esos componentes a none. | Uniandes | Jhina y Ossman |
| Ajustes de grosor | Aprobar en bloque: 0,5 y 0,8 px pasan a 1; 3 y 5 px pasan a 4. | Uniandes | Jhina y Ossman |
Definición · Elevación y materiales
Elevación: cuatro niveles de sombra y tres materiales
No existía ningún estilo de efecto local. Se definen none, raised, overlay y high para sombras, y thin, regular y thick para materiales (desenfoque de fondo), como estilos de efecto enlazados a variables.
Por qué se definió así
- Valores medidos en los componentes de 48 páginas (respuesta 6): todas las sombras usan y = 4 y solo cambian el desenfoque.
- Los niveles son la propuesta de esinergia para ordenar 6 sombras y 6 desenfoques aplicados a mano y 2 estilos de una librería externa (P27, P08, P40).
- Un solo color de sombra con modos: claro #000000 al 25 %, oscuro #333331 al 90 %.
- Materiales con tres grosores distintos (P07): hoy los tres tienen el mismo desenfoque y no se diferencian.
Ejemplo: sombras, hoy frente al token
Los valores de «Hoy» se midieron en los componentes de Figma y en el código de Storybook. Los niveles son la propuesta de esinergia. raised y high se ven igual; overlay cambia y es la decisión que queda abierta.
Cómo se aplica
La elevación se aplica como un solo valor de sombra. El color de la sombra viene de color/shadow/default, así que cambia solo cuando el componente está sobre un fondo oscuro.
En Figma
Son estilos de efecto locales (elevation/raised, overlay y high). Se aplican al frame del componente desde el panel de efectos; su desenfoque y su color están enlazados a variables, así que heredan el modo Light o Dark del frame padre.
En código
Cada nivel es una variable compuesta de box-shadow. El componente usa su token de elevación; nunca escribe una sombra a mano.
.select__menu {
box-shadow: var(--ua-03-component-select-menu-elevation); /* → elevation/overlay */
}
.mega-menu__panel {
box-shadow: var(--ua-03-component-mega-menu-panel-elevation); /* → elevation/high */
}
/* Resultado: 0 4px 10px 0 + color/shadow/default
(#000 25 % en claro · #333331 90 % dentro de data-ua-surface="dark") */Ejemplo: materiales, ¿conservan su apariencia?
Cada recuadro muestra el valor de hoy a la izquierda y el token a la derecha, sobre la misma imagen. Regular no cambia en Figma. Thin y thick cambian solo en los casos marcados.
Cómo se aplica
Un material es un fondo translúcido con desenfoque de lo que hay detrás (efecto vidrio). Tiene dos partes: el relleno y el desenfoque, y las dos son tokens.
En Figma
Son estilos de efecto de desenfoque de fondo (material/thin, regular y thick) enlazados a su variable de blur, más un relleno con color/material/background. Reemplazan a los dos estilos de la librería externa.
En código
El relleno va en background y el desenfoque en backdrop-filter. El componente usa su token de material.
.card-news__overlay {
background: var(--ua-02-semantic-color-material-background); /* #E0DFDA al 30 % */
backdrop-filter: var(--ua-03-component-card-news-material); /* blur(50px) · regular */
}Estado y pendientes
| Qué queda abierto | Qué falta | Desbloquea | Aprueba |
|---|---|---|---|
| Elevación overlay | Aprobar quitar el desplazamiento x de la sombra y unificar su color con shadow/default (ver el ejemplo). | Uniandes | Jhina y Ossman |
| Materiales | Aprobar thick = 80 para Persona Card y Hero Persona (hoy 500) y regular = 50 en código para Banner principal y Heros - Programs (hoy 25). | Uniandes | Jhina y Ossman |
| Librería externa | Confirmar el origen de las variables remotas (colección Theme) y de los 2 estilos de efecto que vienen de otra librería. | Diseño Uniandes | Jhina y Ossman |
Definición · Layout
Layout: breakpoints, grilla y anchos
Cuatro breakpoints (360, 768, 1272 y 1616), la grilla como variable con modos (columnas, medianil y margen) y los anchos de span y de componente como tokens.
Por qué se definió así
- Desktop en 1272 en Figma y en código, y Mobile en 360 (respuesta 7).
- Mobile first: la base no lleva media query; xs (320) se retira.
- Margen Desktop de 52: con 1272 y el margen de 56 la columna mínima bajaría a 67,33 px; con 52 se conserva la de 68 y ningún ancho mínimo cambia.
- Una sola escala (P06, P46): se elimina tbt-max (duplicaba dsp-min) y se corrige tbt-max-7, que valía casi lo mismo que 8 columnas.
| Rango | Columnas | Medianil | Margen | Cambio |
|---|---|---|---|---|
| Mobile · 360 a 767 | 4 | 16 | 20 | Base sin media query. xs (320) se retira. |
| Tablet · 768 a 1271 | 8 | 32 | 48 | Los anchos máximos de span se recalculan con 1271 (de 1 a 8 px) y se corrige tbt-max-7 (1183 → 1025). |
| Desktop · 1272 a 1615 | 12 | 32 | 52 (hoy 56) | Con 52 la columna sigue en 68 px y los 12 anchos mínimos no cambian. Con 56 sería de 67,33 px. Por aprobar. |
| Desktop max · 1616+ | 12 | 32 | fluido | El contenido deja de crecer en 1616. |
Cómo se aplica
Los breakpoints son la frontera entre modos: el diseño es mobile first desde 360 y cambia en 768 y 1272. La grilla (columnas, medianil y margen) es una variable con modos, así que el contenedor no repite valores por dispositivo.
En Figma
Cada pantalla se diseña en un frame de 360, 768 o 1272 de ancho con el modo correspondiente de la colección responsive. Los estilos de grilla toman columnas, medianil y margen de esas variables.
En código
Las media queries usan siempre los mixins del sistema, nunca px escritos a mano. La grilla lee sus variables.
.page-grid {
display: grid;
grid-template-columns: repeat(var(--ua-02-semantic-layout-grid-columns), 1fr); /* 4 · 8 · 12 */
column-gap: var(--ua-02-semantic-layout-grid-gutter); /* 16 · 32 · 32 */
padding-inline: var(--ua-02-semantic-layout-grid-margin); /* 20 · 48 · 52 */
max-width: var(--ua-02-semantic-layout-container-max-width); /* 1616 */
}
.card-news {
@include from(tablet) { … } /* antes: @media (min-width: 768px) a mano */
@include from(desktop) { … } /* antes: @media (min-width: 1280px) a mano */
}Estado y pendientes
| Qué queda abierto | Qué falta | Desbloquea | Aprueba |
|---|---|---|---|
| Margen Desktop de 52 px | Aprobar el margen de 52 px (hoy 56) para conservar la columna de 68 px con el breakpoint de 1272. | Uniandes | Jhina y Ossman |
| Breakpoint small (425) | Revisar los 4 componentes que lo usan en código y retirarlo en el Sprint 4. | esinergia (desarrollo) | Uniandes en QA |
Definición · Z-index y movimiento
Z-index y movimiento: capas y tiempos con nombre
Diez capas de apilamiento en lugar de 15 números escritos a mano, y seis duraciones con cinco curvas en lugar de 66 transiciones. Son tokens de código; en Figma quedan como documentación.
Por qué se definió así
- Se tokenizan por decisión de Uniandes (respuesta 9): hoy están escritos a mano en código y no existen en Figma.
- Se conserva el orden de apilamiento: cuando dos valores cercanos se unen, el número cambia pero el orden entre componentes no.
- Duraciones con nombre: base (200 ms) es la más usada; las animaciones en bucle quedan como excepción del componente.
10 capas de apilamiento
Reemplazan 15 valores escritos a mano, de -1 a 99999. Cuando dos valores cercanos se unen, el número cambia pero el orden se mantiene.
6 duraciones y 5 curvas
Reemplazan 66 transiciones con 12 duraciones. Pase el cursor o toque el área para ver cada duración.
Cómo se aplica
z-index y movimiento son tokens de código: en Figma no cambian el lienzo y quedan como documentación. Cada componente usa su token, que apunta a una capa o a una duración con nombre.
En Figma
Las variables existen sin scope, con su descripción y su code syntax, para que diseño y desarrollo hablen de las mismas capas y duraciones. El prototipo puede usar las mismas duraciones en las animaciones inteligentes.
En código
z-index, transition y animation leen su token. Las animaciones respetan la preferencia del usuario de reducir movimiento.
.navbar {
z-index: var(--ua-03-component-navbar-z-index); /* → z-index/header · 100 */
}
.accordion__content {
transition: height var(--ua-03-component-accordion-motion-duration) /* slow · 300 ms */
var(--ua-03-component-accordion-motion-easing); /* emphasized */
}
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}Ver los tokens de z-index Ver los tokens de movimiento
Estado y pendientes
| Qué queda abierto | Qué falta | Desbloquea | Aprueba |
|---|---|---|---|
| Ajustes de z-index y duración | Aprobar en bloque los valores que se unen (por ejemplo, z-index 3 y 5 pasan a 2; 0,35 s pasa a 300 ms). | Uniandes | Jhina y Ossman |
Definición · Opacidad y tamaños
Opacidad y tamaños
Seis opacidades con intención (disabled, muted, loading, media-control, hidden y visible), cinco tamaños de ícono y los anchos de componente que salían de la colección de layout.
Por qué se definió así
- Opacidad con nombre: hoy se escribe a mano en 13 componentes; el nombre dice para qué sirve.
- Íconos con su propia escala: hoy se dimensionan con space(); si cambia el espaciado, no deben cambiar los íconos.
- Anchos de componente en la capa de componente (P20): los anchos de Button y Dropdown estaban en la colección de layout.
Cómo se aplica
.dropdown__icon[aria-disabled="true"] { opacity: var(--ua-03-component-dropdown-disabled-opacity); } /* 0.4 */
.local-menu__icon { width: var(--ua-02-semantic-icon-size-lg); height: var(--ua-02-semantic-icon-size-lg); } /* 24 */
.button--lg { min-width: var(--ua-03-component-button-lg-min-width); } /* 176 */Ver los tokens de opacidad Ver los tokens de tamaño
Estado y pendientes
Sin decisiones abiertas en esta categoría.
Definición · Componentes
La capa de componente
Cada componente tiene tokens propios solo donde necesita su propio control: sus colores de acción, radio, grosor, elevación, capa y movimiento. Los textos y superficies estáticas usan el semántico directo.
Por qué se definió así
- Derivados de la evidencia: los colores salen de las variables que cada componente usa hoy en Figma o en Storybook; radio, grosor, elevación, z-index y movimiento salen de los valores medidos.
- Solo apuntan a semánticos: así un cambio de marca o de fondo llega a todos los componentes sin tocarlos.
- Text, Heading e Icons son fundamentos, no componentes: se implementan con los estilos de texto y los tamaños de ícono (ver Implementar en Storybook).
Cómo se aplica: un componente con todas las categorías
Un botón usa tokens de varias categorías a la vez: color, radio, grosor, espaciado y tipografía. Ningún valor queda escrito a mano.
En Figma
Cada propiedad del componente se enlaza a su variable: relleno, borde, radio, padding y gap. El texto usa un estilo de texto, no valores sueltos.
En código
Cada propiedad lee su variable. El estilo de texto es una clase, y el tamaño ya cambia por dispositivo sin media queries en el componente.
.button {
border-radius: var(--ua-03-component-button-radius); /* none · 0 */
border-width: var(--ua-03-component-button-border-width); /* 1 px */
padding: var(--ua-03-component-button-padding-y)
var(--ua-03-component-button-lg-padding-x); /* 12 · 24 */
background: var(--ua-03-component-button-background-primary-default);
color: var(--ua-03-component-button-content-primary-default);
}
.button:hover {
background: var(--ua-03-component-button-background-primary-hover);
}
<a class="button ua-typography-primary-button-l-semibold">Inscribirme</a>Componentes con tokens propios
| Componente | Tokens | Categorías |
|---|
Estado y pendientes
| Qué queda abierto | Qué falta | Desbloquea | Aprueba |
|---|---|---|---|
| Plantillas de Text, Heading e Icons | Verificar que no tengan estilos propios además de las clases, al inicio del Sprint 3. | esinergia (desarrollo) | esinergia |
Todos los tokens
Explorador de tokens
Cada fila tiene su nombre en Figma y en código, su valor por modo, lo que reemplaza y su estado. Toque una fila para ver la cadena completa, la nota y todos los reemplazos.
| Token | Valor | Estado |
|---|
Se retiran
Lo que no pasa al sistema nuevo
Todo token actual tiene destino: un reemplazo en el explorador o una fila aquí con su motivo.
| Actual | Qué pasa |
|---|
Implementación · Plan principal
Implementar en Storybook
Es el plan principal de esta fase. Lo ejecuta esinergia (desarrollo) y Uniandes lo valida en su entorno de pruebas. La fuente de verdad en código es tokens.json: Style Dictionary genera el CSS y nadie escribe un token a mano. Una capa de compatibilidad mantiene los nombres actuales mientras se migra, así ningún sitio cambia de un día para otro.
Cómo se emiten los modos
| Modo | En CSS |
|---|---|
| Institucional · Light | :root, [data-ua-surface="light"] |
| Institucional · Dark | [data-ua-surface="dark"] |
| Economía y Medicina | [data-ua-brand="economia"] en <html>, combinado con el fondo |
| Mobile · Tablet · Desktop | :root · @media (min-width: 768px) · @media (min-width: 1272px) |
El tema de cada sitio de Drupal pone data-ua-brand en <html> y deja de sobrescribir las variables --c-*. El componente que hoy recibe M-Background=Dark pone data-ua-surface="dark" en su contenedor.
Regla técnica: una custom property que usa var() se resuelve donde se declara. Por eso los tokens de componente se declaran en :root, [data-ua-brand], [data-ua-surface]; si solo estuvieran en :root, un botón dentro de un contenedor oscuro heredaría el color claro.
Breakpoints y compatibilidad
$ua-breakpoints: (tablet: 768px, desktop: 1272px,
desktop-max: 1616px);
@mixin from($bp) { @media (min-width: map-get($ua-breakpoints, $bp)) { @content; } }
@mixin below($bp) { @media (max-width: map-get($ua-breakpoints, $bp) - 0.02px) { @content; } }
// medium → from(tablet) · large → from(desktop) · xl → from(desktop-max)
/* _legacy-aliases.css (temporal, generado) */
:root {
--c-background-primary-default-lightbg:
var(--ua-01-primitive-color-palette-neutral-950);
--c-background-primary-default-darkbg:
var(--ua-01-primitive-color-palette-neutral-20);
/* una línea por cada token legacy */
}
Los alias legacy apuntan al primitivo para que el valor sea idéntico al de hoy en cualquier contenedor. clr() y space() siguen funcionando hasta que el lint reporte cero usos.
Text, Heading e Icons: fundamentos fuera de los 57
Los 57 componentes incluyen tres fundamentos que no están en el listado: Text (lo usan 48), Icons (29) y Heading (12). Se implementan en esta fase como fundamentos, no como componentes, y su uso no cambia.
Text y Heading
Son plantillas Twig que reciben la clase tipográfica desde el componente que las incluye (254 usos de .ss3-* desde Twig y 50 @extend). La tipografía la definen los 85 estilos de texto; sus estilos base se actualizan para leer los tokens. No necesitan tokens de componente.
Icons
Usa Material Symbols. Su familia y sus tamaños quedan en font-family/icon e icon-size/*. El color lo pone cada componente que lo usa, así que queda tokenizado con los 57.
Por verificar
Que las plantillas Twig de Text, Heading e Icons no tengan estilos propios además de las clases. Lo revisa desarrollo al inicio del Sprint 3.
Cómo siguen funcionando los nombres actuales
| Lo que existe hoy | Cómo sigue funcionando |
|---|---|
Variables --c-* y función clr() | _legacy-aliases.css las mantiene con el mismo valor de hoy, apuntando al primitivo nuevo. |
Función space() y $space | Siguen devolviendo el mismo valor; leen 01-primitive/space/*. |
Mixins xs, small, medium, large, xl | Se conservan como alias de from() y below(); xs y small mantienen su valor mientras se revisan sus usos. |
Clases .ss3-*, .ssf4-*, .scp-* | Se conservan con el mismo resultado visual; cada una lee las variables de su estilo nuevo. |
| Temas de Economía y Medicina | Siguen sobrescribiendo --c-*: la capa de compatibilidad se carga antes, así que sus sobrescrituras siguen ganando hasta que migren a data-ua-brand. |
| Otras dependencias fuera de los 57 (BlockLinkButtons, SectionTitle, SectionTitleMenu, TextCopyright, grilla de Tabs) | Quedan como están y siguen funcionando con la misma capa. |
La capa se retira al cierre del Sprint 4, cuando el lint reporte cero usos.
Pasos
| Paso | Qué se hace | Cuándo |
|---|---|---|
| 1 | Instalar Style Dictionary v4 y generar _tokens.css y _typography.css desde tokens.json. | Sprint 3 · semana 1 |
| 2 | Publicar _legacy-aliases.css y verificar en Chromatic que ninguna historia cambia. | Sprint 3 · semana 1 |
| 3 | Agregar a Storybook una barra con marca, fondo y dispositivo; un decorador pone data-ua-brand y data-ua-surface en la historia. | Sprint 3 · semana 1 |
| 4 | Crear la página «Fundamentos / Tokens» generada desde tokens.json. | Sprint 3 |
| 5 | Migrar componente por componente en el orden de las olas: clr(x-lightbg) pasa a var(--ua-03-component-…), space() al semántico de su uso, .ss3-* a .ua-typography-*, y z-index, transiciones, sombras, radios y grosores a su token. | Sprints 3 y 4 |
| 6 | Quitar las sobrescrituras de --c-* de los temas economia y medicina; usar data-ua-brand. | Con el primer componente de esos sitios |
| 7 | Activar stylelint: valores estrictos en color, z-index, transition, box-shadow, border-radius y border-width; prohibir --c-, clr(, !important nuevos y media queries en px. | Sprint 3 aviso · Sprint 4 error |
| 8 | Eliminar _legacy-aliases.css cuando no queden usos. | Cierre del Sprint 4 |
Terminado por componente
Cero valores fijos de color, z-index, duración, sombra, radio y grosor. Cero referencias a --c-, clr(), space() o .ss3-*. La historia coincide con la línea base o con las diferencias aprobadas. Foco visible (WCAG 2.4.7). Validado en el entorno de pruebas de Uniandes en los tres dispositivos.
Implementación · Figma
Migrar en Figma
Lo ejecuta Uniandes (equipo de diseño) con la asesoría de esinergia. esinergia entrega el script de importación, acompaña cada fase y revisa el QA; Uniandes hace los cambios en su archivo. Primero se crea lo nuevo al lado de lo actual, después se reenlazan los componentes y al final se retira lo legacy, solo cuando nadie lo usa.
Preparar
- Jhina y Ossman cierran las decisiones abiertas.
- Crear una rama del archivo, o una copia de respaldo con fecha si el plan no tiene ramas.
- Capturar cada variante de los 57 componentes en los tres dispositivos como línea base.
- Confirmar el origen de la librería externa (variables Theme y los 2 estilos de efecto).
Fase 1 · Crear las variables
- Crear las cuatro colecciones con sus modos exactos.
- Importar
tokens.jsonen orden: primitivos, semánticos y componente. Lo corre un script de la Plugin API que entrega esinergia. - Configurar scope, descripción y code syntax de cada variable.
- Crear los 85 estilos de texto y los 7 estilos de efecto enlazados a variables.
- Verificar que no haya alias rotos ni saltos de capa. El script entrega el reporte.
Fase 2 · Reenlazar los componentes
- Cambiar cada variable legacy por la nueva según la columna «Reemplaza».
- Fijar el modo Dark en las variantes M-Background=Dark y el modo de dispositivo en las variantes Platform.
- Pasar cada texto al estilo de su rol: los 489 textos con el estilo de otro dispositivo quedan corregidos.
- Aplicar radio, grosor y elevación; agregar la variante focus a los 15 componentes que no la tienen.
- QA contra la línea base en Light, Dark y los tres dispositivos.
Orden por olas
| Sprint | Componentes | Por qué |
|---|---|---|
| Sprint 3 · 29 base | Divider, Spacer, Heros - Events, Buttons, Linkbuttons, Tags, Chips, Action Button, Logos, Breadcrumbs, Social media Icons, Imagen/Video, Caption images, Paragraph, Quote, Inputs, Text área, Select, Input Dropdown, Checkbox, Radio buttons, Dropdown, Pagination, Tabs, Accordion, Stepper, Searchbar, Newsbar, Button Group | No dependen de otros componentes del alcance, o solo de átomos. |
| Sprint 4 · 28 compuestos | Cards (News, Persons, Events, Podcast, Programs, Alternativas de bienestar, rankings), Keypoints, Heros (News, Persons, Podcast, Programs, Alternativas de bienestar), Tiles, Search Result, Navbar, Local menú, Menu FAB, Megamenú, Header, Footer, Banner interno, Banner principal, Banner small, Marquee, Slide Gallery, Wall Gallery, Calendar | Se componen de los anteriores. |
Fase 3 · Publicar y retirar (cierre del Sprint 4)
Publicar la librería y aceptar la actualización en Building blocks y en los archivos de Economía y Medicina. Ocultar del publicado las colecciones legacy y moverlas a «Deprecado». Eliminar cada variable legacy solo cuando tenga cero usos. Actualizar las páginas de fundamentos.
Terminado en Figma
Las 4 colecciones y los 92 estilos coinciden con tokens.json. Los 57 componentes usan solo variables de componente o semánticas y estilos nuevos. Cada estado usa el token de su mismo estado. Ninguna variable legacy tiene usos.
Seguimiento
Pendientes y aprobaciones
Lo que falta para cerrar la definición, quién lo desbloquea y quién lo aprueba. Los tokens afectados están marcados «Requiere decisión» o «Pendiente de insumo» en Todos los tokens.
| # | Tema | Qué falta | Desbloquea | Aprueba | Dónde |
|---|---|---|---|---|---|
| 1 | Paleta de Medicina | Compartir el archivo Web_Medicina (hoy sin acceso) o la lista de sus variables, para completar los modos Medicina · Light y Dark. | Uniandes | Jhina y Ossman | Color |
| 2 | Paleta de Economía | Validar que la paleta final de la sección Paleta Economía reemplaza a Brand B y que el azul se aplica en fondos, acciones y titulares. | Uniandes | Jhina y Ossman | Color |
| 3 | Grises casi idénticos | Decidir si se unen neutral/825 con 800 y 675 con 650 (P04). Mientras tanto se conservan. | Uniandes | Jhina y Ossman | Color |
| 4 | Subrayado como estado | Confirmar que las variantes -un- se resuelven como decoración de estado del componente y no como estilos aparte. | Uniandes | Jhina y Ossman | Tipografía |
| 5 | Las 12 fichas con discrepancia | Confirmar la resolución aplicada a cada ficha a partir de la homologación tipográfica de Uniandes. | Uniandes | Jhina y Ossman | Tipografía |
| 6 | Espaciado de sección | Validar los valores de stack/section-sm, md y lg con los primeros componentes de página del Sprint 4. | Diseño Uniandes con esinergia | Jhina y Ossman | Espaciado |
| 7 | Radio rounded | Aprobar radius/rounded = 16 para Cards - Podcast, Heros - Podcast y Wall Gallery, o pasar esos componentes a none. | Uniandes | Jhina y Ossman | Radio y borde |
| 8 | Ajustes de grosor | Aprobar en bloque: 0,5 y 0,8 px pasan a 1; 3 y 5 px pasan a 4. | Uniandes | Jhina y Ossman | Radio y borde |
| 9 | Elevación overlay | Aprobar quitar el desplazamiento x de la sombra y unificar su color con shadow/default (ver el ejemplo). | Uniandes | Jhina y Ossman | Elevación y materiales |
| 10 | Materiales | Aprobar thick = 80 para Persona Card y Hero Persona (hoy 500) y regular = 50 en código para Banner principal y Heros - Programs (hoy 25). | Uniandes | Jhina y Ossman | Elevación y materiales |
| 11 | Librería externa | Confirmar el origen de las variables remotas (colección Theme) y de los 2 estilos de efecto que vienen de otra librería. | Diseño Uniandes | Jhina y Ossman | Elevación y materiales |
| 12 | Margen Desktop de 52 px | Aprobar el margen de 52 px (hoy 56) para conservar la columna de 68 px con el breakpoint de 1272. | Uniandes | Jhina y Ossman | Layout y breakpoints |
| 13 | Breakpoint small (425) | Revisar los 4 componentes que lo usan en código y retirarlo en el Sprint 4. | esinergia (desarrollo) | Uniandes en QA | Layout y breakpoints |
| 14 | Ajustes de z-index y duración | Aprobar en bloque los valores que se unen (por ejemplo, z-index 3 y 5 pasan a 2; 0,35 s pasa a 300 ms). | Uniandes | Jhina y Ossman | Z-index y movimiento |
| 15 | Plantillas de Text, Heading e Icons | Verificar que no tengan estilos propios además de las clases, al inicio del Sprint 3. | esinergia (desarrollo) | esinergia | Componentes |
| 16 | Prioridad final de los 63 hallazgos | Definir la prioridad final en una sesión de trabajo y registrarla en Hallazgos. | Uniandes con esinergia | Jhina y Ossman | Hallazgos |
| 17 | Aprobación de los tokens | Aprobar los tokens marcados «Listo para aprobar». Los demás se aprueban cuando se cierre su decisión o llegue su insumo. | Uniandes | Jhina y Ossman | Resumen |
Jhina y Ossman aprueban por Uniandes. esinergia registra cada decisión en este documento y actualiza el estado de los tokens.
Seguimiento · Validación
Las 12 fichas con discrepancia (pregunta 4)
Qué se necesita de Uniandes: confirmar la resolución de cada ficha. Las 11 primeras siguen la homologación tipográfica de Uniandes; la última depende de decidir el subrayado como estado del componente. Desbloquea: Uniandes · Aprueban: Jhina y Ossman.
| Estilo | Discrepancia | Resolución | Fuente |
|---|---|---|---|
| ss3-label-lg-500 · Desktop | Ficha Medium / estilo Regular | Regular: primary/label-xl/regular | Homologación: «dejar todos en regular» |
| ss3-link-un-400 · Tablet | Ficha Source Sans 3 / estilo Source Sans Pro | Source Sans 3: primary/body-m/regular | Familia del sistema |
| ssf4-cardTitle-lg-500 · Tablet | Ficha Medium / estilo SemiBold | Medium | Homologación: «deben quedar todas en medium» |
| ssf4-cardTitle-md-500 · Tablet | Ficha Medium / estilo Regular | Medium | Homologación |
| ssf4-cardTitle-sm-500 · Tablet | Ficha Medium / estilo Regular | Medium | Homologación |
| ssf4-cardTitle-lg-500 · Mobile | Ficha Medium / estilo SemiBold | Medium | Homologación |
| ssf4-cardTitle-lg-un-500 · Mobile | Ficha Medium / estilo SemiBold | Medium | Homologación |
| ssf4-cardTitle-xxs-un-500 · Mobile | Ficha subrayada / estilo sin subrayado | El subrayado pasa a ser estado del componente | Opción «action» que planteó Uniandes |
| scp-button-lg-600 · Tablet | Ficha 20 px · 0 % / estilo 18 px · 4 % | Interlineado 20 y 4 % | Homologación: «dejar en 4 %», «dejar lh en 20px» |
| scp-button-lg-600 · Mobile | Igual que Tablet | Interlineado 20 y 4 % | Homologación |
| ss3-highlight-400 · Desktop | Ficha sin estilo; existe ss3-highlight-400-60-72 | Un solo estilo primary/display-1/regular, 60/72 en Desktop | Homologación: display-1 |
| ssf4-value-number-lg-500 · Mobile | El estilo se llama ss4-… | secondary/data/medium | Nombre del sistema |
Hallazgos de la auditoría
Los 63 hallazgos y cómo se resuelven
Cada hallazgo de la auditoría con su prioridad recomendada y lo que este documento hace con él: si queda resuelto en la definición de tokens, si se ejecuta en la migración, si necesita una decisión o un insumo de Uniandes, o si queda como recomendación.
| # | Hallazgo | Estado |
|---|
Seguimiento
Respuestas de Uniandes al Sprint 2
Cada respuesta a las preguntas del Sprint 2 está incorporada en los tokens. Las tres preguntas que Uniandes devolvió (4, 6 y 9) tienen su respuesta aquí.
| # | Tema | Respuesta de Uniandes | Cómo quedó |
|---|---|---|---|
| 1 | Color System V2 como fuente única | Sí, con la organización propuesta: no aplicar primitivas por modo. | Las primitivas viven en una colección sin modos; las marcas y el fondo solo cambian el semántico. La colección Colores se depreca con su mapeo. |
| 2 | Tres capas en todas las categorías | De acuerdo. Tipografía según su homologación; espaciado sobre la base actual; radio y elevación según la propuesta. | La tipografía adopta los roles y las decisiones de la homologación de Uniandes. El espaciado conserva la escala base 4 y suma la capa semántica. |
| 3 | Brand B, Economía y Medicina | Brand B es Economía. Las dos son borradores. El color principal va en fondos, acciones y titulares; el resto se mantiene. | Economía usa su paleta final (azul #122EE7). Se crean text/heading, surface/brand y text/on-brand. Medicina queda en borrador: no hay acceso al archivo Web_Medicina. |
| 4 | Las 12 fichas tipográficas con discrepancia | ¿Se resuelve con la homologación tipográfica? ¿Dónde está en el informe? | Sí: la homologación resuelve las 12 (ver la tabla). En el informe están en «Fundamentos frente a variables» y en los hallazgos P16 y P22, de prioridad media, que se corrigen en la tokenización; no son de los que quedan como recomendación. |
| 5 | Radio | Aprobado full = 9999; subtle = 4 se mantiene. | Aplicado. Se suma una propuesta: radius/rounded = 16 para tres componentes de Building blocks. |
| 6 | Elevación y materiales | ¿Los niveles salen de la auditoría o son propuesta? ¿Los materiales conservan su apariencia? Pide un ejemplo. | Los valores se midieron en los componentes; los niveles son propuesta de esinergia. Ver el ejemplo de cada nivel y material frente a su valor actual. |
| 7 | Breakpoints | Desktop 1272, como en desarrollo. Mobile 360 en Figma y en Storybook. | Aplicado. Para conservar la columna de 68 px con 1272, el margen Desktop pasa de 56 a 52 (por aprobar). |
| 8 | Nombre en código | De acuerdo con el prefijo «ua» y con conservar la capa. | --ua-02-semantic-color-text-default |
| 9 | z-index y transiciones | Se tokenizan. Pide ver la propuesta. | 10 capas de z-index y 6 duraciones con 5 curvas, más sus tokens por componente. |
| 10 | Prioridad de los 63 hallazgos | Revisarla en una sesión de trabajo con esinergia. | Los 63 están en Hallazgos, con su prioridad recomendada y cómo se resuelve cada uno. La prioridad final se registra ahí después de la sesión de trabajo. |
| 11 | Quién aprueba | Jhina y Ossman. | La columna Estado del explorador dice qué está listo para su aprobación. |