# Diseño del sistema

**Última actualización:** 14 de noviembre de 2026.

El diseño del sistema define la identidad visual, los componentes y los patrones de interacción de Salud365. Sus valores y comportamientos se especifican en esta sección para que puedan aplicarse en web y móvil con independencia del lenguaje, biblioteca o plataforma utilizados.

## 1. Documentos

| Documento | Qué contiene |
| --- | --- |
| [Colores](colores.md) | Valores oficiales, tokens de interfaz, estados y contraste. |
| [Tipografía](tipografia.md) | Familias tipográficas, jerarquías, legibilidad y formatos. |
| [Componentes](componentes.md) | Catálogo de elementos, variantes, medidas y estados. |
| [Reglas de interacción](reglas-de-interaccion.md) | Comportamiento de controles, formularios, navegación, carga y adaptación. |

## 2. Principios

1. Identidad reconocible: azul oscuro como base, isotipo naranja y colores complementarios definidos en [Colores](colores.md).
2. Una acción principal clara por bloque; acciones secundarias visualmente diferenciadas.
3. Texto legible, etiquetas visibles y estados comprensibles sin depender únicamente del color.
4. Componentes reutilizables con el mismo significado y comportamiento entre secciones.
5. Cada paso debe caber en una vista habitual de móvil y escritorio, conservando contenido obligatorio, legibilidad y acciones principales. Permitir desplazamiento cuando lo requieran accesibilidad, teclado virtual o pantallas excepcionalmente pequeñas.
6. Usar pasos adicionales y modales cuando aporten claridad.

## 3. Organización de la especificación

| Parte | Qué define |
| --- | --- |
| Identidad | Colores, tipografía, logotipo e isotipo. |
| Valores compartidos | Medidas, espaciado, radios, sombras y tiempos de transición. |
| Componentes | Apariencia, variantes, estados y finalidad de los controles. |
| Interacción | Respuesta a las acciones, navegación, accesibilidad y adaptación. |

Los documentos contienen las definiciones necesarias para interpretar y aplicar el sistema. Los nombres de los tokens identifican funciones de diseño; no obligan a utilizar una tecnología concreta. Las decisiones abiertas se conservan con su contexto en el [registro de pendientes](../../pendientes/pendientes.md).

## 4. Identidad e iconografía

| Elemento | Criterio |
| --- | --- |
| Logotipo sobre blanco | Texto azul oscuro `#012051` e isotipo naranja `#FC5624`. |
| Versiones monocromáticas | Azul oscuro sobre fondo claro o blanco sobre fondo oscuro, con contraste suficiente. |
| Proporciones | Escalar uniformemente. Evitar deformaciones, recortes, efectos y superposición con otros elementos. No reconstruir las letras del logotipo con una fuente de interfaz. |
| Iconografía de marca | Recursos gráficos con predominio celeste y complemento azul oscuro. |
| Iconografía de controles | Iconos SVG de la familia Lucide: cuadrícula de 24 × 24, trazo habitual de 2 unidades y extremos redondeados. Mantener el mismo significado entre pantallas. |
| Tamaños de iconos | 16 px en botones y menús; 20 px en navegación; 24 px en encabezados. Ajustar el área interactiva sin depender únicamente del tamaño del dibujo. |
| Icono con texto | Tratar como decorativo cuando la etiqueta ya expresa la acción. |
| Botón de solo icono | Proporcionar un nombre accesible que describa su acción. |

## 5. Medidas compartidas

| Propiedad | Definición |
| --- | --- |
| Espaciado | Escala de 4 px como base; separaciones frecuentes de 8, 12, 16, 20, 24 y 32 px. |
| Radio base | 12 px. |
| Radio de campos y botones | 12 px. |
| Radio de tarjetas y diálogos | 1,4 veces el radio base: 16,8 px. |
| Sombra suave | Dos capas azul oscuro: desplazamiento (0, 1), desenfoque 2 y opacidad 4%; desplazamiento (0, 6), desenfoque 16, expansión −6 y opacidad 10%. |
| Sombra elevada | Dos capas azul oscuro: desplazamiento (0, 2), desenfoque 4 y opacidad 5%; desplazamiento (0, 14), desenfoque 32, expansión −12 y opacidad 20%. |
| Transición habitual | 150 ms para color, borde y sombra; respetar reducción de movimiento. |

Las medidas de sombras se expresan en píxeles. Las unidades de interfaz deben permitir escalado; las equivalencias de tamaño parten de una base de 16 px, salvo indicación distinta.

## 6. Mantenimiento

1. Definir los valores y comportamientos completos en estos documentos, sin delegarlos en archivos externos al repositorio.
2. Mantener alineados los colores, la tipografía, los componentes y las reglas de interacción cuando se valide un cambio.
3. Registrar las decisiones abiertas y su destino de aplicación en el archivo de pendientes.
4. Conservar los enlaces internos entre documentos para evitar definiciones duplicadas o contradictorias.
5. Validar la aplicación del sistema mediante revisión visual, teclado, adaptación y comprobación de estados.