---
title: "Sable — Savings Goals"
platform: android
slug: sable-savings-goals
screens: []
domains: ["fintech"]
style: "glassmorphism"
fonts: ["Roboto", "Roboto Mono"]
roles: ["top-navigation-bar", "button", "avatar", "card", "chip", "segmented-control", "divider", "floating-action-button", "tab-bar"]
score: {clean: 100, consistent: 78, accessible: 40, comprehensible: 38}
url: https://gui.farm/android/sable-savings-goals
raw: https://gui.farm/android/sable-savings-goals/design.guix
download: https://gui.farm/android/sable-savings-goals.gui
---

# Sable — Savings Goals

A glassmorphism dark Android savings-goals screen where a personal-finance user tracks total saved plus four individual money goals, each with its own progress bar and target.

- **Live preview:** https://gui.farm/android/sable-savings-goals
- **Raw source:** https://gui.farm/android/sable-savings-goals/design.guix
- **Download (.gui):** https://gui.farm/android/sable-savings-goals.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Sable — Savings Goals">
  <tokens>
    <color name="text" value="#FAFAFA" />
    <color name="text-70" value="#FAFAFAC2" />
    <color name="text-50" value="#FAFAFA8F" />
    <color name="ink" value="#1A0910" />
    <color name="glass" value="#FFFFFF12" />
    <color name="glass-2" value="#FFFFFF1C" />
    <color name="glass-line" value="#FFFFFF2E" />
    <color name="glass-line-soft" value="#FFFFFF1A" />
    <color name="track" value="#FFFFFF24" />
    <color name="rose" value="#FF5C8A" />
    <color name="rose-text" value="#FF9DBB" />
    <color name="rose-dim" value="#FF5C8A2E" />
    <color name="c1" value="#FF6E96" />
    <color name="c2" value="#E24D77" />
    <color name="c3" value="#BF3E63" />
    <color name="c4" value="#8E2C46" />
    <number name="r-pill" value="999" />
    <number name="r-lg" value="22" />
    <number name="r-md" value="18" />
    <number name="r-sm" value="12" />
  </tokens>

  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 700" styles="normal" />
    <font family="Roboto Mono" source="google" weights="500 600 700" styles="normal" />
  </fonts>

  <styles>
    <text-style name="StatusTime" font-family="Roboto" font-size="12" font-weight="600" line-height="16" />
    <text-style name="H1" font-family="Roboto" font-size="22" font-weight="700" line-height="28" />
    <text-style name="Micro" font-family="Roboto" font-size="11" font-weight="600" line-height="14" letter-spacing="0.8" />
    <text-style name="BigAmt" font-family="Roboto Mono" font-size="30" font-weight="700" line-height="34" />
    <text-style name="Caption" font-family="Roboto" font-size="12" font-weight="400" line-height="16" />
    <text-style name="CaptionStrong" font-family="Roboto" font-size="12" font-weight="600" line-height="16" />
    <text-style name="Tiny" font-family="Roboto" font-size="10" font-weight="500" line-height="13" />
    <text-style name="Seg" font-family="Roboto" font-size="13" font-weight="600" line-height="16" />
    <text-style name="LegendTxt" font-family="Roboto" font-size="11" font-weight="500" line-height="14" />
    <text-style name="GoalName" font-family="Roboto" font-size="15" font-weight="600" line-height="20" />
    <text-style name="GoalMeta" font-family="Roboto" font-size="12" font-weight="400" line-height="16" />
    <text-style name="PctBig" font-family="Roboto" font-size="16" font-weight="700" line-height="20" />
    <text-style name="AmtMono" font-family="Roboto Mono" font-size="13" font-weight="600" line-height="16" />
    <text-style name="TabLabel" font-family="Roboto" font-size="10" font-weight="600" line-height="12" />
  </styles>

  <col w="360" fill="linear-gradient(180deg, #1C1015 0%, #130E13 45%, #0C0A0D 100%)">

    <row w="fill" h="24" p="0 16" gap="auto" align="middle-center">
      <text text-style="StatusTime" value="9:41" color="$text" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%23FAFAFA" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%23FAFAFA" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full.svg?color=%23FAFAFA" w="15" h="15" />
      </row>
    </row>

    <row role="top-navigation-bar" w="fill" h="62" p="0 12 0 16" gap="auto" align="middle-center">
      <col gap="2">
        <text text-style="Micro" value="SABLE · SAVINGS" color="$rose-text" />
        <text text-style="H1" value="Your Goals" color="$text" />
      </col>
      <row gap="10" align="middle-center">
        <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/search.svg?color=%23FAFAFA" w="22" h="22" />
        </row>
        <img role="avatar" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&amp;fit=facearea&amp;facepad=2&amp;w=80&amp;h=80&amp;q=80" w="40" h="40" radius="$r-pill" fit="cover" border="1.5 $glass-line" />
      </row>
    </row>

    <col w="fill" p="4 16 16 16" gap="14">

      <col role="card" w="fill" radius="$r-lg" p="16" gap="12" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="32" />
        </appearance>

        <row w="fill" gap="auto" align="top-left">
          <col gap="4">
            <text text-style="Micro" value="TOTAL SAVED" color="$rose-text" />
            <text text-style="BigAmt" value="$7,510" color="$text" />
            <text text-style="Caption" value="of $13,149 combined target · 57% there" color="$text-70" />
          </col>
          <col gap="3" align="top-right">
            <row role="chip" h="26" radius="$r-pill" fill="$rose-dim" border="1 $rose" p="0 10" gap="4" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/trending-up.svg?color=%23FF9DBB" w="14" h="14" />
              <text text-style="CaptionStrong" value="$640" color="$rose-text" />
            </row>
            <text text-style="Tiny" value="added this month" color="$text-50" align="right" />
          </col>
        </row>

        <row w="fill" h="12" radius="$r-pill" clip="true" align="middle-left">
          <rect w="190" h="fill" fill="$c1" />
          <rect w="47" h="fill" fill="$c2" />
          <rect w="35" h="fill" fill="$c3" />
          <rect w="24" h="fill" fill="$c4" />
        </row>

        <row w="fill" gap="auto" align="middle-center">
          <row gap="6" align="middle-center">
            <ellipse w="8" h="8" fill="$c1" />
            <text text-style="LegendTxt" value="Emergency" color="$text-70" />
          </row>
          <row gap="6" align="middle-center">
            <ellipse w="8" h="8" fill="$c2" />
            <text text-style="LegendTxt" value="Kyoto" color="$text-70" />
          </row>
          <row gap="6" align="middle-center">
            <ellipse w="8" h="8" fill="$c3" />
            <text text-style="LegendTxt" value="MacBook" color="$text-70" />
          </row>
          <row gap="6" align="middle-center">
            <ellipse w="8" h="8" fill="$c4" />
            <text text-style="LegendTxt" value="Bike" color="$text-70" />
          </row>
        </row>
      </col>

      <row role="segmented-control" w="fill" h="40" radius="$r-pill" fill="$glass" border="1 $glass-line" p="4" gap="2" align="middle-center">
        <row w="fill" h="fill" radius="$r-pill" fill="$rose" align="middle-center">
          <text text-style="Seg" value="Active" color="$ink" />
        </row>
        <row w="fill" h="fill" radius="$r-pill" align="middle-center">
          <text text-style="Seg" value="Upcoming" color="$text-70" />
        </row>
        <row w="fill" h="fill" radius="$r-pill" align="middle-center">
          <text text-style="Seg" value="Achieved" color="$text-70" />
        </row>
      </row>

      <col w="fill" gap="8">
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="Micro" value="MY GOALS" color="$text-50" />
          <text text-style="Caption" value="4 active" color="$text-50" />
        </row>
        <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />
      </col>

      <col role="card" w="fill" radius="$r-md" p="14" gap="12" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="24" />
        </appearance>
        <row w="fill" gap="12" align="middle-center">
          <img src="https://images.unsplash.com/photo-1665250693508-a46f70173ad6?auto=format&amp;fit=crop&amp;w=112&amp;h=112&amp;q=80" w="56" h="56" radius="$r-sm" fit="cover" border="1 $glass-line-soft" />
          <col w="fill" gap="3">
            <text text-style="GoalName" value="Emergency Fund" color="$text" />
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/bolt.svg?color=%23FAFAFA8F" w="13" h="13" />
              <text text-style="GoalMeta" value="Ready Mar 2027 · $60/wk" color="$text-70" />
            </row>
          </col>
          <text text-style="PctBig" value="80%" color="$text" align="right" />
        </row>
        <frame w="fill" h="16">
          <rect x="0" y="5" w="fill" h="6" radius="3" fill="$track" />
          <rect x="0" y="5" w="241" h="6" radius="3" fill="$rose" />
          <ellipse x="235" y="2" w="12" h="12" fill="$text" />
        </frame>
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="AmtMono" value="$4,820" color="$text" />
          <text text-style="AmtMono" value="$6,000" color="$text-50" align="right" />
        </row>
      </col>

      <col role="card" w="fill" radius="$r-md" p="14" gap="12" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="24" />
        </appearance>
        <row w="fill" gap="12" align="middle-center">
          <img src="https://images.unsplash.com/photo-1743515169286-7be1203c641a?auto=format&amp;fit=crop&amp;w=112&amp;h=112&amp;q=80" w="56" h="56" radius="$r-sm" fit="cover" border="1 $glass-line-soft" />
          <col w="fill" gap="3">
            <text text-style="GoalName" value="Kyoto in April" color="$text" />
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/flight.svg?color=%23FAFAFA8F" w="13" h="13" />
              <text text-style="GoalMeta" value="Trip Apr 2027 · $85/wk" color="$text-70" />
            </row>
          </col>
          <text text-style="PctBig" value="37%" color="$text" align="right" />
        </row>
        <frame w="fill" h="16">
          <rect x="0" y="5" w="fill" h="6" radius="3" fill="$track" />
          <rect x="0" y="5" w="111" h="6" radius="3" fill="$rose" />
          <ellipse x="105" y="2" w="12" h="12" fill="$text" />
        </frame>
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="AmtMono" value="$1,180" color="$text" />
          <text text-style="AmtMono" value="$3,200" color="$text-50" align="right" />
        </row>
      </col>

      <col role="card" w="fill" radius="$r-md" p="14" gap="12" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="24" />
        </appearance>
        <row w="fill" gap="12" align="middle-center">
          <img src="https://images.unsplash.com/photo-1536724609414-5f000e9a2745?auto=format&amp;fit=crop&amp;w=112&amp;h=112&amp;q=80" w="56" h="56" radius="$r-sm" fit="cover" border="1 $glass-line-soft" />
          <col w="fill" gap="3">
            <text text-style="GoalName" value="MacBook Pro 14&quot;" color="$text" />
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/laptop-mac.svg?color=%23FAFAFA8F" w="13" h="13" />
              <text text-style="GoalMeta" value="Target Feb 2027 · $50/wk" color="$text-70" />
            </row>
          </col>
          <text text-style="PctBig" value="36%" color="$text" align="right" />
        </row>
        <frame w="fill" h="16">
          <rect x="0" y="5" w="fill" h="6" radius="3" fill="$track" />
          <rect x="0" y="5" w="108" h="6" radius="3" fill="$rose" />
          <ellipse x="102" y="2" w="12" h="12" fill="$text" />
        </frame>
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="AmtMono" value="$900" color="$text" />
          <text text-style="AmtMono" value="$2,499" color="$text-50" align="right" />
        </row>
      </col>

      <col role="card" w="fill" radius="$r-md" p="14" gap="12" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="24" />
        </appearance>
        <row w="fill" gap="12" align="middle-center">
          <img src="https://images.unsplash.com/photo-1571333250630-f0230c320b6d?auto=format&amp;fit=crop&amp;w=112&amp;h=112&amp;q=80" w="56" h="56" radius="$r-sm" fit="cover" border="1 $glass-line-soft" />
          <col w="fill" gap="3">
            <text text-style="GoalName" value="Road Bike" color="$text" />
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/directions-bike.svg?color=%23FAFAFA8F" w="13" h="13" />
              <text text-style="GoalMeta" value="Target Jun 2027 · $35/wk" color="$text-70" />
            </row>
          </col>
          <text text-style="PctBig" value="42%" color="$text" align="right" />
        </row>
        <frame w="fill" h="16">
          <rect x="0" y="5" w="fill" h="6" radius="3" fill="$track" />
          <rect x="0" y="5" w="126" h="6" radius="3" fill="$rose" />
          <ellipse x="120" y="2" w="12" h="12" fill="$text" />
        </frame>
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="AmtMono" value="$610" color="$text" />
          <text text-style="AmtMono" value="$1,450" color="$text-50" align="right" />
        </row>
      </col>

    </col>

    <frame w="360" h="76">
      <row role="floating-action-button" x="288" y="6" w="56" h="56" radius="$r-pill" fill="$rose" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/add.svg?color=%231A0910" w="26" h="26" />
      </row>
    </frame>

    <row role="tab-bar" w="360" h="64" p="0 8" gap="0" fill="$glass-2" border="1 0 0 0 $glass-line" align="middle-center">
      <col w="fill" h="fill" align="middle-center" gap="3">
        <img src="https://api.iconify.design/material-symbols/home-outline.svg?color=%23FAFAFA8F" w="24" h="24" />
        <text text-style="TabLabel" value="Home" color="$text-50" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="3">
        <img src="https://api.iconify.design/material-symbols/savings.svg?color=%23FF9DBB" w="24" h="24" />
        <text text-style="TabLabel" value="Goals" color="$rose-text" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="3">
        <img src="https://api.iconify.design/material-symbols/monitoring.svg?color=%23FAFAFA8F" w="24" h="24" />
        <text text-style="TabLabel" value="Insights" color="$text-50" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="3">
        <img src="https://api.iconify.design/material-symbols/person-outline.svg?color=%23FAFAFA8F" w="24" h="24" />
        <text text-style="TabLabel" value="Profile" color="$text-50" />
      </col>
    </row>

  </col>
</gui>
```