Basic Elements
Turning raw numbers into clean, visual signals.
Every number on a dashboard has a job. Rhenium uses focused elements — labels, values, trend lines, and status indicators — to make raw data easy to read.
What Basic Elements Do
A basic element represents one focused piece of visual information. It might display a headline number, a label, a percentage change, a progress bar, or a status indicator dot. Unlike design foundations, basic elements understand data. Unlike smart cards, they don't describe a complete business fact on their own.
This clear boundary keeps the framework flexible. A Metric card can reuse the exact same value, change indicator, and sparkline elements as another card layout. A segment breakdown can reuse the progress bar elements. This prevents you from writing repetitive visual rendering logic.
The Foundation: Labels & Values
Labels and values establish the basic reading pattern of any dashboard. The label tells the reader *what* they are looking at, while the value tells them *how much*. Rhenium standardizes the type size, contrast, and spacing between them.
These elements are designed to lead the reader's eye naturally. If labels are too prominent, the dashboard feels cluttered and noisy. If values are too quiet, the hierarchy collapses. The basic element layer encodes these spacing choices once so they look perfect across all views.
Showing Movement: Change & Trend Lines
A number alone lacks context. To understand a metric, the reader needs to see change and history. Change elements (deltas) show whether a metric is moving up, down, or staying flat. Trend elements (sparklines) provide historical context through highly compact mini-line charts.
These elements support data interpretation without overwhelming the primary metric. A change percentage is supporting evidence, not the main headline. A sparkline gives historical texture while keeping the dashboard dense and clean.
Visual Signals: Bars, Fills, & Status Dots
Progress bars and fills translate numbers into visual proportions — perfect for comparing categories, goals, or limits. Status dots communicate operational health or alert levels using amber, green, red, or neutral states.
Consistency is critical for these visual signals. A warning state should not look amber in a system health view but yellow in a logistics dashboard. A progress fill should behave predictably whether it appears in server capacity, financial metrics, or user engagement stats.
How Elements Combine into Smart Cards
Basic elements become truly powerful when they are grouped into complete cards. A Metric card combines a label, a large value, a change percentage, and a sparkline. A Segment Breakdown combines labels, values, and horizontal progress bars.
This modular approach makes the framework easy to extend. You can build new custom reporting layouts without having to reinvent typography rules or border designs, because you build them from the same pre-tuned atomic pieces.