Guía de estilo
Catálogo vivo: todo lo de esta página sale del mismo CSS y JS que la app, así que si algo se ve mal acá, se ve mal allá.
Las reglas completas (y el porqué) están en web/ESTILO.md.
Principios
- La metáfora decora, no reemplaza. Cada guiño al juego va con texto claro al lado. Si hay que adivinar, se saca.
- Lo de hoy, primero. Lo primero que se ve es qué hay que hacer hoy: el diálogo y los pendientes.
- Pixel en los detalles, legible en el texto. Letra pixel para la marca y los números; avisos y títulos de panel con letra de lectura.
- Gordito y táctil. Contornos gruesos, sombras duras sin blur, botones que se hunden.
- Original, nunca copiado. Nada de sprites, logos, nombres ni tipografías oficiales. Todo el arte es propio, empezando por la marca.
- Los .md mandan. La web solo lee y muestra; la verdad está en el README y las fichas.
Metáfora
| En el juego | En el vivero | Componente |
|---|---|---|
| La enciclopedia de bichos | Justina, el registro del vivero | toda la app |
| Número de registro | Orden en la tabla del README | .numero |
| Tipos | Rasgos útiles de la planta (¿es tóxica? ¿suculenta?) | .pill-tipo |
| Barra de PS | Estado 🟢 🟡 🔴 ⚫ | .barra-ps |
| Estadísticas base | Necesidades y carácter, de 1 a 5 | .stat |
| Entrada descriptiva | Descripción de la ficha | .pantalla |
| Caja de diálogo | El aviso del día | .dialogo |
| Silueta de "visto, no atrapado" | Planta sin foto todavía | .sprite__silueta |
| Casillero libre | Lugar compacto para la próxima planta | .tarjeta--libre |
| Luces del aparato | Señal decorativa; el resumen de estados aparece en texto | .led |
| La hierba alta que se mueve | Hay algo para atender hoy | .hierba--agitada |
Marca
Justina es una J que brota de la tierra. Es el único dibujo vectorial de la app (el resto es pixel art) y vive en img/: el sistema redondea las esquinas del ícono, así que los PNG van cuadrados.
justina.svg (ícono) y favicon.svg (con esquinas, para la pestaña)
justina-simbolo.svg (sin fondo) y el enmascarable de Android (dibujo al 80 %)Color
Los valores cambian con el tema: probá el botón de arriba a la derecha.
Tipos
Planta siempre primero; máximo dos. Si es tóxica, el segundo es Veneno sí o sí.
Tipografía
--fuente-pixel · Tiny5
Justina N.º 001
Marca, números y algunos rótulos cortos. Nunca párrafos largos.
--fuente-texto · Nunito
Peperomia variegada
Todo lo que se lee: nombres (900), texto (400–700), cursiva para nombres científicos.
Íconos pixel
Dibujados como texto en js/pixel.js. Heredan el color del texto. En la interfaz, siempre estos; los emojis solo vienen del contenido de los .md.
Componentes
Movimiento
| Qué | Cómo | Cuándo |
|---|---|---|
| Espera del sprite | Dos cuadros, 1 s, steps | Ficha abierta; hover en tarjeta |
| Barra de PS | Se llena en --dur-lenta | Al aparecer |
| Bloques de estadística | Rebote escalonado, 70 ms entre bloques | Al aparecer |
| Botones y tarjetas | Suben 1–3 px en hover, se hunden al apretar | Siempre |
| Lente y hierba | Pulso / vaivén en loop | Solo si hay algo para hacer hoy |
Con "reducir movimiento" activado en el sistema, todo queda quieto.