The mark, and how to use it.
Logo variants, colors, and type: the same small instrument that sits in the nav. Three data cells climb a diagonal, graded faint to solid.
ActivityGrid DNA, owned.
The three cells climb bottom-left to top-right, fill grading faint to solid. That grade is the same honest encoding the charts use: value carried by weight, not decoration.
- Container
- Superellipse · n 4.5
- Cells
- Three · graded fill
- Grid
- 32 × 32 units
- Encoding
- Weight = value
Six SVGs. Copy or download.
Primary Ember, adaptive for light/dark hosts, mono inks, and two accent siblings. Each file is the shipped asset under /brand.
One cell of air. Sixteen pixels floor.
Keep clear space of at least one cell-width on every side. Below 16 px the grade collapses. Never go smaller.
dashed field = reserved space
The SVG scales cleanly above 16 px to any size. Prefer the adaptive mark when the host theme can flip.
Protect the read.
Recolor cells, invert fills, rotate, stretch, add effects, or reflow the grid. Each one breaks the encoding the mark shares with the charts.
One accent. Six tunings.
A single token drives chrome, links, and chart emphasis. Ember is the default; five siblings swap through the picker. Click any chip to copy its hex.
Three voices. One system.
Display for titles, grotesk for reading, mono for measurement. Same trio as the rest of the site.
Titles, hero, section headings.
Prose, controls, everything read at length.
Labels, sizes, coordinates, snippets.
One lowercase word.
Always “microcharts,” even at the start of a sentence. Never MicroCharts, micro charts, or µcharts.
- The mark may pair with the wordmark or stand alone.
- Don’t redraw the wordmark. Use the shipped lockup.
- Name
microcharts- Package
@microcharts/react- Install
pnpm add @microcharts/react
Use it to point at the work.
Link to or reference microcharts: a “built with,” a talk slide, an integration. Don’t modify the mark, use it as your own product’s mark, or imply endorsement. The code is MIT. Questions? @ganapativs.