Logo
NeoArc Studio

Infographic Layout Shapes

Six metric display shapes including icon badges, comparison bars, rating stars, thermometers, batteries, and pie progress indicators for dashboard-style architecture infographics.

The infographic layout shapes are purpose-built for dashboard-style displays and metric summaries. They turn single numeric values into instantly recognisable visual indicators, making them ideal for architecture health dashboards, SLA monitors, and executive summary posters.

Icon Badge

An icon displayed inside a shaped badge (circle, rounded square, or hexagon). Configure the badge shape, badge size, fill colour, and stroke. Icon badges are ideal for creating icon-first layouts where each service or component is represented by a recognisable icon.

PropertyOptionsDescription
Icon ShapeCircle, Rounded Square, HexagonThe outer badge geometry
Badge SizeNumeric (px)Controls the overall badge dimensions
Fill ColourAny colourBackground fill of the badge
Stroke ColourAny colourBorder colour
Stroke Width0+Border thickness

Comparison Bar

A side-by-side horizontal bar comparing two values with distinct colours. Use for before/after comparisons, A/B test results, or resource allocation between two categories.

Progress Indicators

Four shapes display a single value (0-100%) as a visual fill level.

Rating Stars
A row of stars with configurable total count and filled count. The filled colour and empty colour are independently configurable. Use for quality ratings, maturity levels, or prioritisation scores.
Thermometer
A vertical mercury-style gauge showing a value from 0 to 100%. Configure the fill colour (mercury) and track colour (background). Use for capacity utilisation, budget consumption, or risk levels.
Battery
A battery-level indicator supporting horizontal or vertical orientation. The fill colour shows the current level against a track background. Use for resource availability, storage capacity, or energy efficiency.
Pie Progress
A circular progress indicator filling a pie chart from 0 to 100%. The fill colour shows completed progress against a track background. Use for project completion, test coverage, or deployment progress.

Architecture Dashboard Examples

These shapes combine well to create dashboard-style infographic sections within architecture documentation.

ShapeKindValue RangeOrientationKey Colours
Icon Badgeicon-badgeN/A (display only)N/AFill, Stroke
Comparison Barcomparison-barTwo numeric valuesHorizontalLeft colour, Right colour
Rating Starsrating-stars0 to count (integer)HorizontalFilled colour, Empty colour
Thermometerthermometer0-1 (normalised)VerticalFill colour, Track colour
Batterybattery0-1 (normalised)Horizontal or VerticalFill colour, Track colour
Pie Progresspie-progress0-1 (normalised)N/A (circular)Fill colour, Track colour