Color plano de serigrafía
Un color, una tinta. Ningún degradado ni sombra suave. Donde se superponen dos tintas, el color se oscurece.
Sistema visual · cancionero
Gráfica popular para la calle: color plano, contorno grueso y tipografía de cartel. Esta página muestra la paleta, los estilos, las tipografías y los patrones con los mismos tokens que usa el sitio.
El cancionero se usa en la calle: se lee de lejos, en movimiento, a veces sobre un muro o una pancarta. Por eso la estética sale de dos tradiciones populares que conocemos en general:
Lo que sigue es una lectura de rasgos formales. No atribuimos ninguno de ellos a una obra ni a una persona concreta.
Siete colores, cada uno con una función. El rojo y el negro son el puente con el sitio; los demás son propios del cancionero.
--c-papel
#F1E8D4
Fondo de página. Papel de afiche, no blanco puro.
--c-papel-carton
#E2D3B0
Fondo de bloque o tarjeta.
--c-crema
#FBF7EE
Fondo de cartel recién impreso y de la puerta de la portada.
--c-tinta
#0A0A0A
Texto y contorno. Es el negro del sitio.
--c-rojo
#CE1126
Acento y acción. Es el rojo del sitio. Como texto, sólo sobre papel o crema.
--c-ocre
#E3A72F
Acento secundario: sellos y bandas. Va con tinta encima, nunca como texto sobre papel.
--c-oxido
#6E2C17
Tercer color del muro. Texto secundario sobre papel.
Cada par de texto y fondo se calcula con la fórmula WCAG 2.x al construir la página. El umbral AA es 4.5 para texto normal y 3 para texto grande. Los pares marcados «no se usa» se muestran a propósito: fallan, y por eso no van como texto.
| Muestra | Texto / fondo | Uso | Ratio | AA normal | AA grande |
|---|---|---|---|---|---|
| Aa | tinta / papel | Texto de página | 16.25 | pasa | pasa |
| Aa | tinta / crema | Texto de cartel | 18.52 | pasa | pasa |
| Aa | tinta / papel-carton | Texto de bloque | 13.37 | pasa | pasa |
| Aa | oxido / papel | Texto secundario | 8.47 | pasa | pasa |
| Aa | oxido / papel-carton | Texto secundario en bloque | 6.97 | pasa | pasa |
| Aa | rojo / papel | Enlace y titular rojo | 4.62 | pasa | pasa |
| Aa | rojo / crema | Titular rojo de cartel | 5.26 | pasa | pasa |
| Aa | papel / rojo | Botón de acción | 4.62 | pasa | pasa |
| Aa | papel / tinta | Texto invertido | 16.25 | pasa | pasa |
| Aa | tinta / ocre | Sello | 9.27 | pasa | pasa |
| Aa | rojo / tinta | Rojo como texto sobre negro (no se usa como texto) | 3.52 | falla | pasa |
| Aa | ocre / papel | Ocre como texto sobre papel (no se usa como texto) | 1.75 | falla | falla |
Los ratios se miden sobre el color sólido. El grano y la trama son capas decorativas y no van bajo texto corrido.
Sólo fuentes que el sitio ya carga, o del sistema. No hay ninguna dependencia nueva.
--c-fuente-cartel--c-fuente-texto--c-fuente-canto--c-fuente-registro
Escala de espaciado:
s1 0.25rems2 0.5rems3 0.75rems4 1rems5 1.5rems6 2.25rems7 3rem
Seis rasgos del sistema. Son nombres de trabajo nuestros: no designan escuelas, autores ni obras. Cada uno tiene su muestra.
Un color, una tinta. Ningún degradado ni sombra suave. Donde se superponen dos tintas, el color se oscurece.
Lo importante lleva borde negro de 4 px y una sombra dura, sin difuminar.
Capas que no coinciden del todo, como una serigrafía hecha a mano. La superposición usa multiply, que simula dos tintas.
Figuras reducidas a un círculo y trazos gruesos. Dibujada para esta página; no reproduce ninguna obra.
Formas grandes y planas, legibles a distancia, con una banda geométrica como remate.
Una trama de puntos que sugiere tono sin degradado. Sólo en áreas sin texto.
Armados con los mismos tokens que el resto del cancionero. El texto es de prueba, no es una consigna ni un cántico real.
Cartel de muestra
Titular de muestra
Texto de prueba para ver la composición.
Serigrafía de muestra · 1 de 1
Cántico de muestra · texto de prueba
Verso de muestra, primera línea
Verso de muestra, segunda línea
Estribillo de muestra, en negrita
Verso de muestra, cierre
Hechos con CSS. No hay imágenes de archivo. Ninguno va bajo texto corrido.
.cc-trama: trama de medio tono. Usa --c-trama-paso y --c-trama-alfa.
.cc-banda-muro: banda rojo, negro y ocre. Usa --c-banda-alto.
.cc-banda-rayada: rayado diagonal de cartel.
.cc-grano: grano de impresión, capa de ruido bajo el contenido. Usa --c-grano-opacidad.
Sombra dura de serigrafía: --c-sombra = 4px 4px 0 var(--c-tinta).
Conocimiento general, sin nombres ni fechas. Es un punto de partida para investigar, no una bibliografía.
Revisión pendiente: esta página no la ha revisado nadie con conocimiento de la tradición. Hasta entonces, no se publica ninguna atribución.