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.
Where the mark comes from
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
Every version of the mark
Primary Ember, adaptive for light/dark hosts, mono inks, and two accent siblings. Each file is the shipped asset under /brand.
Clear space and minimum size
Keep at least one cell-width of air on every side, and don’t render the mark below 16 px, where the grade between the cells stops reading.
dashed field = reserved space
The SVG scales cleanly above 16 px to any size. Prefer the adaptive mark when the host theme can flip.
What not to do with it
Recolor cells, invert fills, rotate, stretch, add effects, or reflow the grid. Each one breaks the encoding the mark shares with the charts.
The accent, in 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.
The three typefaces
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.
Writing the name
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
What the kit is for
Use it to link to or reference microcharts: a “built with” badge, 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.