VALAD

Sistema de diseño

Una sola fuente de tokens (assets/css/tokens.css) para la landing y la aplicación. Esta página usa los mismos estilos que la app: lo que se ve aquí es lo que se ve en consulta.

Color

Neutros fríos con leve matiz verde y un único acento petróleo. La escala de riesgo es semántica: solo aparece donde comunica riesgo clínico, nunca como decoración.

Escala de riesgo clínico

Tipografía

Geist para interfaz y titulares, Geist Mono para números de referencia, unidades y metadatos (ambas con licencia SIL Open Font). Cifras tabulares en todo resultado numérico.

display · 8442 mL/min
3xl · 58Cada número tiene una fuente
2xl · 36Enfermedad renal crónica
lg · 20Tratamiento según comorbilidades
base · 15Controlar TFGe y ACR 3 veces al año. Albuminuria presente: IECA o ARA II a dosis máxima tolerada.
mono · 12KDIGO 2024 · doi:10.1016/j.kint.2023.10.018

Forma y espacio

Controles con radio 9 px, paneles 14 px, contenedores grandes 20 px. La píldora se reserva para etiquetas de estado clínico. Espaciado en base 4.

5 · xs
9 · sm
14 · md
20 · lg
pill

Componentes

Botones, campos, etiquetas de estado y de evidencia, recuadros, tablas y el panel de resultado, tal como los renderiza la aplicación.

Riesgo bajo Moderado Alto Muy alto PreferidoOpciónPrecaución / ajustarEvitar / contraindicadoEspecialista [Evidencia][Inferencia][Especulación][No verificado]
Qué calcula: recuadro informativo estándar de cada módulo.
Alerta: contraindicaciones y banderas rojas.
Correcto: metas alcanzadas o conducta preferida.
Referencia: umbrales o tablas de una guía.

CalculadoraPatrón de herramienta: datos, resultado e interpretación

Datos básicos

Estado de error: valor fuera de rango.

Factores

TFGe CKD-EPI 2021
42
mL/min/1,73 m²
G3b A3 · riesgo muy alto
Conducta
  • IECA o ARA II a dosis máxima tolerada [Evidencia]
  • Remitir a Nefrología

Movimiento

El movimiento orienta y confirma, nunca decora. Solo se animan transform y opacity. Con movimiento reducido todo pasa a estado final inmediato.

Cambio de móduloEntrada con desplazamiento de 8 px. 420 ms · ease-out
Resultado actualizadoEl número cambiado sube y aparece. 420 ms · ease-out
PulsaciónEscala 0,96 a 0,98 al presionar. 90 ms
Hover y focoColor y borde. 150 ms
Menú lateral móvilHoja desde el borde con velo. 420 ms · ease-out
Landing: flujoAnclaje con ScrollTrigger y cambio de etapa por tramos. Solo escritorio.