Sistema de diseño Caso Miriam .

Cómo usar este sistema.

Una sola fuente de verdad para diseñadores, redactores y devs. La voz Miriam no se inventa cada vez — se hereda. Antes de añadir un componente nuevo, busca el patrón aquí; si no está, llévalo a una sección existente antes de improvisar.

Reglas no negociables

Estas siete cosas son lo que mantiene unido el sistema. Si rompes una, rompes la marca.

1. Un acento por pieza. Violeta = identidad/Miriam. Coral = acción. Nunca los dos juntos protagonistas.
2. Berenjena #2D1B3D para texto y trazo. Negro puro nunca.
3. Fondo crema #FAF6F0, no blanco. El blanco quema en pantallas con brillo alto y rompe la calidez.
4. Fraunces para titulares y firma; JetBrains Mono para datos. Para texto largo, system-ui o Inter (sección 03) — nunca Fraunces a 14 px.
5. Sin gradientes, sin glassmorphism, sin emojis. La textura viene de la tinta y el grano del papel.
6. Datos siempre con cifra absoluta (Ki67 60%, FGFR1 ×13). Nunca redondear, nunca "alto".
7. WCAG 2.2 AA mínimo. Toque mínimo 44 px. Foco visible. Sin animación que pase de 200 ms en interfaz.

Cuándo este sistema NO aplica

Documentos médicos oficiales (informes, consentimientos), correspondencia legal, papelería hospitalaria. Esos contextos tienen sus propios sistemas — no los toquemos. Aquí solo cubrimos lo que el equipo de helpmiriam.com produce: web, redes, prensa, dossieres a especialistas, materiales de campaña.

Versión. v1.1 · mayo 2026. Si añades una expresión, plantilla, componente o regla nueva, anótala con fecha al final del archivo y avisa al equipo. El sistema se afina con el uso.

Idea central.

Datos científicos rigurosos como base. Capa de humanidad para conectar. Acción al final del recorrido.

Ratio ciencia / humanidad por sección

Antes de escribir o diseñar una pieza, pregunta: ¿qué ratio pide esta superficie y a qué acción lleva? Las decisiones de tipografía, color y tono salen de ahí.

Color.

Cinco colores totales. Violeta = identidad. Coral = acción. Esa distinción es lo que hace que el sistema funcione.

Paleta principal

Superficie auxiliar

Reglas críticas

Variables CSS

/* Heredadas del paraguas Beyond the Protocol */
--color-bg:        #FAF6F0;
--color-bg-card:   #F5EFE6;
--color-text:      #2D1B3D;
--color-text-soft: #3A3340;
--color-cta:       #FF6B47;
--color-cta-hover: #E5573A;

/* Específicas del Caso Miriam */
--color-miriam:      #A855B5;
--color-miriam-soft: #E8D4ED;

Notas modernas (2026)

• Para opacidades usa color-mix(in oklab, var(--color-miriam) 20%, transparent) en lugar de hex con alpha. Mejor mezcla perceptual y respeta el token original.
• Si añades dark mode, deriva los tokens con @media (prefers-color-scheme: dark): berenjena pasa a fondo, crema a texto. Violeta firma se mantiene; coral sube a #FF8266 para contraste AA.
• No uses oklch para definir los tokens canónicos — los hex actuales son la fuente de verdad y se replican en Figma sin pérdida. Reserva oklch para mezclas e interpolaciones en código.

Combinaciones permitidas

Reglas rápidas para números sobre tarjetas, badges y datos clínicos. Solo estos pares cumplen contraste AA y respetan la jerarquía del sistema.

Combinaciones prohibidas

• Violeta firma sobre berenjena. Contraste insuficiente — el dato se apaga. Si necesitas violeta sobre fondo oscuro, usa --color-miriam-soft (#E8D4ED).
• Coral sobre violeta firma o coral-soft. Vibra y cansa la vista. El coral solo respira sobre crema o berenjena.
• Coral sobre coral suave (texto coral en card de fondo coral 10%). Funciona como acento de marca pero no como dato — contraste por debajo de AA. Si quieres ese ambiente, usa berenjena para el número.
• Dos acentos en la misma tarjeta. Violeta y coral compiten. Una tarjeta = una historia = un acento.

Tarjetas con texto — combinaciones probadas

Lo mismo aplicado a cards con titular + cuerpo + etiqueta. Cada tarjeta lleva en su pie el ratio de contraste real (calculado WCAG 2.2). Las que están aquí pasan AA en el texto principal y AAA en titulares grandes — son las que puedes usar sin pensar.

Lo que NO se debe hacer — antiejemplos

Mismas cards, combinaciones rotas. Si te sale alguna de estas, descártala. El ratio en el pie te dice por qué.

Cheat sheet — qué pones encima de qué

Regla de los tres colores por tarjeta. Cuenta los colores que ves en una card antes de aprobarla: fondo + texto + acento ≤ 3. Si pasa de 3 (eyebrow violeta + titular berenjena + body berenjena soft + botón coral + borde violeta-soft = 5), simplifica. La emoción la lleva la jerarquía tipográfica, no la suma de colores.

Tipografía.

Tres roles. Fraunces para titulares editoriales, system sans para body y UI, JetBrains Mono para datos científicos.

Por qué esta combinación

Fraunces da aire editorial / artículo de ciencia. System sans para body es eficiente: carga instantánea, nativa en cualquier dispositivo. JetBrains Mono identifica a Miriam al instante: cualquier dato científico aparece monoespaciado, evocando consola de programadora / cuaderno de laboratorio.

Espaciado & radios.

Sistema en múltiplos de 8. Mucho whitespace: la página respira. Densidad de información clínica con aire visual editorial.

Escala (×8)

Radios

Lectura

Ancho de columna óptimo: 65–75ch (~65–75 caracteres por línea para texto corrido).

Iconografía.

Heredados de Beyond the Protocol — la marca paraguas. Vocabulario fijo: 1024×1024, formas chunky de relleno (no outline), berenjena #2D1B3D como masa principal y coral #FF6B47 como único acento por icono. En Miriam el acento alterna coral (acción) o violeta #A855B5 (firma).

Set Miriam — set operativo

Disclaimer. Este set lo monté yo rápido como SVGs vectoriales para tener algo funcional en la web mientras se trabaja la pieza definitiva. No son la versión final. Lo correcto sería encargar o diseñar con IA un set propio que parta del lenguaje del set Beyond the Protocol que listo más abajo — mismo trazo a mano, misma masa de tinta, misma textura de papel — pero con el inventario y los conceptos específicos del Caso Miriam (caso, equipo, historia, donar…). Hasta que exista, estos cumplen.

Diez iconos que mapean uno a uno con las secciones del sitio. Mantienen el ADN BTP en lo conceptual (cuerpos rellenos, un solo acento por pieza) aunque la línea aún es vectorial limpia, no la tinta a mano del set original.

caso

equipo

historia

ia

datos

ayudar

donar

compartir

prensa

contacto

Mapa de uso. caso, equipo, historia, ia, datos, prensa usan acento violeta firma (identidad, contenido). ayudar, donar, compartir, contacto usan acento coral (acción, conversión). Formato SVG vectorial, escalable de 24 a 256 px sin pérdida.

Set Beyond the Protocol — linaje

El set original de la marca paraguas. No es inventario activo del caso — se incluye solo como referencia de la sintaxis visual de la que hereda el set Caso Miriam (mismo trazo, mismas masas, mismo uso de un acento). Si necesitas un icono que no existe en el set operativo, amplíalo siguiendo este lenguaje, no copiando del BTP.

comunidad

anuncios

general · logo BTP

tratamiento

ia

web

onco360

fundadoras

Reglas para iconos de Miriam

• Mismo lenguaje BTP: formas geométricas chunky de relleno, no outline. Bordes redondeados. Sin trama, sin sombra.
• Berenjena #2D1B3D como masa principal sobre crema #FAF6F0. Un solo acento de color por icono.
• Acento coral = acción (donar, compartir, contactar). Acento violeta = identidad/firma del caso.
• Variante invertida disponible: berenjena de fondo, formas en crema, acento coral. Solo para hero / favicon / RRSS.
• Composición centrada, padding interno generoso (~20% por lado). El icono respira.

Sin set de iconos lineales propios. Miriam usa solo el set BTP (sección anterior) — tinta a mano, no SVG geométrico. Si una sección parece pedir un icono y no existe en BTP, hay tres salidas válidas, en orden: (1) replantear la sección sin icono — la mayoría de las veces, sobra; (2) usar un dato tipográfico grande en lugar del icono; (3) encargar la pieza nueva al ilustrador BTP o generarla con la plantilla D (sec. 12). Nunca reemplazar con Heroicons / Lucide / Material / vector lineal genérico — es justo el slop que la sec. 12 prohíbe.

Extender el set — partir de un icono BTP existente

Cuando hace falta un icono nuevo (concepto que no está cubierto), generarlo desde cero con un prompt de texto plano siempre da una pieza con línea distinta — no encaja en el set y se nota. La forma fiable de extenderlo es con una herramienta que acepte image reference: pasarle 1–3 iconos BTP existentes como referencia plástica, no como inspiración temática. Así el modelo replica grosor de línea, sombreado por hatching y textura del papel.

Workflow recomendado

1. Elige 2–3 iconos BTP existentes con la línea más cercana al concepto que quieres generar (no por tema, por peso de línea y densidad de hatching).
2. Súbelos como image reference en la herramienta. En Midjourney: --sref [url1] [url2] [url3] --sw 800 (style weight alto).
3. Prompt de texto: solo el concepto concreto + plantilla D (sec. 12). Nada de adjetivos plásticos — el estilo lo lleva la referencia, no el texto.
4. Genera 4 variantes. Si ninguna encaja al ponerla junto a un BTP existente, descarta todo y reformula — no escojas "la menos mala".
5. Antes de aceptar la pieza nueva, pásala por el test de coherencia (sec. 12): ponla al lado de 3 BTP existentes. Si parece de otro proyecto, fuera.

Honestidad de proceso. Estas herramientas evolucionan rápido — lo que hoy funciona con --sref mañana puede tener un endpoint mejor. La regla no es "usa Midjourney", es: nunca generes una pieza sin pasarle ejemplos del set como referencia visual. La consistencia plástica es el activo del caso — si se rompe, se rompe la voz visual entera.

Plantilla SVG base

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
  <rect width="1024" height="1024" fill="#FAF6F0"/>
  <g fill="none" stroke="#2D1B3D" stroke-width="48"
     stroke-linecap="round" stroke-linejoin="round">
    <!-- contenido del icono -->
    <!-- acento: violeta #A855B5 (firma) o coral #FF6B47 (acción) -->
  </g>
</svg>

Avatar.

El avatar a tinta — pelo violeta rizado, gafas redondas, anotaciones científicas manuscritas — es el activo emocional del caso. Vive en RRSS, campaña y secciones narrativas de la web. Esta es la pieza de referencia canónica.

Reglas para generar nuevas piezas

• Pelo violeta rizado abundante + gafas redondas + sonrisa suave + pecas + camiseta negra sólida — siempre.
• Solo el pelo lleva color (violeta Miriam #A855B5). Todo lo demás es tinta negra sobre crema.
• Trazo a pluma, suelto, ligeramente imperfecto. Estilo editorial / New Yorker. No comic, no anime, no realista.
• Las anotaciones científicas son siempre handwritten en mayúsculas, en negro tinta, con flechas curvas finas apuntando a elementos genómicos / celulares.
• Las manos sostienen o señalan elementos científicos (hélice de DNA, cluster celular, micrografía). Composición busto centrado.
• Fondo crema con grano sutil — nunca blanco puro, nunca degradados.

Referencia canónica. Para nuevas piezas, mantén el estilo: tinta + pelo violeta + anotaciones manuscritas con flechas curvas. Generar con Midjourney/Procreate manteniendo el lenguaje visual exacto.

Favicon.

La marca a 16 px. Una m minúscula en cursiva Fraunces sobre violeta firma, rodeada de una constelación mínima de destellos. Es la única superficie del sistema donde la inicial sustituye al retrato — a ese tamaño, la ilustración se pierde.

favicon.svg · principal

16

32

64

180

Pruebas de tamaño

Construcción

• Lienzo 64 × 64 con radio 14 / 64 ≈ 22% (iOS rounded square que no se recorta en Android).
• Fondo berenjena #2D1B3D. Nunca crema — a 16 px se pierde el contorno.
• Letra m minúscula itálica Fraunces 600, color crema #FAF6F0, font-size 40, centrada.
• Decoración: 3 estrellas + 2 puntos. Dos estrellas violeta firma, una crema, dos puntos crema en opacidad 0.5–0.7.
• Las estrellas no tocan el bounding box de la m — se distribuyen en las esquinas y el aire libre lateral.

Por qué m minúscula

La web usa exclusivamente minúsculas en su marca verbal: helpmiriam.com, @miriamgonp, los titulares ("ayudar a miriam"). Mayúscula M sería logo corporativo; minúscula es firma personal. La cursiva refuerza la idea de "escrito a mano".

Por qué constelación

El caso entero descansa entre dos polos — la ciencia (FGFR1, Ki67, biopsias) y la persona (sus rizos, sus gatos, su humor). El favicon necesitaba el guiño personal sin caer en literalidad. Una constelación mínima resuelve ambas: cosmos = esperanza sin ser cursi, y los destellos violeta cuentan que esto va de su universo, no del logo de una ONG.

Set

Snippet HTML

<!-- En el <head> de cada página -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-180.png">
<meta name="theme-color" content="#A855B5">

Cuando regenerar. Si cambias la m, el peso de Fraunces o la disposición de las estrellas en el SVG, regenera los tres PNG desde el SVG actualizado. PNG y SVG desincronizados es el bug más visible del sistema — el favicon parece cambiar de color al cambiar de tamaño.

Botones.

Tres niveles. Primario coral solo para acciones (donar, apoyar). Secundario y ghost para todo lo demás.

Cifras & badges.

Una cifra firma en violeta. Una cifra de campaña en coral. El resto en berenjena. Nunca más de un color destacado por bloque.

Snippet

.badge-genomic {
  background: #E8D4ED;
  color:      #A855B5;
  border-radius: 9999px;
  padding: 4px 12px;
  font-family: JetBrains Mono, monospace;
  font-size: 14px; font-weight: 600;
}

Cards & tablas.

Cards sobre crema profunda, radio 16 px. Tablas científicas limpias, sin filas alternas, marcadores en violeta + JetBrains Mono.

Voz por superficie.

Miriam usa dos voces distintas según el canal. Es un punto clave del sistema: la web es periodística (3ª persona), las RRSS son de Miriam (1ª persona).

Lo que sí, lo que no.

Honestidad sin paternalismos. Rigor científico real. Calidez sin victimismo. Comunidad sin individualismo. Transparencia sobre fracasos clínicos.

Hablar con IAs.

Buena parte de los textos, mocks y código del caso pasarán por una IA. Si le hablas mal, te devuelve slop: gradientes, emojis, copys vacíos, "empoderamiento", iconos genéricos. Esta sección es el manual para que cualquier IA — Claude, GPT, asistente de diseño — escriba y diseñe como Miriam, no como un blog corporativo.

El prompt base — pega esto siempre primero

Toda interacción empieza estableciendo el contexto. Sin esto, la IA defaultea a tono motivacional genérico de ONG.

Contexto: caso Miriam González — paciente real con cáncer de mama metastásico
refractario y un perfil molecular único (FGFR1 ×13, BC-NED). Web personal,
no es ONG ni campaña corporativa. Pide ayuda concreta para acceder a un
tratamiento experimental. Audiencia: lectores adultos, posiblemente
pacientes oncológicos o familiares.

Voz: directa, científica, primera persona singular cuando habla Miriam.
       Plural ("nosotros") solo cuando habla el equipo. Nunca corporativo.
Registro: ES neutro peninsular. Tuteo. Sin diminutivos. Sin exclamaciones.
Tono: lúcido, sin autocompasión, sin victimismo. La urgencia se nota,
       no se grita.
Prohibido: "luchadora", "guerrera", "guerrera contra el cáncer",
            "valiente", "inspiración", "viaje", "empoderamiento",
            "juntos podemos", emojis, exclamaciones.
Permitido: cifras crudas, términos clínicos exactos (FGFR1, Ki67,
            BC-NED), fechas concretas, nombres propios.

Reglas duras de léxico

Reglas duras de visual

Cuando le pidas a la IA que genere mocks, código HTML/CSS o variantes de diseño, añade explícitamente estas restricciones — son las que evitan los reflejos de "diseño bonito" tipo SaaS.

Paleta: #FAF6F0 crema (fondo), #2D1B3D berenjena (texto),
        #A855B5 violeta (firma — solo para "Miriam"),
        #FF6B47 coral (CTA — solo botones de donar),
        #E8D4ED violeta soft (badges genómicos).
        // No inventar colores. No degradados. No glassmorphism.

Tipografía: Fraunces (display, italic para énfasis emocional),
            Inter (cuerpo), JetBrains Mono (datos clínicos, eyebrows).
            // Nunca Roboto, nunca system-ui en titulares.

Layout: editorial, no SaaS. Márgenes amplios. Una idea por sección.
        Datos clínicos como cifras grandes (display 80–120px), no como
        tarjetas de dashboard. Nada de "stats grid 4 columnas con icono".

Iconografía: ilustración a tinta tipo "Beyond the Protocol".
             Nunca iconos lineales genéricos (Heroicons, Lucide).
             Si no hay icono real disponible, usar un placeholder
             — mejor vacío que stock.

Plantillas de prompt — copiar & pegar

A · Escribir un texto nuevo

[prompt base]

Necesito el copy para [sección X].
Objetivo concreto: [qué tiene que hacer el lector después de leer].
Longitud: [N caracteres / N párrafos].
Quien habla: [Miriam / equipo / tercera persona del informe].

Devuelve 3 versiones — una más clínica, una más íntima, una intermedia.
Sin titular sensacionalista. Sin call-to-action explícito al final
(eso lo lleva el botón).

B · Generar un componente / mock

[prompt base] + [reglas duras de visual]

Diseña [componente X] para la página [Y].
Función: [qué hace el usuario aquí].
Datos reales que debe mostrar: [pegar cifras/textos del caso].

Restricciones:
— Mobile-first, hit-targets ≥ 44px.
— Foco visible coral 2px, offset 3px.
— Texto base 17px, line-height 1.55.
— Si propones animación, debe respetar prefers-reduced-motion.
— Si propones un icono, marca su origen (BTP, placeholder, etc).

C · Revisar / corregir un texto existente

[prompt base]

Revisa este texto buscando:
1. Slop oncológico ("luchadora", "viaje", "valiente"…).
2. Frases vacías que se podrían borrar sin perder información.
3. Cifras o términos clínicos que se pueden hacer más concretos.
4. Adjetivos sentimentales que podrían sustituirse por hechos.

Devuelve el texto corregido + una lista de cambios y por qué.
No reescribas la voz — corrige sin reformular.

Antipatrones — qué hace una IA cuando no le hablas bien

Test de los 3 segundos

Antes de aceptar lo que te devuelva la IA, pásalo por estos tres filtros:

1. ¿Podría aparecer en cualquier web de cualquier paciente? Si la respuesta es sí, no es del caso. Pídele especificidad — un dato, un nombre, una fecha.
2. ¿Qué dato concreto se llevaría el lector? Si no sabes responderlo en una frase, sobra texto.
3. ¿Lo firmaría Miriam? Si no lo diría ella en persona, lo elimina o lo reescribe en su voz.

Regla de oro. Una IA es buena reescribiendo dentro de un sistema, mala inventándolo. Tu trabajo no es delegar la decisión — es darle el sistema completo y validar que no se desvíe.

Generar imágenes — el lenguaje BTP

Toda la iconografía e ilustración del caso vive en un único lenguaje visual: "Beyond the Protocol" — tinta negra a mano alzada sobre crema, con un único acento de color (violeta Miriam o coral) por pieza. Si encargas a una IA generativa una imagen, este es el ADN que tienes que describir. Sin esto, defaultea a flat illustration tipo Notion / Linear / SaaS — limpio, vacío, intercambiable.

Idioma del prompt — regla práctica. Plantillas A, B, C (texto y mocks de UI) → en español. El modelo se queda en "modo español" y la voz Miriam sale natural; en inglés se cuelan anglicismos prohibidos. Plantillas D, E, F (generación de imagen — Midjourney, DALL-E, Flux, Stable Diffusion) → en inglés. El vocabulario plástico ("cross-hatching", "fine-tip ink", "warm cream paper grain") tiene mejor fidelidad. En español la calidad cae notablemente.

ADN visual — pegar en cada prompt

// Identidad gráfica común a TODA la iconografía e ilustración
style: hand-drawn ink illustration, fine-tip pen on cream paper.
line: black ink, varied weight (0.5–2pt), confident strokes,
      visible imperfection. Not vector-clean. Not symmetrical.
shading: cross-hatching for shadows, never gradients.
         Dot stippling for soft volume.
paper: warm cream #FAF6F0 background, slightly off-white.
       Subtle paper grain visible. No drop shadows.
color: monochrome black ink + ONE accent per piece —
       #A855B5 violet (concept of Miriam, the patient, identity),
       #FF6B47 coral (action, urgency, donate, click),
       never both in same piece, never any other accent.
composition: a single object/scene centered with breathing room.
             Annotation labels in handwritten cursive allowed
             (English or Spanish), connected by thin arrow lines.
no: gradients, glassmorphism, neon, isometric perspective,
    flat 2D vector "corporate Memphis" people, emoji, 3D render,
    photorealism, stock-illustration style.

Plantilla D · Icono individual

Para iconos puntuales — dato clínico, sección de la web, badge. Salida: PNG transparente o SVG monocromo. Prompt en inglés.

[visual DNA block above]

Generate ONE icon depicting: [concrete concept, e.g. "tumor
tissue sample on a biopsy slide"].
Framing: square, object centered, 30% inner padding.
Output: 512×512 px on cream background #FAF6F0.

Constraints:
— Black ink only. No color accent (accent is added in CSS).
— Recognizable at 32×32 px. Detail reduced to the minimum needed.
— Optional small handwritten label naming the concept.
— If the concept is abstract (e.g. "hope"), reject and ask for a concrete one.

Return 4 variants with distinct compositions — not 4 cosmetic
versions of the same idea.

Plantilla E · Ilustración de sección

Para piezas grandes que acompañan un titular — hero, separadores, openers de página. Más densas, con anotaciones, narrativas. Prompt en inglés.

[visual DNA block above]

Generate an illustration for: [describe the scene —
"a microscope with a tissue sample labeled FGFR1, handwritten
annotations around it explaining ×13 amplification"].
Framing: 3:2 horizontal or 4:5 vertical depending on use.
Output: 2000 px long edge, cream background #FAF6F0.

Allowed in this format:
— Handwritten annotations with thin arrows pointing to parts.
— Color accent: ONE subtle area in violet #A855B5 OR coral #FF6B47.
— Small diluted watercolor / wash patches if they add texture.
— Maximum 2–3 elements in the scene. Do not crowd.

NOT allowed:
— Stylized "vector flat people". If a human figure appears,
  it must follow the team-portraits style (ink + hatching,
  identifiable face, not generic).
— Any decorative element without narrative function.

Plantilla F · Retrato de persona

Para añadir un nuevo miembro al equipo o representar un colaborador externo. Coherencia con el set existente es crítica. Prompt en inglés.

[visual DNA block above]

Editorial portrait of [name, role, 2–3 key physical traits —
"Dr. Suárez, oncologist, 50s, round glasses, short grey hair, white coat"].

Framing: 1:1 square, bust shot, looking at camera or slightly off.
Background: flat cream #FAF6F0. No context, no objects behind.

Style (aligned with existing team set):
— Black ink, parallel-hatching shading.
— Identifiable, specific face — not "a type of person", THIS person.
— One subtle color patch somewhere (hair streak, accessory, shirt
  collar) — violet #A855B5 if patient/family,
  coral #FF6B47 if medical/operations team.
— Optional small handwritten role label below the portrait.

Mandatory reference: see existing portraits of Miriam, Paola, Víctor,
Alejandro, Ceci, Alby, Alba. Same level of detail. Same line work.

Cuándo NO generar — pedir o dibujar a mano

Test de coherencia. Pon la imagen nueva al lado de un icono BTP existente o un retrato del equipo. Si parece de otro proyecto — descartar. El sistema solo funciona si todas las piezas se reconocen como hermanas.

Accesibilidad & neurodivergencia.

Una paciente oncológica leyendo su web bajo el efecto de quimioterapia. Una madre con TDAH escaneando para decidir si dona. Un revisor con baja visión. Un lector con dislexia. Todos son nuestra audiencia real. Estas reglas son obligatorias, no opcionales — y la mayoría hacen mejor el diseño para todo el mundo.

Principios — neurodivergencia friendly

Reglas WCAG 2.2 AA — obligatorias

• Contraste ≥ 4.5:1 para texto, ≥ 3:1 para texto grande (≥24 px) y elementos UI. Berenjena #2D1B3D sobre crema #FAF6F0 = 14.8:1 ✓.
• Tamaño base 16 px mínimo; 17 px en cuerpo de la landing. Nunca por debajo de 14 px (badges, captions). El usuario debe poder hacer zoom hasta 200% sin perder contenido.
• Foco visible siempre: outline 2 px coral con offset 3 px en cualquier elemento interactivo. Nunca outline:none sin reemplazo.
• Áreas táctiles ≥ 44×44 px. Botones, links, inputs. Móvil incluido.
• Color nunca es la única señal. Si una cifra es positiva, además de violeta lleva un símbolo o etiqueta. Daltónicos incluidos.
• Skip link al inicio de cada página: "Saltar al contenido". Visible al hacer Tab.
• HTML semántico: <main>, <nav>, <section aria-labelledby>. Los lectores de pantalla son ciudadanos de primera.
• Imágenes con alt descriptivo: el avatar de Paola no es "imagen 1", es "Paola — investigadora molecular, sosteniendo viales con DNA y Cas9".
• Cifras con contexto leíble: "FGFR1 ×13" se lee como "FGFR1 amplificado trece veces". Añadir aria-label donde haga falta.

Lectura — dislexia & baja visión

• Línea de 65–75 caracteres. Nada de medidas anchas.
• Interlineado 1.55–1.65 en cuerpo. Espacio entre letras +0.005em.
• Sin justificar. Solo alineación a izquierda.
• Listas con bullets, no comas concatenadas. Cada idea es su propia línea.
• Negrita selectiva — 1–2 conceptos por párrafo. Nunca subrayar lo que no es link.

Para pacientes oncológicos — chemo brain

Quimioterapia + radio + ansiedad reducen capacidad atencional y memoria de trabajo. Esta web la lee Miriam y otras pacientes en su misma situación. Diseñar para ese estado no es opcional.

• Información crítica nunca depende de recordar lo leído antes. Cada sección es autosuficiente.
• Acción principal repetida en hero, en sección de donar, en footer. Tres oportunidades, mismo botón.
• Resúmenes al inicio. "TL;DR científico" antes de detalles moleculares.
• Glosario de términos al alcance — hover/tap revela definición sin sacar al usuario de la página.
• Idioma simple para datos clínicos. La complejidad va en notas a pie, no en titulares.

Reduced motion — snippet obligatorio

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Checklist de revisión — antes de publicar

Regla de oro. Si una decisión de diseño solo se sostiene cuando el usuario está al 100%, no sirve. Miriam se diseña para el peor día — no para el mejor.

Repositorio.

Todo el caso vive en un único repositorio público. Esta guía de estilo, la web, los mocks, los textos del informe AP, los retratos del equipo, los prompts de IA. Si trabajas en el caso — diseño, copy, código, traducción — empiezas clonando esto. Si quieres entender cómo está hecho, leyendo esto. Si quieres aportar, abriendo un issue o un PR aquí.

Qué hay dentro

Cómo trabajamos

1. main es siempre la versión publicada. Nada se mergea sin revisión.
2. Cualquier cambio — texto, mock, ilustración — entra por pull request. Aunque seas familia. Aunque sea una coma. Da trazabilidad.
3. Si dudas si un cambio se sale del sistema — abre un issue antes de empezar. Mejor discutir 5 minutos que rehacer 3 horas.
4. Los textos clínicos los firma siempre Paola antes de publicarse. Sin excepción.
5. Los textos en primera persona los firma siempre Miriam. Si Miriam no puede revisarlos ese día, esperan.

Para colaboradores nuevos

Tres pasos antes de tocar nada:

1. Lee secciones 00 → 11 de este documento. En orden. Tarda 25 minutos.
2. Lee la sección 12 (Hablar con IAs) aunque no vayas a usar IA — describe los antipatrones que también aparecen escribiendo a mano.
3. Mira el set BTP (sección 09) hasta poder reconocer el estilo a primera vista. Si propones una imagen nueva y no encaja con el set, alguien lo notará — mejor que lo notes tú primero.

Una nota sobre el repo público. El historial clínico privado no entra aquí — solo lo que ya es público en la web. Datos médicos identificables, conversaciones con el equipo médico, informes sin redactar: en almacenamiento privado aparte. Si dudas si algo puede subirse — no lo subas y pregunta.

Marca & dominio.

Tres capas, tres usos. Miriam es el nombre del proyecto y del sistema. helpmiriam.com es el dominio funcional — el destino de cualquier CTA. Beyond the Protocol es la marca paraguas que firma todo. Si las separas bien, no se pisan.

Wordmark — cómo se escribe Miriam

Una sola forma canónica. No hay logo gráfico — la firma es tipográfica.

• Tipografía: Fraunces 500 (Display medium). Nunca otra fuente.
• Punto final violeta: . en color firma #A855B5. Es el único elemento gráfico permitido.
• Tamaño mínimo: 24 px. Por debajo el punto se pierde.
• Variante en oscuro: texto crema #FAF6F0 + punto violeta-soft #E8D4ED (no firma — pierde contraste).
• No: outline, mayúsculas, expansión letterspacing, italic, color en la palabra.

Cómo se cita en cada superficie

Regla. Si dudas si algo es marca o dominio, pregúntate: ¿se hace clic aquí? Si sí, es helpmiriam.com. Si no, es Miriam.

Fotografía.

La ilustración (BTP) construye el tono editorial. La foto construye la realidad. Convive sin pisarse si sigues estas reglas — y se rompe rápido si las olvidas. Nunca foto sintética / generada por IA: el caso vive de su veracidad.

Qué tipo de foto entra y qué no

Tratamiento

• Color: corregido para temperatura cálida (~5200K). Saturación normal — nunca subida. Negros no aplastados.
• Crop: 4:5 vertical para retratos individuales, 3:2 horizontal para escena, 1:1 para grids RRSS. Mantener crops consistentes dentro de una misma página.
• Borde: border-radius: 12px en web (igual que cards). En prensa / impreso, sin radio.
• Sin texto encima: los retratos respiran solos. Si necesitas titular junto a foto, déjalo en una columna adyacente, no superpuesto.
• Crédito: pie pequeño (12 px, mono, 60% opacidad) con el fotógrafo y la fecha. Excepción: fotos personales sin autoría profesional → "Familia González · 2026".

Foto + ilustración convivencia

Foto y BTP nunca se mezclan en la misma pieza. Foto manda en hero, retratos del equipo, eventos. Ilustración manda en iconos, openers de sección, badges. La regla: si en una sección aparece foto, los iconos de esa sección son tipográficos o invisibles — no compiten.

Test rápido. Pon la foto en blanco y negro mentalmente: ¿sigue funcionando la composición? Si la foto solo se sostiene gracias al color saturado o al filtro, no es del sistema.

Estados de UI.

Lo que ve el usuario cuando algo pasa: un input con error, una donación procesándose, una lista vacía. Cada estado tiene una respuesta predefinida — para que ningún dev tenga que improvisar a las 2am.

Inputs — formulario de donación

Verde #1F8A5B y rojo error #C2410C son los únicos colores fuera de paleta permitidos, y solo en estados de validación. Nunca en marketing, hero, copy editorial. El sistema base sigue siendo de 5 colores.

Loading — botón en proceso

• Loading: spinner crema sobre coral, cursor wait, copy "Procesando…" — nunca "Cargando" abstracto.
• Disabled: berenjena al 15% sobre fondo, texto al 50%. El botón sigue legible pero no clickable.
• Tiempo máximo antes de mostrar feedback alternativo: 4 segundos. Si pasa, "Tarda más de lo normal — no cierres la pestaña."

Empty states

• Empty state nunca está vacío de verdad — siempre da una salida (suscribirse, volver, contactar).
• Tono editorial, no de error: "Aún sin novedades", no "No hay datos".
• Sin ilustración. La forma del bloque ya comunica vacío — añadir un icono lo trivializa.

Mensajes globales — toast / banner

Press kit.

Lo que entregas a un periodista, una marca colaboradora o un médico que pide materiales. Una sola página, descargable, siempre con las cifras actualizadas. Si tienes que improvisar lo que mandas, ya has perdido al periodista.

Bio de Miriam — tres versiones

Cifras clave actualizadas

Mantener actualizadas. Cualquier cifra que aparezca en prensa pero no aquí, no se ha cruzado por el equipo. Estas son la fuente única.

Assets descargables

• Headshot oficial de Miriam — 4:5, 2000 px, color y B/N. (carpeta /press/portraits/)
• Wordmark Miriam. — SVG + PNG fondo crema y berenjena. (/press/wordmark/)
• Logos del equipo — Beyond the Protocol, hospitales colaboradores (con permiso). (/press/partners/)
• Hoja informativa clínica — PDF de 2 páginas con el perfil molecular explicado para no especialistas. (/press/clinical-brief.pdf)
• Cifras en SVG/PNG — versiones de los datos clave listas para incrustar en piezas de prensa.

Contacto de prensa

Plantillas de mensaje.

Las que vas a copiar y pegar durante meses. Cubren las situaciones más frecuentes: agradecer una donación, anunciar un hito, contactar a un especialista nuevo, postear un avance. La voz ya está fijada — aquí solo cambian los datos concretos.

A · Agradecimiento tras donación

Email automático tras pasarela. Voz: Miriam, primera persona singular. Sin urgencia, sin pedir más.

Asunto: Gracias, [nombre].

[Nombre]:

Acabo de ver tu donación de [cantidad] €. Te lo digo en serio:
no es una respuesta automática, lo escribo yo desde casa.

Cada euro entra en una cuenta auditada que verás reflejada en
helpmiriam.com → Transparencia. Cuando alcancemos el primer
hito (80.000 €) te avisaré por aquí con lo que hayamos podido
hacer con él.

Si quieres saber algo concreto del caso, responde a este email
sin más. Lo leo yo.

Gracias.
Miriam.

B · Anuncio de hito alcanzado · Instagram + GoFundMe

Voz: nosotros plural (es logro colectivo). Sin emoji. Sin "milagro".

Post / update:

Hemos llegado a los 80.000 €.

1.247 personas han donado. Es la cifra más concreta que puedo
darte hoy. Con ese dinero pagamos:

— La siguiente prueba molecular en Vall d'Hebron (32.000 €)
— La consulta internacional con [centro] (18.000 €)
— Reserva para la primera dosis del tratamiento (30.000 €)

El plazo de la ventana clínica sigue siendo de seis semanas.
La siguiente meta es 130.000 € — desglose detallado en
helpmiriam.com.

Gracias por estar aquí.

C · Contacto a especialista nuevo

Email frío a oncólogo / investigador. Voz: equipo en plural, registro clínico, sin súplica.

Asunto: Caso refractario FGFR1 ×13 / BC-NED — consulta posible

Dr./Dra. [apellido]:

Le escribimos desde el equipo clínico que sigue a Miriam González,
paciente con cáncer de mama metastásico refractario. Su biopsia
muestra una amplificación FGFR1 ×13 sobre subtipo BC-NED — un
perfil descrito apenas cuatro veces en la literatura.

Hemos visto su trabajo en [paper / línea de investigación] y nos
gustaría someter el caso a su criterio. Adjuntamos:

— Informe AP completo
— Perfil molecular con anotaciones de [Dra. Paola]
— Resumen del recorrido clínico hasta la fecha (2 páginas)

Si dispone de 30 minutos para una llamada en las próximas dos
semanas, le agradeceríamos enormemente la consulta. Si no es
viable, una opinión por escrito es igualmente valiosa.

Atentamente,
[Nombre] · equipo clínico Miriam
prensa@helpmiriam.com / +34 [tel]

D · Post Instagram tipo · día normal

Voz: Miriam primera persona. Sin storytelling forzado. Una imagen real (foto, no ilustración).

Imagen: foto del informe encima de la mesa de la cocina,
        con la taza al lado. Luz natural.

Caption:

Mañana me hacen la siguiente analítica. Es de control,
no de decisión, así que no espero noticias grandes.

Me da tiempo a contaros que hemos pasado los 70.000 €
(faltan 10 para el primer hito), que la consulta con
[especialista] ya está pedida, y que llevo dos días
durmiendo seis horas seguidas — pequeño récord.

Gracias por seguir aquí.

helpmiriam.com

E · WhatsApp — respuesta a alguien que pregunta cómo ayudar

Mensaje breve, sin enlaces sospechosos, voz Miriam o equipo. Para reenviar tal cual.

Hola [nombre], gracias por preguntar.

La forma más útil ahora mismo es donar en helpmiriam.com (a
partir de 5 €) o compartir la web con alguien que pueda llegar
a profesionales de oncología o medios de prensa.

Si tienes un contacto concreto, escríbeme y te paso el press
kit con los materiales para que lo reenvíes directamente.

Cualquier cantidad ayuda — la transparencia y el desglose están
todos en la web.

Un abrazo,
Miriam

F · Email a colaborador profesional · diseño / dev / traducción

Para gente que ofrece su trabajo gratis. Voz: equipo plural, sin sobreagradecer.

Asunto: Bienvenido al equipo Miriam — siguiente paso

Hola [nombre]:

Gracias por ofrecer tu tiempo. Te explico cómo trabajamos para
que entres limpio:

1. Lee el sistema de diseño completo (40 minutos):
   helpmiriam.com/design-system

2. Acceso al repositorio:
   github.com/ceciCoding/miriam-gonzalez-case
   (te añadimos en cuanto nos pases tu usuario)

3. Tu primera tarea está aquí: [issue link]
   Cualquier cambio entra por pull request, aunque sea una coma.

4. Si dudas si algo encaja con el sistema, abre un issue antes
   de empezar. Mejor 5 minutos de discusión que 3 horas
   rehaciendo.

Cuando termines tu primera contribución te invitamos al canal
interno (Discord) y al stand-up semanal de los miércoles.

Cualquier cosa, respondes a este email.

Equipo Miriam.

Mantenimiento. Estas plantillas están vivas. Cuando uses una y notes que te falta algo o sobra, edítala aquí mismo. La fuente única de verdad es esta sección — no la copia que tú tengas en tu mail.