---
title: "Faraway - Kyoto Trip Fund"
platform: android
slug: faraway-kyoto-trip-fund
screens: ["calculator"]
domains: ["travel"]
style: null
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "card", "chip", "badge", "tab-bar"]
score: {clean: 90, consistent: 66, accessible: 80, comprehensible: 34}
url: https://gui.farm/android/faraway-kyoto-trip-fund
raw: https://gui.farm/android/faraway-kyoto-trip-fund/design.guix
download: https://gui.farm/android/faraway-kyoto-trip-fund.gui
---

# Faraway - Kyoto Trip Fund

A claymorphism Android trip-savings goal planner where a traveler saving for a spring Kyoto trip sees a progress ring of amount saved versus target, adjusts monthly-deposit and timeline sliders, and reviews an on-track projected-total plan and recent deposits.

- **Live preview:** https://gui.farm/android/faraway-kyoto-trip-fund
- **Raw source:** https://gui.farm/android/faraway-kyoto-trip-fund/design.guix
- **Download (.gui):** https://gui.farm/android/faraway-kyoto-trip-fund.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Faraway - Kyoto Trip Fund">
  <tokens>
    <color name="bg" value="#F3EFF6" />
    <color name="surface" value="#FCFAFE" />
    <color name="surface-2" value="#F5EDFB" />
    <color name="tint" value="#F1E6FA" />
    <color name="ink" value="#221A2B" />
    <color name="sub" value="#6E5F7C" />
    <color name="faint" value="#746581" />
    <color name="accent" value="#9E4BD1" />
    <color name="accent-deep" value="#6E1FA8" />
    <color name="accent-mut" value="#C6A6E6" />
    <color name="track" value="#E7DAF3" />
    <color name="amber" value="#E8871E" />
    <color name="amber-ink" value="#3A2205" />
    <color name="amber-soft" value="#FBEBD6" />
    <color name="clay-sh" value="#B497D473" />
    <color name="clay-sh2" value="#A98BCB59" />
    <color name="clay-hi" value="#FFFFFF" />
    <color name="white" value="#FFFFFF" />
    <number name="r-pill" value="999" />
    <number name="r-card" value="24" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Wordmark"
      font-family="Roboto"
      font-size="19"
      font-weight="800"
      line-height="22"
      letter-spacing="-0.4"
    />
    <text-style name="NavSub" font-family="Roboto" font-size="12" font-weight="500" line-height="15" />
    <text-style
      name="Eyebrow"
      font-family="Roboto"
      font-size="11"
      font-weight="800"
      line-height="14"
      letter-spacing="1.4"
    />
    <text-style
      name="Title"
      font-family="Roboto"
      font-size="18"
      font-weight="800"
      line-height="22"
      letter-spacing="-0.3"
    />
    <text-style name="Meta" font-family="Roboto" font-size="13" font-weight="500" line-height="17" />
    <text-style
      name="ChipTxt"
      font-family="Roboto"
      font-size="12"
      font-weight="800"
      line-height="15"
      letter-spacing="0.2"
    />
    <text-style
      name="RingCap"
      font-family="Roboto"
      font-size="11"
      font-weight="800"
      line-height="14"
      letter-spacing="1.6"
    />
    <text-style
      name="RingBig"
      font-family="Roboto"
      font-size="34"
      font-weight="800"
      line-height="38"
      letter-spacing="-1"
    />
    <text-style name="RingSub" font-family="Roboto" font-size="13" font-weight="600" line-height="16" />
    <text-style
      name="TileCap"
      font-family="Roboto"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="0.6"
    />
    <text-style
      name="TileVal"
      font-family="Roboto"
      font-size="17"
      font-weight="800"
      line-height="21"
      letter-spacing="-0.3"
    />
    <text-style
      name="CardTitle"
      font-family="Roboto"
      font-size="15"
      font-weight="800"
      line-height="19"
      letter-spacing="-0.2"
    />
    <text-style name="CardCap" font-family="Roboto" font-size="12" font-weight="500" line-height="15" />
    <text-style name="SlideLabel" font-family="Roboto" font-size="14" font-weight="700" line-height="18" />
    <text-style
      name="SlideVal"
      font-family="Roboto"
      font-size="15"
      font-weight="800"
      line-height="18"
      letter-spacing="-0.2"
    />
    <text-style
      name="Badge"
      font-family="Roboto"
      font-size="11"
      font-weight="800"
      line-height="14"
      letter-spacing="0.8"
    />
    <text-style
      name="ProjCap"
      font-family="Roboto"
      font-size="12"
      font-weight="700"
      line-height="15"
      letter-spacing="0.6"
    />
    <text-style
      name="ProjBig"
      font-family="Roboto"
      font-size="34"
      font-weight="800"
      line-height="38"
      letter-spacing="-1"
    />
    <text-style name="ProjSub" font-family="Roboto" font-size="13" font-weight="500" line-height="18" />
    <text-style name="SegCap" font-family="Roboto" font-size="12" font-weight="700" line-height="15" />
    <text-style name="BarLbl" font-family="Roboto" font-size="11" font-weight="700" line-height="14" />
    <text-style
      name="BtnLabel"
      font-family="Roboto"
      font-size="15"
      font-weight="800"
      line-height="18"
      letter-spacing="0.2"
    />
    <text-style
      name="TabOn"
      font-family="Roboto"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="0.2"
    />
    <text-style
      name="TabOff"
      font-family="Roboto"
      font-size="10"
      font-weight="500"
      line-height="13"
      letter-spacing="0.2"
    />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 700 800" styles="normal" />
  </fonts>
  <col w="360" fill="$bg">
    <row w="fill" h="28" p="0 18" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" fill="$ink" />
      <row gap="7" align="middle-right">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23221A2B"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23221A2B" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23221A2B"
          w="15"
          h="15"
        />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="64" p="0 18" gap="auto" align="middle-left" fill="$bg">
      <row gap="12" align="middle-left">
        <frame w="44" h="44" radius="16">
          <appearance>
            <fill type="color" value="$accent" />
            <effect type="drop-shadow" x="0" y="7" radius="14" spread="-2" color="$clay-sh" />
            <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF4D" />
          </appearance>
          <img
            abs="true"
            x="11"
            y="11"
            src="https://api.iconify.design/material-symbols/savings-rounded.svg?color=%23FFFFFF"
            w="22"
            h="22"
          />
        </frame>
        <col gap="2" align="middle-left">
          <text text-style="Wordmark" value="Faraway" fill="$ink" />
          <text text-style="NavSub" value="Trip savings" fill="$sub" />
        </col>
      </row>
      <frame role="button" w="42" h="42" radius="$r-pill">
        <appearance>
          <fill type="color" value="$surface" />
          <effect type="drop-shadow" x="0" y="6" radius="12" spread="-2" color="$clay-sh" />
          <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="$clay-hi" />
        </appearance>
        <img
          abs="true"
          x="11"
          y="11"
          src="https://api.iconify.design/material-symbols/edit-outline-rounded.svg?color=%236E5F7C"
          w="20"
          h="20"
        />
      </frame>
    </row>
    <col w="fill" p="12 20 24 20" gap="18" align="top-center">
      <row role="card" w="fill" p="12" gap="14" radius="$r-card" align="middle-left">
        <appearance>
          <fill type="color" value="$surface" />
          <effect type="drop-shadow" x="0" y="12" radius="24" spread="-6" color="$clay-sh" />
          <effect type="drop-shadow" x="0" y="3" radius="6" spread="0" color="$clay-sh2" />
          <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="$clay-hi" />
        </appearance>
        <frame w="88" h="88" radius="18" clip="true">
          <img
            abs="true"
            x="0"
            y="0"
            src="https://images.unsplash.com/photo-1761847587996-fbbf092cf29a?w=200&amp;h=200&amp;fit=crop&amp;q=80"
            w="88"
            h="88"
            fit="cover"
          />
        </frame>
        <col w="fill" gap="5" align="middle-left">
          <text text-style="Eyebrow" text-case="uppercase" value="GOAL" fill="$accent-deep" />
          <text text-style="Title" value="Kyoto, Japan" fill="$ink" />
          <text text-style="Meta" value="Cherry-blossom season" fill="$sub" />
        </col>
        <col h="88" gap="0" align="top-right">
          <row role="chip" p="7 11" radius="$r-pill" align="middle-center">
            <appearance>
              <fill type="color" value="$amber-soft" />
            </appearance>
            <text text-style="ChipTxt" value="7 mo left" fill="$amber-ink" />
          </row>
        </col>
      </row>
      <col w="fill" gap="16" align="top-center">
        <frame w="200" h="200">
          <frame abs="true" x="0" y="0" w="200" h="200" radius="100">
            <appearance>
              <fill type="color" value="$surface" />
              <effect type="drop-shadow" x="0" y="16" radius="30" spread="-6" color="$clay-sh" />
              <effect type="drop-shadow" x="0" y="4" radius="8" spread="0" color="$clay-sh2" />
              <effect type="inner-shadow" x="0" y="4" radius="6" spread="0" color="$clay-hi" />
            </appearance>
          </frame>
          <rect abs="true" x="96" y="6" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="111" y="7" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="126" y="11" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="140" y="18" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="153" y="27" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="164" y="38" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="173" y="51" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="180" y="65" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="184" y="80" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="186" y="96" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="184" y="111" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="180" y="126" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="173" y="140" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="164" y="153" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="153" y="164" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="140" y="173" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="126" y="180" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="111" y="184" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="96" y="186" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="80" y="184" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="65" y="180" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="51" y="173" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="38" y="164" w="9" h="9" radius="4" fill="$accent" />
          <rect abs="true" x="27" y="153" w="9" h="9" radius="4" fill="$track" />
          <rect abs="true" x="18" y="140" w="9" h="9" radius="4" fill="$track" />
          <rect abs="true" x="11" y="126" w="9" h="9" radius="4" fill="$track" />
          <rect abs="true" x="7" y="111" w="9" h="9" radius="4" fill="$track" />
          <rect abs="true" x="6" y="96" w="9" h="9" radius="4" fill="$track" />
          <rect abs="true" x="7" y="80" w="9" h="9" radius="4" fill="$track" />
          <rect abs="true" x="11" y="65" w="9" h="9" radius="4" fill="$track" />
          <rect abs="true" x="18" y="50" w="9" h="9" radius="4" fill="$track" />
          <rect abs="true" x="27" y="38" w="9" h="9" radius="4" fill="$track" />
          <rect abs="true" x="38" y="27" w="9" h="9" radius="4" fill="$track" />
          <rect abs="true" x="50" y="18" w="9" h="9" radius="4" fill="$track" />
          <rect abs="true" x="65" y="11" w="9" h="9" radius="4" fill="$track" />
          <rect abs="true" x="80" y="7" w="9" h="9" radius="4" fill="$track" />
          <frame abs="true" x="25" y="25" w="150" h="150" radius="75">
            <appearance>
              <fill type="color" value="$surface-2" />
              <effect type="inner-shadow" x="0" y="5" radius="10" spread="0" color="$clay-sh" />
              <effect type="inner-shadow" x="0" y="-3" radius="6" spread="0" color="$clay-hi" />
            </appearance>
          </frame>
          <col abs="true" x="25" y="66" w="150" gap="4" align="top-center">
            <text text-style="RingCap" text-case="uppercase" value="SAVED" fill="$accent-deep" align="center" />
            <text text-style="RingBig" value="$2,674" fill="$ink" align="center" />
            <text text-style="RingSub" value="64% of $4,180" fill="$sub" align="center" />
          </col>
        </frame>
        <row w="fill" gap="12" align="middle-center">
          <col role="card" w="fill" p="14 14 15 14" gap="4" radius="18" align="top-left">
            <appearance>
              <fill type="color" value="$surface" />
              <effect type="drop-shadow" x="0" y="9" radius="18" spread="-4" color="$clay-sh" />
              <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="$clay-hi" />
            </appearance>
            <text text-style="TileCap" text-case="uppercase" value="TARGET" fill="$faint" />
            <text text-style="TileVal" value="$4,180" fill="$ink" />
          </col>
          <col role="card" w="fill" p="14 14 15 14" gap="4" radius="18" align="top-left">
            <appearance>
              <fill type="color" value="$surface" />
              <effect type="drop-shadow" x="0" y="9" radius="18" spread="-4" color="$clay-sh" />
              <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="$clay-hi" />
            </appearance>
            <text text-style="TileCap" text-case="uppercase" value="LEFT TO SAVE" fill="$faint" />
            <text text-style="TileVal" value="$1,506" fill="$ink" />
          </col>
        </row>
      </col>
      <col role="card" w="fill" p="18 16 18 16" gap="16" radius="$r-card" align="top-center">
        <appearance>
          <fill type="color" value="$surface" />
          <effect type="drop-shadow" x="0" y="12" radius="24" spread="-6" color="$clay-sh" />
          <effect type="drop-shadow" x="0" y="3" radius="6" spread="0" color="$clay-sh2" />
          <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="$clay-hi" />
        </appearance>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="CardTitle" value="Adjust your plan" fill="$ink" />
          <text text-style="CardCap" value="Auto-deposit, monthly" fill="$sub" />
        </row>
        <col w="fill" gap="11" align="top-left">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="SlideLabel" value="Monthly deposit" fill="$ink" />
            <text text-style="SlideVal" value="$216" fill="$accent-deep" />
          </row>
          <frame w="288" h="22">
            <rect abs="true" x="0" y="7" w="288" h="8" radius="4" fill="$track" />
            <rect abs="true" x="0" y="7" w="137" h="8" radius="4" fill="$accent" />
            <frame abs="true" x="126" y="0" w="22" h="22" radius="11">
              <appearance>
                <fill type="color" value="$surface" />
                <effect type="drop-shadow" x="0" y="3" radius="6" spread="0" color="$clay-sh" />
                <effect type="inner-shadow" x="0" y="2" radius="2" spread="0" color="$clay-hi" />
              </appearance>
              <ellipse abs="true" x="7" y="7" w="8" h="8" fill="$accent" />
            </frame>
          </frame>
        </col>
        <col w="fill" gap="11" align="top-left">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="SlideLabel" value="Timeline" fill="$ink" />
            <text text-style="SlideVal" value="7 months" fill="$accent-deep" />
          </row>
          <frame w="288" h="22">
            <rect abs="true" x="0" y="7" w="288" h="8" radius="4" fill="$track" />
            <rect abs="true" x="0" y="7" w="128" h="8" radius="4" fill="$accent" />
            <frame abs="true" x="117" y="0" w="22" h="22" radius="11">
              <appearance>
                <fill type="color" value="$surface" />
                <effect type="drop-shadow" x="0" y="3" radius="6" spread="0" color="$clay-sh" />
                <effect type="inner-shadow" x="0" y="2" radius="2" spread="0" color="$clay-hi" />
              </appearance>
              <ellipse abs="true" x="7" y="7" w="8" h="8" fill="$accent" />
            </frame>
          </frame>
        </col>
      </col>
      <col role="card" w="fill" p="18 18 18 18" gap="14" radius="$r-card" align="top-left">
        <appearance>
          <fill type="color" value="$tint" />
          <effect type="drop-shadow" x="0" y="12" radius="24" spread="-6" color="$clay-sh" />
          <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="$clay-hi" />
        </appearance>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="ProjCap" text-case="uppercase" value="PROJECTED TOTAL" fill="$accent-deep" />
          <row role="badge" p="6 11" radius="$r-pill" gap="5" align="middle-center">
            <appearance>
              <fill type="color" value="$amber" />
            </appearance>
            <img
              src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%233A2205"
              w="14"
              h="14"
            />
            <text text-style="Badge" value="ON TRACK" fill="$amber-ink" />
          </row>
        </row>
        <col w="fill" gap="6" align="top-left">
          <text text-style="ProjBig" value="$4,186" fill="$ink" />
          <text
            text-style="ProjSub"
            value="You'll finish $6 ahead of your $4,180 goal by Mar 18, 2027."
            fill="$sub"
          />
        </col>
        <frame w="292" h="14" radius="7">
          <rect abs="true" x="0" y="0" w="292" h="14" radius="7" fill="$track" />
          <rect abs="true" x="0" y="0" w="292" h="14" radius="7" fill="$accent" />
          <rect abs="true" x="0" y="0" w="187" h="14" radius="7" fill="$accent-deep" />
        </frame>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="SegCap" value="Saved $2,674" fill="$accent-deep" />
          <text text-style="SegCap" value="Plan +$1,512" fill="$accent" />
        </row>
        <row role="button" w="fill" h="52" radius="16" gap="8" align="middle-center">
          <appearance>
            <fill type="color" value="$accent-deep" />
            <effect type="drop-shadow" x="0" y="8" radius="16" spread="-3" color="#6E1FA859" />
            <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF3D" />
          </appearance>
          <img
            src="https://api.iconify.design/material-symbols/bookmark-added-rounded.svg?color=%23FFFFFF"
            w="19"
            h="19"
          />
          <text text-style="BtnLabel" value="Save this plan" fill="$white" align="center" />
        </row>
      </col>
      <col role="card" w="fill" p="16 16 16 16" gap="14" radius="$r-card" align="top-left">
        <appearance>
          <fill type="color" value="$surface" />
          <effect type="drop-shadow" x="0" y="12" radius="24" spread="-6" color="$clay-sh" />
          <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="$clay-hi" />
        </appearance>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="CardTitle" value="Deposits, last 6 months" fill="$ink" />
          <text text-style="CardCap" value="$1,291 in" fill="$accent-deep" />
        </row>
        <img
          src="https://gui.farm/tools/charts/bar-chart.svg?data=Jan%3A32%2CFeb%3A41%2CMar%3A38%2CApr%3A55%2CMay%3A61%2CJun%3A72&amp;bar=%239E4BD1&amp;grid=hide&amp;radius=12&amp;ylabels=hide&amp;width=290&amp;height=135"
          w="285"
          h="135"
        />
      </col>
    </col>
    <col w="fill" fill="$surface" border="1 0 0 0 $track">
      <row role="tab-bar" w="fill" h="64" p="0 12" align="middle-center">
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/flag-rounded.svg?color=%239E4BD1"
            w="23"
            h="23"
          />
          <text text-style="TabOn" value="Goals" fill="$accent" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/account-balance-wallet-outline-rounded.svg?color=%236E5F7C"
            w="23"
            h="23"
          />
          <text text-style="TabOff" value="Deposits" fill="$sub" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/analytics-outline.svg?color=%236E5F7C"
            w="23"
            h="23"
          />
          <text text-style="TabOff" value="Insights" fill="$sub" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/person-outline-rounded.svg?color=%236E5F7C"
            w="23"
            h="23"
          />
          <text text-style="TabOff" value="Profile" fill="$sub" align="center" />
        </col>
      </row>
      <row w="fill" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$track" />
      </row>
    </col>
  </col>
</gui>
```