La edición de 2026
Colofón
Cómo está hecho este registro: los dos tipos de letra en que se compone, los colores que guarda de día y de noche y las reglas que nos imponemos, cada una con su porqué.
2.228.083 anuncios de 62 fuentes, última cosecha hace 24 minutos.
Tipografía
Dos letras, dos oficios
Fraunces
Undercase Type (Phaedra Charles y Flavia Zimbardi), 2020. SIL Open Font License 1.1.
Las licitaciones públicas de Europa, en un solo registro.
Fraunces habla. Compone cada título de página, las marcas de sección y la cifra de la que trata una página. Es una letra variable con cuatro ejes, y cada uno tiene aquí un trabajo.
- wght Peso
- 100-900
- Fina para las cifras, regular para los titulares, seminegra para los títulos.
- opsz Tamaño óptico
- 9-144
- Lo fija el navegador según el tamaño: los trazos finos adelgazan en un titular y los trazos engordan en un pie.
- SOFT Suavidad
- 0-100
- Redondea los remates: 30 para el titular de la portada, 50 para las cifras principales, 100 para el énfasis del titular.
- WONK Wonk
- 0-1
- Las h, m y n inclinadas que Fraunces puede dibujar en cuerpos grandes. Fijado en 0: un registro se lee derecho.
Inter
Rasmus Andersson, desde 2016. SIL Open Font License 1.1.
0123456789 Aa Gg Rr 4 6 & €
Inter trabaja. Compone la interfaz, las etiquetas, las tablas y cada cifra que se lee en columna, donde los dígitos tienen que alinearse.
- wght Peso
- 100-900
- Regular para leer, seminegra para etiquetas y títulos, negra para las pocas palabras que deben detener la mirada.
- tnum Cifras tabulares
- Cada dígito con el mismo ancho, para que una columna de importes se sume a ojo.
Color
Mediterrània, de día y de noche
Cuatro colores del Mediterráneo: el mar profundo, el agua, el cielo y el sol. Todo lo demás es un par, un valor para el día y otro para la noche, declarado una sola vez. Todo el sitio cambia con una única propiedad, así que ninguna página puede quedar olvidada a oscuras.
Los cuatro que nunca cambian
-
Mar profundo
brand-950 #023047
El fondo de cada bloque oscuro, y la tinta sobre el oro.
-
Agua
brand-500 #219ebc
La marca de sección y el anillo de foco.
-
Cielo
brand-300 #8ecae6
El énfasis del titular y el tono del mapa.
-
Sol
sun-400 #ffb703
Acción, novedad y un adjudicatario. Siempre lleva tinta oscura.
Los pares
Valores citados de la hoja de estilos tal como se sirve.
-
Papel paper
El fondo. Un blanco roto cálido con un grano que hay que buscar; de noche el grano desaparece.
- Día
- oklch(98.2% 0.006 85)
- Noche
- #0b1720
-
Hoja surface
Una tarjeta o un panel: una hoja sobre la mesa, nunca una caja blanca sobre una pared blanca.
- Día
- #ffffff
- Noche
- #102430
-
Tinta slate-900
Los títulos y el texto que se lee.
- Día
- oklch(20.8% 0.042 265.755)
- Noche
- #ecf3f6
16,9:1 de día, 16,1:1 de noche
-
Segunda tinta slate-500
Notas, fechas y pies. Nunca se usa nada más claro para el texto.
- Día
- oklch(55.4% 0.046 257.417)
- Noche
- #8aa4b2
4,7:1 de día, 6,0:1 de noche
-
Enlace brand-700
Las palabras que se pueden seguir.
- Día
- #136880
- Noche
- #56b4d4
6,3:1 de día, 6,7:1 de noche
-
Sol como tinta sun-700
El oro lo bastante pequeño para ser texto: la fecha de un folio, un cambio importante.
- Día
- #a35a00
- Noche
- #f9b24a
5,2:1 de día, 8,7:1 de noche
-
Filete hairline
La única línea entre filas. Solo el filete que abre el registro es más grueso.
- Día
- rgb(2 48 71 / 0.1)
- Noche
- rgb(236 243 246 / 0.13)
Reglas
Las reglas que guardamos, y por qué
-
Una tarjeta, un botón, un campo, un filete, un hover.
Un sitio acumula una sexta variante de todo, una función tras otra. Escribir el vocabulario es lo que lo detiene.
-
El oro siempre lleva tinta oscura.
El mar profundo sobre el sol se lee a 7,9:1. El blanco sobre el sol quedaría en 1,7:1, y nadie podría leerlo.
-
Cada color tiene un valor de noche.
Se declara una sola vez, como par, así que la edición oscura nunca es una ocurrencia tardía.
-
Nada entra con animación en la primera pantalla.
Una página que esconde lo que ya ha pintado hace esperar al lector para nada.
-
Todo funciona sin script.
El script solo añade. Un buscador, un móvil lento y un lector atento reciben la página entera.
-
Una cifra enlaza la lista que cuenta.
Un número que no se puede comprobar es una opinión.
-
Cada anuncio enlaza su fuente oficial.
Esto es un registro de documentos ajenos. El original está a un toque, y nunca reescribimos lo que dice.
-
Un pulgar necesita 44 píxeles.
Cada control en el móvil mide al menos eso, y cada campo se compone a 16 píxeles para que el móvil nunca haga zoom.
Materiales
De qué está hecho
- Tipos de letra
- Fraunces e Inter, ambas con licencia SIL Open Font License 1.1, servidas desde este sitio.
- Iconos
- Phosphor Icons, licencia MIT, una sola familia en el peso que pide cada uso.
- Banderas
- flag-icons de Panayiotis Lipiridis, licencia MIT, simplificadas donde un escudo no se leería.
- Datos
- Fuentes oficiales, TED primero. Cada una aparece, con su licencia, en el Aviso legal.
- Hecho
- En Barcelona, en seis idiomas. Esta página describe la edición de 2026.