Delete DESIGN.md
Browse files
DESIGN.md
DELETED
|
@@ -1,59 +0,0 @@
|
|
| 1 |
-
# DESIGN.md
|
| 2 |
-
|
| 3 |
-
Direccion visual del Space de PASITA. Referencia elegida por el usuario:
|
| 4 |
-
el panel oscuro naranja de `webml-community/lfm2-webgpu-kernels`.
|
| 5 |
-
|
| 6 |
-
## Lectura de diseno
|
| 7 |
-
|
| 8 |
-
Herramienta de documentos para usuarios de Hugging Face, en lenguaje de panel de instrumento
|
| 9 |
-
oscuro de webml-community, con diales ENERGY 2 / RHYTHM 1 / MOTION 1.
|
| 10 |
-
|
| 11 |
-
- ENERGY 2: presencia clara en cabecera y boton principal, sin hero ni decoracion de landing.
|
| 12 |
-
- RHYTHM 1: una sola composicion de dos paneles, porque la tarea es una entrada y una salida.
|
| 13 |
-
- MOTION 1: solo estados hover, focus y el pulso del estado de carga.
|
| 14 |
-
|
| 15 |
-
## Tokens
|
| 16 |
-
|
| 17 |
-
- Fondo `#050608` con gradiente radial calido/azul de identidad, texto `#f4f5f7`,
|
| 18 |
-
texto secundario `#9aa0ab`, texto terciario `#7f8698` (aclarado desde el `#6b7280` original
|
| 19 |
-
para cumplir AA), hairlines `rgba(255,255,255,0.14 / 0.08)`, paneles `rgba(255,255,255,0.03)`.
|
| 20 |
-
- Acento calido `#ff7a30` para la accion principal y el foco de estado; azul frio `#7aa0ff`
|
| 21 |
-
solo para el anillo de foco de teclado. Peligro `#ff7a6b`.
|
| 22 |
-
- Tipografia: Hanken Grotesk para lectura, JetBrains Mono para etiquetas, contadores y estado.
|
| 23 |
-
|
| 24 |
-
## Por que cada decision
|
| 25 |
-
|
| 26 |
-
- Fondo casi negro: la tarea es leer documentos; el color compite con el contenido.
|
| 27 |
-
- Un solo acento calido: marca la accion y el estado activo; no hay acento decorativo repartido.
|
| 28 |
-
- Mono solo para maquina: etiquetas, contadores, metricas y estado. La prosa usa Hanken Grotesk.
|
| 29 |
-
- Dos paneles: la conversion es entrada -> salida; en movil se apilan.
|
| 30 |
-
- Linea de estado con metricas reales: prueba la promesa de fidelidad (numeros conservados,
|
| 31 |
-
cobertura, ruta usada) en lugar de afirmarla.
|
| 32 |
-
- Gradiente ambiente estatico y cabecera con blur unico: identidad de la referencia, sin
|
| 33 |
-
animaciones perpetuas ni glassmorphism generalizado.
|
| 34 |
-
- Controles reales: Convertir, Limpiar, candidatos 1 a 3 y conversor determinista. Ningun
|
| 35 |
-
elemento decorativo sin funcion.
|
| 36 |
-
|
| 37 |
-
## Contraste (WCAG AA)
|
| 38 |
-
|
| 39 |
-
Calculado con la formula de luminancia relativa:
|
| 40 |
-
|
| 41 |
-
- `#9aa0ab` sobre `#050608`: 7.65:1 (texto normal, pasa).
|
| 42 |
-
- `#7f8698` sobre `#050608`: 5.54:1 (texto normal, pasa).
|
| 43 |
-
- `#ff7a30` sobre `#050608`: 7.77:1 (texto y acento, pasa).
|
| 44 |
-
- Texto `#0b0705` sobre boton `#ff7a30`: 7.48:1 (pasa).
|
| 45 |
-
- Anillo de foco `#7aa0ff` sobre `#050608`: 7.96:1 (no textual, supera 3:1).
|
| 46 |
-
|
| 47 |
-
## Estados
|
| 48 |
-
|
| 49 |
-
- Vacio: el panel de salida muestra un marcador y el estado dice READY.
|
| 50 |
-
- Carga: Gradio muestra el progreso en el boton; el estado cambia con la ejecucion terminada.
|
| 51 |
-
- Error: el estado pasa a ERROR con el tipo de excepcion y la salida muestra el mensaje.
|
| 52 |
-
- Teclado: todo control es alcanzable, `:focus-visible` visible en azul.
|
| 53 |
-
|
| 54 |
-
## Lo que no se hace
|
| 55 |
-
|
| 56 |
-
- Sin emojis en el chrome de la interfaz.
|
| 57 |
-
- Sin capturas falsas, testimonios ni cifras inventadas.
|
| 58 |
-
- Sin animaciones en bucle ni glassmorphism en varias capas.
|
| 59 |
-
- Sin rejillas o patrones decorativos de fondo.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|