---
title: "Sunbeam — Solar Financing"
platform: android
slug: sunbeam-solar-financing
screens: ["calculator"]
domains: ["fintech"]
style: "minimal"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "slider", "segmented-control", "badge", "card", "chip", "button"]
score: {clean: 100, consistent: 79, accessible: 99, comprehensible: 39}
url: https://gui.farm/android/sunbeam-solar-financing
raw: https://gui.farm/android/sunbeam-solar-financing/design.guix
download: https://gui.farm/android/sunbeam-solar-financing.gui
---

# Sunbeam — Solar Financing

Solar loan financing calculator with system-size, term, and down-payment controls and a cost breakdown.

- **Live preview:** https://gui.farm/android/sunbeam-solar-financing
- **Raw source:** https://gui.farm/android/sunbeam-solar-financing/design.guix
- **Download (.gui):** https://gui.farm/android/sunbeam-solar-financing.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Sunbeam — Solar Financing">
  <tokens>
    <color name="bg" value="#FBF7F0" />
    <color name="surface" value="#FFFFFF" />
    <color name="surf2" value="#F3EEE4" />
    <color name="ink" value="#241C10" />
    <color name="muted" value="#6B5D48" />
    <color name="line" value="#E7DECE" />
    <color name="amber" value="#F59E0B" />
    <color name="bronze" value="#8A5A00" />
    <color name="tint" value="#FDECC8" />
    <color name="white" value="#FFFFFF" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="16" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style
      name="Eyebrow"
      font-family="Roboto"
      font-size="11"
      font-weight="500"
      line-height="16"
      letter-spacing="0.8"
    />
    <text-style name="BigNumber" font-family="Roboto" font-size="40" font-weight="700" line-height="44" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="500" line-height="28" />
    <text-style name="SectionTitle" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="Value" font-family="Roboto" font-size="15" font-weight="700" line-height="22" />
    <text-style name="Price" font-family="Roboto" font-size="20" font-weight="700" line-height="28" />
    <text-style name="Body" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="Label" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <col w="360" fill="$bg">
    <!-- status bar -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelSmall" value="9:41" fill="$ink" />
      <row gap="6" align="middle-right">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23241C10"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23241C10" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23241C10"
          w="15"
          h="15"
        />
      </row>
    </row>
    <!-- top navigation bar -->
    <row role="top-navigation-bar" w="fill" h="56" p="0 8" gap="8" align="middle-left">
      <row w="44" h="44" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23241C10"
          w="24"
          h="24"
        />
      </row>
      <text w="fill" text-style="TitleLarge" value="Solar financing" fill="$ink" />
      <row w="44" h="44" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/info-outline-rounded.svg?color=%23241C10"
          w="22"
          h="22"
        />
      </row>
    </row>
    <!-- result header -->
    <col w="360" p="16" gap="8">
      <row w="328" gap="6" align="middle-left">
        <img
          src="https://api.iconify.design/material-symbols/wb-sunny-rounded.svg?color=%238A5A00"
          w="15"
          h="15"
        />
        <text text-style="Eyebrow" value="ESTIMATED PAYMENT" fill="$bronze" />
      </row>
      <row w="fill" gap="auto" align="middle-left">
        <row gap="4" align="bottom-left">
          <text text-style="BigNumber" value="$133" fill="$bronze" />
          <text text-style="LabelSmall" value="/mo" fill="$muted" p="0 0 6 0" />
        </row>
        <row gap="3" align="middle-right">
          <text text-style="Label" value="See breakdown" fill="$bronze" />
          <img
            src="https://api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg?color=%238A5A00"
            w="18"
            h="18"
          />
        </row>
      </row>
      <text text-style="LabelSmall" value="15-year loan · 6.99% APR · fixed rate" fill="$muted" />
    </col>
    <!-- system size slider -->
    <col w="360" p="8 16" gap="10">
      <row w="fill" gap="auto" align="middle-left">
        <text text-style="SectionTitle" value="System size" fill="$ink" />
        <text text-style="Value" value="7.5 kW" fill="$ink" />
      </row>
      <frame role="slider" w="328" h="24">
        <rect x="0" y="9" w="328" h="6" radius="3" fill="$surf2" />
        <rect x="0" y="9" w="164" h="6" radius="3" fill="$amber" />
        <ellipse x="152" y="0" w="24" h="24" fill="$white" border="3 $amber" />
      </frame>
      <row w="fill" gap="auto" align="middle-left">
        <text text-style="LabelSmall" value="3 kW" fill="$muted" />
        <text text-style="LabelSmall" value="12 kW" fill="$muted" />
      </row>
      <text w="328" text-style="Body" value="Covers about 85% of your annual electricity use." fill="$muted" />
    </col>
    <!-- loan term segmented control -->
    <col w="360" p="22 16 0 16" gap="10">
      <text text-style="SectionTitle" value="Loan term" fill="$ink" />
      <row
        role="segmented-control"
        w="328"
        h="44"
        radius="$r-md"
        fill="$surf2"
        border="1 $line"
        clip="true"
        align="middle-left"
      >
        <row w="109" h="44" align="middle-center">
          <text text-style="Label" value="10 yr" fill="$muted" />
        </row>
        <row w="110" h="44" fill="$amber" align="middle-center">
          <text text-style="Label" value="15 yr" fill="$ink" />
        </row>
        <row w="109" h="44" align="middle-center">
          <text text-style="Label" value="20 yr" fill="$muted" />
        </row>
      </row>
    </col>
    <!-- down payment slider -->
    <col w="360" p="22 16 0 16" gap="10">
      <row w="fill" gap="auto" align="middle-left">
        <text text-style="SectionTitle" value="Down payment" fill="$ink" />
        <text text-style="Value" value="$2,000" fill="$ink" />
      </row>
      <frame role="slider" w="328" h="24">
        <rect x="0" y="9" w="328" h="6" radius="3" fill="$surf2" />
        <rect x="0" y="9" w="66" h="6" radius="3" fill="$amber" />
        <ellipse x="54" y="0" w="24" h="24" fill="$white" border="3 $amber" />
      </frame>
      <row w="fill" gap="auto" align="middle-left">
        <text text-style="LabelSmall" value="$0" fill="$muted" />
        <text text-style="LabelSmall" value="$10,000" fill="$muted" />
      </row>
      <text w="328" text-style="Body" value="A larger deposit lowers your monthly payment." fill="$muted" />
    </col>
    <!-- incentive badge -->
    <col w="360" p="18 16 0 16">
      <row role="badge" h="30" radius="$r-sm" fill="$tint" p="0 12" gap="6" align="middle-left" w="fill">
        <img
          src="https://api.iconify.design/material-symbols/verified-rounded.svg?color=%238A5A00"
          w="16"
          h="16"
        />
        <text text-style="LabelSmall" value="30% federal tax credit applied" fill="$bronze" />
      </row>
    </col>
    <!-- cost breakdown card -->
    <col w="360" p="16 16 0 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="16 16" gap="12">
        <text text-style="SectionTitle" value="Cost breakdown" fill="$ink" />
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Body" value="System cost (7.5 kW)" fill="$muted" />
          <text text-style="Label" value="$24,000" fill="$ink" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Body" value="Federal tax credit (30%)" fill="$muted" />
          <text text-style="Label" value="−$7,200" fill="$bronze" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Body" value="Down payment" fill="$muted" />
          <text text-style="Label" value="−$2,000" fill="$ink" />
        </row>
        <line w="296" fill="$line" />
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Label" value="Amount financed" fill="$ink" />
          <text text-style="Price" value="$14,800" fill="$ink" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="LabelSmall" value="15 yr · 6.99% APR" fill="$muted" />
          <text text-style="Label" value="≈ $133 / mo" fill="$bronze" />
        </row>
      </col>
    </col>
    <!-- reassurance chips -->
    <col w="360" p="14 16 24 16">
      <row w="328" gap="8" align="middle-left">
        <row role="chip" h="32" radius="$r-full" fill="none" border="1 $line" p="0 12" align="middle-center">
          <text text-style="LabelSmall" value="$0 due today" fill="$muted" />
        </row>
        <row role="chip" h="32" radius="$r-full" fill="none" border="1 $line" p="0 12" align="middle-center">
          <text text-style="LabelSmall" value="Fixed rate" fill="$muted" />
        </row>
        <row role="chip" h="32" radius="$r-full" fill="none" border="1 $line" p="0 12" align="middle-center">
          <text text-style="LabelSmall" value="No prepay penalty" fill="$muted" />
        </row>
      </row>
    </col>
    <!-- fixed bottom action bar (last flow child) -->
    <col w="360" fill="$bg">
      <line w="360" fill="$line" />
      <row w="360" p="12 16 10 16" gap="16" align="middle-left">
        <col gap="0" align="middle-left">
          <text text-style="LabelSmall" value="Est. monthly" fill="$muted" />
          <text text-style="Price" value="$133 / mo" fill="$ink" />
        </col>
        <row role="button" w="fill" h="52" radius="$r-full" fill="$amber" gap="8" align="middle-center">
          <text text-style="Label" value="Continue" fill="$ink" />
          <img
            src="https://api.iconify.design/material-symbols/arrow-forward-rounded.svg?color=%23241C10"
            w="20"
            h="20"
          />
        </row>
      </row>
      <row w="360" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$line" />
      </row>
    </col>
  </col>
</gui>
```