Data visualization

Sterling

A palette and components for data stories

A system for screens, paper, and code that keeps evidence, editorial voice, and authorship together.

ReactMDXD3.jsRDesign systems

Read how it was built

Sterling light

Sterling dark

Sterling print

Source: Sterling 0.1.0Made with ✦ by La Matemaga.

The brand frames. The data speaks

According to one proposed etymology, Sterling means ‘little star’. Color is never assigned as decoration: each scale responds to the data, the medium, and the reading task.

Sterling also evokes sterling silver: by standard, at least 92.5% pure silver. The name thus brings together two ideas the system seeks to carry into every visualization: verifiable purity and excellence.

Paper first

Violet begins on #F6F3FB, La Matemaga's digital paper. It is neither clinical white nor an unconsidered neutral surface.

A night of its own

Dark does not invert light. It adjusts luminance and chroma so every category stays present on emitted light.

Print is translation

Pigments become more restrained and Payne gray holds contrast. The semantic order remains unchanged.

Violet#9A79E7#B69AF2

Teal#25A08D#5EC9AE

Orchid#D45AC7#E88BDD

Amber#E4A43A#F2C46D

Blue#5A83D7#86A8E8

Coral#E87864#F29A88

Moss#96AB51#B7C974

Payne#536B78#B7C8D1

A palette and a grammar for Markdown

Sterling separates its color system from its editorial components. The palette is the default, but it can be replaced; figures are registered once and then called from any MDX file.

Four editorial sizes

compact

Side notes and a single idea

medium

The natural width of an article; this is the default

wide

Comparisons with more room

full

Lead pieces and galleries

Available inside any MDX file

A single function builds the MDX registry. Each project can add its own figures and datasets without modifying Sterling's core.

sterling-figure.mdx

<SterlingFigure
  labelPrimary="Scatterplot"
  labelSecondary="Categorical"
  title="The main finding"
  subtitle="Color and shape distinguish:"
  legend={[
    { label: "Group A", colorIndex: 0, shape: "circle" },
    { label: "Group B", colorIndex: 1, shape: "square" },
  ]}
  source="INEGI / SSA (2025)"
  size="wide"
>
  <SterlingScatterPlot {...data} showLegend={false} />
</SterlingFigure>

Sterling is designed to grow without losing its provenance

Visualization bestiary

Twenty-eight species share one editorial structure while preserving the grammar of their data. Each specimen opens the full example, its component, and the recommended path for feeding it from Markdown.

SVG previews will come later. For now, every tile clearly names the species it contains.