Guía de estilo de Ágora Eve
Teatro editorial que se convierte en libro: la entrada es oscura y dramática; las superficies de trabajo, como esta, aclaran el fondo y conservan el mismo ritmo tipográfico. Esta página rinde cada cimiento y cada componente del sistema con los tokens de producción — si algo se ve mal acá, está mal en el producto.
Paleta y semántica
Tonos planos, sin degradados. La noche y el carbón sostienen el teatro; el pergamino y el marfil, la lectura. Cinco acentos de peso parejo hacen el resto del trabajo.
El rojo de riesgo queda reservado a fallos explícitos y siempre etiquetados con texto. El borgoña marca colección o tensión filosófica: nunca es un color de error.
El color de colección identifica una colección de clase o una escuela filosófica. Nunca codifica calidad ni nota, y siempre viaja acompañado de su etiqueta de texto.
--surface-impactentrada teatral y sala en vivo--surface-darkpaneles oscuros--surface-dark-raisedtarjeta sobre fondo oscuro--surface-readingsuperficie de trabajo y lectura--surface-cardtarjeta sobre pergamino--surface-sunkencampos y fondos hundidos--text-on-dark-primarytexto principal sobre oscuro--text-on-dark-secondarytexto secundario sobre oscuro--text-on-light-primarytexto principal sobre claro--text-on-light-secondarytexto secundario sobre claro--text-linkenlaces y referencias--action-primaryrelleno de la acción dominante--action-primary-hoverpresión/hover de la acción--border-accentcontornos y reglas acentuadas--status-live-fgestado EN VIVO--status-danger-fgfallo explícito — siempre con etiquetaCuatro familias, un oficio cada una
Los titulares hablan en Cormorant Garamond; la lectura larga, en Source Serif 4 a medida de 68–78 caracteres; la interfaz, en Inter; los códigos y metadatos compactos, en IBM Plex Mono.
Si una máquina produce respuestas indistinguibles de las de un humano en una conversación abierta y sostenida, entonces atribuimos comprensión en la práctica. La comprensión se revela en la conducta inteligible, no en el acceso interno a significados.
Escala de 4px y blancos accesibles
Todo múltiplo de 4. El blanco no es adorno: separa movimientos, voces y evidencias. El objetivo táctil mínimo es de 44px en todas partes — el aula proyecta y se toca.
Esquinas, sombras y tiempos
Las esquinas crecen con la jerarquía de la superficie. El movimiento es breve y con propósito: nada parpadea ni se anima en continuo, y el estado se comunica siempre también con texto.
Cada pieza en sus estados
Los once componentes de producción, rendidos desde components/ui con los mismos tokens que el resto del producto.
NavBar
Navegación superior. La variante impact abre las superficies teatrales; la variante reading acompaña el trabajo sobre pergamino.
Button
Una sola acción dominante por escena. El relleno musgo es de la acción principal; el contorno oro viejo, de la secundaria; danger existe solo para fallos explícitos y etiquetados.
Badge
Etiqueta chica de identidad o metadato. El color de colección viaja siempre con su nombre en texto.
StatusPill
El ciclo completo del encuentro, del borrador al archivo. El estado nunca depende del color solo: siempre hay etiqueta, y el pulso de EN VIVO es un anillo quieto, no un parpadeo.
ProgressSteps
Los cuatro pasos del estudio docente: contexto, pregunta y resultado, elenco y tensión, participación y entrega.
PersonCard
Una voz del elenco: retrato real, posición y fechas. Cuando interviene, el borde oro viejo y la marca de texto lo dicen a la vez.
EvidenceCard
La cita exacta en el punto de uso, nunca como apéndice decorativo. Distingue evidencia verificada de fuente primaria.
Siendo todos iguales e independientes, nadie debe dañar a otro en su vida, salud, libertad o posesiones. — Locke, Segundo Tratado, §6
No es de la benevolencia del carnicero, del cervecero o del panadero que esperamos nuestra cena, sino del cuidado que ponen en su propio interés. — Smith, La riqueza de las naciones, I.2
Solo podemos ver poco del futuro, pero lo suficiente para darnos cuenta de que hay mucho que hacer. — Turing, Computing Machinery and Intelligence
BookSpine
Un encuentro terminado es un lomo en el estante: título, elenco abreviado, fecha y color de colección. El ancho aproxima la duración dentro de límites accesibles.
VoteBar
Una opción de votación de clase en vivo: número editorial, etiqueta, porcentaje y barra. El musgo marca el voto propio.
CodeInput
El código temporal con el que el estudiantado se suma a la sala: casilleros mono de objetivo grande que avanzan solos.
TextInput
Campo de una línea para los formularios del estudio docente, con etiqueta en mayúsculas mono y ayuda opcional.