---
title: "Arc iOS Home Energy"
platform: ios
slug: arc-ios-home-energy
screens: ["dashboard"]
domains: ["smart-home"]
style: "minimal"
fonts: ["SF Pro"]
roles: ["top-navigation-bar", "button", "avatar", "chip", "card", "badge", "segmented-control", "tab-bar"]
score: {clean: 100, consistent: 65, accessible: 76, comprehensible: 49}
url: https://gui.farm/ios/arc-ios-home-energy
raw: https://gui.farm/ios/arc-ios-home-energy/design.guix
download: https://gui.farm/ios/arc-ios-home-energy.gui
---

# Arc iOS Home Energy

iOS home-energy dashboard for tracking household electricity use — live consumption, solar generation, and per-room breakdowns in a warm, paper-toned light theme with an emerald accent.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Arc iOS Home Energy">
  <tokens>
    <color name="bg" value="#F4F1E9" />
    <color name="surface" value="#FFFDF7" />
    <color name="surface-2" value="#EAE6DB" />
    <color name="border" value="#D9D4C7" />
    <color name="ink" value="#19201A" />
    <color name="body" value="#596158" />
    <color name="muted" value="#858C82" />
    <color name="green" value="#1D7A4D" />
    <color name="green-soft" value="#DAEFDF" />
    <color name="sun" value="#F2B84B" />
    <color name="blue" value="#5B8DEF" />
    <color name="orange" value="#E47846" />
    <number name="card-r" value="20" />
    <number name="small-r" value="12" />
    <number name="pill-r" value="999" />
  </tokens>
  <styles>
    <text-style
      name="LargeTitle"
      font-family="SF Pro"
      font-size="30"
      font-weight="700"
      line-height="35"
      letter-spacing="-0.6"
    />
    <text-style
      name="Metric"
      font-family="SF Pro"
      font-size="38"
      font-weight="700"
      line-height="43"
      letter-spacing="-1"
    />
    <text-style name="H2" font-family="SF Pro" font-size="20" font-weight="700" line-height="25" />
    <text-style name="Body" font-family="SF Pro" font-size="15" font-weight="400" line-height="21" />
    <text-style name="BodyStrong" font-family="SF Pro" font-size="15" font-weight="600" line-height="21" />
    <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="700"
      line-height="13"
      letter-spacing="0.7"
    />
  </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="$ink"
      />
      <row gap="7" align="middle-left">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%2319201A" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%2319201A" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%2319201A" w="20" h="20" />
      </row>
    </row>
    <row role="top-navigation-bar" w="390" h="58" p="0 20" gap="10" align="middle-left">
      <row w="36" h="36" radius="12" fill="$green" align="middle-center">
        <img src="https://api.iconify.design/lucide/house-plug.svg?color=%23FFFDF7" w="20" h="20" />
      </row>
      <col w="fill" gap="1">
        <text
          value="ARC"
          font-family="SF Pro"
          font-size="18"
          font-weight="700"
          line-height="20"
          letter-spacing="1.2"
          color="$ink"
        />
        <text value="HOME ENERGY" text-style="Tiny" color="$muted" />
      </col>
      <row role="button" w="38" h="38" radius="19" fill="$surface" border="1 $border" align="middle-center">
        <img src="https://api.iconify.design/lucide/bell.svg?color=%23596158" w="18" h="18" />
      </row>
      <row role="avatar" w="38" h="38" radius="19" fill="$green-soft" align="middle-center">
        <text value="JJ" text-style="Caption" color="$green" />
      </row>
    </row>
    <col w="390" p="12 20 24 20" gap="16">
      <row w="350" align="bottom-left">
        <col w="fill" gap="4">
          <text value="MONDAY, 10 AUG" text-style="Tiny" color="$muted" />
          <text value="Good morning" text-style="LargeTitle" color="$ink" />
        </col>
        <row
          role="chip"
          h="32"
          p="0 11"
          radius="$pill-r"
          fill="$surface"
          border="1 $border"
          gap="6"
          align="middle-left"
        >
          <text value="Ilford,London" text-style="Caption" color="$ink" />
          <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%23858C82" w="14" h="14" />
        </row>
      </row>
      <col role="card" w="350" fill="$surface" radius="$card-r" border="1 $border" p="18" gap="15">
        <row w="314" align="top-left">
          <col w="fill" gap="4">
            <text value="LIVE SOLAR PRODUCTION" text-style="Tiny" color="$green" />
            <row gap="7" align="baseline">
              <text value="4.8" text-style="Metric" color="$ink" />
              <text value="kW" text-style="H2" color="$muted" />
            </row>
          </col>
          <row role="badge" h="30" radius="15" fill="$green-soft" p="0 10" gap="5" align="middle-left">
            <ellipse w="7" h="7" fill="$green" />
            <text value="Generating" text-style="Caption" color="$green" />
          </row>
        </row>
        <img
          src="https://gui.farm/tools/charts/area-chart.svg?data=6am:0.2,7am:0.8,8am:1.9,9am:3.1,10am:4.0,11am:4.6,12pm:4.8,1pm:4.7,2pm:4.2,3pm:3.4,4pm:2.3,5pm:1.1&amp;area=%231D7A4D&amp;surface=light&amp;fill=gradient&amp;curve=smooth&amp;points=hide&amp;grid=hide&amp;ylabels=hide&amp;width=628&amp;height=250"
          w="314"
          h="125"
        />
        <row w="314" align="middle-left">
          <text value="18.6 kWh generated today" text-style="Caption" color="$green" w="fill" />
          <text value="Peak at 12:10" text-style="Caption" color="$muted" />
        </row>
        <row role="segmented-control" w="314" h="34" p="3" fill="$surface-2" radius="10" gap="2">
          <row w="101" h="28" radius="8" fill="$surface" align="middle-center">
            <text value="Today" text-style="Caption" color="$ink" />
          </row>
          <row w="101" h="28" radius="8" align="middle-center">
            <text value="Week" text-style="Caption" color="$muted" />
          </row>
          <row w="102" h="28" radius="8" align="middle-center">
            <text value="Month" text-style="Caption" color="$muted" />
          </row>
        </row>
      </col>
      <col role="card" w="350" fill="$ink" radius="$card-r" p="16" gap="14">
        <row w="318" align="middle-left">
          <col w="fill" gap="3">
            <text value="ENERGY FLOW" text-style="Tiny" color="$sun" />
            <text value="Your home is self-powered" text-style="H2" color="$surface" />
          </col>
          <row role="badge" h="28" radius="14" fill="#294333" p="0 9" align="middle-center">
            <text value="84% solar" text-style="Caption" color="#A9EDB9" />
          </row>
        </row>
        <row w="318" gap="8" align="middle-left">
          <col w="96" fill="#252C26" radius="$small-r" p="12" gap="7">
            <row w="30" h="30" radius="15" fill="#4B4329" align="middle-center">
              <img src="https://api.iconify.design/lucide/sun.svg?color=%23F2B84B" w="17" h="17" />
            </row>
            <text value="Solar" text-style="Caption" color="#C7CEC5" />
            <text value="4.8 kW" text-style="BodyStrong" color="$surface" />
          </col>
          <col w="106" fill="#252C26" radius="$small-r" p="12" gap="7">
            <row w="30" h="30" radius="15" fill="#293748" align="middle-center">
              <img src="https://api.iconify.design/lucide/house.svg?color=%235B8DEF" w="17" h="17" />
            </row>
            <text value="Home" text-style="Caption" color="#C7CEC5" />
            <text value="3.2 kW" text-style="BodyStrong" color="$surface" />
          </col>
          <col w="100" fill="#252C26" radius="$small-r" p="12" gap="7">
            <row w="30" h="30" radius="15" fill="#284233" align="middle-center">
              <img src="https://api.iconify.design/lucide/battery-charging.svg?color=%23A9EDB9" w="17" h="17" />
            </row>
            <text value="Battery" text-style="Caption" color="#C7CEC5" />
            <text value="+1.6 kW" text-style="BodyStrong" color="$surface" />
          </col>
        </row>
      </col>
      <col role="card" w="350" fill="$surface" radius="$card-r" border="1 $border" p="16" gap="14">
        <row w="318" align="middle-left">
          <col w="fill" gap="3">
            <text value="HOME CONSUMPTION" text-style="Tiny" color="$blue" />
            <text value="12.4 kWh today" text-style="H2" color="$ink" />
          </col>
          <row role="chip" h="30" radius="15" fill="$surface-2" p="0 9" gap="5" align="middle-left">
            <text value="By hour" text-style="Caption" color="$body" />
            <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%23858C82" w="13" h="13" />
          </row>
        </row>
        <img
          src="https://gui.farm/tools/charts/bar-chart.svg?data=6am:0.4,8am:1.2,10am:0.8,12pm:1.8,2pm:1.1,4pm:1.5,6pm:2.4,8pm:2.0&amp;bar=%235B8DEF&amp;surface=light&amp;radius=8&amp;grid=hide&amp;values=hide&amp;ylabels=hide&amp;width=636&amp;height=300"
          w="318"
          h="150"
        />
        <row w="318" gap="10">
          <col w="fill" p="12" radius="$small-r" fill="$surface-2" gap="5">
            <text value="Highest use" text-style="Caption" color="$muted" />
            <text value="6 pm to 8 pm" text-style="BodyStrong" color="$ink" />
          </col>
          <col w="fill" p="12" radius="$small-r" fill="$green-soft" gap="5">
            <text value="Grid avoided" text-style="Caption" color="$green" />
            <text value="AED 7.40" text-style="BodyStrong" color="$green" />
          </col>
        </row>
      </col>
      <row w="350" gap="10">
        <col role="card" w="170" fill="$surface" radius="$card-r" border="1 $border" p="14" gap="10">
          <row w="142" align="middle-left">
            <text value="BATTERY" text-style="Tiny" color="$green" w="fill" />
            <img src="https://api.iconify.design/lucide/battery-charging.svg?color=%231D7A4D" w="17" h="17" />
          </row>
          <img
            src="https://gui.farm/tools/charts/donut-chart.svg?data=Stored:78,Available:22&amp;surface=light&amp;palette=green&amp;legend=hide&amp;total=show&amp;width=284&amp;height=220"
            w="142"
            h="110"
          />
          <text value="6h 20m backup" text-style="Caption" color="$body" />
        </col>
        <col role="card" w="170" fill="$surface" radius="$card-r" border="1 $border" p="14" gap="10">
          <row w="142" align="middle-left">
            <text value="CARBON SAVED" text-style="Tiny" color="$orange" w="fill" />
            <img src="https://api.iconify.design/lucide/leaf.svg?color=%23E47846" w="17" h="17" />
          </row>
          <text
            value="8.6 kg"
            font-family="SF Pro"
            font-size="28"
            font-weight="700"
            line-height="34"
            color="$ink"
          />
          <text value="CO₂ avoided today" text-style="Caption" color="$body" />
          <row role="badge" h="27" radius="14" fill="#FAE5D8" p="0 9" align="middle-center">
            <text value="Like 3 trees" text-style="Caption" color="$orange" />
          </row>
        </col>
      </row>
      <col role="card" w="350" fill="$surface" radius="$card-r" border="1 $border" p="16" gap="14">
        <row w="318" align="middle-left">
          <text value="Top energy users" text-style="H2" color="$ink" w="fill" />
          <text value="See all" text-style="Caption" color="$green" />
        </row>
        <row w="318" h="48" gap="12" align="middle-left">
          <row w="40" h="40" radius="12" fill="$surface-2" align="middle-center">
            <img src="https://api.iconify.design/lucide/air-vent.svg?color=%235B8DEF" w="20" h="20" />
          </row>
          <col w="fill" gap="2">
            <text value="Air conditioning" text-style="BodyStrong" color="$ink" />
            <text value="Running · Living room" text-style="Caption" color="$muted" />
          </col>
          <text value="5.8 kWh" text-style="BodyStrong" color="$ink" />
        </row>
        <line w="318" fill="$border" />
        <row w="318" h="48" gap="12" align="middle-left">
          <row w="40" h="40" radius="12" fill="$surface-2" align="middle-center">
            <img src="https://api.iconify.design/lucide/cooking-pot.svg?color=%23E47846" w="20" h="20" />
          </row>
          <col w="fill" gap="2">
            <text value="Kitchen" text-style="BodyStrong" color="$ink" />
            <text value="Last active 08:40" text-style="Caption" color="$muted" />
          </col>
          <text value="2.1 kWh" text-style="BodyStrong" color="$ink" />
        </row>
      </col>
    </col>
    <col w="390" fill="$surface" border="1 0 0 0 $border">
      <row role="tab-bar" w="390" h="54" align="middle-left">
        <col w="78" h="52" gap="3" align="middle-center">
          <img src="https://api.iconify.design/lucide/layout-dashboard.svg?color=%231D7A4D" w="22" h="22" />
          <text value="Home" font-family="SF Pro" font-size="10" font-weight="700" color="$green" />
        </col>
        <col w="78" h="52" gap="3" align="middle-center">
          <img src="https://api.iconify.design/lucide/activity.svg?color=%23858C82" w="22" h="22" />
          <text value="Energy" font-family="SF Pro" font-size="10" font-weight="500" color="$muted" />
        </col>
        <col w="78" h="52" gap="3" align="middle-center">
          <img src="https://api.iconify.design/lucide/battery-charging.svg?color=%23858C82" w="22" h="22" />
          <text value="Battery" font-family="SF Pro" font-size="10" font-weight="500" color="$muted" />
        </col>
        <col w="78" h="52" gap="3" align="middle-center">
          <img src="https://api.iconify.design/lucide/zap.svg?color=%23858C82" w="22" h="22" />
          <text value="Devices" font-family="SF Pro" font-size="10" font-weight="500" color="$muted" />
        </col>
        <col w="78" h="52" gap="3" align="middle-center">
          <img src="https://api.iconify.design/lucide/settings.svg?color=%23858C82" w="22" h="22" />
          <text value="Settings" font-family="SF Pro" font-size="10" font-weight="500" color="$muted" />
        </col>
      </row>
      <frame w="390" h="34" clip="true">
        <rect fill="$ink" w="140" h="5" radius="3" x="125" y="15" />
      </frame>
    </col>
  </col>
</gui>
```