Un solo lenguaje visual para web, aplicación y correos

Este sistema define los tokens, la tipografía, la iconografía y los componentes que comparten todas las superficies de PROMs AMECRA. Su objetivo es la consistencia: que la PWA, la app de escritorio, el portal del paciente, esta documentación y cada correo se vean como un mismo producto, sobrio y profesional.

Lockup institucional

El logotipo oficial de AMECRA acompaña siempre al nombre del producto. En espacios reducidos se usa solo la marca gráfica. El color institucional es el teal #0f766e.

Paleta semántica

El teal es el color de acción y de marca. Los neutros slate estructuran la interfaz. Los acentos clínicos (azul, violeta, ámbar) categorizan métricas. Los colores semánticos comunican estado.

Marca y acción

Neutros (slate)

Acentos clínicos y estado

Escala y familias

Inter para toda la interfaz y el cuerpo. Source Serif 4 opcional para titulares editoriales del sitio. Escala modular de tercera menor (1.20) sobre 16 px.

Set minimalista en SVG

Iconos de línea, trazo de 1.75, extremos redondeados, sin relleno. Heredan el color del texto con currentColor. Sin emojis: una sola familia, sobria, que escala de 16 a 24 px sin perder nitidez y funciona igual en la app y en los correos.

Bloques de interfaz

Botones

Tarjetas de métrica (KPI)

Insignias de estado

Etiquetas de cobertura PROM

Cada pregunta clínica indica a qué instrumento(s) alimenta. Las etiquetas en violeta marcan ítems compartidos por varios instrumentos.

Momentos longitudinales

Formularios y búsqueda

Los mismos tokens, también por email

Los correos transaccionales (invitación, verificación, alertas de seguridad) usan el mismo teal, la misma tipografía y el mismo tono. Por compatibilidad con clientes de correo se emplean estilos en línea y colores literales en lugar de variables, pero los valores son idénticos a los de este sistema.

Cómo se siente el producto