Trama: blanco, negro y un punto por medida
Un sistema de tokens CSS y pocos componentes. Todo se lee en los dos temas: el botón de la cabecera cambia entre claro y oscuro para comprobarlo.
Cómo se decide
Tokens, no valores
Los componentes leen
var(--color-*),--space-*y similares. Un valor escrito a mano es un error de diseño.Dos temas, un valor
Cada token de color usa
light-dark(). El tema oscuro invierte el blanco y el negro.Nada de grises planos
Un tono intermedio se imprime con puntos: la trama. Nunca se pone texto encima de una trama.
Un acento y el color del partido
El amarillo es la marca. El color de un partido aparece en su esfera, su banda y sus puntos. Sin sombras y sin esquinas redondas.
Lo aprendido
Reglas que salen de errores reales de la web. Cada una dice qué hacer y por qué.
Quesitos sin texto girado
Una tarta con códigos de tres letras girados dentro de las porciones cuesta leerla. Los «quesitos» (
CategoryDonut) llevan cada etiqueta fuera del anillo, en horizontal, con código, nombre completo y porcentaje, unida a su porción por una línea fina. Porción, línea y etiqueta son un solo enlace. En un móvil no caben: el anillo va solo y debajo una lista de barras (CategoryBars) o botones.Un partido que cambia de nombre cambia de color
Sumar es magenta hasta el 16 de octubre de 2026; desde ese día es Frente Amplio, en bermellón. Las encuestas usan el nombre de su fecha y el simulador usa Sumar en el Congreso actual y en 2023, y Frente Amplio en «Todo a cero».
El color del partido subraya, no escribe
Las siglas llevan un subrayado fino del color del partido (
text-decoration-color). El texto sigue en tinta: un color claro no da contraste como texto.Líneas con contorno de tinta
En una gráfica, cada línea de color lleva debajo otra de tinta más ancha y cada punto un aro de tinta. Así VOX (verde claro) se lee sobre blanco y Podemos (morado) sobre negro, aunque el color solo no llegue a 3:1.
La incertidumbre es un halo
El margen de error o la horquilla de escaños se dibuja como un área suave del color de la serie (opacidad 0,16), bajo la línea. Las líneas se suavizan sin pasarse de los datos (curva monótona).
Las cifras de una frase, en placa
En la banda amarilla, los números van en Big Shoulders sobre una placa negra con texto amarillo (14,5:1 en los dos temas). Añade los espacios con
{' '}: Astro quita el espacio al principio de una línea.Partes proporcionales sin relleno
En una barra de partes con
flex-grow, las partes no llevanpaddingy una parte vacía se oculta. Si no, el relleno ocupa sitio y la barra deja un hueco al final.Una esfera que viaja
La esfera de la portada y la de un partido son enlaces. En la página de destino, un elemento con el mismo
view-transition-namerecibe la esfera. Solo conprefers-reduced-motion: no-preference.Desplegables que se notan
Lo que se abre es un botón con borde, icono y flecha que gira. Un texto suelto («Filtros avanzados») no parece que se pueda pulsar.
Marca
El nombre se escribe en Big Shoulders Display 900. La letra O es un punto macizo del color de la tinta.
Color
Cada muestra usa el token real: cambia con el tema. Debajo, el valor en claro y en oscuro.
Blanco y negro (el tema oscuro los invierte)
--color-paper#ffffff en claro, #000000 en oscuro--color-ink#000000 en claro, #ffffff en oscuro--color-ink-muted#3a3a3a en claro, #c8c8c8 en oscuro
El acento de la marca: amarillo con texto negro en los dos temas
--color-highlight#ffd23f--color-on-highlight#000000
Acento (amarillo; una página de partido lo cambia por el color del partido)
--color-accent#ffd23f--color-on-accent#000000
Marca (botón principal, esfera de la portada)
--color-brand#000000 en claro, #ffffff en oscuro--color-on-brand#ffffff en claro, #000000 en oscuro
Fijos (iguales en los dos temas)
--color-fixed-light#ffffff--color-fixed-dark#000000
Respuestas del juego «Sin siglas»
--color-answer-yes#1baf7a en claro, #199e70 en oscuro--color-answer-no#eb6834 en claro, #d95926 en oscuro--color-on-answer#000000
Los colores de partido no son tokens: llegan con los datos.
Trama
Puntos de la tinta en una celda de 7 px, en tres densidades. Se usan como fondo de barras, de casillas y de bloques. Los tokens son --trama-light, --trama-medium, --trama-dense y --trama-size.
Contraste
Razón de contraste WCAG calculada con los tokens. Mínimo 4,5:1 en texto pequeño y 3:1 en texto grande en negrita.
| Uso | Mínimo | Claro | Oscuro |
|---|---|---|---|
| Texto principalink sobre paper | 4.50:1 | 21.00:1 ✓ | 21.00:1 ✓ |
| Texto secundario (se usa poco)ink-muted sobre paper | 4.50:1 | 11.37:1 ✓ | 12.55:1 ✓ |
| Texto invertido (etiqueta de categoría, botón principal)paper sobre ink | 4.50:1 | 21.00:1 ✓ | 21.00:1 ✓ |
| Texto del tooltip (fijo en los dos temas)fixed-light sobre fixed-dark | 4.50:1 | 21.00:1 ✓ | 21.00:1 ✓ |
| Texto sobre amarillo (banda, provincia elegida, hover)on-highlight sobre highlight | 4.50:1 | 14.54:1 ✓ | 14.54:1 ✓ |
| Texto sobre el acento por defectoon-accent sobre accent | 4.50:1 | 14.54:1 ✓ | 14.54:1 ✓ |
| Texto sobre la marcaon-brand sobre brand | 4.50:1 | 21.00:1 ✓ | 21.00:1 ✓ |
| Respuesta «Sí» del juegoon-answer sobre answer-yes | 4.50:1 | 7.46:1 ✓ | 6.17:1 ✓ |
| Respuesta «No» del juegoon-answer sobre answer-no | 4.50:1 | 6.56:1 ✓ | 5.41:1 ✓ |
Cada superficie de partido calcula su color de texto (negro o blanco) con readableTextColor() ensrc/lib/color.ts, y el mapa de presencia oscurece o aclara el color hasta 3:1 conshiftForContrast().
Tipografía
Display
--font-display, Big Shoulders Display 900
Punto por punto
Titulares, siglas y cifras grandes. En mayúsculas, interlineado entre 0,88 y 0,9.
Texto
--font-body, Archivo 400, 600 y 700
Cada programa, descompuesto en sus medidas.
Cuerpo de texto, etiquetas y botones. Sin etiquetas pequeñas en mayúsculas.
--text-xs14pxLo más pequeño: leyendas y notas--text-sm15pxTexto de apoyo--text-md16pxTexto de medidas--text-base17pxTexto del cuerpo--text-lg19pxEntradillas y títulos de medida--text-xl28pxTítulos pequeños
Espacio, bordes y capas
Espacio
Rejilla de 4 px.
--space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8
Bordes
Continuos y de esquinas cuadradas. Sin sombras.
--border-thick 3 px: cajas y controles--border-fine 1,5 px: filas de listas y etiquetas de palancaCapas: --z-raised, --z-sticky, --z-header, --z-dropdown, --z-tooltip, --z-skip-link.
Movimiento: --duration-fast, --duration-base, --duration-slow y --easing-out. Se desactiva con prefers-reduced-motion.
Componentes
Button
src/components/ui/Button.astro, variant: default | ink, size: md | sm
El principal es de tinta con texto de papel. El secundario tiene un borde de 3 px. Con href es un enlace; sin él, un <button>. Con as="span" se dibuja igual dentro de otro enlace.
Tag
src/components/ui/Tag.astro, variant: default | ink | bold | highlight | party, size: sm | md | lg
La categoría va en tinta, el plazo con borde grueso y negrita, y las palancas y los colectivos con borde fino.
BlockChip
src/components/ui/BlockChip.astro, muestra de trama y texto, siempre juntos
Panel y SectionHeading
src/components/ui/Panel.astro y src/components/ui/SectionHeading.astro
Este recuadro es un Panel con título y línea de apoyo. Los títulos de sección de esta página son SectionHeading.
BarList
src/components/charts/BarList.astro, una serie en trama; pasa el ratón por una barra
Icon
src/components/ui/Icon.astro, rejilla de 20 × 20, trazo de 2,2 y puntas cuadradas
El icono toma el color del texto, así que sigue el hover del botón. Los puntos y bloques macizos usan la clase icon__dot. Un icono va siempre con su texto.
CategoryBars
src/components/charts/CategoryBars.astro, las categorías en una lista de barras
La barra es la parte de la categoría más grande; el número es la parte real del total. Cada fila es un enlace de 44 px o más.
Botones de opción
Grupos de botones con aria-pressed: orden, cámara, encuestadora, porcentaje o escaños
Botones pegados, con un solo borde entre ellos. El activo va en tinta con texto de papel; el hover, en amarillo.
Siglas con el color del partido
Menús, tarjetas de la portada y posturas de «Temas que dividen»
Tooltip
src/components/ui/Tooltip.astro, cualquier elemento con data-tooltip
Pasa el ratón o enfoca este enlace
Se construye con tooltip(titulo, ...lineas) de src/lib/tooltip.ts. El globo usa colores fijos (--color-fixed-light sobre --color-fixed-dark), iguales en los dos temas, y el título es negro sobre amarillo. Si un texto se corta con puntos suspensivos, el tooltip muestra el texto completo sin data-tooltip.
Superficies de objeto
src/styles/objects.css, .box, .box--interactive, .trama, .grid, .container, .headline
Dónde está cada cosa
src/styles/tokens.cssTodos los tokens. Único sitio con valores.src/styles/base.cssReinicio y elementos HTML.src/styles/objects.cssContenedor, caja, rejillas, trama.src/components/ui/Piezas reutilizables sin datos: Button, Tag, Panel, SectionHeading, BlockChip, Tooltip.src/components/home/La portada: titular, buscador y esfera de puntos.src/components/charts/Gráficos de un programa.src/components/candidacies/Mapas de provincias y candidaturas.src/components/simulator/Piezas del simulador de escaños: hemiciclo e iconos.src/components/layout/Cabecera, pie y logotipo.src/lib/Datos, rutas, formato y color. Sin marcado.src/lib/tests.tsLa lista de tests del menú «Tests» y de/tests/.src/data/temas.tsLos temas que dividen, comunes a todas las elecciones; las posturas, ensrc/data/<año>/<tipo>/posturas.ts.src/data/<año>/<tipo>/encuestas.tsEncuestas: porcentaje, muestra, escaños y enlace a la fuente.