Infographic gallery

One short spec. A designed infographic.

Every image below is rendered live by this API from the spec behind its Copy button - 276 templates across sequences, lists, charts, comparisons, hierarchies, and relations. Swap the words, keep the design.

Try it in the playground Browse all 276 templates

Step sequence

The default for phases and processes.

sequence-steps-simple

PNG SVG

Timeline

Milestones in order, dot-and-line.

sequence-timeline-simple

PNG SVG

Snake steps

Longer journeys that wrap across rows.

sequence-snake-steps-simple

PNG SVG

Funnel

Values drive the narrowing stages.

sequence-funnel-simple

PNG SVG

Circular cycle

Loops without a beginning or end.

sequence-circular-simple

PNG SVG

3D stairs

Ascending momentum, one step per win.

sequence-ascending-stairs-3d-simple

PNG SVG

Vertical roadmap

Quarters down the page.

sequence-roadmap-vertical-simple

PNG SVG

Icon steps

icon keywords resolve via semantic search.

list-row-horizontal-icon-arrow

PNG SVG

Badge grid

Feature grids and value props.

list-grid-badge-card

PNG SVG

Donut chart

Statistical templates read item values.

chart-pie-donut-plain-text · hilo-dark

PNG SVG

Bar chart

Bars with the Hilo palette.

chart-bar-plain-text

PNG SVG

Word cloud

Weighted keywords, auto-laid-out.

chart-wordcloud

PNG SVG

SWOT

Four labeled groups with children.

compare-swot

PNG SVG

Versus

Two options head to head.

compare-binary-horizontal-simple-vs

PNG SVG

Quadrant

2x2 matrices, four items exactly.

quadrant-quarter-simple-card · hilo-soft

PNG SVG

Mindmap

Nested children radiate from the root.

hierarchy-mindmap-branch-gradient-rounded-rect

PNG SVG

Org tree

Left-to-right hierarchy.

hierarchy-tree-lr-curved-line-rounded-rect-node

PNG SVG

Flow graph

Nodes plus explicit relations.

relation-dagre-flow-lr-badge-card

PNG SVG