---
title: "Helio - Smart Home Energy"
platform: ios
slug: helio-home-energy
screens: ["dashboard"]
domains: ["smart-home"]
style: "minimal"
fonts: ["SF Pro"]
roles: ["top-navigation-bar", "button", "badge", "card", "hyperlink", "tab-bar"]
score: {clean: 100, consistent: 79, accessible: 73, comprehensible: 40}
url: https://gui.farm/ios/helio-home-energy
raw: https://gui.farm/ios/helio-home-energy/design.guix
download: https://gui.farm/ios/helio-home-energy.gui
---

# Helio - Smart Home Energy

Helio is a dark-mode iOS smart home energy dashboard for monitoring solar generation, household electricity use, battery storage, grid export, EV charging and cooling. It combines live energy flow, consumption analytics, charging recommendations and connected-system status in one mobile interface.

- **Live preview:** https://gui.farm/ios/helio-home-energy
- **Raw source:** https://gui.farm/ios/helio-home-energy/design.guix
- **Download (.gui):** https://gui.farm/ios/helio-home-energy.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Helio - Smart Home Energy">
  <tokens>
    <color name="bg" value="#0B1420" />
    <color name="surface" value="#142130" />
    <color name="surface-2" value="#1C2A3A" />
    <color name="text" value="#F4F5F0" />
    <color name="muted" value="#9EABB7" />
    <color name="line" value="#2B3A49" />
    <color name="lime" value="#C7F06B" />
    <color name="sky" value="#70B9FF" />
    <color name="amber" value="#FFB55F" />
    <number name="radius-card" value="20" />
    <number name="radius-small" value="12" />
  </tokens>
  <styles>
    <text-style name="Title" font-family="SF Pro" font-size="32" font-weight="700" line-height="36" />
    <text-style name="H2" font-family="SF Pro" font-size="21" font-weight="700" line-height="26" />
    <text-style name="Metric" font-family="SF Pro" font-size="38" font-weight="700" line-height="40" />
    <text-style name="Body" font-family="SF Pro" font-size="15" font-weight="400" line-height="22" />
    <text-style name="BodyStrong" font-family="SF Pro" font-size="15" font-weight="600" line-height="22" />
    <text-style name="Caption" font-family="SF Pro" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Tiny"
      font-family="SF Pro"
      font-size="10"
      font-weight="600"
      line-height="13"
      letter-spacing="0.5"
    />
  </styles>
  <fonts>
    <font family="SF Pro" source="system" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="390" fill="$bg">
    <row w="390" h="54" p="14 20 0 20" align="middle-left">
      <text
        w="fill"
        value="9:41"
        font-family="SF Pro"
        font-size="14"
        font-weight="600"
        line-height="18"
        color="$text"
      />
      <row gap="7" align="middle-left">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/signal-light.svg" w="16" h="16" />
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/wifi-light.svg" w="16" h="16" />
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/battery-light.svg" w="20" h="20" />
      </row>
    </row>
    <row w="390" h="58" p="0 20" align="middle-left" role="top-navigation-bar">
      <col w="fill" gap="1">
        <text
          value="HELIO"
          font-family="SF Pro"
          font-size="18"
          font-weight="700"
          line-height="20"
          color="$text"
        />
        <text value="AL FURJAN HOME" text-style="Tiny" color="$muted" />
      </col>
      <row w="38" h="38" radius="19" fill="$surface" align="middle-center" role="button">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/settings.svg" w="18" h="18" />
      </row>
    </row>
    <col w="390" p="12 20 20 20" gap="16">
      <row w="350" align="bottom-left">
        <col w="fill" gap="4">
          <text value="THURSDAY, 30 JAN" text-style="Tiny" color="$muted" />
          <text value="Energy is flowing" text-style="Title" color="$text" />
        </col>
        <row h="32" radius="16" fill="#24371F" p="0 11" gap="6" align="middle-left" role="badge">
          <rect w="7" h="7" radius="4" fill="$lime" />
          <text value="LIVE" text-style="Tiny" color="$lime" />
        </row>
      </row>
      <frame w="350" h="182" radius="$radius-card" clip="true" role="card">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/helio-home.png" x="0" y="0" w="350" h="182" fit="cover" />
        <col x="16" y="112" w="318" gap="4">
          <text value="Home is exporting clean energy" text-style="BodyStrong" color="$text" />
          <text
            value="Solar covers the house and sends 1.2 kW to the grid."
            text-style="Caption"
            color="#DCE3E8"
          />
        </col>
      </frame>
      <col w="350" fill="$surface" radius="$radius-card" p="16" gap="16" role="card">
        <row w="318" align="middle-left">
          <col w="fill" gap="3">
            <text value="SOLAR GENERATION" text-style="Tiny" color="$lime" />
            <row gap="6" align="bottom-left">
              <text value="3.8" text-style="Metric" color="$text" />
              <text value="kW" text-style="BodyStrong" color="$muted" />
            </row>
          </col>
          <row w="44" h="44" radius="22" fill="#263B29" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/sun-green.svg" w="23" h="23" />
          </row>
        </row>
        <line w="318" fill="$line" />
        <row w="318" gap="10" align="top-left">
          <col w="fill" fill="$surface-2" radius="$radius-small" p="12" gap="8" align="top-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/house-blue.svg" w="20" h="20" />
            <text value="Home" text-style="Caption" color="$muted" />
            <text value="1.9 kW" text-style="BodyStrong" color="$text" />
          </col>
          <col w="fill" fill="$surface-2" radius="$radius-small" p="12" gap="8">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/battery-green.svg" w="20" h="20" />
            <text value="Battery" text-style="Caption" color="$muted" />
            <text value="0.7 kW" text-style="BodyStrong" color="$text" />
          </col>
          <col w="fill" fill="$surface-2" radius="$radius-small" p="12" gap="8">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/grid-amber.svg" w="20" h="20" />
            <text value="Grid" text-style="Caption" color="$muted" />
            <text value="1.2 kW" text-style="BodyStrong" color="$text" />
          </col>
        </row>
        <row w="318" h="44" radius="12" border="1 $line" p="0 14" align="middle-left" role="button">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/activity.svg" w="18" h="18" />
          <text w="fill" value="VIEW LIVE ENERGY FLOW" text-style="Tiny" align="center" color="$text" />
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/chevron-light.svg" w="17" h="17" />
        </row>
      </col>
      <col w="350" fill="$surface" radius="$radius-card" p="16" gap="16" role="card">
        <row w="318" align="middle-left">
          <col w="fill" gap="3">
            <text value="TODAY’S HOME USE" text-style="Tiny" color="$sky" />
            <text value="7.4 kWh" text-style="H2" color="$text" />
          </col>
          <text value="18% below usual" text-style="Caption" color="$lime" />
        </row>
        <frame w="318" h="112" fill="$surface">
          <rect x="0" y="72" w="28" h="40" radius="6 6 0 0" fill="#35516B" />
          <rect x="42" y="54" w="28" h="58" radius="6 6 0 0" fill="#35516B" />
          <rect x="84" y="64" w="28" h="48" radius="6 6 0 0" fill="#35516B" />
          <rect x="126" y="30" w="28" h="82" radius="6 6 0 0" fill="$sky" />
          <rect x="168" y="46" w="28" h="66" radius="6 6 0 0" fill="#35516B" />
          <rect x="210" y="74" w="28" h="38" radius="6 6 0 0" fill="#35516B" />
          <rect x="252" y="88" w="28" h="24" radius="6 6 0 0" fill="#35516B" />
          <text x="0" y="0" value="Now 1.9 kW" text-style="Caption" color="$muted" />
          <text x="274" y="0" value="6 PM" text-style="Caption" color="$muted" />
        </frame>
        <row w="318" align="middle-left">
          <text w="fill" value="Estimated cost today" text-style="Caption" color="$muted" />
          <text value="AED 4.80" text-style="BodyStrong" color="$text" />
        </row>
      </col>
      <col w="350" fill="$lime" radius="$radius-card" p="16" gap="14" role="card">
        <row w="318" align="middle-left" gap="12">
          <row w="38" h="38" radius="19" fill="#A6CC4E" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/clock-dark.svg" w="20" h="20" />
          </row>
          <text w="fill" value="Best charging window" text-style="BodyStrong" color="#172015" />
          <text value="TONIGHT" text-style="Tiny" color="#445227" />
        </row>
        <text
          value="Charge the car from 11:00 PM to 2:30 AM and save about AED 6.40."
          text-style="Body"
          color="#25301C"
        />
        <row w="318" h="42" fill="#172015" radius="12" p="0 14" align="middle-left" role="button">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/car-light.svg" w="18" h="18" />
          <text w="fill" value="SCHEDULE EV CHARGING" text-style="Tiny" align="center" color="$text" />
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/chevron-light.svg" w="17" h="17" />
        </row>
      </col>
      <row w="350" align="middle-left">
        <text w="fill" value="Connected systems" text-style="H2" color="$text" />
        <text value="Manage" text-style="BodyStrong" color="$sky" role="hyperlink" />
      </row>
      <col w="350" fill="$surface" radius="$radius-card" p="16" gap="0" role="card">
        <row w="318" h="58" align="middle-left" gap="12">
          <row w="38" h="38" radius="12" fill="$surface-2" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/battery-green.svg" w="20" h="20" />
          </row>
          <col w="fill" gap="2">
            <text value="Home battery" text-style="BodyStrong" color="$text" />
            <text value="68% / 7.1 kWh available" text-style="Caption" color="$muted" />
          </col>
          <text value="Charging" text-style="Caption" color="$lime" />
        </row>
        <line w="318" fill="$line" />
        <row w="318" h="58" align="middle-left" gap="12">
          <row w="38" h="38" radius="12" fill="$surface-2" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/car-blue.svg" w="20" h="20" />
          </row>
          <col w="fill" gap="2">
            <text value="Model Y" text-style="BodyStrong" color="$text" />
            <text value="54% / ready by 6:30 AM" text-style="Caption" color="$muted" />
          </col>
          <text value="Plugged in" text-style="Caption" color="$sky" />
        </row>
        <line w="318" fill="$line" />
        <row w="318" h="58" align="middle-left" gap="12">
          <row w="38" h="38" radius="12" fill="$surface-2" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/snowflake.svg" w="20" h="20" />
          </row>
          <col w="fill" gap="2">
            <text value="Cooling" text-style="BodyStrong" color="$text" />
            <text value="Living areas / 23°" text-style="Caption" color="$muted" />
          </col>
          <text value="Eco" text-style="Caption" color="$lime" />
        </row>
      </col>
    </col>
    <row w="390" h="92" fill="$surface" border="1 $line" p="10 20 24 20" align="top-left" role="tab-bar">
      <col w="87" align="top-center" gap="5">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/home-green.svg" w="21" h="21" />
        <text value="Home" text-style="Tiny" color="$lime" />
      </col>
      <col w="87" align="top-center" gap="5">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/chart-muted.svg" w="21" h="21" />
        <text value="Insights" text-style="Tiny" color="$muted" />
      </col>
      <col w="87" align="top-center" gap="5">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/zap-muted.svg" w="21" h="21" />
        <text value="Energy" text-style="Tiny" color="$muted" />
      </col>
      <col w="87" align="top-center" gap="5">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/c66a3a88-a893-4ecd-b5f6-5757e1c9ac27/user-muted.svg" w="21" h="21" />
        <text value="Account" text-style="Tiny" color="$muted" />
      </col>
    </row>
  </col>
</gui>
```