Tarva BXD · LumosIndex › Components › Data display · 1
1920 × 1080 · Landscape
Index › Components › Data display · 1
1 of 2 · Data display
Components · Data display · 1
Numbers, measured.
Eight ways Lumos shows a quantity at a glance — single figures, tiled summaries, trend lines, and laddered gauges. Status reads in moss, amber, and rust; accent stays fenced to the one active step.
KPI Cardsize sm · md · lg · highlight
Revenue · Apr
$48,250
+12.4%
Error rate
2.5%
−0.7%
valueFormat=currency · percentage, sizes sm/md/lg. previousValue drives the trend chip; higherIsBetter recolours it. highlight tints the focal card terracotta. glow · loading also ship.KPI Gridtiles · trend up/down/flat
Revenue · Apr
$48,250UP
↑ 12% vs Mar
Close rate · 30d
42%FLAT
→ no change
Auto-fit grid of
KPIStickerCard tiles (minTileWidth reflow). Each tile: mono label, value, and a sticker badge — UP moss · DOWN amber · FLAT stone. onPress makes a tile a button.Metric Rowvariant default · compact · stretch
Total
28
appointments this month
Drafted
4
1 up
Resolved
22
Row of 3–6
MetricCards for index-page summaries. delta {value, direction up/down/flat}, optional trend[] sparkline + italic helper. At most one highlight per row.Progress Barvariant · size · striped
64%
Done
82%
95%
Radix-backed linear progress. Variants
default · success · warning · error · info, sizes sm/md/lg. striped overlay, autoVariant threshold flip, mode=indeterminate, showLabel percent/value.Meter Barsegmented · tone ladder
LowMidHigh
High · 76/100
Tiered ladder — “which tier, with how much fill inside it.” Tones
neutral · success · warning · error · info · brand, sizes sm/md/lg, style segmented/continuous. showValue tier-name · showTierLabels.Sparklinevariant positive/negative/neutral
positive
negative
neutral
Axis-less compact line — the smallest cartesian mark.
variant positive/negative/neutral/auto (auto reads first-vs-last point), showFill gradient, width/height. Linear M/L polyline; no smoothing.Step displayStepProgress · step X of Y
Step 2 of 4Scope
CustomerScopePricingReview
Wizard “Step X of Y” indicator.
totalSteps + currentStep (clamped), per-step labels[], optional showPercentBar in accent. The active step is the one fenced accent moment.Timelinetone · density comfortable/compact
Invoice paid
$48,250 · cleared
2 hours ago
Reminder sent
yesterday
Job created
3 days ago
Vertical event rule —
items {title, body, timestamp, icon}. Dot tones neutral · info · success · warning · danger · accent; density comfortable/compact. Markers decorative; SRs hear the titles.
8.5 × 11 · Portrait