Esta página es el sistema, no el taller. Aquí vive únicamente lo que ya se resolvió y se puede usar sin volver a preguntar. Lo que sigue abierto se prueba en el lab.
El isotipo son tres aros que no comparten centro: se amontonan arriba y se abren abajo, y el trazo pesa abajo y se afina arriba. Nada de eso es adorno. Es lo que impide que tres círculos concéntricos lean como diana de tiro, que fue el problema de todas las versiones anteriores.
Salió del taller de la onda moviendo perillas, no de una lista de propuestas. Sus parámetros son aros 3 · radio 46 · excentricidad .63 · crecimiento .94 · peso 8.5 · afinado .56, y de ahí se regenera: no es un archivo que alguien dibujó y hay que cuidar, es una fórmula.
A tamaño grande casi cualquier cosa se ve bien. Lo que decide es esto.
Por debajo de 18 px los tres aros se empiezan a cerrar. Para bordado, grabado o un favicon de 16, hay que usar sólo el aro exterior. En pantalla, de 20 para arriba, aguanta.
El margen mínimo alrededor del isotipo es el radio de su aro interior. No es una cifra que haya que recordar: está dentro del propio signo, así que se mide mirándolo.
Una sola paleta: azul a verde. Sale del diccionario de Sanzo Wada, de la combinación del azul tinta con el verde luz, más los compañeros que el propio Sanzo pone junto a esos dos colores.
El acento es luz, no tinta. El verde y el teal existen para iluminar un fondo, no para escribir encima de él: medido, el teal como texto sólo llega a 4.6:1, mientras que el papel rebajado llega a 9.6:1. Si tienes la tentación de poner una palabra en verde, va en papel y el verde va detrás.
Los números salen de leer el píxel ya compuesto, no el token: la opacidad heredada cambia el resultado y por eso mirar el token engaña.
| Combinación | Mide | Pide |
|---|---|---|
| Papel sobre azul tinta | 18.1:1 | 4.5 |
| Papel sobre teal | 3.94:1 | 3 (texto grande) |
| Rótulo de 16px sobre teal | 4.60:1 | 4.5 · va en azul tinta, no en papel |
| Apoyo sobre azul tinta | 3.77:1 | 3 (26px) |
Sobre el teal, el rótulo se invierte. El papel encima del teal sólo llega a 3.94:1 y un rótulo de 16px pide 4.5:1. Medida toda la paleta, el único color que pasa es el azul tinta, con 4.60:1.
Tres familias y un trabajo para cada una. Si algo no cabe en uno de los tres trabajos, no es que falte una familia: es que falta decidir qué es esa cosa.
Medido en el deck, la mono llegó a ser la familia más usada: 60 elementos contra 52 del cuerpo. Había pasado de rótulo a fuente del deck. La causa era de escala, no de gusto: lo único más chico que el cuerpo era la mono, así que cualquier cosa que tuviera que leerse pequeña acababa ahí. Con el escalón de pie resuelto, la mono vuelve a su sitio: rótulos de sección e índices numéricos, y se acabó.
Siete tamaños, más uno exclusivo del formato hablado. Cada interlineado es múltiplo entero de 18px, y el mayor mide exactamente una fila de campo. El tamaño del titular no se elige a mano: el motor mide el campo y baja de escalón hasta que el bloque cabe.
La escala tiene tres tallas, y la puesta es la compacta. Cuerpo a 26px. La regla de «no bajar de 1/30 del alto» es de auditorio, con gente a diez metros: este deck se presenta en una sala a tres personas o se abre en una laptop, y ahí inflar el texto no sirve de nada. Las otras dos -media (30px) y grande (32px)- existen por si el cuarto es grande o el proyector malo. Se cambia con ?lectura=media o ?lectura=grande en la URL de cualquier deck. Cada talla trae también su alto de tarjeta y de retrato, porque esos los fija la proporción y no el texto: las tres están medidas y ninguna desborda.
La compacta va sobre la línea base de 18. La media y la grande la parten a 9px, porque su cuerpo pide un interlineado de 45. La retícula no cambia: la fila de campo (144) y el medianil (36) siguen siendo múltiplos de 9.
d5 sólo se usa en el deck hablado, donde hay una idea por lámina y nada más.
Entre más grande el titular, más cerrado: de −.032em en d5 a −.020em en lead. Va con el tamaño y no con el deck, y por eso vive en la clase de la escala. Antes lo ponía cada deck por su cuenta (−.028, −.030, −.035) y la misma palabra al mismo tamaño medía distinto en cada presentación; se notaba sobre todo en la portada, que es idéntica en las tres.
Regla: la portada y el cierre se definen una sola vez, en lab/deck-comun.css. Ningún deck los estiliza por su cuenta. Es la única forma de que las tres presentaciones no se separen solas.
Método Müller-Brockmann, y su regla de oro no es “usa doce columnas”: es que la unidad no se inventa, sale del interlineado del texto. Primero se decide cómo se lee un párrafo y de ahí salen las filas, los medianiles y los márgenes. Por eso el texto sigue cayendo en la misma línea base aunque cambie de campo.
El cuerpo se lee a 26/36. Esos 36 se parten en dos y la unidad es 18px. Cierra exacto por los dos lados.
Los controles son para probar, no para guardar: el valor que manda vive en lab/tokens.css. Si al mover algo la cuenta deja de cerrar, lo dice abajo en ámbar.
| Pieza | Mide | En unidades |
|---|---|---|
| Línea base | 18 px | 1u |
| Fila de campo | 144 px | 8u |
| Medianil | 36 px | 2u · una línea de cuerpo |
| Margen arriba y abajo | 108 px | 6u |
| Columna | 108 px | 6u |
| Margen lateral | 114 px | el sobrante |
1080 = 108 + (5 × 144) + (4 × 36) + 108 · 1920 = 114 + (12 × 108) + (11 × 36) + 114
Esquinas cuadradas, sin bisel y sin sombra. La foto se recorta a un campo de la retícula; el campo la enmarca y por eso no necesita ni borde ni caja.
En una lámina interior el cuerpo a 26px hace de puente entre el titular y el rótulo, así que el rótulo a 16 se lee en su sitio. En la portada no hay puente: el nombre mide 136 y los otros dos elementos son lo único que queda, así que a tamaño de lámina interior se leen como notas al pie. Por eso ahí el rótulo y las etiquetas de contacto van a 20px y las firmas a 26, un escalón arriba cada uno.
La portada y el cierre no llevan degradado sobre la foto: el formato se parte en campos y cada cosa tiene el suyo. El corte cae en el canal de la retícula. Cuando la foto es del equipo, la caja se le da a la proporción del archivo, no al revés: la del cierre mide 828×553 para un archivo de 1200×802, o sea cero recorte, y así no se corta nadie.
Nada de gente que se lea como foto de stock en México. Ninguna lámina es sólo foto: siempre lleva texto encima, aunque sea una frase. Y la foto tiene que decir algo de la frase que acompaña, no sólo rellenar.
El brillo no es un degradado: son luces de colores puestas detrás, dos focos radiales que se cruzan sobre el color base. Por eso funciona con cualquier color de fondo y no se ve como una figura pegada.
Anillos concéntricos de pincel spray, generados en el generador. Dos usos, y sólo dos: de fondo sobre una lámina de color pleno, o de elemento gráfico, un cúmulo grande y fuera de centro que sangra por un borde.
Si la lámina lleva mucho texto, no lleva textura de fondo. Ahí la textura pasa a ser elemento, o no está.
Las dos llevan la onda, pero sólo dentro del campo de color: nunca encima de la foto. En la portada ocupa el campo entero, que lleva poco texto. En el cierre se queda del lado de la foto y no cruza al campo del texto, que ahí va denso. Es una sola onda, abierta, casi centrada en su campo, al 40% de tinta: se tiene que leer como agua, no como ruido.
Esto todavía no es sistema. Vive en el lab hasta que se cierre.
El signo. Diez propuestas en /signo/, ninguna elegida. La segunda tanda prueba el signo como el ° de «180°», para que sobreviva al cambio de nombre; la recomendación es el aro.
Los pesos. Display 600 hace hoy dos trabajos: el énfasis dentro del titular y el peso por defecto de los subtítulos. Hay tres versiones comparadas en lab · pesos.
Las cursivas. Si se usan y en qué palabras. Sólo serif y sólo cursiva real, nunca inclinada falsa.
El radio de las tarjetas. La comparación está en lab · referencia Tayá; la recomendación es cuadradas.
El agua. Si el generador de ondas entra a los decks o se queda como experimento.
Las fotos reales. La lista de tomas está lista; falta la sesión que reemplace el stock.