doquiSistema de diseño · v0.1 · agosto 2026Identidad y sistema de diseño

doqui

Un PDF no es una historia clínica.Cada estudio llega como un papel escaneado, con su formato, sus abreviaturas y sus unidades. DOQUI lo lee, normaliza cada valor contra su rango de referencia y lo devuelve como una serie que se puede leer, filtrar, graficar y compartir con quien te atiende.
LABORATORIO CENTRAL — HEMOGRAMAInforme 4471-B · 14/07/2026HEMOGLOBINA ......... 13,8 g/dl↳ V.R. 12,0 – 16,0HEMATOCRITO ......... 41,2 %GLUCEMIA AYUNAS ..... 108 mg/dllo que sube la persona
arrow_forward
lo que devuelve DOQUI
01

Marca

El isotipo no ilustra la salud: es el dibujo más chico posible del producto. La cápsula es el rango de referencia; la línea que la atraviesa es tu valor. Nada más — el mismo objeto que después se repite en cada fila de la app. La letra vive en el logotipo, no en el símbolo: ahí la q se lleva el color.

Logotipo

doquiEl logotipo va siempre en minúscula. La q toma el color de marca: es el mismo gesto del isotipo dentro de la palabra. DOQUI en mayúscula se usa sólo en texto legal y en contratos, nunca como logo.

Reglas de uso

AireAlrededor del lockup queda libre, como mínimo, el alto de la cápsula. Nada entra en ese margen.Tamaño mínimo20 px de alto en pantalla, 6 mm impreso. Por debajo, la línea del marcador se cierra contra la cápsula.Versión de un colorCuando no hay color disponible, todo el isotipo va en tinta o en blanco. El marcador nunca queda sin trazo.Qué no se haceNo se rota, no se le agrega sombra ni degradé, no se lo apoya sobre una foto y no se mueve el marcador de su posición.02

Color

La paleta se ordena por una decisión clínica, no estética: en rango no es verde. Un valor normal se dibuja en tinta, como en el informe de papel. Sólo lo que se sale del intervalo recibe color. Eso deja todo el arco verde-cyan libre para la marca y elimina la pregunta «¿este verde es de DOQUI o es un resultado?».

Marca

Superficies y tinta

Semántica clínica

Contraste

Todo texto cumple AA sobre su fondo. El fósforo no se usa como texto sobre película: para eso está fósforo tinta, que llega a 6,6:1. Ningún estado se comunica sólo por color — siempre hay además una etiqueta escrita.03

Tipografía

Tres voces con tres trabajos distintos. La regla que no se negocia: todo valor clínico va en monoespaciada y con cifras tabulares, porque una columna de resultados tiene que alinearse por la coma.Aa Gg Qq 1234Familjen GroteskDisplay. Grotesca de formas cerradas y precisas: instrumento, no editorial. Títulos y logotipo.Aa Gg Qq 1234Public SansTexto e interfaz. Tipografía de salud pública, pensada para leerse chica y sin voz propia.Aa Gg Qq 1234IBM Plex MonoDato. Valores, unidades, rangos y fechas. Siempre con tabular-nums.

Escala

display-xl
Familjen 500doquidisplay-l
Familjen 500Tu historia, enteradisplay-m
Familjen 500Laboratorio completotitulo · 22px
Public Sans 600Hemograma del 14 de juliocuerpo-l · 17px
Public Sans 400Subí el estudio y en un minuto lo vas a ver desglosado, valor por valor.cuerpo · 15px
Public Sans 400Compartís el acceso con quien te atiende y lo cortás cuando querés.etiqueta · 12px
Public Sans 700Últimos estudiosdato · 17px
Plex Mono 50013,8 g/dL · 12,0 – 16,004

Forma y elevación

El radio codifica jerarquía: cuanto más grande la superficie, más redondo el borde. Y el documento se sostiene con filetes — la sombra aparece sólo cuando algo flota de verdad sobre el resto.

Radios

48142232full

Elevación

fileteelev-1elev-2elev-3filete para tarjetas en lista · elev-1 para la fila activa · elev-2 para menús y popovers · elev-3 sólo para el visor de estudio a pantalla completa.05

Iconografía

Material Symbols Rounded, una sola forma en toda la app, subseteada por nombre. El eje FILL es el eje de estado: pasá el puntero por un icono para verlo llenarse.sciencesciencebloodtypebloodtypemonitor_heartmonitor_heartradiologyradiologystethoscopestethoscopemedicationmedicationvaccinesvaccinesupload_fileupload_fileauto_awesomeauto_awesometimelinetimelinebar_chartbar_charttable_charttable_chartfilter_altfilter_altsharesharelocklockvisibilityvisibilitycalendar_monthcalendar_monthdescriptiondescriptioncheck_circlecheck_circlewarningwarning06

Componentes

Todo lo que sigue se construye sobre la misma pieza: el valor contra su rango. Cambia la escala, no el objeto.

range-bar · los cuatro estados

El último caso importa tanto como el resto: cuando el informe no trae rango, el componente lo dice. DOQUI nunca inventa una referencia.

study-card · un estudio en la historia

scienceLaboratorio completoCentro Médico Norte · 14 jul 202626 valores24 valores más Ver estudioarrow_outwardradiologyRadiografía de tóraxHospital Italiano · 2 ago 2026leyendoTodavía estamos leyendo el informe. Cuando termine vas a ver acá el resumen y las imágenes.Subido hace 40 segundos Ver originalarrow_outward

pipeline-track · qué está pasando con lo que subiste

Recibido0 sLeído8 sNormalizandoahoraEn tu historia—La espera se nombra por lo que hace el sistema, no por un porcentaje. Cada paso queda con el tiempo que tardó: es la prueba de que algo pasó.

trend-chart · el mismo valor en el tiempo

La banda es la misma que en range-bar, con la misma tinta: el ojo tiene que reconocer el mismo objeto en otra escala. Los puntos fuera de la banda se marcan; los de adentro, no.La banda es una escalera, no un rectángulo. El intervalo de referencia pertenece a cada medición, no al analito: cambia con el laboratorio, el reactivo y el equipo, y no se puede portar el ajeno sin verificarlo (CLSI EP28-A3c). Cuando cambia el laboratorio, la banda escalona y una línea de puntos marca dónde.

trend-chart · cuando la serie no es comparable

Sólo un puñado de analitos está estandarizado contra un método de referencia — glucosa, creatinina, colesterol, electrolitos, HbA1c. El resto se mide por inmunoensayo, donde cada plataforma usa anticuerpos distintos y el mismo suero puede diferir entre un 10 % y un 40 %. Un escalón puede ser el cambio de método, no el paciente, y el componente lo dice en vez de dibujar una tendencia que no existe.

role-card · las dos caras del producto

personPersonaDueña de la historiaSube estudios, arma sus vistas y decide quién entra. Todo lo suyo va en fósforo. Nunca ve jerga: ve «análisis de sangre», no «hemograma completo con fórmula».stethoscopeProfesionalInvitado, con permiso y con plazoEntra por un acceso que otorga la persona y que puede cortarse. Su interfaz va en índigo y es densa a propósito: tablas, series y unidades completas.07

Movimiento

Se anima el dato entrando en su lugar, nada más. Un marcador que viaja hasta su posición dice algo — dice de dónde viene el número. Un panel que rebota no dice nada. Todo respeta prefers-reduced-motion. Pasá el puntero por cada curva para verla correr.--ds-ease-estandar · 420 msEntrada de contenido, apertura de paneles, banda de referencia.--ds-ease-resorte · 720 msLlegada del marcador a su valor. La única curva con sobrepaso.--ds-ease-salida · 220 msSalida y descarte. Lo que se va, se va rápido.08

Voz

DOQUI escribe del lado de la persona. No traduce el sistema: nombra lo que ella controla. Y no interpreta un resultado — un valor fuera de rango se informa, nunca se diagnostica.check_circle
Tu glucemia está por encima del rango del laboratorio.Informa el hecho y dice de quién es el rango. No concluye nada.
error
¡Atención! Posible prediabetes detectada.Diagnostica. Eso no es trabajo de la app, y asusta sin motivo.
check_circle
No pudimos leer dos páginas del PDF. Subilas de nuevo o sacales una foto.Dice qué pasó y qué hacer. El error no pide disculpas: resuelve.
error
Ocurrió un error al procesar el documento (ERR_OCR_502).Nombra el sistema, no la situación. El código va al log, no a la pantalla.
check_circle
Todavía no subiste ningún estudio. Empezá por el último análisis que tengas.Una pantalla vacía es una invitación a hacer algo, no un cartel de ausencia.
error
No hay datos disponibles.Describe el estado de una tabla. No le sirve a nadie.
Un verbo, un nombre. Lo que el botón dice es lo que el aviso confirma: «Compartir» produce «Compartido». Nunca «Enviar» y después «Se compartió correctamente».Nunca dos veces el mismo trabajo. La etiqueta etiqueta, el ejemplo muestra, la ayuda ayuda. Si un texto hace dos cosas, sobra uno.doquiSistema de diseño v0.1 · tokens en tokens.css