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	Valores oficiales, tokens de interfaz, estados y contraste.
Tipografía	Familias tipográficas, jerarquías, legibilidad y formatos.
Componentes	Catálogo de elementos, variantes, medidas y estados.
Reglas de interacción	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.
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.

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.

---

Descargar Markdown original