Heliograin：社區太陽能合作社 Web UI 概念（Landing / Overview / Credits）

Heliograin 是一款原創高保真 Web UI 概念，獻給社區太陽能合作社：同一條街上的多戶人家共用屋頂光電和儲能電池，每月再把電費點數分給各戶。

三個頁面

Landing（落地頁）。 標題「Shared rooftops. One fair ledger.」旁邊是一條暖色插畫街道，屋頂鋪滿太陽能板。幾張懸浮卡片預覽即時發電、共享電池和每月點數分配，下方四張功能卡片以平實的語言介紹產品。

Overview（總覽）。 給合作社財務負責人的簡潔儀表板。指標列顯示發電量、在地使用、電池電量和點數池。24 小時曲線比較屋頂發電、街區用電和電池充電。旁邊是抽象的屋頂地圖、成員點數表，以及顯示晚間儲備的深色電池卡片。

Credits（點數）。 在變暗的頁面上彈出一個專注的視窗，引導完成一個月的點數分配：選擇分配方式（平均、依屋頂份額或依在地用電），檢視每戶分配前後的預覽，決定是否保留 5% 作為維護基金、是否寄送淺顯易懂的帳單說明，最後確認金額。

視覺系統

• 暖紙色背景、白色卡片、墨色文字
• 以太陽琥珀色為唯一強調色，綠色代表「就緒」，藍色代表電池
• Bricolage Grotesque 標題，Plus Jakarta Sans 介面文字，JetBrains Mono 數字
• 範例資料前後一致，各頁面的分配金額能對得上

說明

Heliograin 是虛構品牌。所有姓名、數字和地址均為示範用 DEMO 資料。這是一份靜態設計作品，不是能源、計費或金融產品。包括街道插畫與圖表在內的所有圖形均以程式碼繪製，未使用照片或第三方標誌。