Tokens del sistema
Todos los tokens viven en :root y se consumen vía var(--…). Replica literalmente estos nombres en proyectos hermanos del ecosistema Workmed.
Color — paleta de marca #
Azul profundo como base, rojo como acento puntual. El gris cálido para fondos contrastantes.
Derivados semánticos
Aliases que las pantallas consumen en vez de los colores de marca directos.
Estados semánticos #
Paleta compartida por todos los contextos de estado: pills, bands, dots, deltas de KPI.
| Estado | Foreground | Background |
|---|---|---|
| Éxito / Done | #1F8A5B | rgba(31,138,91,.12) |
| Atención / In-progress | #B57810 | rgba(217,150,30,.14) |
| Alerta / Urgent | #CC2D3B | rgba(204,45,59,.11) |
| Info / Scheduled | #2D334E | rgba(45,51,78,.08) |
Tipografía #
Poppins (humanista), pesos 300–700. Body en 300 light — rasgo distintivo. Headings en 700 con tracking negativo agresivo.
Radios #
Bordes pill para acción; bordes suaves para contenido; radios pequeños para inputs.
| Token | Valor | Uso | Muestra |
|---|---|---|---|
--r-xs | 4px | Badges mínimos | |
--r-sm | 8px | Inputs, nav lateral | |
--r-md | 12px | Mini-cards, callouts | |
--r-lg | 18px | Cards, paneles | |
--r-xl | 26px | Hero card, forms | |
--r-pill | 999px | Botones, chips, tabs |
Espacio & densidad #
Sistema doblemente parametrizado: cambia data-density="compact" en <html> para reducir el aire. Pruébalo:
| Token | Aireada (default) | Compacta |
|---|---|---|
--pad-section-y | 120px | 80px |
--pad-card | 28px | 20px |
--gap-card | 20px | 14px |
--gap-section | 80px | 56px |
| Contenedor | Ancho |
|---|---|
.container | min(1320px, 92vw) |
.container-tight | min(1080px, 90vw) |
Sombras #
Siempre tintadas en azul oscuro rgba(45,51,78,…), nunca negro puro. Esto evita el "gris muerto" de bibliotecas genéricas.
Transiciones #
| Curva | Uso |
|---|---|
.15s ease | Microinteracción |
.2s ease | Estándar (hover de botón/card) |
max-height .3s ease | Acordeón / colapsable |
translateY(-2px) | Hover de cards + sombra |
translateX(3px) | Hover de flechas .arr |
Iconografía #
Set de iconos stroke (no filled), viewBox 24, peso 1.6, que heredan currentColor. Inline 14–16px · en cards 18–24px · en contenedores cuadrados 44×44 / 56×56.
En contenedores
En hover de card el contenedor del icono se llena de --wm-rojo con icono blanco.
Ver código
<svg class="ico"><use href="assets/icons.svg#ico-brain"></use></svg> <!-- en contenedor cuadrado --> <div class="eval-icon"> <svg class="ico"><use href="assets/icons.svg#ico-sleep"></use></svg> </div>