Sourceful Design System
Components, tokens, and guidelines for building consistent, accessible interfaces across Sourceful Energy products.
AI assistant prompt - hover to expand
Use the Sourceful Design System (@sourceful-energy/ui). Before making changes, ask me: 1. New project or existing codebase? 2. Full reskin or selective component replacement? Then fetch the full setup guide: https://raw.githubusercontent.com/srcfl/srcful-design-system/main/CLAUDE.project-template.md Critical: Import @sourceful-energy/ui/styles.css BEFORE globals.css (order matters). Docs: https://design.sourceful.energy
Stockholm HQ
Kungsgatan 1, Stockholm
4.5 kW
Gothenburg Office
Avenyn 10, Gothenburg
3.2 kW
Malmö Site
Stortorget 5, Malmö
0.0 kW
Uppsala Campus
Universitetsvägen 1, Uppsala
1.2 kW
Total Devices
Online
Offline
Warnings
| Device | Type | Site | Status | Power | Last Seen | Firmware | ||
|---|---|---|---|---|---|---|---|---|
Solar Inverter 1 INV-001 | Inverter | Stockholm HQ | Online | +4.5 kW | Just now | v2.4.1 | ||
Solar Inverter 2 INV-002 | Inverter | Stockholm HQ | Online | +3.8 kW | Just now | v2.4.1 | ||
Home Battery BAT-001 | Battery | Stockholm HQ | Online | -1.2 kW | Just now | v1.8.3 | ||
Grid Meter MTR-001 | Meter | Stockholm HQ | Online | +2.1 kW | Just now | v3.1.0 | ||
Solar Inverter 1 INV-003 | Inverter | Gothenburg Office | Online | +3.2 kW | 2 min ago | v2.4.0 | ||
Storage Unit BAT-002 | Battery | Gothenburg Office | Warning | — | 5 min ago | v1.8.2 | ||
EV Charger A EVC-001 | EV Charger | Gothenburg Office | Online | +7.4 kW | Just now | v4.0.2 | ||
Rooftop Inverter INV-004 | Inverter | Malmö Site | Offline | — | 2 hours ago | v2.3.8 | ||
Smart Meter MTR-002 | Meter | Malmö Site | Offline | — | 2 hours ago | v3.0.5 | ||
Test Inverter INV-005 | Inverter | Uppsala Campus | Setup | +1.2 kW | 10 min ago | v2.4.1 |
Solar Production
4.8 kW
92% of capacity
Battery
78%
Discharging 1.2 kW
Home Usage
3.2 kW
Below average
Grid Export
2.8 kW
€0.28/kWh
Optimizing for low grid prices (€0.08/kWh)
Good morning! Your solar system is performing well. Current production is 4.8 kW, which is 92% of expected output for this time of day.
Energy Management System
Stockholm HQ - Optimizing for cost savings
Today's Savings
€12.40
vs grid-only
Battery SoC
78%
7.8 kWh stored
Self-Sufficiency
84%
Last 24 hours
Next Action
14:00
Start charging
Low
0.96
Avg
1.61
High
2.88
- 1
Maximize savings
- 2
Maximize earnings
- 3
Self-consumption
- 4
Grid independence
- 5
Carbon reduction
Peak at 18:00 (0.0 kW)
Next 12 Hours
Savings & Rewards
Stockholm Home - SE3 Price Area
Today's Savings
48 kr
vs grid-only
Reward Points
1,247
+23 today
Grid Export
12 kr
8.2 kWh sold
Peak Avoided
9 kr
2.1 kWh shifted
Grid Import
14.2 kWh
Avg: 0.82 kr/kWh
Grid Export
50.7 kWh
Avg: 1.74 kr/kWh
Includes energiskatt (0.392 kr/kWh), elnätsavgift, and 25% VAT
Based on typical Swedish household in SE3 with Sourceful EMS
Today
+23
Week
+142
Total
1,247
50+ Components
Production-ready React components built with Radix UI and Tailwind CSS. Accessible by default.
Design Tokens
Consistent colors, typography, spacing, and shadows. CSS variables that work everywhere.
Brand Guidelines
Voice, tone, and visual identity guidelines for consistent communication across all touchpoints.
Quick Start
1. Install the package
npm install @sourceful-energy/ui
# Import in your app
import { Button, Card, Input } from "@sourceful-energy/ui"
import "@sourceful-energy/ui/styles.css"2. Add Claude Code support
Download our CLAUDE.md template so Claude Code automatically uses the design system:
curl -o CLAUDE.md https://raw.githubusercontent.com/srcfl/srcful-design-system/main/CLAUDE.project-template.md