Sterling: a palette for data with a voice of its own

Sterling began with an uncomfortable distance: I could find something interesting in data, but I could not always turn it into a piece I was proud to publish.

During my #ViernesDeVisualizaciones, I learned that making a chart and publishing a story are not the same task. I could analyze a dataset, find a pattern, and feel there was something worth saying. Then came the difficult part: how could I turn it into an image that felt like mine, worked in a blog post, could travel to Instagram or Twitter, and did not lose its source or its data along the way?

The same distance reached more formal work. I published a paper and never talked about its findings on Twitter. It was not because the results did not matter. I could not find a way to show them that felt as considered as the work behind them. And when I collaborated with others, I found it hard to ask them to start from scratch with the editorial decisions that make a visualization shareable: title, color, hierarchy, source, proportion, export, and credit.

Defaults rarely solve that. A default palette can be functional, but it does not necessarily say who made the piece. A screenshot can be quick, but it does not always preserve the dimensions, background, or colors the audience saw. A beautiful image can travel, but it may not let someone download the processed data, verify the source, or share it from a phone.

Sterling is my answer to that problem. It is a palette, yes. It is also a set of Markdown components that turns a visualization into a complete editorial piece: a claim, a guided reading, a source, a signature, and paths to take the image or the table with you.

From Tableau to human and agentic readers

I am trained as a mathematician and work as a Data Visualization Engineer at Zillow. I joined to build Tableau dashboards. Soon after, as tools such as OpenClaw arrived, my work began to change: I now think less about a dashboard as the final surface and more about the different systems that need to consume data correctly.

When a visualization is only consumed by a person, there is one interpretation to care for: the reader's. Agentic systems introduce two. I need to care for what a person interprets and what an agent interprets about the data, the chart, and what another agent may say about it.

That did not make me need less data preparation. It made me need more. Machines are more square in how they consume information: they need contracts, consistent names, explicit structures, and provenance. But the fact that a system can read a table does not make the human experience less relevant. Quite the opposite. Visualization is still where I design attention, context, trust, and the desire to keep reading.

That is why Sterling does not treat figures as mute images. Data and charts should be shareable, verifiable, and traceable inside their governance context. If someone receives a chart, they should not have to reconstruct a table from pixels to make a comparison of their own. If they share it, they should preserve the result they saw. If they need to check where it came from, the source should be nearby.

A figure is a small proof

In mathematics, a conclusion is not enough on its own. It matters that we can follow the path that supports it. I wanted Sterling figures to work with that same discipline without turning them into a documentation page.

The title states a claim. The subtitle explains what to look for. When categorical encoding matters, the legend lives inside that sentence: color, shape, and text appear together before the eye has to travel across the page. The chart supports the claim. The source makes a return possible. And the violet period that closes the title borrows a gesture from my site: a small editorial QED.

This resolves a friction that seemed small until I repeated it often. Detached legends add visual travel and claim a block that rarely helps the reading. Color alone should not carry a category either. Sterling can pair it with shape, direct labels, outlines, or grouping. Accessibility is not a switch turned on at the end. It is a decision about how many signals a reader receives.

The figure also brings its actions together. It can be copied as an image, downloaded as a PNG, shared through the native mobile menu, or used to export a CSV of the processed information. This does not replace the original source. Instead, it saves someone from having to guess the values that already built the visualization.

<SterlingFigure
  labelPrimary="Scatterplot"
  labelSecondary="Categorical"
  title="Three species separate before the legend is read"
  subtitle="Color and shape distinguish:"
  legend={[
    { label: "setosa", colorIndex: 0, shape: "circle" },
    { label: "versicolor", colorIndex: 1, shape: "square" },
    { label: "virginica", colorIndex: 2, shape: "triangle" },
  ]}
  source="R datasets::iris"
  size="wide"
>
  <SterlingScatterPlot {...iris} showLegend={false} />
</SterlingFigure>

The author does not have to solve the signature, language, source, or lower margin again. And when an improvement reaches SterlingFigure, it reaches every figure already living in the blog.

Twenty-eight ways to begin telling

Sterling currently has twenty-eight species of visualization. They are not “every chart that exists,” and they do not need to be. They are the forms I remember needing at some point in my own history: bars and scatterplots, of course, but also dendrograms, Manhattan plots, expression matrices, volcano plots, correlograms, violins, ridgelines, candlesticks, and maps.

HTML brings far fewer of those possibilities by default. When D3.js enters the equation, variety grows, but so does the chance that every new chart looks like it belongs to another product. The challenge was not drawing a shape. It was letting every shape keep a shared grammar without erasing what makes it useful.

A histogram does not need a categorical palette just because colors are available. A violin still has to communicate a distribution, quartiles, median, maxima, and minima. It cannot become a decorative silhouette. A correlogram cannot lie when the mode changes: in Sterling, the numbers in the upper triangle keep their colors across light and dark modes, while circles or ellipses invert the treatment they need to preserve contrast and meaning.

The expression matrix was another reminder. It was not enough to color cells. I had to specify how I expected genes to be grouped and port the hierarchical clustering needed to rebuild the matrix. The more variables a visualization needs to configure, the more important it becomes to define what is a shared rule and what belongs to its data.

Some statistical decisions would not accept approximations either. Boxplots and violins use Tukey's rules for their outliers and summaries. Densities cannot be truncated where they stop looking convenient. In an editorial visualization, rigor is not a layer added after style. It is a condition for style to deserve trust.

The correlogram posed a different test: the same encoding had to keep saying the same thing on a light and a dark screen. That is where I understood that swapping a ramp was not enough. The numbers in the upper triangle and the shapes in the lower one need different treatments to preserve contrast without changing the sign they communicate.

Space tells the story too

Sterling has four widths: compact, medium, wide, and full. I do not think of them as emotionless breakpoints. They are decisions about composition and reading rhythm.

My husband is an industrial designer and makes graphic novels. Watching him decide how much space to give a scene helped me recognize the same problem in a data story. A small idea can live in a margin. A comparison needs more air. A lead piece can take over the page. If every element demands the same space, nothing has rhythm.

compact is for a side note or a single idea. medium is the natural size of a post. wide gives comparisons and integrated legends space to breathe. full is for a piece that should stop the reading, such as a complex matrix or a gallery. The same chart can change width without changing identity because the component knows which elements to preserve, which space to open, and which hierarchy to respect.

White space is not the absence of content. It is a reading instruction. That is why I preferred to bring legends into the subtitle and leave the center of the card to the data.

Three media, eight voices

The light palette starts with #F6F3FB, La Matemaga's digital paper. It is neither clinical white nor an undecided neutral surface. Dark mode does not invert those colors: it recalibrates luminance and chroma for emitted light. Print does not attempt to copy the screen either. It translates pigments into a more restrained version that anticipates ink.

The eight categorical voices remain in order: violet, teal, orchid, amber, blue, coral, moss, and Payne. Violet is my site's main signal. Payne gray was my husband's favorite color and became necessary as a neutral voice: not only for showing data, but for telling a story with areas of lower emphasis.

The first version was too bright and too cold. We calibrated it to feel alive on screen without looking generic or low-effort. We also ran color-vision tests. Sterling works well through most simulations of color-vision anomalies, but it does not promise that eight categories are equally distinguishable for every kind of color blindness. That is why it insists on redundancy, category reduction, and intentional scale selection.

One proposed etymology for sterling is “little star.” I liked it before I knew why: the sound, the tenderness, and the fact that stars are already part of my visual world. Then I learned the other association: sterling silver has standards for quality and purity. That made the name stay. I want a visualization made with this system to feel like that: small, luminous, rigorous, and good enough to trust.

A system that should keep growing

Sterling is not finished. It is designed to grow without losing its provenance. I want to add new species, make more decisions explicit between categorical, sequential, and diverging scales, and offer careful ways to highlight a specific area inside a neutral scale. I want other people to be able to change the palette, signature, and editorial decisions without having to rebuild every piece.

But the starting point remains the same: publishing a data story should not feel like starting a design project from scratch. It should feel like something worth repeating.

Sterling keeps data stories visually coherent. Data with a voice of its own.

The Sterling repository brings together installation instructions, the technical reference for its components, options for changing the palette and signature, and the contribution guide. Explore the system and its bestiary on the Sterling page.