---
title: "Kestrel — Portfolio"
platform: android
slug: kestrel-portfolio
screens: ["portfolio"]
domains: ["fintech"]
style: null
fonts: ["Roboto", "Roboto Mono"]
roles: ["top-navigation-bar", "badge", "segmented-control", "button", "tab-bar"]
score: {clean: 100, consistent: 77, accessible: 65, comprehensible: 22}
url: https://gui.farm/android/kestrel-portfolio
raw: https://gui.farm/android/kestrel-portfolio/design.guix
download: https://gui.farm/android/kestrel-portfolio.gui
---

# Kestrel — Portfolio

A Swiss-typographic Android brokerage portfolio where a long-term retail investor reviews total value, a 1-month return chart, allocation across six positions, and a holdings table with shares, market value, and daily change.

- **Live preview:** https://gui.farm/android/kestrel-portfolio
- **Raw source:** https://gui.farm/android/kestrel-portfolio/design.guix
- **Download (.gui):** https://gui.farm/android/kestrel-portfolio.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Kestrel — Portfolio">
  <tokens>
    <color name="bg" value="#F6F5F1" />
    <color name="surface" value="#FEFEFC" />
    <color name="ink" value="#141414" />
    <color name="muted" value="#5F5B54" />
    <color name="line" value="#141414" />
    <color name="line-soft" value="#D9D6CE" />
    <color name="accent" value="#C81D5B" />
    <color name="accent-ink" value="#A20E49" />
    <color name="accent-deep" value="#A8104C" />
    <color name="a-nvda" value="#E24A7E" />
    <color name="a-vxus" value="#F0A0BC" />
    <color name="a-msft" value="#2B2B2B" />
    <color name="a-schd" value="#8A8781" />
    <color name="a-cash" value="#C9C6BF" />
    <color name="white" value="#FFFFFF" />
    <number name="r-sm" value="4" />
    <number name="r-pill" value="999" />
  </tokens>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
    <font family="Roboto Mono" source="google" weights="500 700" styles="normal" />
  </fonts>
  <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="17"
      font-weight="700"
      line-height="20"
      letter-spacing="3"
    />
    <text-style
      name="Eyebrow"
      font-family="Roboto"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="1.4"
    />
    <text-style
      name="BalanceXL"
      font-family="Roboto"
      font-size="44"
      font-weight="700"
      line-height="46"
      letter-spacing="-1.8"
    />
    <text-style name="ChangeLg" font-family="Roboto" font-size="14" font-weight="700" line-height="18" />
    <text-style
      name="Section"
      font-family="Roboto"
      font-size="12"
      font-weight="700"
      line-height="16"
      letter-spacing="1.2"
    />
    <text-style
      name="Chip"
      font-family="Roboto"
      font-size="10"
      font-weight="700"
      line-height="12"
      letter-spacing="0.6"
    />
    <text-style name="Ticker" font-family="Roboto" font-size="15" font-weight="700" line-height="18" />
    <text-style
      name="Btn"
      font-family="Roboto"
      font-size="13"
      font-weight="700"
      line-height="16"
      letter-spacing="1.2"
    />
    <text-style
      name="Tab"
      font-family="Roboto"
      font-size="10"
      font-weight="500"
      line-height="12"
      letter-spacing="0.4"
    />
    <text-style
      name="Caption"
      font-family="Roboto"
      font-size="11"
      font-weight="500"
      line-height="15"
      letter-spacing="0.3"
    />
    <text-style name="MonoVal" font-family="Roboto Mono" font-size="14" font-weight="700" line-height="18" />
    <text-style name="MonoSm" font-family="Roboto Mono" font-size="12" font-weight="500" line-height="16" />
    <text-style name="MonoPct" font-family="Roboto Mono" font-size="12" font-weight="700" line-height="16" />
    <text-style name="MonoWt" font-family="Roboto Mono" font-size="11" font-weight="700" line-height="14" />
    <text-style
      name="StatBig"
      font-family="Roboto"
      font-size="18"
      font-weight="700"
      line-height="22"
      letter-spacing="-0.3"
    />
  </styles>
  <col w="360" fill="$bg">
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="Status" 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=%23141414"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23141414" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23141414"
          w="15"
          h="15"
        />
      </row>
    </row>
    <col w="fill">
      <row role="top-navigation-bar" w="fill" h="52" p="0 16" gap="auto" align="middle-left">
        <row gap="9" align="middle-left">
          <rect w="11" h="11" fill="$accent" />
          <text text-style="Wordmark" value="KESTREL" fill="$ink" />
        </row>
        <row gap="16" align="middle-right">
          <img
            src="https://api.iconify.design/material-symbols/search-rounded.svg?color=%23141414"
            w="22"
            h="22"
          />
          <img
            src="https://api.iconify.design/material-symbols/tune-rounded.svg?color=%23141414"
            w="22"
            h="22"
          />
        </row>
      </row>
      <rect w="fill" h="2" fill="$line" />
    </col>
    <col w="fill" p="18 16 24 16" gap="18">
      <col w="fill" gap="10">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Eyebrow" value="TOTAL PORTFOLIO VALUE" fill="$muted" />
          <row role="badge" h="20" p="0 8" fill="$ink" align="middle-center">
            <text text-style="Chip" value="INDIVIDUAL · TAXABLE" fill="$white" />
          </row>
        </row>
        <text text-style="BalanceXL" value="$213,792.85" fill="$ink" />
        <row gap="10" align="middle-left">
          <row gap="3" align="middle-left">
            <img
              src="https://api.iconify.design/material-symbols/trending-up-rounded.svg?color=%23141414"
              w="18"
              h="18"
            />
            <text text-style="ChangeLg" value="+$1,637.09" fill="$ink" />
          </row>
          <text text-style="Caption" value="+0.77% TODAY" fill="$muted" />
        </row>
      </col>
      <col w="fill" gap="12">
        <row role="segmented-control" gap="6" align="middle-left">
          <row h="26" p="0 11" align="middle-center">
            <text text-style="Chip" value="1D" fill="$muted" />
          </row>
          <row h="26" p="0 11" align="middle-center">
            <text text-style="Chip" value="1W" fill="$muted" />
          </row>
          <row h="26" p="0 11" fill="$accent-deep" align="middle-center">
            <text text-style="Chip" value="1M" fill="$white" />
          </row>
          <row h="26" p="0 11" align="middle-center">
            <text text-style="Chip" value="3M" fill="$muted" />
          </row>
          <row h="26" p="0 11" align="middle-center">
            <text text-style="Chip" value="1Y" fill="$muted" />
          </row>
          <row h="26" p="0 11" align="middle-center">
            <text text-style="Chip" value="ALL" fill="$muted" />
          </row>
        </row>
        <img
          src="https://gui.farm/tools/charts/line-chart.svg?data=200.35,200.6,199.2,201.4,203.0,202.1,204.8,206.2,205.0,207.7,209.1,208.3,210.6,211.9,210.9,212.4,213.1,213.79&amp;line=%23C81D5B&amp;surface=light&amp;area=on&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=296&amp;height=112"
          w="fill"
          h="95"
          fit="cover"
        />
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Caption" value="1-MONTH RETURN" fill="$muted" />
          <row gap="8" align="middle-right">
            <text text-style="MonoPct" value="+$13,440.00" fill="$ink" />
            <text text-style="MonoPct" value="+6.71%" fill="$accent-ink" />
          </row>
        </row>
      </col>
      <rect w="fill" h="1" fill="$line-soft" />
      <col w="fill" gap="10">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Section" value="ALLOCATION" fill="$ink" />
          <text text-style="Chip" value="6 POSITIONS" fill="$muted" />
        </row>
        <row w="fill" h="16" fill="$line-soft" clip="true">
          <rect x="0" y="0" w="86.09" h="16" fill="$accent" />
          <rect x="86.09" y="0" w="57.98" h="16" fill="$a-nvda" />
          <rect x="144.07" y="0" w="42.95" h="16" fill="$a-vxus" />
          <rect x="187.02" y="0" w="42.11" h="16" fill="$a-msft" />
          <rect x="229.13" y="0" w="36.21" h="16" fill="$a-schd" />
          <rect x="265.34" y="0" w="30.66" h="16" fill="$a-cash" />
        </row>
      </col>
      <col w="fill" gap="0">
        <row w="fill" gap="auto" align="middle-left" p="0 0 10 0">
          <text text-style="Section" value="HOLDINGS" fill="$ink" />
          <text text-style="Chip" value="SHARES · MARKET VALUE" fill="$muted" />
        </row>
        <rect w="fill" h="1" fill="$line-soft" />
        <row w="fill" h="64" gap="12" align="middle-left">
          <rect w="12" h="12" fill="$accent" />
          <col w="fill" gap="4">
            <row gap="8" align="middle-left">
              <text text-style="Ticker" value="VTI" fill="$ink" />
              <text text-style="MonoWt" value="29.09%" fill="$muted" />
            </row>
            <text text-style="MonoSm" value="210.5 sh · $295.40" fill="$muted" />
          </col>
          <col gap="4" align="middle-right">
            <text text-style="MonoVal" value="$62,181.70" fill="$ink" />
            <row gap="4" align="middle-right">
              <img
                src="https://api.iconify.design/material-symbols/arrow-drop-up-rounded.svg?color=%23141414"
                w="16"
                h="16"
              />
              <text text-style="MonoPct" value="+0.62%" fill="$ink" />
            </row>
          </col>
        </row>
        <rect w="fill" h="1" fill="$line-soft" />
        <row w="fill" h="64" gap="12" align="middle-left">
          <rect w="12" h="12" fill="$a-nvda" />
          <col w="fill" gap="4">
            <row gap="8" align="middle-left">
              <text text-style="Ticker" value="NVDA" fill="$ink" />
              <text text-style="MonoWt" value="19.59%" fill="$muted" />
            </row>
            <text text-style="MonoSm" value="235 sh · $178.20" fill="$muted" />
          </col>
          <col gap="4" align="middle-right">
            <text text-style="MonoVal" value="$41,877.00" fill="$ink" />
            <row gap="4" align="middle-right">
              <img
                src="https://api.iconify.design/material-symbols/arrow-drop-up-rounded.svg?color=%23141414"
                w="16"
                h="16"
              />
              <text text-style="MonoPct" value="+2.31%" fill="$ink" />
            </row>
          </col>
        </row>
        <rect w="fill" h="1" fill="$line-soft" />
        <row w="fill" h="64" gap="12" align="middle-left">
          <rect w="12" h="12" fill="$a-vxus" />
          <col w="fill" gap="4">
            <row gap="8" align="middle-left">
              <text text-style="Ticker" value="VXUS" fill="$ink" />
              <text text-style="MonoWt" value="14.51%" fill="$muted" />
            </row>
            <text text-style="MonoSm" value="430 sh · $72.15" fill="$muted" />
          </col>
          <col gap="4" align="middle-right">
            <text text-style="MonoVal" value="$31,024.50" fill="$ink" />
            <row gap="4" align="middle-right">
              <img
                src="https://api.iconify.design/material-symbols/arrow-drop-up-rounded.svg?color=%23141414"
                w="16"
                h="16"
              />
              <text text-style="MonoPct" value="+0.18%" fill="$ink" />
            </row>
          </col>
        </row>
        <rect w="fill" h="1" fill="$line-soft" />
        <row w="fill" h="64" gap="12" align="middle-left">
          <rect w="12" h="12" fill="$a-msft" />
          <col w="fill" gap="4">
            <row gap="8" align="middle-left">
              <text text-style="Ticker" value="MSFT" fill="$ink" />
              <text text-style="MonoWt" value="14.23%" fill="$muted" />
            </row>
            <text text-style="MonoSm" value="61 sh · $498.60" fill="$muted" />
          </col>
          <col gap="4" align="middle-right">
            <text text-style="MonoVal" value="$30,414.60" fill="$ink" />
            <row gap="4" align="middle-right">
              <img
                src="https://api.iconify.design/material-symbols/arrow-drop-up-rounded.svg?color=%23141414"
                w="16"
                h="16"
              />
              <text text-style="MonoPct" value="+0.94%" fill="$ink" />
            </row>
          </col>
        </row>
        <rect w="fill" h="1" fill="$line-soft" />
        <row w="fill" h="64" gap="12" align="middle-left">
          <rect w="12" h="12" fill="$a-schd" />
          <col w="fill" gap="4">
            <row gap="8" align="middle-left">
              <text text-style="Ticker" value="SCHD" fill="$ink" />
              <text text-style="MonoWt" value="12.23%" fill="$muted" />
            </row>
            <text text-style="MonoSm" value="905 sh · $28.90" fill="$muted" />
          </col>
          <col gap="4" align="middle-right">
            <text text-style="MonoVal" value="$26,154.50" fill="$ink" />
            <row gap="4" align="middle-right">
              <img
                src="https://api.iconify.design/material-symbols/arrow-drop-down-rounded.svg?color=%23141414"
                w="16"
                h="16"
              />
              <text text-style="MonoPct" value="-0.22%" fill="$ink" />
            </row>
          </col>
        </row>
        <rect w="fill" h="1" fill="$line-soft" />
        <row w="fill" h="64" gap="12" align="middle-left">
          <rect w="12" h="12" fill="$a-cash" />
          <col w="fill" gap="4">
            <row gap="8" align="middle-left">
              <text text-style="Ticker" value="CASH" fill="$ink" />
              <text text-style="MonoWt" value="10.36%" fill="$muted" />
            </row>
            <text text-style="MonoSm" value="SETTLEMENT · 4.98% APY" fill="$muted" />
          </col>
          <col gap="4" align="middle-right">
            <text text-style="MonoVal" value="$22,140.55" fill="$ink" />
            <text text-style="MonoPct" value="0.00%" fill="$muted" />
          </col>
        </row>
        <rect w="fill" h="1" fill="$line-soft" />
      </col>
      <row w="fill" gap="12" align="top-left">
        <col w="fill" gap="4" p="14" border="1 $line-soft">
          <text text-style="Chip" value="ALL-TIME RETURN" fill="$muted" />
          <text text-style="StatBig" value="+$35,362.85" fill="$ink" />
          <text text-style="Caption" value="+19.82%" fill="$accent-ink" />
        </col>
        <col w="fill" gap="4" p="14" border="1 $line-soft">
          <text text-style="Chip" value="COST BASIS" fill="$muted" />
          <text text-style="StatBig" value="$178,430.00" fill="$ink" />
          <text text-style="Caption" value="OPENED 2019" fill="$muted" />
        </col>
      </row>
      <row role="button" w="fill" h="52" p="0 20" gap="auto" fill="$accent-deep" align="middle-center">
        <text text-style="Btn" value="TRADE" fill="$white" />
        <img
          src="https://api.iconify.design/material-symbols/arrow-forward-rounded.svg?color=%23FFFFFF"
          w="20"
          h="20"
        />
      </row>
    </col>
    <col w="fill" fill="$surface" border="2 0 0 0 $line">
      <row role="tab-bar" w="fill" h="58" p="0 8" align="middle-center">
        <col w="fill" gap="4" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/pie-chart-rounded.svg?color=%23A20E49"
            w="24"
            h="24"
          />
          <text text-style="Tab" value="Portfolio" fill="$accent-ink" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/explore-rounded.svg?color=%235F5B54"
            w="24"
            h="24"
          />
          <text text-style="Tab" value="Explore" fill="$muted" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/swap-horiz-rounded.svg?color=%235F5B54"
            w="24"
            h="24"
          />
          <text text-style="Tab" value="Trade" fill="$muted" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/receipt-long-rounded.svg?color=%235F5B54"
            w="24"
            h="24"
          />
          <text text-style="Tab" value="Activity" fill="$muted" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/person-rounded.svg?color=%235F5B54"
            w="24"
            h="24"
          />
          <text text-style="Tab" value="Profile" fill="$muted" />
        </col>
      </row>
      <row w="fill" h="22" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$ink" />
      </row>
    </col>
  </col>
</gui>
```