Papel primero
El violeta nace sobre #F6F3FB, el papel digital de La Matemaga. No es blanco clínico ni una superficie neutra sin intención.
Visualización de datos
Sterling
Una paleta y componentes para narrar datos
Un sistema para pantalla, papel y código que mantiene juntas la evidencia, la voz editorial y su autoría.
ReactMDXD3.jsRDesign systems
Leer cómo fue construidaSistema cromáticoSterling 0.1.0
Tres soportes, las mismas ocho voces
Light, dark y print conservan orden y significado, pero ajustan luminosidad y pigmento.
Sterling light
Sterling dark
Sterling print
La marca enmarca. Los datos hablan
Según una de sus etimologías, Sterling significa «pequeña estrella». El color no se asigna por decoración: cada escala responde a los datos, al soporte y a la tarea de lectura.
Sterling también alude a la plata de ley: por norma, al menos 92.5% de plata pura. El nombre reúne así dos ideas que el sistema busca trasladar a cada visualización: pureza comprobable y excelencia.
Noche propia
Dark no invierte light. Ajusta luminosidad y cromaticidad para que cada categoría conserve presencia sobre luz emitida.
Print es traducción
Los pigmentos se vuelven más sobrios y el gris de Payne sostiene el contraste. El orden semántico permanece.
Las ocho voces categóricas de Sterling
Violeta
#9A79E7#B69AF2Verde azulado
#25A08D#5EC9AEOrquídea
#D45AC7#E88BDDÁmbar
#E4A43A#F2C46DAzul
#5A83D7#86A8E8Coral
#E87864#F29A88Musgo
#96AB51#B7C974Payne
#536B78#B7C8D1Una paleta y una gramática para Markdown
Sterling separa el sistema cromático de sus componentes editoriales. La paleta es el valor predeterminado, pero puede sustituirse; las figuras se registran una vez y luego se invocan desde cualquier MDX.
Cuatro tamaños editoriales
compactNotas laterales y una sola idea
mediumAncho natural de una entrada; es el valor predeterminado
wideComparaciones con más aire
fullPiezas protagonistas y galerías
Disponible dentro de cualquier MDX
El registro MDX se crea desde una sola función. Cada proyecto puede añadir sus propias figuras y datasets sin modificar el núcleo de Sterling.
<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 {...datos} showLegend={false} />
</SterlingFigure>Sterling está hecho para crecer sin perder su procedencia
Bestiario de visualizaciones
Veintiocho especies comparten una estructura editorial y conservan la gramática de sus datos. Cada ficha abre el ejemplo completo, su componente y la ruta recomendada para alimentarlo desde Markdown.
Las vistas SVG llegarán después. Por ahora, cada tarjeta nombra con claridad la especie que guarda.