---
title: "Vesper — Wallet"
platform: android
slug: vesper-wallet
screens: ["dashboard"]
domains: ["fintech"]
style: "minimal"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "avatar", "button", "card", "badge", "segmented-control", "hyperlink", "divider", "tab-bar"]
score: {clean: 100, consistent: 78, accessible: 94, comprehensible: 38}
url: https://gui.farm/android/vesper-wallet
raw: https://gui.farm/android/vesper-wallet/design.guix
download: https://gui.farm/android/vesper-wallet.gui
---

# Vesper — Wallet

Personal banking wallet home with available balance, card, quick actions, and a monthly spending budget breakdown.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Vesper — Wallet">
  <tokens>
    <color name="bg" value="#131019" />
    <color name="surface" value="#1C1826" />
    <color name="surface-2" value="#272233" />
    <color name="line" value="#363048" />
    <color name="ink" value="#F5F3FA" />
    <color name="body" value="#C9C3D6" />
    <color name="muted" value="#A49DB6" />
    <color name="card" value="#5B34D6" />
    <color name="card-chip" value="#6E44E0" />
    <color name="on-card" value="#FFFFFF" />
    <color name="on-card-2" value="#D8CBFF" />
    <color name="accent" value="#7C4DFF" />
    <color name="on-accent" value="#FFFFFF" />
    <color name="accent-text" value="#B9A3FF" />
    <color name="cat-1" value="#7C4DFF" />
    <color name="cat-2" value="#9B78FF" />
    <color name="cat-3" value="#BCA4FF" />
    <color name="cat-4" value="#5B34D6" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="18" />
    <number name="r-xl" value="24" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Display" font-family="Roboto" font-size="34" font-weight="700" line-height="40" letter-spacing="-0.6" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="500" line-height="28" letter-spacing="-0.2" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="BodyLarge" font-family="Roboto" font-size="16" font-weight="400" line-height="24" />
    <text-style name="BodyMedium" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="500" line-height="16" letter-spacing="0.4" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="11" font-weight="500" line-height="16" letter-spacing="0.5" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <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=%23F5F3FA" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23F5F3FA" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23F5F3FA" w="15" h="15" />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="64" p="0 12" gap="12" align="middle-left">
      <row role="avatar" w="40" h="40" radius="$r-full" fill="$accent" align="middle-center">
        <text text-style="LabelLarge" value="JJ" fill="$on-accent" />
      </row>
      <col w="fill" gap="1">
        <text text-style="LabelSmall" value="GOOD EVENING" fill="$muted" />
        <text text-style="TitleMedium" value="Jinson" fill="$ink" />
      </col>
      <row role="button" w="44" h="44" radius="$r-full" fill="$surface" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/notifications-rounded.svg?color=%23C9C3D6" w="22" h="22" />
      </row>
    </row>
    <col w="fill" p="8 16 24 16" gap="20">
      <col role="card" w="328" radius="$r-xl" fill="$card" p="20" gap="24">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="TitleLarge" value="Vesper" fill="$on-card" />
          <img src="https://api.iconify.design/material-symbols/contactless-rounded.svg?color=%23FFFFFF" w="24" h="24" />
        </row>
        <row w="fill" gap="auto" align="bottom-left">
          <col gap="4">
            <text text-style="LabelMedium" value="AVAILABLE BALANCE" fill="$on-card-2" />
            <text text-style="Display" value="$4,820.60" fill="$on-card" />
          </col>
          <row role="badge" h="24" radius="$r-full" fill="$card-chip" p="0 10" align="middle-center">
            <text text-style="LabelSmall" value="DEBIT" fill="$on-card" />
          </row>
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyLarge" value="••••  ••••  ••••  4471" fill="$on-card-2" />
          <img src="https://api.iconify.design/material-symbols/visibility-rounded.svg?color=%23FFFFFF" w="20" h="20" />
        </row>
      </col>
      <row w="328" gap="12" align="top-left">
        <col w="fill" gap="8" align="middle-center">
          <row role="button" w="56" h="56" radius="$r-full" fill="$accent" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%23FFFFFF" w="24" h="24" />
          </row>
          <text text-style="LabelMedium" value="Send" fill="$body" />
        </col>
        <col w="fill" gap="8" align="middle-center">
          <row role="button" w="56" h="56" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23C9C3D6" w="24" h="24" />
          </row>
          <text text-style="LabelMedium" value="Add" fill="$body" />
        </col>
        <col w="fill" gap="8" align="middle-center">
          <row role="button" w="56" h="56" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/swap-horiz-rounded.svg?color=%23C9C3D6" w="24" h="24" />
          </row>
          <text text-style="LabelMedium" value="Move" fill="$body" />
        </col>
        <col w="fill" gap="8" align="middle-center">
          <row role="button" w="56" h="56" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/grid-view-rounded.svg?color=%23C9C3D6" w="22" h="22" />
          </row>
          <text text-style="LabelMedium" value="More" fill="$body" />
        </col>
      </row>
      <row role="segmented-control" w="328" h="44" radius="$r-full" fill="$surface-2" p="3" gap="2" align="middle-center">
        <row w="fill" h="fill" radius="$r-full" fill="$accent" align="middle-center">
          <text text-style="LabelLarge" value="This month" fill="$on-accent" />
        </row>
        <row w="fill" h="fill" radius="$r-full" align="middle-center">
          <text text-style="LabelLarge" value="Last month" fill="$muted" />
        </row>
      </row>
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="14">
        <row w="fill" gap="auto" align="middle-left">
          <col gap="2">
            <text text-style="LabelMedium" value="SPENT THIS MONTH" fill="$muted" />
            <text text-style="TitleLarge" value="$1,240" fill="$ink" />
          </col>
          <col gap="2" align="middle-right">
            <text text-style="LabelMedium" value="BUDGET" fill="$muted" />
            <text text-style="TitleMedium" value="$2,000" fill="$body" />
          </col>
        </row>
        <row w="296" h="14" radius="7" fill="$surface-2" clip="true">
          <rect x="0" y="0" w="76.96" h="14" fill="$cat-1" />
          <rect x="76.96" y="0" w="44.40" h="14" fill="$cat-2" />
          <rect x="121.36" y="0" w="38.48" h="14" fill="$cat-3" />
          <rect x="159.84" y="0" w="23.68" h="14" fill="$cat-4" />
        </row>
        <col w="fill" gap="10">
          <row w="fill" gap="auto" align="middle-left">
            <row gap="8" align="middle-left">
              <rect w="10" h="10" radius="5" fill="$cat-1" />
              <text text-style="BodyMedium" value="Dining" fill="$body" />
            </row>
            <text text-style="LabelLarge" value="$520" fill="$ink" />
          </row>
          <row w="fill" gap="auto" align="middle-left">
            <row gap="8" align="middle-left">
              <rect w="10" h="10" radius="5" fill="$cat-2" />
              <text text-style="BodyMedium" value="Transport" fill="$body" />
            </row>
            <text text-style="LabelLarge" value="$300" fill="$ink" />
          </row>
          <row w="fill" gap="auto" align="middle-left">
            <row gap="8" align="middle-left">
              <rect w="10" h="10" radius="5" fill="$cat-3" />
              <text text-style="BodyMedium" value="Shopping" fill="$body" />
            </row>
            <text text-style="LabelLarge" value="$260" fill="$ink" />
          </row>
          <row w="fill" gap="auto" align="middle-left">
            <row gap="8" align="middle-left">
              <rect w="10" h="10" radius="5" fill="$cat-4" />
              <text text-style="BodyMedium" value="Bills" fill="$body" />
            </row>
            <text text-style="LabelLarge" value="$160" fill="$ink" />
          </row>
        </col>
      </col>
      <row w="328" gap="auto" align="middle-left">
        <text text-style="TitleMedium" value="Recent activity" fill="$ink" />
        <row role="hyperlink" gap="2" align="middle-center">
          <text text-style="LabelLarge" value="See all" fill="$accent-text" />
          <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23B9A3FF" w="18" h="18" />
        </row>
      </row>
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" clip="true">
        <row w="fill" h="64" p="0 16" gap="12" align="middle-left">
          <row w="40" h="40" radius="$r-md" fill="$surface-2" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/local-cafe-rounded.svg?color=%23C9C3D6" w="22" h="22" />
          </row>
          <col w="fill" gap="1">
            <text text-style="TitleMedium" value="Blue Bottle Coffee" fill="$ink" />
            <text text-style="BodyMedium" value="Dining · Today" fill="$muted" />
          </col>
          <text text-style="TitleMedium" value="−$8.60" fill="$ink" />
        </row>
        <line role="divider" w="fill" fill="$line" />
        <row w="fill" h="64" p="0 16" gap="12" align="middle-left">
          <row w="40" h="40" radius="$r-md" fill="$surface-2" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/local-taxi-rounded.svg?color=%23C9C3D6" w="22" h="22" />
          </row>
          <col w="fill" gap="1">
            <text text-style="TitleMedium" value="Lyft" fill="$ink" />
            <text text-style="BodyMedium" value="Transport · Today" fill="$muted" />
          </col>
          <text text-style="TitleMedium" value="−$21.40" fill="$ink" />
        </row>
        <line role="divider" w="fill" fill="$line" />
        <row w="fill" h="64" p="0 16" gap="12" align="middle-left">
          <row w="40" h="40" radius="$r-md" fill="$surface-2" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/replay-rounded.svg?color=%23C9C3D6" w="22" h="22" />
          </row>
          <col w="fill" gap="1">
            <text text-style="TitleMedium" value="Amazon" fill="$ink" />
            <text text-style="BodyMedium" value="Refund · Yesterday" fill="$muted" />
          </col>
          <text text-style="TitleMedium" value="+$34.00" fill="$accent-text" />
        </row>
        <line role="divider" w="fill" fill="$line" />
        <row w="fill" h="64" p="0 16" gap="12" align="middle-left">
          <row w="40" h="40" radius="$r-md" fill="$surface-2" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/movie-rounded.svg?color=%23C9C3D6" w="22" h="22" />
          </row>
          <col w="fill" gap="1">
            <text text-style="TitleMedium" value="Netflix" fill="$ink" />
            <text text-style="BodyMedium" value="Subscriptions · Tue" fill="$muted" />
          </col>
          <text text-style="TitleMedium" value="−$15.99" fill="$ink" />
        </row>
        <line role="divider" w="fill" fill="$line" />
        <row w="fill" h="64" p="0 16" gap="12" align="middle-left">
          <row w="40" h="40" radius="$r-md" fill="$surface-2" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/shopping-bag-rounded.svg?color=%23C9C3D6" w="22" h="22" />
          </row>
          <col w="fill" gap="1">
            <text text-style="TitleMedium" value="Zara" fill="$ink" />
            <text text-style="BodyMedium" value="Shopping · Mon" fill="$muted" />
          </col>
          <text text-style="TitleMedium" value="−$79.00" fill="$ink" />
        </row>
      </col>
    </col>
    <col w="fill" fill="$surface" border="1 0 0 0 $line">
      <row role="tab-bar" w="fill" h="64" p="0 8" align="middle-center">
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/home-rounded.svg?color=%23B9A3FF" w="24" h="24" />
          <text text-style="LabelSmall" value="Home" fill="$accent-text" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/credit-card-rounded.svg?color=%23A49DB6" w="24" h="24" />
          <text text-style="LabelSmall" value="Cards" fill="$muted" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/sync-alt-rounded.svg?color=%23A49DB6" w="24" h="24" />
          <text text-style="LabelSmall" value="Payments" fill="$muted" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/person-rounded.svg?color=%23A49DB6" w="24" h="24" />
          <text text-style="LabelSmall" value="Profile" fill="$muted" />
        </col>
      </row>
      <row w="fill" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$muted" />
      </row>
    </col>
  </col>
</gui>

```