# Biocod: handoff de diseño e identidad para construir la app Para Iker y su Claude. Fecha de corte: 25 de octubre de 2026. Este documento junta en un solo lugar todo lo que define cómo se ve, cómo habla y cómo se mueve Biocod, para diseñar y construir la app móvil sin tener que leer las 55 decisiones de la landing. Todo sale del repo `~/Developer/astrocod-site` (rama `biocod`), de la carpeta de marca `~/Developer/astrocod/01_logos/biocod` y de la semántica `~/Developer/astrocod/05_landing/SEMANTICA_Y_PROTOCOLO.md`. Va con un compañero: [`tokens-biocod.json`](tokens-biocod.json), con todos los valores ya resueltos en la paleta final, listos para pasarlos a la app. --- ## 0. Cómo usar este documento ### Para el Claude que construya la app 1. Lee este documento completo antes de diseñar una pantalla. 2. Las fuentes de verdad, en este orden, si algo choca: 1. lo que Iker diga en el chat; 2. `SEMANTICA_Y_PROTOCOLO.md` (el método, los 9 pasos, el color del día, los límites); 3. `docs/DESIGN-DECISIONS.md` (D1 a D55, cada una con su porqué); 4. `docs/PLANTEAMIENTO.md` (D47 a D53, las reglas de producto de la app, todavía propuestas); 5. este handoff, que resume todo lo anterior. 3. Los valores exactos viven en el código de la landing: `src/styles/tokens.css` más `src/ui/retro/dos-tintas.css`. Si este documento y el código no coinciden, manda el código y avisa. 4. Todo copy nuevo va marcado BORRADOR hasta que Iker lo apruebe. Pregunta antes de inventar copy, cifras, precios o promesas. 5. La landing tiene **labs** que son la guía de estilo viva: `npm run dev` en `astrocod-site` y abre `http://127.0.0.1:5180/lab`. La demo pública con labs está en https://biocod-demo.pages.dev/lab. ### Para Iker Las secciones 1, 2, 3 y 11 son las que cambian decisiones de producto. Las secciones 12 y 13 listan lo que falta diseñar y lo que tienes que decidir. --- ## 1. Qué es Biocod **Una frase:** una app para que mujeres de México armen su árbol de familia, miren lo que se repite y elijan qué hacer con eso, con las preguntas de una sesión de biodescodificación. **Ella:** - Mujer de 40 a 60 años, México urbano, Android primero (72% usa Android y el 97% entra a internet por el celular). - Llega desde anuncios de Facebook e Instagram y ya conoce el método por cursos, por su acompañante o por YouTube: la app tiene que hablar ese idioma. - Presbicia después de los 45; una de cada cuatro usa la letra grande del sistema. Por eso existe todo el bloque de accesibilidad de D36 (sección 9). - La estética de los setenta es "lo que ellas vieron de niñas": de ahí sale el retrofuturismo mexicano. **La promesa:** - Arma tu árbol (3 generaciones arriba de ti, 14 parientes). - Biocod cruza fechas, nombres y edades y te enseña los **hilos**: lo que se repite. - Un cuaderno de voz y texto con una sesión de 9 pasos, el color del día, un paso chico al día y actos simbólicos. - Bio de redes: "Lo que se repite en tu familia tiene un hilo." **Primer valor comprobable (D47):** ella puede explicar de dónde salió un hilo y qué no demuestra. Siempre puede corregir un dato, contestar "No sé" y dejar huecos. Si no hay datos, Biocod lo dice y le da una pregunta útil: nunca inventa un hilo. **Lo que no es** (y no se negocia): - No es atención de salud física ni mental, ni la sustituye. No lee el cuerpo, no explica malestares, no pone nombres clínicos. - No predice, no lee el cielo ni los astros, no promete resultados. - No empuja a confrontar ni a cortar con la familia, y no culpa a nadie (ni a ella, ni a su mamá, ni a su abuela). - No cobra a la mitad de una sesión. --- ## 2. Reglas duras (antes de diseñar cualquier cosa) 1. **Nada de salud.** No interpretar el cuerpo ni malestares, ni con aviso. Respuesta fija del agente: "Lo de tu salud lo ve tu médico. Aquí te acompaño con lo que sientes alrededor de eso." 2. **Lista negra de palabras.** Hay una prueba que revisa copy, metadatos, rutas, nombres de eventos y documentos (`src/content/copy.test.ts`). Quedan fuera cinco familias: las palabras clínicas y de salud, las de promesa y de un futuro fijo, las espirituales vagas, todo lo que tenga que ver con el cielo y los astros, y el número cien con el signo de por ciento. El nombre de la técnica de familia de Hellinger sí pasa, siempre con sus dos palabras juntas. La lista exacta vive en esa prueba (no se repite aquí para que este documento la pase): cópiala tal cual a la app y córrela también sobre los textos del agente. 3. **"Biodescodificación" es marca registrada de otro** (Enric Corbera Institute, clases 16 y 41). Solo va como palabra descriptiva dentro de una frase ("una app de biodescodificación"), nunca como título, nombre de plan, sección, curso o cuaderno. Por eso el bloque de la lectura se llama "Lo que propone el método" (D46). 4. **Crisis.** Si ella escribe algo de crisis, el método se detiene ese día y sale la Línea de la Vida: **800 911 2000**, gratis y las 24 horas, más el 911 si hay peligro. Siete días sin notificaciones de enganche después. La Línea de la Vida está siempre a la mano (en la landing va en el pie, en las preguntas y al final del resultado). 5. **Condicional siempre.** Toda lectura del método va con "puede que", "a veces", "en el método se dice que". Nunca "por eso te pasa" ni "es porque". 6. **Meta nunca recibe nada de la sesión.** Ni respuestas, ni audios, ni nombres, ni hilos, ni el tema, ni la edad, ni la variante de nada. Solo un evento genérico de registro, con su permiso. 7. **Privacidad:** no se promete "tus datos se quedan en tu teléfono" mientras haya IA en la nube, transcripción o respaldo. La promesa es **"Tú decides qué guardas y lo borras cuando quieras"**, con borrado real (D50). 8. **Cobro:** antes de empezar algo se dice si es gratis o de pago, y nunca se cobra a mitad de una sesión. Texto exacto: "Antes de cualquier cobro recurrente te pedimos permiso. Te avisamos al menos 5 días antes de cada cobro." La cancelación es en la tienda, con un enlace directo desde la app (D51). 9. **Cuerpo y comida** existe con candados (D43, `docs/agente/CUERPO-Y-COMIDA.md`): el ángulo es la historia familiar, nunca peso, kilos, tallas ni dietas. Va apagado en producción hasta la revisión de una experta en TCA, la revisión legal y las pruebas de ataque. 10. **Sin emojis, sin guiones largos ni medios** (en ningún texto ni archivo; hay prueba), y sin cuentas regresivas, escasez falsa, testimonios inventados ni cifras sin fuente. Todo ejemplo se marca como ejemplo. 11. **Accesibilidad para 40 a 60** (sección 9): letra de 16 o más, toques de 48 × 48 con 8 de aire, nada que dependa de deslizar, ningún botón que sea solo un ícono. --- ## 3. Identidad ### 3.1 El nombre - **Biocod**, con mayúscula en texto corrido; **biocod** en minúsculas en el logo, archivos, llaves y URLs. - Historia: Astrocod (sugería astros) → Biocod (D31) → Brota (D35, descartado porque brota.mx tenía dueño y la marca estaba tomada) → **Biocod definitivo (D37)**. De Brota se quedó la paleta dos tintas. - Dominio: **biocod.app** (solo HTTPS). biocod.mx está libre, sin comprar. Correos: contacto@biocod.app y privacidad@biocod.app. - La mascota se llama **Cody** ("Cody de Biocod"), de la misma raíz. - Marca en el IMPI: primero solo la clase 9 (app descargable); después la 42, la 41 y la 45. **Nunca la 44** (salud), donde vive BIODECOD MEXICO. Por eso tampoco se dice nunca que Biocod sea un servicio de acompañamiento clínico. ### 3.2 El símbolo: el Hilo Una "b" trazada con **un solo hilo cempasúchil** que baja y se vuelve raíces con cinco nodos. Es el hilo que une a las generaciones; el cempasúchil es la flor que guía a quienes vinieron antes. - Caja de 80 × 93, trazo de 3, puntas redondas. Seis trazos: el tallo con su remate arriba a la izquierda, la panza hacia la derecha y cuatro raíces que salen del pie. - Cinco nodos `[cx, cy, r]`: `[8.2, 76.3, 3.4]`, `[23.7, 80.1, 3.4]`, `[40.8, 85.3, 3.6]`, `[57.5, 79.9, 3.4]`, `[72.2, 76.2, 3.4]`. - Los paths exactos están en `src/ui/logo/simbolo.ts` (idénticos al maestro; hay prueba que los compara). **No se redibuja, no se le agregan lunas, fases ni ciclos.** - El Hilo es **siempre #F2A900**, también de noche. ### 3.3 La palabra (wordmark) - "biocod" en minúsculas, una serif de remates firmes con aire de estilo antiguo, vectorizada (no es una fuente instalada). Literata tiene "serifas firmes como el wordmark". - Logo completo: caja de **243.1 × 93**. A 42 px de alto mide 110 de ancho. - **Pendiente del kit:** la base de la "b" de la palabra tiene un escalón (baja y vuelve a subir en tres puntos). En el sitio lo corrige `tools/marca/palabra.py`, pero **los maestros de la carpeta de marca todavía lo traen**. Para la app, usa los SVG de `astrocod-site/public/brand/` (ya corregidos) o corrige los maestros. ### 3.4 Archivos de marca Carpeta `~/Developer/astrocod/01_logos/biocod` (todos los SVG llevan manifiesto C2PA). Copias corregidas en `astrocod-site/public/brand/`. | Archivo | Para qué | Colores | | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | | `biocod-logo.svg` | El principal, sobre papel u hueso | Hilo #F2A900, palabra #2F3328 | | `biocod-logo-tinta.svg` | Una sola tinta | Todo #2F3328 | | `biocod-logo-blanco.svg` | Sobre añil, barro o fotos | Todo #FBFAF6 | | `biocod-logo-noche.svg` | Sobre fondo oscuro | Hilo #F2A900, palabra #FBFAF6 | | `biocod-logo-barro.svg` | Variante cálida de archivo | Hilo #A84B2A, palabra #2F3328 | | `biocod-logo-animado.svg` | El logo que se cose solo | Como el principal | | `biocod-simbolo.svg`, `-tinta`, `-blanco` | Símbolo solo, caja 80 × 93 | #F2A900, #2F3328, #FBFAF6 | | `biocod-icono-app-anil.svg` | **Ícono de la app (el principal)**: caja 1024, esquina rx 230, trazo 4.2 | Fondo #2F4A6D, Hilo #F2A900 | | `biocod-icono-app-barro.svg`, `-hueso.svg` | Ícono alterno de archivo | Barro con #FBE7B0; hueso con #F2A900 | | `favicon.svg` | Favicon: caja 64, rx 14, trazo 6.5 | Fondo #2F4A6D, Hilo #F2A900 | | `biocod-loader.svg` | Dos círculos unidos por un arco ("ella" y "su linaje"); no es el logo, es un sello de espera | #A84B2A y #F2A900 | | PNG 4096 × 1567 (`-hueso`, `-transparente`), símbolo 2048 × 2381 | Impresos y video | | | `redes/` | Perfil (1080 y 2048, con y sin pespunte, con grano), portadas de Facebook (1640 × 624 y 1640 × 856) y videos de la portada que hierve (24 s) | Fondo añil | | `cody/` | Cody en 2D: `cody-en-calma.svg`, `cody-escuchando.svg`, `cody-celebrando.svg` (caja 160 × 180) | | La imagen para compartir de la web (`og:image`) es la portada v5 recortada a 1200 × 627: "Lo que se repite en tu familia tiene un hilo." con tres nodos (tu abuela, tu mamá, tú) unidos por un hilo cempasúchil sobre añil con grano. ### 3.5 Área de respeto y tamaños - Tamaño mínimo: **24 px de alto el símbolo, 96 px de ancho el logo completo.** En el header de la web va a 42 px de alto. - **El área de respeto está mal definida:** la guía vieja dice "la altura de la a", pero "biocod" no tiene "a". Propuesta: la altura x de la palabra (la "o") alrededor. Iker lo decide. - Sobre papel u hueso, la versión de color. Sobre añil o fotos, la blanca o la de noche. Cody sobre fondo oscuro va en una tarjeta hueso, como sticker. ### 3.6 Una inconsistencia que hay que cerrar La palabra del logo en los maestros es **#2F3328** (la tinta vieja, un olivo muy oscuro), pero toda la interfaz en dos tintas escribe en **#1F2F46** (añil hondo). Junto al texto de la app se nota. Opciones: dejar la palabra en #2F3328 (como está la web hoy) o pasarla a #1F2F46. Recomiendo #1F2F46 para la app. ### 3.7 El ícono de la app - `biocod-icono-app-anil.svg`: fondo añil #2F4A6D con el Hilo cempasúchil. - Para Android exporta el ícono adaptativo con el Hilo dentro de la zona segura (el 66% central) y el fondo añil plano en la capa de atrás. Para iOS, el mismo dibujo sin esquinas (las pone el sistema). - `theme-color`, barra de estado y splash: #2F4A6D. ### 3.8 El cargador y el logo animado **Cómo se cose** (`index.html`, `src/ui/Logo.tsx`, `src/ui/logo/logo.css`): - Cada trazo se dibuja con `pathLength=1`, `stroke-dasharray: 1 2` y `stroke-dashoffset` de 1 a 0. El hueco de 2 evita que se vea un punto redondo antes de dibujar (D21). En nativo: trim path de 0 a 1. - Logo animado: tallo con retraso de 0.1 s y 1.6 s de duración, panza 0.7 s y 1.1 s, raíces 1.25 s y 0.8 s, todo con la curva del hilo `cubic-bezier(0.65, 0, 0.35, 1)`. Los nodos brotan a 1.85, 1.92, 1.99, 2.06 y 2.13 s (0.5 s cada uno, con rebote `cubic-bezier(0.34, 1.56, 0.64, 1)`). La palabra aparece a 1.5 s durante 0.9 s. - Cargador: símbolo de 112 px sobre hueso #FBFAF6, ciclo de 2.9 s (dibujado al 45%, sostenido hasta el 80%, se desvanece al final). La primera vez se queda hasta coserse completo; después solo aparece si la carga tarda más de 600 ms. - Salida al contenido en tres tiempos (D40): los trazos rematan en 0.52 s, el logo crece un poco y se desvanece mientras el papel se aclara en 0.9 s, y el contenido sube 18 px en cascada con 90 ms entre piezas. - **Para la app:** el splash es el Hilo que se cose sobre hueso (o sobre añil con el ícono) y sale igual que en la web. --- ## 4. Color: dos tintas La paleta final es **dos tintas** (D35): la app se ve como una risografía de dos tintas sobre papel. Solo había dos cosas definitivas, el azul y el amarillo, y todo se construyó con ellas. Referencias: el papel con una sola tinta de Fidèle Editions, el amarillo solo para actuar de Mailchimp y las bandas azules con acento amarillo de Honk. ### 4.1 Los roles (esto es lo importante) - **El papel:** hueso #FBFAF6 y una sola trama de añil #EDF0F4 para alternar. Nada de crema, rosa ni verde de fondo. - **El añil es la tinta:** todo el texto (en añil hondo #1F2F46), los títulos, las bandas llenas, los íconos, los acentos y el cuero del Plus. - **El cempasúchil es la luz:** el hilo, el logo, el sol, los pétalos y el botón de acción (amarillo con orilla y canto de tinta). **Nunca es letra sobre papel** (1.92:1). Solo pinta formas. Sobre añil sí se lee (4.50:1). - **Las emociones son contenido:** los 14 colores del día solo salen en el color del día y siempre con su nombre escrito. Nunca como adorno ni como estado de la interfaz. - Fuera de la interfaz: el barro, el nopal y el cuero cognac de las paletas anteriores. ### 4.2 Los valores | Rol | Token | Valor | Contraste | | ------------------------ | ----------------------------- | ------- | ----------------------------- | | Fondo | `--hueso` | #FBFAF6 | | | Fondo alterno, chat | `--papel` | #EDF0F4 | | | Tarjetas, campos | `--superficie` | #FFFFFF | | | Bordes decorativos | `--linea` | #D8DEE6 | 1.30:1 | | Borde de controles | `--borde-control` | #687B93 | 4.15:1 | | Texto | `--tinta` | #1F2F46 | 12.94:1 sobre hueso | | Texto corto secundario | `--tinta-suave` | #4B5D78 | 6.41:1 | | Añil de marca | `--anil` | #2F4A6D | 8.66:1 | | Añil hondo | `--barro-hondo` en dos tintas | #22385A | 11.29:1 | | Añil tenue | `--anil-tenue` | #DCE3EC | | | Añil claro (antes nopal) | `--nopal` en dos tintas | #46679B | 5.47:1 | | La luz | `--cempasuchil` | #F2A900 | 1.92:1 (nunca texto en claro) | | Luz tenue | `--cempasuchil-tenue` | #FBE7B0 | | | Selección suave | `--barro-tenue` en dos tintas | #F9E8C0 | | | Texto sobre luz | `--tinta` | #1F2F46 | 6.73:1 | | Costura sobre papel | `--pespunte` | #F7D687 | | **Ojo con los nombres de los tokens:** en el código de la landing muchos tokens conservan su nombre viejo (`--barro`, `--nopal`) pero en dos tintas valen añil. Las pantallas de los mockups dicen "barro" y se ven añil. Para la app, nombra los tokens por su rol (ver `tokens-biocod.json`), no por el pigmento viejo. ### 4.3 Las 14 emociones del color del día `base` para formas y auras, `hondo` para texto sobre hueso, `noche` para el reloj y fondos oscuros. | Emoción | Pigmento | Base | Hondo | Noche | | -------------------- | ---------------- | ------- | ------- | ------- | | Ilusión | Cempasúchil | #F2A900 | #966900 | #F2A900 | | Cansancio dulce | Piloncillo | #D39556 | #9F6529 | #D39556 | | Coraje | Achiote | #D2552F | #C04D2A | #D55F3C | | Ternura | Rosa mexicano | #EE8AB0 | #D92066 | #EE8AB0 | | Duelo tibio | Terciopelo | #A3416A | #A3416A | #C2658C | | Querencia | Jade | #5E9C84 | #4A7B68 | #5E9C84 | | Alivio | Cal | #EFE3C4 | #8A6E25 | #EFE3C4 | | Pendiente | Cielo de lluvia | #8DA9BC | #53768D | #8DA9BC | | Añoranza | Añil | #5F7FB5 | #4F71AB | #6685B8 | | Desasosiego | Muicle | #8A7FC8 | #7366BD | #8A7FC8 | | Nostalgia de domingo | Palo de Campeche | #8E5A9E | #8E5A9E | #A072AF | | Carga | Copal | #9C948F | #79706B | #9C948F | | Deuda | Café de olla | #7A5641 | #7A5641 | #A8785D | | Orgullo callado | Obsidiana | #3F4756 | #3F4756 | #77839B | Cada emoción trae, en `src/content/emociones.ts`, "En sus palabras", "Lo que trae" y una pregunta para el cuaderno (por ejemplo, Añoranza: "¿Qué le contarías hoy a tu abuela?"). ### 4.4 El reloj watchOS de verdad: fondo #000, letra blanca, botones en píldora #2C2C2E y el botón de acción en cempasúchil con letra #1C1306. El nombre de la app va arriba en cempasúchil. ### 4.5 El cuero del Plus Cuero añil: base #26405E, luz #3A5A80, sombra #101C2C, con hilo cempasúchil #F2A900 y relleno crema #F6EBD3. Crema sobre cuero 8.97:1 e hilo sobre cuero 5.29:1. Hay 13 pieles más en `/lab/cuero` (cognac, chocolate, vino, miel, vaqueta y otras), de archivo. --- ## 5. Tipografía Tres familias y un remate, cada una con un trabajo: | Familia | Rol | Dónde | | ------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | **Literata** (variable, 200 a 900, eje opsz) | La **voz**: todo lo que Biocod dice | Preguntas de la sesión, lecturas, títulos de sección, devoluciones, la razón del color del día | | **Instrument Sans** (variable, 400 a 700) | La **interfaz**: todo lo que la app hace | Botones, pestañas, etiquetas, campos, notas, fechas | | **Fraunces** (instancia fija: peso 450, opsz 144, SOFT 100, WONK 0) | **Display** | Solo títulos grandes: la adivinanza de Hoy ("Puede que hoy amanezcas con añoranza."), el título de cada pestaña | | **Crayola** (Caveat Brush horneada en 3 cuadros) | El **remate** de un título | Una o dos palabras al final de un título de 32 o más, que "hierve" como animación hecha a mano | Archivos en `astrocod-site/public/fonts/` (woff2 de Fontsource; todas con licencia libre OFL). Para la app: TTF de las mismas familias. La crayola son tres fuentes horneadas por `tools/fuentes/crayola.py`, con el contorno temblado distinto y los mismos anchos, para que el texto no brinque al alternarlas. ### 5.1 Escala | Estilo | Tamaño | Peso | Interlineado | | ---------------------- | -------------------------------------------------- | ------------------------ | ------------ | | Display | 44 a 96 (34 en el título de una pestaña de la app) | 450 | 0.98 | | Título de sección (h2) | 32 a 56 | 600 | 1.05 | | Subtítulo (h3) | 26 | 600 | 32 | | Lectura | 18 (20 en pantallas grandes) | 400 | 29 (32) | | Burbuja de la sesión | 26, Literata | 400 | | | Interfaz | 18 | 400 a 600 | 1.5 | | Botón | 17 | 600 | 1.1 | | Pestaña | 16 | 500 inactiva, 600 activa | | | Nota | 16 | 400 | 22 | | Sobretítulo | 16 | 600, tipo oración | 1.3 | Reglas: - **Nada por debajo de 16.** Si algo no cabe, se quita, no se achica (D36). - Tipo oración siempre: nada en mayúsculas, ni sobretítulos ni botones. - Nada en cursiva, salvo citas de lo que ella escribió. - Los textos de lectura miden 62 caracteres de ancho máximo y van siempre en tinta, nunca en tinta suave. - **En la app los tamaños se escalan con la letra del sistema** (sp en Android, Dynamic Type en iOS). A 200% nada se corta ni se encima: los títulos se parten con guiones en lugar de salirse. ### 5.2 La crayola que hierve - Es una fuente de verdad y el título sigue siendo texto: se selecciona y el lector de pantalla lo lee una vez. Encima van tres copias decorativas (ocultas al lector) con los tres cuadros, que se alternan con opacidad cada 375 ms (8 por segundo). - Cada cuadro lleva una máscara de cera (`public/texturas/cera.png`, la única textura horneada) corrida un poco distinto. - Solo hierve mientras el título está a la vista y sin pausa. Con movimiento reducido, quieto en el primer cuadro. - Color del remate: añil sobre papel; cempasúchil sobre añil (el cierre). - **Remates de la landing:** "en tu familia", "siempre a la mano", "tu árbol", "Y no de semáforo", "sin letras chiquitas", "Lo demás se va acomodando" y, en la variante B del hero, "Elige tu siguiente paso". - En la app: úsala poco, solo en momentos (el título de un cierre, la ofrenda, la tarjeta para compartir). Nunca en texto de interfaz. --- ## 6. Espacio, forma y layout - **Espacio:** 4, 8, 12, 16, 24, 32, 48, 72 y 112. El canal lateral en el teléfono es de 16. - **Toques:** mínimo 48 × 48, el principal de 56 de alto, y 8 de aire entre dos cosas que se tocan. - **Radios:** campo 12, tarjeta de la app 18, tarjeta de la web 20, hoja 28, pantalla 36, píldora 999. - **Botones en píldora**, tarjetas con radio 18 a 28. Nada de esquinas rectas en lo que se toca. - **El papel va plano:** tarjetas con borde de 1.5 en `--linea`, sin sombra. Las sombras son para el cuero, el canto de los botones y los aparatos. - **Una sola columna que baja.** Sin carruseles, sin gestos ocultos. Todo lo importante a la vista. --- ## 7. Materiales y texturas ### 7.1 Papel y cuero (D16) **Cuero para lo que identifica, papel para lo que se lee.** - **Papel** (`Tapiz` en la web): tarjeta blanca o hueso, borde fino, radio 28, plana. Es el material de casi todo. - **Cuero:** solo para lo que identifica. El plan Plus, la carta del hilo, el cuaderno de la sesión (forrado en cuero, con "Tu cuaderno" grabado en dorado, hoja rayada y un listón cempasúchil), la correa del reloj y los términos de "Hablamos tu idioma". - El cuero lleva su **pespunte** (costura de 6 de guion y 5 de hueco, 8 hacia adentro del borde, con los agujeros de la aguja) y un **grabado** en relieve o en hoja metálica. - El grano del cuero es procedural: ruido celular con poros y brillo, iluminado desde arriba a la izquierda (`src/ui/capitone/cuero-grano.ts`). En la app: una textura de 192 px que se repite, generada una vez. ### 7.2 El pespunte Una costura de puntadas que se cose una vez al entrar (1.6 s, con la curva del hilo). Cada borde mide un múltiplo exacto del paso de 11 para que la costura cierre sin un guion cortado. Sobre papel va en #F7D687 y sobre cuero en cempasúchil. ### 7.3 El grano (grainy look) El "look granuloso" es parte de la marca, pero con medida: - **Procedural:** una tesela de 128 × 128 de ruido gris al azar, generada en el dispositivo una vez por visita, mezclada en **soft-light**. - **Dónde:** sobre las auras y las supergráficas, nunca sobre texto ni controles. - Hero de la web: 0.23 (la cifra de D15). - Pantalla Hoy de la app: 0.23, con una máscara que lo desvanece hacia abajo (de negro al 55% a transparente). - Cierre: 0.14. - El aura de Tu día: 0.7, con máscara. - **Nunca** le pongas opacidad ni aislamiento al contenedor del grano: se ve como una caja gris (D9, D20). - El árbol también lleva un ruido tibio propio, y la crayola, su cera. - El perfil de redes tiene una versión "con grano" (`biocod-perfil-1080-grano.png`): la marca se ve impresa, no digital. - **Para la app:** el grano es lo que hace que el color del día se sienta como luz sobre papel y no como un degradado de pantalla. Implementalo como una textura repetida con blend soft-light (en Android con un shader o un bitmap con `BlendMode.SOFT_LIGHT`; en iOS con `CIRandomGenerator` o una imagen con `.softLight`). ### 7.4 Degradados **Regla: los degradados son luz o material, nunca interfaz.** Los botones, las tarjetas y las barras van planos. Los degradados que existen: - **El aura del color del día** (el más importante para la app). En la pantalla Hoy es una capa de 480 de alto arriba, con dos radiales: - `radial 120% × 80% en (18%, 8%)`: la emoción principal al 45% mezclada con papel, hasta el 64%; - `radial 90% × 70% en (88%, 28%)`: la segunda emoción al 40% con papel, hasta el 62%. - Respira: 8 s de ida y vuelta, opacidad de 0.88 a 1 y escala de 1 a 1.08. Encima va el grano. - Si la segunda emoción llega al 60% del puntaje de la primera, el aura mezcla las dos. - **El aura del reloj:** un disco de 62 con un radial de la emoción principal a la segunda (al 80% con negro) y un brillo de 24. - **El aura detrás del teléfono en el hero:** radial de añoranza al 55% a duelo tibio al 32%, desenfoque de 26, opacidad 0.75. Es "un solo bloom de luz", como el de mymind. - **El cuero:** dos radiales, la luz arriba a la izquierda y la sombra abajo a la derecha. - **Las hojas metálicas** del grabado: lineal a 168° con seis paradas de luz y sombra. - **El listón** del cuaderno: lineal a 90° de cempasúchil oscuro a claro. - **La hoja rayada:** renglones repetidos de añil al 9% cada 36. - **El chat del cuaderno:** una trama de puntos de serigrafía (tinta al 9%, puntos de 1.6 cada 20), no un degradado. - **Las lomas de la feria** no son degradados: son tintas planas encimadas con multiply, como serigrafía. ### 7.5 SVG Casi todo lo gráfico de Biocod es SVG con trazo, hecho para animarse cosiéndose: | Sistema | Archivo | Qué dibuja | Cómo se anima | | --------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | | Logo y símbolo | `public/brand/*.svg`, `src/ui/logo/simbolo.ts` | El Hilo y la palabra | Trazos con `pathLength=1`, guion "1 2" y offset de 1 a 0; nodos que brotan con rebote | | Íconos vivos | `src/ui/iconos/*`, `src/ui/IconoVivo.tsx` | 9 íconos (sección 8.4) | Un gesto de 0.52 s al entrar a la vista, más un temblor de línea con feTurbulence | | Feria | `src/ui/retro/Feria.tsx` | El arco parabólico, los ecos, el sol, las lomas y los destellos | Entra una vez: los ecos se trazan, el sol sube, las lomas aparecen; los destellos respiran | | Destello | `src/ui/retro/Destello.tsx` | Destello de cuatro puntas con lados cóncavos (caja 24) | Respira y gira 6° | | Pespunte | `src/ui/capitone/Pespunte.tsx` | La costura de una tarjeta | Se cose una vez | | Hilos del árbol | `src/ui/ArbolPixel.tsx` | Los hilos entre parientes: funda hueso de 9, contorno #8A6000 de 5.5 e hilo cempasúchil de 3.5, en guion "1 2" | Se cosen en 1.6 s | | Árbol quieto | `src/mockups/pantallas/AbanicoEstatico.tsx` | El árbol de la pestaña Mi árbol | Halo en el nodo del hilo principal | | Hilo de página | `src/ui/HiloDePagina.tsx` | El hilo que baja por la página con nudos | Se cose con el scroll | | Flecha | `src/ui/FlechaSale.tsx` | La flecha de los enlaces que salen | Dibujada, porque el carácter se pintaba como emoji en iOS | Para la app: - Exporta desde `public/brand/` y desde el exportador del lab de íconos (`src/lab/iconos/exporta.ts`). - Conserva las cajas (viewBox), el trazo de 3 en la caja de 93 del símbolo y las puntas redondas. - Anima con trim de path de 0 a 1: Lottie, Rive o vectores animados nativos. --- ## 8. Gráficos de la marca ### 8.1 Retrofuturismo mexicano (D22) - **De dónde sale:** "Los 4 Fantásticos: Primeros pasos" (2025) y su diseño de producción (Kasra Farahani: Niemeyer, Saarinen, la Feria Mundial de 1964, Syd Mead, la paleta Eames). De ahí, dos reglas: **curvas parabólicas en lugar de arcos de compás**, y **solo un tercio del mundo en retro**. - **Contado en mexicano:** - el arco son los cascarones de Félix Candela; - las Torres de Satélite; - los ecos son las líneas de México 68 (en añil, con un solo hilo dorado); - un sol sobre el horizonte; - lomas encimadas como serigrafía. - **Destellos, nunca estrellas:** de cuatro puntas, cinco por pantalla como máximo. Sobre un fondo oscuro van pétalos de cempasúchil, para que nada se lea como cielo estrellado. - **En la web,** el retro va solo en el hero, el marquee y el cierre; todo lo demás es papel. - **En la app,** va en los momentos: el splash, un cierre de sesión, la ofrenda, la tarjeta para compartir. **No en las pantallas de uso diario.** ### 8.2 El fondo detrás del teléfono (abierto) A Iker no le gusta la feria detrás del iPhone del hero. En `/lab/fondo-placa` hay siete opciones nuevas en dos tintas: - **Abanico genealógico:** la gráfica de abanico, con una línea de la familia encendida de adentro hacia afuera. - **Raíces:** el Hilo en grande, abierto en raíces. - **Sol de risografía:** el sol con una trama de añil corrida. - **Bastidor:** el aro de bordar, con punto de cruz y un hilo que se cose solo. - **Ventana:** un arco de muro mexicano con un sol que sube. - **Ondas.** - **Tarjeta:** lo más callado. La que se elija probablemente sea también el lenguaje de ilustración de la app. **El abanico genealógico y el bastidor son las que más dicen "Biocod".** ### 8.3 El marquee Una banda de añil con texto hueso que corre lento (45 s por vuelta), con destellos cempasúchil como separadores. Lleva los términos del método: síndrome de aniversario, doble, lealtad invisible, proyecto sentido, el resentir. Se pausa con el dedo encima, fuera de pantalla y con la pausa global. ### 8.4 Los íconos vivos Son nueve, en una caja de 96. Trazo de 2.4 en tinta, puntas redondas, y una sola mancha de color corrida 2 unidades, como risografía mal registrada: | Ícono | Qué hace al entrar | | ------------------- | ------------------------------------------------------------ | | `raiz` | Las raíces crecen y se encienden sus puntas | | `hilo` | El hilo pasa por la aguja y se abre en un lazo | | `cuaderno` | La pluma escribe y el listón dorado marca la página | | `mano` | Los dedos se abren y sube una semilla dorada | | `vela` | La flama crece y titila dos veces (reemplaza a la luna, D31) | | `carta` | La solapa se abre y asoma la hoja | | `cartaDeLiberacion` | El sello sube, florece y suelta tres pétalos | | `cempasuchil` | Los pétalos giran y se abren | | `paso` | Aparece la huella dorada | Reglas: - Ningún botón es solo un ícono: siempre con su palabra (D36). - Se animan cada vez que entran a la vista, en 0.52 s. Con movimiento reducido saltan a su estado final. - Tamaño mínimo de 48. En la barra de pestañas de la app van a 26, con su palabra debajo. - La guía de marca vieja todavía lista un ícono de "Luna": **ya no existe.** ### 8.5 El árbol (D17) - **El árbol de la web:** "Tú" es un círculo añil abajo. Arriba van tres generaciones en píldoras (2, 4 y 8 lugares, en dos filas la última), con ramas de grosor que baja por generación. - Cada lugar es fijo: solo se mueve la cámara. - Las píldoras van en los tonos tenues. - Un lugar sin dato es un fantasma con borde punteado y "¿?". - El pariente del hilo principal va en cempasúchil, con un halo. - **El revelado:** cada rama brota borrosa y se aclara, con partículas cempasúchil. Normal, 2 s por rama y 3.8 s todo; en teléfonos de gama baja, más corto y con menos partículas. El ejemplo se pinta una vez por visita; el árbol de ella siempre crece. - **En la app (mockup Mi árbol):** el árbol quieto a todo lo ancho, con nombres en Literata de 16.5 a 18 y, en las dos primeras generaciones, también el parentesco ("mamá", "abuela"). - **"Tus gatos también son familia":** se suben al árbol, sin hilos ("pero vaya que opinan"). - **Ojo:** la semántica habla de 4 generaciones y 15 posiciones; la landing usa 3 arriba de ella (14 parientes). Iker decide para la app. --- ## 9. Accesibilidad para mujeres de 40 a 60 (D36) No es una capa extra: es el diseño. En la web lo verifican pruebas (`tests/tocar.spec.ts`, `tests/lectura.spec.ts`, `tests/contraste.spec.ts` y axe AA en cada página). - **Letra:** 16 o más en todo lo que se lee. Con la letra del sistema al 200% no se corta nada, no hay scroll de lado y nada se encima. - **Toques:** 48 × 48 o más, con 8 de aire entre dos cosas. Las casillas y radios miden 48 aunque el dibujo sea de 24. Solo se salvan los enlaces dentro de una frase. - **Nada depende de deslizar:** todo tiene su botón. Los números se cambian con botones grandes de "Menos" y "Más" (72 de alto en la mini sesión) además del campo. - **Ningún ícono sin palabra.** Pestañas con palabra; nada de menús de tres rayitas. - **Contraste:** los párrafos van en tinta (12.9:1). La tinta suave (6.4:1) es solo para datos cortos. El cempasúchil nunca es letra sobre claro. Los errores no se marcan solo con color: llevan texto y una marca. - **Foco visible:** anillo de 2 en añil, separado 2 del control. - **Movimiento:** un control global para pausar todo, y respeto al movimiento reducido del sistema (sección 10). - **Lenguaje:** frases cortas, nivel de secundaria, "No sé" siempre a la mano. --- ## 10. Movimiento ### 10.1 Tokens | Duración | ms | | Curva | Valor | Para | | -------------------- | ---- | --- | -------- | --------------------------------- | ------------------------------------------------- | | Rápida | 200 | | Hilo | cubic-bezier(0.65, 0, 0.35, 1) | Lo que se cose o se traza | | Base | 400 | | Rebote | cubic-bezier(0.34, 1.4, 0.64, 1) | Lo que brota | | Lenta | 800 | | Colocado | cubic-bezier(0.19, 1, 0.22, 1) | Lo que se coloca, no se suelta (0.7 s, de mymind) | | Costura | 1600 | | Nodo | cubic-bezier(0.34, 1.56, 0.64, 1) | Los nodos del logo | | Presión | 120 | | | | | | Gesto de ícono | 520 | | | | | | Árbol | 3800 | | | | | | Respiración del aura | 8000 | | | | | ### 10.2 Principios - **Las cosas se cosen, brotan o respiran.** El vocabulario del movimiento sale del hilo: trazos que se dibujan, nodos que brotan con rebote, auras que respiran, crayola que hierve. Nada se desliza porque sí. - **Un solo momento orquestado por sección o pantalla** (D21), no un fundido en cada cosa. - **Sí hay movimiento continuo** (D39: sin él "el sitio se sentía apagado"): el aura respira, la crayola hierve mientras se ve, los íconos se animan al entrar, los destellos respiran, el botón de Hablar late suave (2.4 s, un halo al 18%). - **Pero todo se detiene:** fuera de pantalla, con el control global "Pausar movimiento" y con el movimiento reducido del sistema (entonces todo queda en su estado final). Este es el trato de D36 que se quedó. - **Las respuestas a lo que ella hace sí se animan:** una opción elegida se marca 180 ms antes de pasar a la siguiente pregunta, y la pantalla cambia con un fundido y 28 de desplazamiento, con el foco en la pregunta nueva. - **La placa del hero** rota cada 5 s, porque da tiempo de leer (D41). --- ## 11. La app: lo que ya está diseñado Las pantallas de la app solo existen como mockups de la landing (`src/mockups/pantallas/*`, copy en `copy.mockups`). Se ven vivas en `/lab/mockups` y en el hero de biocod.app. - **Tamaño lógico:** teléfono 390 × 844 (Android 360 × 800) y reloj 208 × 248. - **Estilo base:** fondo hueso, texto tinta, tarjetas blancas de radio 18 con borde de línea. ### 11.1 La barra de pestañas | Hoy | Mi árbol | Mi cuaderno | Yo | | ------------------ | ------------------------ | ------------------------- | ----------- | | Un sol que amanece | Un árbol de copa redonda | Un cuaderno con renglones | Una persona | - Íconos de 26 con trazo de 1.8, siempre con su palabra (16; 500 inactiva y 600 activa). - La pestaña activa va en añil, con la píldora de Android (60 × 32, radio 16) en tono tenue detrás del ícono. - "Mi cuaderno" es un poco más ancha (rejilla 1, 1, 1.3, 1). - Fondo blanco con borde superior de línea. ### 11.2 Hoy De arriba abajo: 1. El **aura del color del día** con grano (sección 7.4). 2. La fecha ("Viernes 23 de octubre") y, a la derecha, la **píldora de la emoción**: "Añoranza", con dos discos corridos como risografía. El color nunca va sin su nombre. 3. La **adivinanza** en Fraunces de 34: "Puede que hoy amanezcas con añoranza." 4. La **razón**, en Literata de 18 y anclada en sus datos: "Mañana se cumplen 3 años de que se fue tu abuela Rosa, y el domingo le escribiste." 5. Los **botones del color**, de 52 de alto y a lo ancho. Hoy: "Sí, así me siento" lleno y "Hoy es de otro color" en contorno. **D49 pide cuatro botones parejos:** "Sí, ese", "Hoy es otro color", "No sé" y "Hoy sin color", más la línea fija "Es solo una idea. Tú sabes mejor cómo estás." 6. La tarjeta **"Código del día"**: "Hoy márcale tú." (Literata 600, 22). 7. La tarjeta **"Tu paso de hoy"**, con una casilla de 26: "Escríbele a una amiga y queden de verse esta semana." D46 la cambia a "Elige tu paso de hoy", con dos o tres pasos chicos para que ella elija uno. ### 11.3 Mi árbol - Título "Mi árbol" en Fraunces de 34 y "2 hilos encontrados". - El árbol quieto a todo lo ancho, con el halo en el pariente del hilo principal. - La tarjeta del hilo: "Hilo de nacimiento" y "Tú y tu abuela Rosa nacieron en marzo."; abajo, al bajar, "Síndrome de aniversario". - Familia de ejemplo: María y Jorge; Rosa, Toño, Lupe y Ramón; y ocho bisabuelos. ### 11.4 Mi cuaderno: la sesión como WhatsApp - **El fondo** es papel con la trama de puntos de serigrafía. - **La barra de arriba:** el avatar (el símbolo del Hilo en un círculo añil de 50), "Paso 3 de 9" y "El bioshock", y nueve barritas de progreso (las hechas en cempasúchil). - **La charla va pegada abajo,** como el último mensaje de un chat: la fecha centrada y **una sola burbuja** blanca con colita, en Literata de 26: "Cuando pasó, ¿lo viste venir?" - **La entrada:** el campo en píldora de 56 ("Escribe tu respuesta") y el botón **"Hablar"** en añil, con micrófono y palabra. - **Reglas de la conversación** (semántica, sección 3): - una pregunta a la vez y máximo dos repreguntas; - "No sé" y "Prefiero no contestar" siempre; - voz o texto; - el agente devuelve sus palabras y no interpreta nada antes del paso 9; - nunca se cobra a la mitad. ### 11.5 La devolución (D46, D47) Se ven tres partes separadas, para que ella distinga lo suyo, el cálculo y la lectura: | Parte | Material | Ejemplo (Guadalupe, BORRADOR) | | ---------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Lo que contaste** | Cuero, con la etiqueta grabada en dorado | "Te llamas Guadalupe. Tu abuela también, y cosía para otras. Dijiste: "nadie ve lo que hago"." | | **Lo que calculó Biocod** | Papel | "Llevas el nombre de tu abuela: en el método eso se llama doble. Es una coincidencia de nombre y no prueba nada por sí sola." | | **Lo que propone el método** | Papel, siempre en condicional | "A veces llevar el nombre de alguien se vive como repetir algo de su historia. Puede que de ahí venga eso de trabajar mucho sin que se vea, y que hoy te toque firmar lo tuyo." | Le siguen: **Tu acto simbólico**, **Elige tu paso de hoy** (tres pasos chicos, y uno es dejarlo para mañana) y **Para tu cuaderno** (una pregunta). D47 suma, para la app: - un botón **"¿De dónde sale?"** en cada hilo, con los datos exactos, quién los contó y qué no prueba; - corregir un dato recalcula el hilo, y si ya no se sostiene, lo dice: "Con el dato corregido, este hilo ya no aparece". ### 11.6 El reloj (watchOS) - **Código del día:** "Hoy márcale tú." y el botón "Ya le marqué". - **Color del día:** el disco del aura, "Añoranza" y "Así me siento" en cempasúchil. - **Tu paso:** un anillo de avance cempasúchil con "1 de 2" y "Escríbele a una amiga". ### 11.7 Conceptos y cómo se ven **Hilos** (`src/lib/sesion/hilos.ts`): - Se calculan sin IA y sin red. Se muestran dos como máximo, del más fuerte al más débil, cada uno con su nombre del método como subtítulo: - **Doble** ("Llevas el nombre de tu abuela Rosa."); - **Síndrome de aniversario** ("Tu abuela Rosa vivió algo parecido a los 46. Tú tienes 46."); - **Lealtad invisible** ("A ti y a tu abuela Rosa se les complica lo mismo: el dinero."); - **Hilo de nacimiento** ("Tú y tu mamá nacieron en marzo.", con su nota "La probabilidad era de 1 en 12. En tu familia pasó."). - El hilo siempre se dibuja en cempasúchil con su funda hueso. **La sesión de 9 pasos:** 1. El motivo 2. El desencadenante 3. El bioshock 4. El resentir 5. El programante 6. El proyecto sentido 7. El árbol 8. La lealtad y la creencia 9. La toma de conciencia El progreso se dice "Vas en el paso 5 de 9". **El cuaderno:** un check-in de una palabra ("¿Cómo amaneciste, en una palabra?"), la pregunta del día (no se repite en 30 días) y la sesión profunda. Voz o texto. Hay 8 preguntas por dominio en `src/content/banco.ts`: trabajo, dinero, pareja, familia, propósito, paz interior y, con candados, cuerpo y comida. **El color del día: un regalo, no una calificación (D49):** - Biocod adivina un color y ella dice si le atinó. - Sin números, porcentajes, palomitas, caritas ni rojo y verde de juicio. - Se quita "Le atinamos 5 de 7 días". - "Tu mes en colores" es opcional y sin cuadros vacíos que parezcan faltas. - Ella elige el modo en "Yo": "Adivina", "Solo pregúntame" o "Sin color del día". - Fórmula propuesta: 0.45 diario, 0.20 calibración, 0.15 historia, 0.15 fechas y 0.05 sesión. Solo adivina si la mitad o más sale de sus palabras. - Los colores de cuidado (carga, desasosiego, duelo tibio, deuda) necesitan algo que ella haya escrito en las últimas 48 horas. **Actos simbólicos:** - Carta de liberación (no se envía) - Devolver la carga - Frase de liberación - Firmar con tu nombre - Ofrenda de hilos - Soltar al cerrar la semana - Recuperar algo de niña - Cobrar lo pendiente Ninguno confronta, corta relaciones, cuesta dinero, usa fuego sin cuidado o ayuno, ni toca el cuerpo. Seguimiento a los 3, 7 y 21 días: "¿Qué cambió desde que hiciste tu acto?" **Guardar y retomar antes que el hábito (D48):** - Al abrir: "Vas en el paso 4 de 9", con "Seguir" y "Algo más corto hoy" del mismo tamaño. - Un cierre semanal sin conteos. - Un solo recordatorio opcional, con hora y pausa. - Sin racha en la primera versión, y nunca "Te extrañamos". **La ofrenda de hilos (D54):** - Junto a cada persona de su árbol, algo que le dejó: una receta, una frase, una manera de reír. - Opcional, sin interpretar nada y sin suponer que alguien murió. - Abre el 28 de octubre (hora de Ciudad de México) y lo escrito no vence. - Ya existe en la landing (`src/ui/ofrenda/*`, `/lab/ofrenda`). **La tarjeta para compartir:** - 1080 × 1350 en añil, con el hilo cempasúchil y un nodo por persona. - **Solo iniciales o parentesco, nunca nombres ni lo que ella escribió.** - Se comparte con el menú del teléfono. **Gratis y Biocod Plus:** - **Gratis:** "Tu árbol de 3 generaciones, 2 hilos y tu cuaderno donde lo dejaste." - **Plus** (en cuero añil): - precio: "83 pesos al mes, 999 al año", "o 149 al mes", "7 días gratis"; - incluye sesiones completas, todos los hilos, cuaderno de voz con memoria, color del día y reporte semanal. - Cada actividad dice "Incluido gratis" o "Con Biocod Plus" antes de empezar. **Notificaciones:** - Una al día como máximo, con texto neutro ("Tu siguiente pregunta está lista"). - Nunca colores de cuidado, nombres ni nada íntimo, porque en Android el teléfono a veces se comparte. **Cody** (`05_landing/PROMPT_CODY_3D.md`, SVG en `01_logos/biocod/cody/`): - **Cómo es:** una semilla cempasúchil con hojas de nopal, raíces que terminan en nodos y un pespunte en la panza. - **Estados:** calma, saluda, escucha, hoja, celebra, espera, esconde y aparece. - **Cómo habla:** no es la guía ni da lecturas. Frases cortas: "Aquí estoy", "Hoy echaste hoja". - **Nunca** puntos, medallas ni culpa; si ella falta días, espera sin entristecerse. - **Se esconde** en duelo, en crisis, en hilos delicados y en cualquier mención de salud. - **Es opcional** ("Mostrar a Cody" en "Yo"). - **Modo 2D:** SVG con microanimaciones que se repiten tres veces como máximo y un presupuesto de 1.2 MB. - **Estado:** todavía no está construido. --- ## 12. Voz y copy ### 12.1 Cómo habla Biocod - **De tú,** cálido, sin infantilizar, en frases cortas (12 palabras o menos cuando se puede) y con nivel de lectura de secundaria. - **Anclado en lo que ella dijo:** "Mañana se cumplen 3 años de que se fue tu abuela Rosa, y el domingo le escribiste." - **Sus palabras arriba, las del método abajo (D46):** - ellas dicen "romper el patrón", "lo que cargo", "lo que se repite"; - los términos del método ("síndrome de aniversario", "lealtad invisible", "el resentir", "conflicto programante") van como explicación, nunca como gancho. - "Yacente" nunca va en el arranque, en widgets ni en la landing. - **Lecturas en condicional,** siempre. - **Sin culpa:** nada de "tú lo atrajiste". En su lugar, "lo que sí está en tus manos hoy". - **Botones con verbo y en tipo oración:** "Ver mis hilos", "Guardar y avisarme", "Seguir mi sesión". - **Español de México:** - "márcale" (no "llama tú"), "celular" para los datos, "siempre a la mano" (no "en tu bolsillo"), "sin letras chiquitas"; - nada de calcos del inglés y nada de leísmos. ### 12.2 Ejemplos de copy aprobado - "Descodifica lo que se repite en tu familia." (H1 A) - "Sin tarjeta y sin fotos de tu familia." - "Tu mamá, tus abuelas, tus bisabuelas. Nombres, fechas y lo que sepas. No necesitas fotos de tu familia ni pedirle nada a nadie." - "Biocod cruza fechas, nombres y edades y te enseña lo que se repite: síndromes de aniversario, dobles, lealtades. Y te dice de dónde sale cada uno." - "Dilo como se lo dirías a una amiga." - "Con estos datos todavía no aparece un hilo, y es normal. Muchas veces sale al sumar a tu abuela por parte de papá. ¿La agregamos?" - "Tu día tiene color. Y no de semáforo." - "Tú le dices si le atinó, y cada vez te conoce mejor." - "Hoy márcale tú." - "Tú decides qué significa." - "Tus gatos también son familia. Súbelos a tu árbol. No tienen hilos, pero vaya que opinan." - "Empieza por ti. Lo demás se va acomodando." - "Esta rama del árbol todavía no existe." / "Volver a tu raíz" ### 12.3 Convenciones - **BORRADOR:** en la landing, un comentario `/** BORRADOR (Dxx) */` arriba del texto en `src/content/copy.ts`. `docs/COPY.md` lo marca solo. Copia esa costumbre a la app. - **Deslindes:** son los únicos textos que nombran lo que Biocod no hace (`copy.deslindes`), y van aparte del resto. - **Sin resolver en el copy:** - "Código del día", "frase diaria" y "Tu frase" nombran lo mismo; - "Tu devolución" suena a reembolso (se proponen "Tu toma de conciencia" o "Tu cierre"); - "Site by lowki" está en inglés. --- ## 13. Qué falta diseñar y qué decidir ### 13.1 Pantallas que no existen todavía - **Yo:** perfil, modo del color del día, mostrar a Cody, recordatorio, tu plan y cancelar, privacidad y borrar todo. - **La paleta de las 14 emociones** para elegir el color. - **"¿De dónde sale?"** y corregir un dato. - Reporte o cierre semanal. - El arranque. - Los actos simbólicos. - El protocolo de crisis. - El paywall (con la frase exacta de cobro). - Los estados vacíos. - Cody. ### 13.2 Choques del mockup con las reglas nuevas - Hoy tiene dos botones desparejos; D49 pide cuatro parejos y la línea fija. - "Tu paso de hoy" es un solo paso; D46 pide elegir entre dos o tres. - El mockup dice "Hoy es de otro color" y "Puede que hoy amanezcas con añoranza"; la semántica dice "Hoy es otro color" y "Puede que hoy amanezca la añoranza". - La palabra del logo en #2F3328 contra el texto en #1F2F46 (sección 3.6). - El área de respeto medida con una "a" que no existe (sección 3.5). - El escalón de la "b" en los maestros (sección 3.3). - 3 o 4 generaciones en el árbol (sección 8.5). ### 13.3 Decisiones de Iker que tocan la app 1. Aprobar D47 a D53 (`docs/PLANTEAMIENTO.md`): - los pesos del color del día; - si Cody sale prendido o apagado; - qué proveedores de IA y de transcripción; - si el audio se borra al transcribirse. 2. Elegir el fondo de la placa (`/lab/fondo-placa`), que puede volverse el lenguaje de ilustración. 3. Elegir en `/lab/crayola` (hoy Caveat Brush) y en `/lab/cuero` (el Plus va en cuero añil). 4. Las 28 devoluciones de la mini sesión y todo el copy marcado BORRADOR. 5. Cuerpo y comida en la app: después de la experta en TCA, la revisión legal y las pruebas de ataque (`docs/agente/PRUEBAS-CUERPO-Y-COMIDA.md`). --- ## 14. Para pasarlo a la app - **Tokens:** `docs/handoff/tokens-biocod.json`, con los valores ya resueltos en dos tintas y nombrados por rol. Los px de la web son dp en Android y pt en iOS. - **Fuentes:** Literata, Instrument Sans y Fraunces (instancia 450, opsz 144, SOFT 100, WONK 0) en TTF; la crayola horneada sale de `tools/fuentes/crayola.py`. - **Vectores:** los maestros de `public/brand/`, los íconos exportados desde `/lab/iconos` y Cody desde `01_logos/biocod/cody/`. - **Animaciones:** el logo, los íconos, los hilos y el pespunte son trazos que se cosen (trim de 0 a 1). Las auras respiran con opacidad y escala. La crayola alterna tres fuentes. - **Grano:** textura de ruido de 128 en soft-light, generada una vez. - **Ventaja de no tener stack decidido:** si la app se hace en React Native o con Expo, buena parte de `src/lib/sesion/*` (el cálculo de hilos, el resultado y las devoluciones) se puede llevar tal cual, con sus pruebas. - **Probar con ellas:** antes de gastar en anuncios va la prueba de comprensión con 5 a 8 mujeres (`docs/investigacion/PRUEBA-COMPRENSION.md`). ## 15. Mapa de archivos | Qué | Dónde | | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | Tokens | `src/styles/tokens.css`, `src/ui/retro/dos-tintas.css`, `src/motion/tokens.ts` | | Fuentes | `src/styles/fonts.css`, `public/fonts/`, `tools/fuentes/` | | Logo | `src/ui/Logo.tsx`, `src/ui/logo/`, `public/brand/`, `tools/marca/palabra.py`, `~/Developer/astrocod/01_logos/biocod/` | | Materiales | `src/ui/capitone/` (Tapiz, Pespunte, Boton, Grano, cuero) | | Retro | `src/ui/retro/` (Feria, Destello, Resaltado, Estallido) | | Íconos | `src/ui/IconoVivo.tsx`, `src/ui/iconos/` | | Crayola | `src/ui/crayola/`, `public/texturas/cera.png` | | Árbol | `src/ui/ArbolPixel.tsx`, `src/lib/arbol/` | | Pantallas de la app | `src/mockups/pantallas/`, `src/mockups/dispositivos.css` | | Sesión, hilos y devoluciones | `src/ui/sesion/`, `src/lib/sesion/`, `src/content/devoluciones.ts`, `src/content/banco.ts`, `src/content/emociones.ts` | | Ofrenda | `src/ui/ofrenda/`, `src/lib/ofrenda.ts` | | Copy | `src/content/copy.ts` (espejo en `docs/COPY.md`) | | Decisiones | `docs/DESIGN-DECISIONS.md` (D1 a D55), `docs/PLANTEAMIENTO.md` | | Método | `~/Developer/astrocod/05_landing/SEMANTICA_Y_PROTOCOLO.md` | | Cody | `~/Developer/astrocod/05_landing/PROMPT_CODY_3D.md` | | Agente y Cuerpo y comida | `docs/agente/` | | Guía de marca vieja (parte desactualizada: la "a", la Luna, los colores de antes) | `~/Developer/astrocod/04_marca/Guia_de_marca.md`, `~/Developer/astrocod/05_landing/marca/` | **Labs, la guía de estilo viva** (`/lab` en local o en https://biocod-demo.pages.dev/lab): | Lab | Qué muestra | | ------------------- | ------------------------------------------------------ | | `/lab/logo` | El Hilo en todos los fondos y animado | | `/lab/paleta` | Los tokens con su contraste en vivo y las 14 emociones | | `/lab/fonts` | La escala de letra | | `/lab/tapiz` | Papel, cuero, botones y grano | | `/lab/iconos` | Los íconos vivos, con exportación a SVG | | `/lab/arbol-pixel` | El árbol que crece | | `/lab/juguete` | La mini sesión y sus 28 devoluciones | | `/lab/mockups` | El teléfono y el reloj, con capturas | | `/lab/transiciones` | Las transiciones | | `/lab/copy` | Las variantes del título y del resaltado | | `/lab/crayola` | La crayola | | `/lab/cuero` | Las pieles | | `/lab/retro` | Las paletas de archivo | | `/lab/fondo-placa` | Los fondos para detrás del teléfono | | `/lab/ofrenda` | La ofrenda |