Saltar al contenido
m Beyond the Protocol · Design System v2

Un lenguaje, no una plantilla.

Cada componente pinta con tokens de rol y se remapea solo en claro, en noche y en banda oscura. Los colores los fija Ceci; aquí no se mueve ni un hex.

Color

La paleta no es democrática: crema en masa, berenjena en estructura, coral en gotas.

crema
berenjena
coral
#9d44ab · miriam
#e8d4ed · soft
#3a3340 · tinta
#c77dd2 · on-dark

Data-viz clínica — diverging berenjena↔coral (CVD-safe, sin rojo/verde). Solo datos sintéticos en público.

↑ el color nunca es la única señal: siempre icono + etiqueta + forma

El sistema no es la misión: es lo que deja que llegue entera.

Tipografía

Fraunces display, Hanken cuerpo, mono SOLO para datos y metadatos. Saltos de línea a mano.

Beyond the Protocol · especimen

Fraunces, la voz

El cuerpo va en Hanken Grotesk: cálida, legible, sin pose. La medida se limita a 65ch para que el ojo no se pierda. La tipografía trabaja; no posa.

1.247 personas alcanzadas · ejemplo sintético

Componentes

En contexto, no en matriz. Primario coral: 1 por vista. Foco visible al tabular. ≥44px.

Revisa el formato del correo
marcador · ejemplo etiqueta
NotaEl significado va por palabra, no por color de alarma.
AcciónFilete coral, calmado. Ningún icono-estrella (la estrella es marca, no estado).

Datos

Cifras tabulares alineadas a la derecha. Datos sintéticos (muro). Scroll enfocable por teclado.

Métricas del flujo de muestra (datos sintéticos)
Etapa del flujoGate de calidadValor
Preservación / QCDV20074%
Extracción / secuenciaciónProfundidad118×
HLA / expresión%rank0.47
PriorizaciónCandidatos23

Antes del protocolo

El mapa arranca aquí.

Presente

Solo el presente respira (detenible; respeta reduced-motion).

Más allá del protocolo

A donde va todo esto.

Bitácora · Lámina I

El cosmos, contenido

Los mismos componentes, remapeados por el modificador .oscuro. La noche no es un filtro: es un lugar diseñado, y el cielo solo vive aquí.

marcador · ejemplo (late solo al cargar)

Lámina I — Noche · la estrella orienta, no decora · #9d44ab → #c77dd2 on-dark