---
title: "Ducat — Portfolio"
platform: android
slug: ducat-portfolio
screens: ["portfolio"]
domains: ["crypto"]
style: "retro"
fonts: ["Roboto", "Space Grotesk", "JetBrains Mono"]
roles: ["top-navigation-bar", "button", "card", "segmented-control", "divider", "tab-bar"]
score: {clean: 100, consistent: 76, accessible: 81, comprehensible: 35}
url: https://gui.farm/android/ducat-portfolio
raw: https://gui.farm/android/ducat-portfolio/design.guix
download: https://gui.farm/android/ducat-portfolio.gui
---

# Ducat — Portfolio

A retro gold-standard crypto wallet portfolio screen showing total balance, a 7-day trend, asset allocation, and a holdings list for a self-custody user checking their assets.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Ducat — Portfolio">
  <tokens>
    <color name="bg" value="#17120C" />
    <color name="surface" value="#211A11" />
    <color name="surface-2" value="#2C2417" />
    <color name="line" value="#3E3320" />
    <color name="gold" value="#E8B04B" />
    <color name="gold-2" value="#C98A3A" />
    <color name="ink" value="#17120C" />
    <color name="cream" value="#F4EBD6" />
    <color name="tan" value="#B9A986" />
    <color name="tan-2" value="#A2926B" />
    <color name="gain" value="#93B36A" />
    <color name="loss" value="#D9793F" />
    <color name="alloc-1" value="#E8B04B" />
    <color name="alloc-2" value="#C98A3A" />
    <color name="alloc-3" value="#9E7038" />
    <color name="alloc-4" value="#D8C08A" />
    <color name="alloc-5" value="#6E5A3C" />
    <number name="r-lg" value="14" />
    <number name="r-md" value="10" />
    <number name="r-sm" value="6" />
    <number name="r-pill" value="999" />
  </tokens>

  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Wordmark" font-family="Space Grotesk" font-size="19" font-weight="700" line-height="22" letter-spacing="1.5" />
    <text-style name="Eyebrow" font-family="Roboto" font-size="11" font-weight="500" line-height="14" letter-spacing="1" />
    <text-style name="Section" font-family="Space Grotesk" font-size="13" font-weight="700" line-height="16" letter-spacing="0.5" />
    <text-style name="CoinName" font-family="Space Grotesk" font-size="16" font-weight="700" line-height="20" />
    <text-style name="BtnLabel" font-family="Space Grotesk" font-size="13" font-weight="700" line-height="16" letter-spacing="0.4" />
    <text-style name="Ticker" font-family="JetBrains Mono" font-size="11" font-weight="700" line-height="12" letter-spacing="0.3" />
    <text-style name="BalanceXL" font-family="JetBrains Mono" font-size="34" font-weight="700" line-height="38" letter-spacing="-0.8" />
    <text-style name="ValueMono" font-family="JetBrains Mono" font-size="15" font-weight="700" line-height="19" />
    <text-style name="PriceMono" font-family="JetBrains Mono" font-size="13" font-weight="500" line-height="17" />
    <text-style name="AmtMono" font-family="JetBrains Mono" font-size="12" font-weight="400" line-height="16" />
    <text-style name="Pct" font-family="JetBrains Mono" font-size="12" font-weight="700" line-height="16" />
    <text-style name="Meta" font-family="Roboto" font-size="12" font-weight="400" line-height="16" />
    <text-style name="LabelSm" font-family="Roboto" font-size="11" font-weight="500" line-height="14" letter-spacing="0.4" />
    <text-style name="TabLabel" font-family="Roboto" font-size="10" font-weight="500" line-height="12" letter-spacing="0.3" />
  </styles>

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

  <col w="360" fill="$bg">

    <!-- Status bar (device chrome, untagged) -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" fill="$cream" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23F4EBD6" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23F4EBD6" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23F4EBD6" w="15" h="15" />
      </row>
    </row>

    <!-- Top navigation -->
    <row role="top-navigation-bar" w="fill" h="60" p="0 16" gap="12" align="middle-left">
      <row w="34" h="34" radius="$r-pill" fill="$gold" align="middle-center">
        <text text-style="Wordmark" value="D" fill="$ink" />
      </row>
      <col w="fill" gap="1">
        <text text-style="Wordmark" value="DUCAT" fill="$cream" />
        <text text-style="Eyebrow" value="SELF-CUSTODY WALLET" fill="$tan-2" />
      </col>
      <row role="button" w="42" h="42" radius="$r-pill" fill="$surface" border="2 $line" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/notifications-rounded.svg?color=%23B9A986" w="22" h="22" />
      </row>
    </row>

    <col w="fill" p="8 16 24 16" gap="16">

      <!-- HERO: balance + today change + 7-day trend -->
      <col role="card" w="fill" fill="$surface" radius="$r-lg" border="2 $line" p="16" gap="14">
        <row w="fill" gap="auto" align="top-left">
          <col gap="6">
            <text text-style="Eyebrow" value="TOTAL PORTFOLIO VALUE" fill="$tan" />
            <text text-style="BalanceXL" value="$50,724.62" fill="$cream" />
            <row gap="6" align="middle-left">
              <img src="https://api.iconify.design/material-symbols/trending-up-rounded.svg?color=%2393B36A" w="17" h="17" />
              <text text-style="Pct" value="+$678.53" fill="$gain" />
              <text text-style="Meta" value="+1.36% today" fill="$tan-2" />
            </row>
          </col>
          <col role="segmented-control" w="88" h="30" radius="$r-sm" fill="$surface-2" border="2 $line" p="2" align="middle-center">
            <row w="fill" h="fill" radius="4" fill="$gold" align="middle-center">
              <text text-style="LabelSm" value="24H" fill="$ink" />
            </row>
          </col>
        </row>
        <img src="https://gui.farm/tools/charts/line-chart.svg?data=48.6,49.2,48.4,49.7,49.9,50.05,50.72&amp;line=%23E8B04B&amp;surface=dark&amp;area=on&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=296&amp;height=90" w="296" h="90" />
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Meta" value="Mon" fill="$tan-2" />
          <text text-style="Meta" value="Wed" fill="$tan-2" />
          <text text-style="Meta" value="Fri" fill="$tan-2" />
          <text text-style="Meta" value="Today" fill="$tan" />
        </row>
      </col>

      <!-- Quick actions -->
      <row w="fill" gap="10" align="top-left">
        <col w="fill" gap="8" align="middle-center">
          <row role="button" w="fill" h="54" radius="$r-md" fill="$gold" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%2317120C" w="24" h="24" />
          </row>
          <text text-style="LabelSm" value="Buy" fill="$cream" />
        </col>
        <col w="fill" gap="8" align="middle-center">
          <row role="button" w="fill" h="54" radius="$r-md" fill="$surface" border="2 $line" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%23E8B04B" w="24" h="24" />
          </row>
          <text text-style="LabelSm" value="Send" fill="$tan" />
        </col>
        <col w="fill" gap="8" align="middle-center">
          <row role="button" w="fill" h="54" radius="$r-md" fill="$surface" border="2 $line" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/swap-horiz-rounded.svg?color=%23E8B04B" w="24" h="24" />
          </row>
          <text text-style="LabelSm" value="Swap" fill="$tan" />
        </col>
        <col w="fill" gap="8" align="middle-center">
          <row role="button" w="fill" h="54" radius="$r-md" fill="$surface" border="2 $line" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/arrow-downward-rounded.svg?color=%23E8B04B" w="24" h="24" />
          </row>
          <text text-style="LabelSm" value="Receive" fill="$tan" />
        </col>
      </row>

      <!-- Allocation -->
      <col role="card" w="fill" fill="$surface" radius="$r-lg" border="2 $line" p="16" gap="12">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Section" value="ALLOCATION" fill="$cream" />
          <text text-style="LabelSm" value="5 assets" fill="$tan-2" />
        </row>
        <row w="296" h="14" radius="$r-sm" fill="$surface-2" clip="true">
          <rect x="0" y="0" w="172.37" h="14" fill="$alloc-1" />
          <rect x="172.37" y="0" w="54.19" h="14" fill="$alloc-2" />
          <rect x="226.56" y="0" w="35.49" h="14" fill="$alloc-3" />
          <rect x="262.05" y="0" w="19.08" h="14" fill="$alloc-4" />
          <rect x="281.13" y="0" w="14.87" h="14" fill="$alloc-5" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <row gap="6" align="middle-center">
            <rect w="9" h="9" radius="2" fill="$alloc-1" />
            <text text-style="Meta" value="BTC" fill="$tan" />
            <text text-style="Pct" value="58.2%" fill="$cream" />
          </row>
          <row gap="6" align="middle-center">
            <rect w="9" h="9" radius="2" fill="$alloc-2" />
            <text text-style="Meta" value="ETH" fill="$tan" />
            <text text-style="Pct" value="18.3%" fill="$cream" />
          </row>
          <row gap="6" align="middle-center">
            <rect w="9" h="9" radius="2" fill="$alloc-3" />
            <text text-style="Meta" value="SOL" fill="$tan" />
            <text text-style="Pct" value="12.0%" fill="$cream" />
          </row>
        </row>
      </col>

      <!-- Segmented control: Holdings / Watchlist -->
      <row role="segmented-control" w="fill" h="42" radius="$r-md" fill="$surface" border="2 $line" p="3" gap="3" align="middle-center">
        <row w="fill" h="fill" radius="$r-sm" fill="$gold" align="middle-center">
          <text text-style="BtnLabel" value="Holdings" fill="$ink" />
        </row>
        <row w="fill" h="fill" radius="$r-sm" align="middle-center">
          <text text-style="BtnLabel" value="Watchlist" fill="$tan" />
        </row>
      </row>

      <!-- Holdings list -->
      <col role="card" w="fill" fill="$surface" radius="$r-lg" border="2 $line" clip="true">
        <row w="fill" h="68" p="0 14" gap="12" align="middle-left">
          <row w="40" h="40" radius="$r-pill" fill="$gold" align="middle-center">
            <text text-style="Ticker" value="BTC" fill="$ink" />
          </row>
          <col w="fill" gap="3">
            <text text-style="CoinName" value="Bitcoin" fill="$cream" />
            <row gap="8" align="middle-left">
              <text text-style="PriceMono" value="$61,284.50" fill="$tan" />
              <text text-style="Pct" value="+2.14%" fill="$gain" />
            </row>
          </col>
          <col gap="3" align="middle-right">
            <text text-style="ValueMono" value="$29,539.13" fill="$cream" />
            <text text-style="AmtMono" value="0.4820 BTC" fill="$tan-2" />
          </col>
        </row>
        <line role="divider" w="fill" fill="$line" />
        <row w="fill" h="68" p="0 14" gap="12" align="middle-left">
          <row w="40" h="40" radius="$r-pill" fill="$gold-2" align="middle-center">
            <text text-style="Ticker" value="ETH" fill="$ink" />
          </row>
          <col w="fill" gap="3">
            <text text-style="CoinName" value="Ethereum" fill="$cream" />
            <row gap="8" align="middle-left">
              <text text-style="PriceMono" value="$2,947.80" fill="$tan" />
              <text text-style="Pct" value="+1.62%" fill="$gain" />
            </row>
          </col>
          <col gap="3" align="middle-right">
            <text text-style="ValueMono" value="$9,285.57" fill="$cream" />
            <text text-style="AmtMono" value="3.1500 ETH" fill="$tan-2" />
          </col>
        </row>
        <line role="divider" w="fill" fill="$line" />
        <row w="fill" h="68" p="0 14" gap="12" align="middle-left">
          <row w="40" h="40" radius="$r-pill" fill="$alloc-3" align="middle-center">
            <text text-style="Ticker" value="SOL" fill="$cream" />
          </row>
          <col w="fill" gap="3">
            <text text-style="CoinName" value="Solana" fill="$cream" />
            <row gap="8" align="middle-left">
              <text text-style="PriceMono" value="$146.20" fill="$tan" />
              <text text-style="Pct" value="-3.08%" fill="$loss" />
            </row>
          </col>
          <col gap="3" align="middle-right">
            <text text-style="ValueMono" value="$6,081.92" fill="$cream" />
            <text text-style="AmtMono" value="41.60 SOL" fill="$tan-2" />
          </col>
        </row>
        <line role="divider" w="fill" fill="$line" />
        <row w="fill" h="68" p="0 14" gap="12" align="middle-left">
          <row w="40" h="40" radius="$r-pill" fill="$alloc-4" align="middle-center">
            <text text-style="Ticker" value="LNK" fill="$ink" />
          </row>
          <col w="fill" gap="3">
            <text text-style="CoinName" value="Chainlink" fill="$cream" />
            <row gap="8" align="middle-left">
              <text text-style="PriceMono" value="$14.86" fill="$tan" />
              <text text-style="Pct" value="+4.37%" fill="$gain" />
            </row>
          </col>
          <col gap="3" align="middle-right">
            <text text-style="ValueMono" value="$3,269.20" fill="$cream" />
            <text text-style="AmtMono" value="220.0 LINK" fill="$tan-2" />
          </col>
        </row>
        <line role="divider" w="fill" fill="$line" />
        <row w="fill" h="68" p="0 14" gap="12" align="middle-left">
          <row w="40" h="40" radius="$r-pill" fill="$alloc-5" align="middle-center">
            <text text-style="Ticker" value="ADA" fill="$cream" />
          </row>
          <col w="fill" gap="3">
            <text text-style="CoinName" value="Cardano" fill="$cream" />
            <row gap="8" align="middle-left">
              <text text-style="PriceMono" value="$0.4720" fill="$tan" />
              <text text-style="Pct" value="-1.24%" fill="$loss" />
            </row>
          </col>
          <col gap="3" align="middle-right">
            <text text-style="ValueMono" value="$2,548.80" fill="$cream" />
            <text text-style="AmtMono" value="5,400 ADA" fill="$tan-2" />
          </col>
        </row>
      </col>

    </col>

    <!-- Bottom tab bar (last flow child) -->
    <col w="fill" fill="$surface" border="2 0 0 0 $line">
      <row role="tab-bar" w="fill" h="60" p="0 8" align="middle-center">
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/account-balance-wallet-rounded.svg?color=%23E8B04B" w="24" h="24" />
          <text text-style="TabLabel" value="Portfolio" fill="$gold" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/candlestick-chart-rounded.svg?color=%23A2926B" w="24" h="24" />
          <text text-style="TabLabel" value="Markets" fill="$tan-2" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/swap-horiz-rounded.svg?color=%23A2926B" w="24" h="24" />
          <text text-style="TabLabel" value="Swap" fill="$tan-2" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/receipt-long-rounded.svg?color=%23A2926B" w="24" h="24" />
          <text text-style="TabLabel" value="Activity" fill="$tan-2" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/person-rounded.svg?color=%23A2926B" w="24" h="24" />
          <text text-style="TabLabel" value="Profile" fill="$tan-2" />
        </col>
      </row>
      <row w="fill" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$line" />
      </row>
    </col>
  </col>
</gui>

```