Color
Cuatro caminos salidos del diccionario de Sanzo Wada, filtrados contra lo que ellas vetaron: nada de morado, nada de rosa. Cambia la paleta desde el riel y todo lo de abajo se mueve con ella.
EN USO Azul a verde. La elegida por Roberto y Lili. Azul tinta muy profundo con un verde que entra como acento, que es el paso de azul a verde que se buscaba desde la llamada.
Su límite medido: el blanco sobre el fondo da 18 a 1 y el verde 7.8, de sobra. Pero el teal de apoyo se queda en 4.6, así que sirve para filetes, subrayados y etiquetas grandes, nunca para texto chico.
ALTERNA Biblioteca es la más sabia y la de mejor contraste. Lapislázuli es más bonita pero más genérica. Verde seco es la más distinta y la más arriesgada. Las tres siguen probables desde el riel.
Ocho maneras
de meter la luz
La receta es siempre la misma: radiales con transparencia que se apagan antes del borde. Lo que cambia es de dónde entra la luz y cuánta. Todas usan el verde y el teal de la paleta, ninguna añade color nuevo.
Lo que está puesto hoy. La luz entra por arriba a la derecha y una segunda, más tenue, sube desde abajo a la izquierda.
Una sola banda baja y ancha, como luz que entra rasante. Deja la parte de arriba limpia para el rótulo.
Entra por un costado, como una ventana fuera de cuadro. La más cinematográfica.
La luz se ancla donde va el titular, así que lo empuja hacia adelante en vez de decorar la esquina.
Ambas del teal, ninguna del verde. Más sobria y más azul: pierde el paso a verde.
La misma receta al 15%. Apenas se percibe, y funciona mejor cuando encima va mucho texto.
Vertical en vez de radial. Se acerca al degradado lineal, que es lo que queríamos evitar: está aquí para descartarlo con criterio.
Las dos luces arriba, una de cada lado. Simétrica, más institucional.
Lo que hace que funcione, en cualquiera de las ocho. La elipse va más grande que la caja para que nunca se le vea el contorno, se apaga antes del borde para que no quede aro, y la opacidad no pasa de 45%.
Dónde se rompe. En cuanto se le nota el contorno, se le suben las luces a tres colores o se le sube la opacidad, deja de ser luz y se vuelve mancha. Ahí es donde cae en el fondo aurora que ya vimos que delata una pieza generada.
Ocho fondos,
la misma luz
Hasta ahora todo vivía sobre el mismo azul. Aquí la luz no cambia, siempre es el verde en la esquina alta; lo que cambia es sobre qué fondo cae. Siete salen de combinaciones de Sanzo que contienen alguna de nuestras luces, así que la pareja está avalada por él, no por mí.
Tinta azul · el actual. Sanzo c106, junto a nuestro teal. Es el que está puesto en los tres decks.
Azul casi negro. Sanzo c139, junto al azul papel. Más profundo y menos saturado: la luz verde resalta más porque el fondo pelea menos.
Verde casi negro. Sanzo c271, junto a nuestro verde. El fondo ya es verde, así que el brillo deja de ser un contraste y se vuelve continuidad.
Verde bosque. Sanzo c268 y c321. Más claro que el anterior y más vegetal. Es el que sostenía la paleta Verde seco.
Azul pizarra. Sanzo c263. Gris azulado, casi industrial. El menos dramático de todos y el más fácil de leer encima.
Azul medio. Sanzo c289, junto a nuestro tinta. Sube el azul y la lámina se vuelve más eléctrica.
Azul índigo. Sanzo c172, junto al teal. Ojo: está a un paso del morado, y el morado lo vetaron ellas. Aquí para que lo descartes viéndolo.
Negro neutro. El único que no viene de Sanzo. Sin matiz: la luz es lo único con color en toda la lámina.
Los dos extremos. El verde casi negro hace que el brillo deje de ser contraste y se vuelva continuidad: más sutil, casi sin drama. El negro neutro hace lo contrario, la luz queda como lo único con color en la lámina.
El índigo está a un paso del morado, que ellas vetaron explícitamente. Lo incluí porque Sanzo lo empareja con nuestro teal y porque es mejor descartarlo viéndolo que de palabra.
Y los dos que preguntaste
El ámbar y el teal como fondo, no como luz. Ninguno de los dos es oscuro, así que dejan de ser láminas de fondo profundo y se vuelven otra cosa. Con su contraste medido.
Obliga a invertir el texto. Sobre ámbar el blanco da 1.8 a 1 y es ilegible, así que el texto tiene que ser tinta: 9.6 a 1. Y la luz también se invierte, porque una luz clara sobre un fondo claro no se ve.
Se queda corto. Medido: papel sobre teal da 3.9 y tinta sobre teal 4.4. Ninguno de los dos llega a 4.5, así que con este fondo no hay texto de párrafo legible en ningún color. Sólo titular grande, que pide 3.
Aquí está, para que lo juzgues. Se ve suave y cálido, pero el contraste es 1.8 a 1. En pantalla grande y con sol encima desaparece, y en proyector desaparece seguro. Sirve como recurso de una lámina, nunca como sistema.
Por eso ninguno estaba. No fue olvido: los dos son de luminosidad media, y un fondo de luminosidad media no admite ni texto blanco ni texto negro con holgura. Los fondos profundos existen porque resuelven el contraste sin pensarlo.
Dónde sí servirían. El ámbar como lámina única de quiebre, con una sola frase en tinta. El teal para un dato grande o una portada de sección. Nunca para una lámina con párrafo.
La misma luz,
otro color
Aquí la receta no cambia: siempre es la esquina alta, la variante A. Lo único que cambia es de qué color es la luz, para aislar cuánto del carácter viene de la forma y cuánto del color. Todos salen de la paleta ampliada, así que ninguno es invento.
Sanzo c074. Es el que está puesto.
Sanzo c106. Más frío y más sobrio: se queda en el azul y no hace el paso a verde.
Sanzo c330. La luz se vuelve aire, no color. Es la más serena de todas.
Sanzo c302. Casi blanca. Ilumina sin teñir, como luz de ventana.
Sanzo c293. Apagado y vegetal. Menos digital que el verde actual.
Sanzo c289. Sube el azul sobre el azul: profundidad sin cambiar de familia.
Sanzo c114. El cálido contra el fondo frío. Es el más cálido que Sanzo autoriza aquí, y aun así cambia el carácter entero.
Luz blanca pura. Ningún matiz, sólo luminosidad. Si esta funciona, el color del brillo no era lo que sostenía la lámina.
La prueba que importa es la última. Si "sin color" aguanta igual de bien, entonces lo que sostiene la lámina es la forma de la luz y no su matiz, y el color del brillo puede elegirse por gusto sin arriesgar nada.
El ámbar es el único que cambia la marca, no sólo la lámina. Calienta todo y la aleja del registro sabio que veníamos buscando. Está aquí para verlo, no para recomendarlo.
La paleta,
ampliada
Azul a verde eran tres colores y para un sistema completo se queda corta. La amplié sin inventar nada: busqué en las sesenta combinaciones de Sanzo Wada cuáles contienen alguno de nuestros tres colores, y me quedé con los compañeros que él mismo les pone al lado.
#06004f tinta azul, #0f261f verde casi negro, #1b3644 pizarra y #202d85 azul medio. Dan fondos distintos sin cambiar de familia. Los tres nuevos salen de c271, c263 y c289, donde Sanzo los pone junto a los nuestros.
#2dbc94 es la luz, #008aa1 el teal de filetes, #65a98f un verde apagado de c293 y #bfffe6 el hielo de c302 y c330, que contrasta 16.6 a 1 sobre el fondo: el mejor color de texto secundario que tiene la paleta.
#96bfe6 viene de c330, la misma combinación donde está nuestro verde luz. Es literalmente el azul que Sanzo eligió para acompañarlo.
#ffab00 es el único cálido que Sanzo pone en duo directo con nuestro teal, en c114. No es decoración: es para una cifra o un dato al año, cuando algo tiene que gritar. Da 9.9 a 1 sobre el fondo.
El brillo
No es un degradado, son varias luces. Un degradado lineal se lee como elemento gráfico; esto se lee como una habitación iluminada. Se adapta solo a la paleta activa.
Y así se ve el texto secundario: papel rebajado, no el acento.
background: radial-gradient(120% 90% at 82% 4%, LUZ 42%, transparent 58%), radial-gradient(95% 78% at 8% 96%, APOYO 24%, transparent 60%), FONDO;
La elipse va más grande que la caja para que nunca se le vea el contorno, anclada cerca de una esquina, y se apaga antes del borde para que no quede aro. La opacidad no pasa de 45%.
Tipografía
ELEGIDAS Sentient para display, Public Sans para texto y IBM Plex Mono para etiquetas. Las tres familias están cerradas; lo que sigue abierto son los pesos, la caja de la mono y si entran las cursivas.
El peso ligero que te gustó. Aireado y culto, sin ponerse institucional.
Doscientos puntos de salto. En tamaño display eso basta para que la negrita se lea como negrita sin engordar la lámina. Menos de 400 no se distingue; 700 rompe el registro ligero.
Public Sans llega hasta 900. La negrita del deck venía clavada en 700 y por eso saltaba; ahora se controla aparte.
Negrita, cursiva o las dos. Vale la pena probar cursiva: en una marca sobre comunicación, la cursiva marca la voz de alguien más sin subir el volumen.
Elegida. La más neutra y humanista de las monos, hecha para leerse junto a texto normal. Peso y caja se siguen afinando aparte.
Láminas
Los seis tipos de lámina que necesita la presentación, vivos. Mueve paleta y tipografía arriba y decide viendo, no imaginando. El texto es el aprobado.
Para mirar de cerca usa el Zoom del riel, no el del navegador. Agranda sólo las muestras y deja los controles del mismo tamaño, así no pierdes la barra al acercarte.
CAM
PORTADA · fondo profundo
CONCEPTO · papel, titular solo
PREGUNTA · abre incomodando
LISTA · tres renglones máximo
DATO · fondo profundo
CIERRE · contacto abajo
La retícula
Sí existe un sistema de Müller‑Brockmann, y es más viejo y más terco de lo que parece: su libro Grid Systems in Graphic Design (1961) es el que puso a medio mundo a trabajar así. Lo que investigué es que su regla de oro no es “usa doce columnas”: es que la unidad de la retícula no se inventa, se saca 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 en su sistema el texto sigue cayendo en la misma línea base aunque cambie de campo.
Lo que había antes
Los decks ya traían doce columnas, pero los números eran a ojo: márgenes de 100/110/92, medianiles de 40, y sobre todo quince tamaños de letra distintos en /presentacion-completa/ y treinta y dos en /deck-lab/, con seis interlineados sin relación entre ellos. Eso es exactamente lo que hacía que una serif se sintiera apretada en una lámina y desaprovechada en la de al lado: no había ninguna regla que dijera cuál va dónde.
Lo que hay ahora
El cuerpo se lee a 26/36. Esos 36 se parten en dos y la unidad es 18px. Todo lo demás es múltiplo entero de 18:
| Pieza | Medida | En unidades |
|---|---|---|
| Línea base | 18 px | 1u |
| Fila de campo | 144 px | 8u |
| Medianil | 36 px | 2u · igual a una línea de cuerpo |
| Margen arriba y abajo | 108 px | 6u |
| Columna | 108 px | 6u |
| Margen lateral | 114 px | el sobrante |
Y cierra exacto por los dos lados: 1080 = 108 + (5 × 144) + (4 × 36) + 108 y 1920 = 114 + (12 × 108) + (11 × 36) + 114. Doce columnas por cinco filas de campo.
La escala: de treinta y dos a siete
Cada interlineado es múltiplo entero de 18, y el mayor mide exactamente una fila de campo. El octavo (d5) existe sólo para el formato hablado, donde hay una idea por lámina y nada más.
| Papel | Tamaño / interlínea | u | Dónde va |
|---|---|---|---|
| mono | 16 / 18 | 1u | rótulos, siempre una línea, mayúsculas |
| texto | 26 / 36 | 2u | cuerpo, pies, tarjetas |
| lead | 38 / 54 | 3u | entradas y listas |
| d1 | 50 / 54 | 3u | titular corto, remate |
| d2 | 68 / 72 | 4u | titular con bloque debajo |
| d3 | 96 / 108 | 6u | titular con apoyo |
| d4 | 136 / 144 | 8u | titular solo · una fila de campo |
| d5 | 184 / 198 | 11u | sólo /presentacion-hablada/ |
Quién elige el tamaño
Ya no lo elige la lámina: lo elige el motor. Mide el campo, arranca por arriba y baja de escalón hasta que el bloque entero cabe. El techo depende de la compañía: si abajo hay una lista o unas tarjetas, arranca dos escalones más abajo. Y si la que se sale es la otra columna, se detiene, porque achicar el titular no arregla nada y nada más lo deja perdido en su campo.
Para verla: en cualquiera de los tres decks, tecla G. Rosa las columnas, azul las filas.
Lo que falta
/presentacion-completa/ y /presentacion-hablada/ ya no tienen ni un solo tamaño suelto. /deck-lab/ sigue con treinta y uno, porque está armado con coordenadas absolutas lámina por lámina: ponerlo en la retícula es volver a maquetarlo, no cambiar tokens. Su portada, su cierre y su panel de logos ya son los del sistema.
Los pesos
Medidos en los tres decks, los pesos que se usan hoy son sólo cinco y son los mismos en los tres: display 300 y 600, texto 300 y 600, mono 400. El problema no es cuántos son. Es que display 600 hace dos trabajos distintos: es el énfasis dentro de un titular (“del diagnóstico”) y a la vez el peso por defecto de todos los subtítulos. Cuando todo lo secundario va en negrita, la negrita deja de significar algo.
Las tres miniaturas de abajo son la misma lámina, con lo único que cambia siendo el peso de los subtítulos. Mueve la barra de arriba si quieres verlas con otra tipografía.
del diagnóstico.
Comunicación para la acción · liderazgo consciente.
Ejecutivo · de equipos · shadow.
subtítulos 300 · los separa el tamaño y el contraste serif/sans
del diagnóstico.
Comunicación para la acción · liderazgo consciente.
Ejecutivo · de equipos · shadow.
subtítulos 500 · el énfasis se queda solo en 600
del diagnóstico.
Comunicación para la acción · liderazgo consciente.
Ejecutivo · de equipos · shadow.
subtítulos 600 · el mismo peso que el énfasis
Mi lectura: en C el subtítulo pesa lo mismo que la palabra que carga el titular, así que compiten. En A el tamaño ya los separa (38px contra 26px) y encima cambia de familia, así que la negrita queda libre para lo único que debería marcar. En B cada cosa tiene su peso, a cambio de un peso más en el sistema.
Lo que falta
son las fotos
Las dos fuentes que revisamos coinciden en lo mismo: en una charla, la foto carga la emoción y el texto sólo puntúa. El deck TED tiene 62 láminas y sólo 3 imágenes, así que hoy es una charla de puro texto.
Esto no se resuelve con banco de imágenes. Las dos fuentes advierten lo mismo: la foto obvia mata el momento. Nada de ejecutivo saltando una valla ni de gente aplaudiendo en una sala.
Lista de tomas. Diez fotos que harían el trabajo. Se pueden producir en una sesión de medio día en una oficina real.
Sala vista desde la puerta, sillas todavía movidas, nadie dentro. Luz de once de la mañana. Fría, sin nostalgia.
Detalle de una mano quieta sobre la mesa, recortada. Sin rostro. Es la lámina de "nadie tiene dudas".
Muñeca girada bajo la mesa. Cuenta la prisa sin decirla.
Movimiento congelado de manos recogiendo. Va con "todos recogen sus cosas".
Dos personas alejándose en direcciones distintas. Plano largo, de espaldas.
Un tablero real fuera de fecha, desenfocado lo suficiente para no revelar al cliente.
Cristina, Alina y Mónica en sesión real, no posando. Es la única que no se puede sustituir.
Dos personas inclinadas hacia adelante, una hablando y la otra escuchando de verdad. El después del relato.
Misma sala de la primera foto, ahora con gente y con alguien con la mano arriba. Cierra el arco.
Una toma casi vacía para las láminas de aire: una pared, una ventana, una mesa. Sirve de respiración.
Ojo con el permiso. Si se fotografía una oficina real, hace falta autorización de esa empresa y de las personas que salgan. Vale la pena resolverlo antes de agendar la sesión, no después.
Cómo entran
las fotos
Esquinas, radios, sombras y bordes. No es gusto: Hallmark tiene reglas explícitas sobre esto y una de ellas es contraintuitiva.
«La profundidad es peso y escala, no sombra.» Es la regla que más se incumple. Una foto no necesita despegarse del papel para tener jerarquía: necesita ser más grande o estar mejor colocada.
Y sobre fondo oscuro la sombra ni siquiera funciona: produce un halo, que Hallmark marca como error. En oscuro la elevación se hace con luminosidad, no con sombra.
Borde a borde, sin esquina redonda ni sombra. La foto es arquitectura, no un objeto pegado encima. Es lo que usan los tres decks.
Cuadrada, alineada a las columnas. Cuando la foto es dato y no atmósfera.
Apenas perceptible. Suaviza sin convertirla en tarjeta. Defendible si todo el sistema lo lleva.
Aquí ya es una tarjeta, no una foto. Es el radio por defecto de casi toda interfaz generada.
Radio más sombra difusa es la combinación que más delata. Hallmark sólo admite dos sombras: un susurro de 1px o un filete, nunca esto.
La alternativa honesta a la sombra: define el borde sin fingir que la foto flota.
Desaturada y teñida hacia el azul de marca con mix-blend-mode: color. Cohesiona un banco de imágenes disparejo y le quita el aire de archivo.
Grano fino encima. Ensucia lo suficiente para que deje de verse renderizada. Hallmark lo pide explícitamente para cualquier imagen generada.
A sangre y sin radio para las láminas de atmósfera. Recortada a la rejilla y cuadrada cuando la foto es información. Nunca sombra. Filete de 1px sólo si hace falta separarla del papel.
La esquina redondeada convierte una foto en una tarjeta, y la tarjeta es el componente más repetido de todo lo generado. Cuadrado se lee editorial; redondeado se lee interfaz.
Son los dos recursos que más rápido despegan una foto de banco de su origen. Cuestan una línea de CSS y no tocan el archivo.
Cristal esmerilado de adorno, halos de color sobre claro, sombras apiladas y marcos de navegador o de teléfono dibujados a mano. Los cuatro están en la lista de Hallmark.
Una referencia
que sí aplica
tayanecklace.com, el sitio que ayudamos a diseñar. Lo guardo aquí como nota. El recurso que sirve para 180 Grados CAM es su tira de tarjetas: foto a toda la tarjeta, título arriba, una frase corta abajo, y las tarjetas desalineadas entre sí en vertical.
Sirve justo para lo que dijiste: los tres planos. Cada plano es una foto y una frase, no una fila de cajas iguales.
El mensajeLas palabras que elegiste. “¿Alguna duda?”, en el último minuto.
La actitudEl cuerpo. Sillas que ya se vaciaron antes de que termines.
La intenciónLo que de verdad te movió. Nadie quiere ser el que retrasa al grupo.
¿Con radio o sin radio?
La misma tarjeta tres veces. Fíjate en el circulito de abajo: es lo único curvo del sistema, y sólo funciona como marca mientras nada más lo sea.
CuadradaLo que está en el deck. Se lee editorial.
Radio 5Apenas se nota. Defendible si todo el sistema lo lleva.
Radio 12El de Tayá. Aquí ya es tarjeta de interfaz.
Mi voto es cuadrada, por el circulito: es el único elemento curvo del sistema y pierde su papel si la tarjeta también se redondea.
Si prefieres radio, que sea 5 y en todo el sistema, no sólo aquí. Es una línea en deck-comun.css y cambia en los tres decks a la vez.
El desalineado vertical, que rompe la fila y hace que se lean como piezas y no como una tabla. Y que el título viva arriba y el texto abajo, con el aire en medio haciendo el trabajo.
El radio de 12px. Contradice la regla que acabamos de escribir dos secciones arriba. Aquí lo dejé para que veas la referencia fiel, pero en el deck iría cuadrado.
Tayá es una marca de producto y la tarjeta le queda bien. 180 Grados CAM es editorial y va a cuadrado. Vale la pena decidirlo a propósito y no por inercia.
Reglas de aplicación
Lo que hay que poder repetir sin volver a mirar esta página.
Display, texto y pie. Nada intermedio. La escala escalonada de siete pasos es lo que más delata una plantilla.
Si la marca va de hablar como una persona normal, un titular gritando contradice el argumento.
La palabra enfatizada en cursiva dentro de un titular es de los tells más confiables de pieza generada.
Papel y tinta van teñidos hacia el ancla. El #000 y el #fff se leen sintéticos.
Entre más colores, más fácil que la cague. Fondo, luz y apoyo bastan.
El verde vive en el brillo, nunca como color de texto. En letra se apaga y compite; como luz da profundidad. El texto secundario sobre fondo oscuro es papel rebajado.
El fondo de marea que eligió Lili va en láminas de titular, nunca en las que llevan listas o párrafos. Con texto encima deja de ser fondo y se vuelve ruido.
En cuanto se le note el contorno o se le suba la opacidad, cruza a mancha aurora, que es el default generado de 2022.
Sin decidir
- El signo. Diez propuestas en /signo/; la recomendación es el aro.
- El universo visual. Texturas (p5.brush) ya es sistema como fondo y elemento; Agua (interferencia) queda como elemento animado vía gota.js en portada y cierre. Lo que falta es decidir si se usa en la landing.
- Las fotos del deck TED. Hay lista de tomas en la sección de arriba, pero no hay sesión agendada ni presupuesto asignado.
- Las frases tachadas. Lili las descarta para el pitch deck, Roberto las quiere para el branding. Las dos cosas pueden ser ciertas.
- El verdadazo. Sigue abierto si entra al lenguaje de la marca o se queda como anécdota de sesión. No se usa en material comercial hasta que ellas decidan.
- Los casos de clientes. Las historias anonimizadas del deck salen de sesiones privadas. Falta que ellas confirmen cuáles pueden usarse para vender.