Sterling: una paleta para datos con voz propia

Sterling nació de una pregunta práctica: ¿cómo puede una visualización sentirse parte de La Matemaga sin obligar a los datos a convertirse en decoración?

Yo ya tenía una identidad reconocible para el sitio: papel lila muy claro, noche violeta, una luz teal secundaria y un punto violeta que cierra las frases importantes. Lo que no tenía era un sistema que tradujera esa identidad a una gráfica de dispersión, un heatmap, una presentación o una pieza impresa sin improvisar colores cada vez.

Sterling es esa traducción. No es una lista de hexadecimales favoritos. Es una familia de escalas con reglas de uso, tres soportes y una estructura editorial compartida.

El punto de partida fue el soporte

La paleta clara comienza en #F6F3FB. Es el papel digital de La Matemaga: lo bastante claro para sostener texto y retícula, pero con suficiente violeta para que una pieza no parezca colocada sobre un blanco prestado.

El modo oscuro no invierte esos colores. La luz emitida necesita otra calibración. Los tonos categóricos ganan luminosidad, el texto se separa de la superficie y las líneas de la retícula retroceden. La identidad se conserva porque permanecen los nombres, el orden y las relaciones entre colores.

El modo print tampoco intenta copiar la pantalla. Usa un papel más cálido, pigmentos más sobrios y un gris de Payne azulado como ancla neutral. Es una traducción RGB pensada para anticipar la tinta, no una promesa de conversión CMYK universal.

Ese fue el primer principio de Sterling: un mismo sistema no significa un mismo color en todos los soportes.

Ocho voces, no ocho adornos

La escala categórica tiene ocho familias: violeta, teal, orquídea, ámbar, azul, coral, musgo y Payne. El orden es estable en light, dark y print.

Violeta abre la secuencia porque es la señal principal de la marca. Teal aparece después como contrapunto frío. Orquídea conserva una relación cercana con el violeta sin confundirse con él. Ámbar, azul, coral y musgo amplían la gama. Payne cierra la serie y funciona como categoría neutral sin caer en un gris sin temperatura.

Ocho colores no vuelven accesible una gráfica por sí solos. Sterling exige redundancia cuando la categoría importa: forma, etiqueta directa, borde, patrón o agrupación. En la siguiente pieza, círculo, cuadrado y triángulo sostienen la lectura junto con el color.

La paleta puede admitir ocho categorías, pero eso no significa que toda gráfica deba usarlas. Si la audiencia necesita comparar con precisión, reducir categorías o dividir en múltiplos pequeños suele ser mejor que pedirle más trabajo a la leyenda.

La pregunta decide la escala

Sterling separa tres gramáticas:

1. Categórica para identidades sin orden.
2. Secuencial para magnitud, intensidad u orden continuo.
3. Divergente para desviaciones respecto de una referencia real.

La distinción importa. Una variable binaria nominal no se vuelve divergente porque tenga dos valores. Una escala con centro neutral solo tiene sentido cuando cero, el promedio, una meta o alguna otra referencia forma parte de la pregunta.

Las secuenciales usan familias completas con stops del 100 al 950. La opción violeta es la voz editorial predeterminada, pero teal, orquídea, azul, ámbar y musgo permiten ajustar el carácter sin abandonar el sistema. heat combina once anclas para matrices densas donde una transición corta produciría saltos visibles.

La estructura también es parte de la paleta

Color no basta para que dos piezas se reconozcan como parte de una serie. Sterling también fija una jerarquía:

• Dos etiquetas breves describen la forma y la escala.
• El título formula el hallazgo y termina en el punto violeta de La Matemaga.
• El subtítulo explica qué debe mirar la audiencia y puede integrar la leyenda en la misma frase.
• La gráfica ocupa el centro sin competir con un marco excesivo.
• La fuente y la firma permanecen dentro de la pieza.

La firma cambia con el idioma: Hecho con ✦ por La Matemaga. o Made with ✦ by La Matemaga. La estrella ocupa el lugar de un corazón, pero conserva el tono del sistema.

Construí esta estructura como un componente reutilizable. SterlingFigure contiene la voz editorial y acepta una primitiva de gráfica como hija. Si cambio el espaciado del caption, el contraste del subtítulo o el comportamiento del punto en modo oscuro, la mejora llega a todas las piezas.

Cuando una serie necesita leyenda, Sterling la acerca al mensaje en lugar de reservarle un bloque separado. Cada valor aparece dentro del subtítulo con su matiz y, cuando aplica, con la misma forma usada en el gráfico. La cercanía reduce el viaje visual; la redundancia entre texto, color y forma evita que una sola señal cargue con todo el significado.

<SterlingFigure
  labelPrimary="Dispersión"
  labelSecondary="Categórica"
  title="El hallazgo principal"
  subtitle="Color y forma distinguen:"
  legend={[
    { label: "Grupo A", colorIndex: 0, shape: "circle" },
    { label: "Grupo B", colorIndex: 1, shape: "square" },
  ]}
  source="INEGI / SSA (2025)"
  size="wide"
>
  <SterlingScatterPlot
    data={datos}
    ariaLabel="Dispersión del dataset completo"
    xLabel="Variable X"
    yLabel="Variable Y"
    showLegend={false}
  />
</SterlingFigure>

Los tamaños compact, medium, wide y full permiten que la misma carcasa funcione dentro de una nota breve, una entrada de blog o una galería protagonista. Las primitivas actuales cubren barras, dispersión, líneas, heatmaps, histogramas, boxplots, dumbbells, densidad, violines y donuts. El contrato está listo para sumar otras formas sin volver a resolver títulos, fuentes, firma e idioma.

R, D3 y el cuaderno comparten la misma voz

El sistema también vive fuera de React. theme_sterling.R lleva los tokens, escalas, caption y presets de exportación a ggplot2. lamatemaga-palettes.js expone las rampas para D3. Los stops web siguen una escala 100-950, y los presets de R producen formatos exactos para cuadrado, retrato, LinkedIn y diapositivas.

source("data_viz_palette/theme_sterling.R", encoding = "UTF-8")
 
p <- ggplot(datos, aes(x, y, fill = valor)) +
  geom_tile() +
  scale_fill_lm_sequential(option = "violet") +
  theme_sterling(mode = "light")
 
lm_add_caption(p, source = "INEGI / SSA (2025)", language = "es")

La meta no era hacer una gráfica que combinara con el sitio. Era construir una forma reproducible de publicar evidencia con procedencia, accesibilidad y una voz propia.

Puedes ver el sistema aplicado en la página privada de Sterling. Ahí las mismas reglas cambian de tamaño y de tipo de gráfica sin cambiar de identidad.