Design System Catalog
Tailwind v4 tokens, interactive states, and WCAG AA accessible primitives.
▼
SIMULATED DATATOKEN AUDITED1. Core Palette Tokens
canvasbase bg
surfacecard/panel
solar-ambersolar PV
energy-cyanenergy flow
battery-greenbattery/ok
ai-violetcopilot
warning-ambershortage
critical-redunmet essential
2. Button Variants & States
3. StatusBadge Variants (Always includes visible label)
READYSIMULATINGSIMULATION COMPLETEWARNINGCRITICALSIMULATED DATAAI-GENERATED
4. MetricCards (Solar, Battery, Demand, Essential Services)
Solar PV Peak
40kWp
+198kWh today
Battery SoC
68.4%
Capacity 120 kWh (reserve 20%)
Total Demand
128.5kWh
100%served
Essential Services
100%
Health clinic & pumping protected
Clinic Supply (Shortfall)
78.2%
2.4 kWh essential deficit at 19:00CRITICAL
Battery Reserve (Low)
20.1%
Approaching 20% reserve limitWARNING
Loading / Skeleton State
24h simulation
5. EnergyBars (Sector Allocations)
Health ClinicCritical
20.4 / 20.4 kWh100%
Water Pumping StationHigh
20.4 / 24.0 kWh85.2%
Partial supply
Primary SchoolMedium
14.0 / 14.0 kWh100%
Village HouseholdsMedium
36.0 / 50.0 kWh72%
Partial supply
Local Market & ArtisansLow
9.0 / 20.0 kWh45%
Partial supply
6. Controls & Scenario Switcher
40 %
Simulate sudden cloud cover or dust accumulation on solar array panels.
0 %90 %
Scenario Selection
Switch between standard test cases and track modification state.
▼
MODIFIED7. ChartCard & Empty State
Energy Balance 24h
kWHourly production vs consumption curves
Solar generation peaks at 12:00 at 38 kW. Evening demand peaks at 19:00 at 12 kW.
[Recharts container will render here in P4]
Strategy Comparison
kWhProportional vs Essential-First
No strategy comparison run yet
No data to chart yet
Run the simulation to see results.
Ready to simulate
Choose a scenario or adjust solar and battery assumptions above.
Simulation error
Solar capacity cannot be zero. Please adjust to at least 1 kWp.