The Design System
Professional design standards, programmatically enforced.
No more visual drift. Rhenium separates visual look and feel from the underlying data, making sure every chart, metric, and card on your dashboard feels part of the same premium system.
Design Foundations (Primitives)
Design foundations are the lowest-level visual rules in Rhenium: elegant dark-mode background textures, consistent margins, subtle border styles, custom fonts, and curated color palettes. They carry no specific business meaning on their own. Instead, they represent our concrete, hardcoded design decisions.
Keeping design foundations separate prevents custom cards from looking out of place. Whether you render a metric, a status update, or a horizontal bar breakdown, every component automatically draws from the same common, high-end visual vocabulary.
Basic Elements (Atoms)
Basic elements are small, data-aware translators that display single pieces of information: like a label, a large metric number, a percentage change, or a status indicator dot. They are intentionally simple and highly focused.
For example, a change indicator element (delta) handles styling for positive, negative, or warning movement. A progress bar element scales numeric percentages to visual bar fills. A status dot standardizes healthy or warning states. These elements ensure that small visual rules behave exactly the same way across all templates.
Smart Data Cards (Molecules)
Smart cards combine basic elements into recognizable, pre-built reporting blocks. This is where Rhenium saves developers and analysts the most time. A Metric card groups a label, a headline value, a change percentage, and a sparkline into a clean card. A Breakdown block segments category shares, while a Status card tracks operational health.
Instead of manually positioning and styling individual labels and sparklines, you just supply the data structure. The smart card handles internal margins, visual alignments, and text hierarchies automatically, ensuring a perfect layout every time.
Dashboard Grids (Figures)
A grid represents your complete dashboard page. It handles background details, grid gaps, margins, and responsive layouts. The layout of cards is how you establish a clear reading order for your metrics.
For instance, a SaaS template puts ARR and customer count at the top to set the scale of the business before showing details like regional segments. A platform health dashboard places global uptime first to quickly answer the reader's main question. The grid system enforces this logical flow programmatically.
Why Automated Consistency Matters
Automated consistency eliminates the "Design Gap." When multiple developers or teams build dashboards independently, they inevitably make slightly different visual choices — custom margins, slightly off colors, or different font weights. Over time, this leads to visual decay and drift.
Rhenium completely solves this. By keeping the design rules centralized, custom dashboards feel just as premium as our expert-designed templates. You can scale your dashboards across a large organization while guaranteeing agency-grade output by default.