---
title: "Vault — iOS Finance Dashboard"
platform: ios
slug: wealth-personal-finance
screens: ["dashboard"]
domains: ["fintech"]
style: "minimal"
fonts: ["SF Pro"]
roles: ["top-navigation-bar", "button", "avatar", "chip", "card", "badge", "segmented-control", "tab-bar"]
score: {clean: 100, consistent: 68, accessible: 84, comprehensible: 43}
url: https://gui.farm/ios/wealth-personal-finance
raw: https://gui.farm/ios/wealth-personal-finance/design.guix
download: https://gui.farm/ios/wealth-personal-finance.gui
---

# Vault — iOS Finance Dashboard

A modern iOS finance dashboard for tracking net worth, spending, accounts, investments, and recent transactions in one clear, data-focused view.

- **Live preview:** https://gui.farm/ios/wealth-personal-finance
- **Raw source:** https://gui.farm/ios/wealth-personal-finance/design.guix
- **Download (.gui):** https://gui.farm/ios/wealth-personal-finance.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Vault — iOS Finance Dashboard">
  <tokens>
    <color name="bg" value="#0A0F14" />
    <color name="surface" value="#131B23" />
    <color name="surface-2" value="#1A2530" />
    <color name="surface-3" value="#22303C" />
    <color name="text" value="#F5F7F8" />
    <color name="muted" value="#94A3AF" />
    <color name="line" value="#2A3946" />
    <color name="primary" value="#B8F36B" />
    <color name="primary-soft" value="#22351D" />
    <color name="blue" value="#6CB7FF" />
    <color name="blue-soft" value="#172D40" />
    <color name="amber" value="#FFB866" />
    <color name="danger" value="#FF7B7B" />
    <number name="radius-card" value="20" />
    <number name="radius-small" value="12" />
    <number name="radius-pill" value="999" />
  </tokens>

  <styles>
    <text-style name="Title" font-family="SF Pro" font-size="30" font-weight="700" line-height="35" letter-spacing="-0.7" />
    <text-style name="Metric" font-family="SF Pro" font-size="38" font-weight="700" line-height="42" letter-spacing="-1.1" />
    <text-style name="H2" font-family="SF Pro" font-size="20" font-weight="700" line-height="25" letter-spacing="-0.3" />
    <text-style name="Body" font-family="SF Pro" font-size="15" font-weight="400" line-height="21" />
    <text-style name="BodyStrong" font-family="SF Pro" font-size="15" font-weight="600" line-height="21" />
    <text-style name="Caption" font-family="SF Pro" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Tiny" font-family="SF Pro" font-size="10" font-weight="700" line-height="13" letter-spacing="0.7" />
  </styles>

  <fonts>
    <font family="SF Pro" source="system" weights="400 500 600 700" styles="normal" />
  </fonts>

  <col w="390" fill="$bg">
    <!-- iOS status bar -->
    <row w="390" h="54" p="14 20 0 20" align="middle-left">
      <text w="fill" value="9:41" font-family="SF Pro" font-size="14" font-weight="600" line-height="18" color="$text" />
      <row gap="7" align="middle-left">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23F5F7F8" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F5F7F8" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F5F7F8" w="20" h="20" />
      </row>
    </row>

    <!-- App navigation -->
    <row role="top-navigation-bar" w="390" h="58" p="0 20" align="middle-left">
      <col w="fill" gap="1">
        <text value="VAULT" font-family="SF Pro" font-size="18" font-weight="700" line-height="20" color="$text" />
        <text value="PERSONAL WEALTH" text-style="Tiny" color="$muted" />
      </col>
      <row role="button" w="38" h="38" radius="19" fill="$surface" align="middle-center">
        <img src="https://api.iconify.design/lucide/bell.svg?color=%23F5F7F8" w="18" h="18" />
      </row>
      <row role="avatar" w="38" h="38" radius="19" fill="$primary" align="middle-center">
        <text value="AK" font-family="SF Pro" font-size="12" font-weight="700" color="#12200D" />
      </row>
    </row>

    <col w="390" p="12 20 24 20" gap="16">
      <!-- Greeting and account mode -->
      <row w="350" align="bottom-left">
        <col w="fill" gap="4">
          <text value="FRIDAY, 7 AUG" text-style="Tiny" color="$muted" />
          <text value="Good morning, Alex" text-style="Title" color="$text" />
        </col>
        <row role="chip" h="32" p="0 11" radius="$radius-pill" fill="$surface" gap="6" align="middle-left">
          <text value="All accounts" text-style="Caption" color="$text" />
          <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%2394A3AF" w="14" h="14" />
        </row>
      </row>

      <!-- Net worth hero card -->
      <col role="card" w="350" fill="$surface" radius="$radius-card" p="18" gap="16">
        <row w="314" align="middle-left">
          <col w="fill" gap="4">
            <text value="TOTAL NET WORTH" text-style="Tiny" color="$primary" />
            <row gap="8" align="baseline">
              <text value="$84,260" text-style="Metric" color="$text" />
              <text value=".40" text-style="H2" color="$muted" />
            </row>
          </col>
          <row role="badge" h="30" radius="15" fill="$primary-soft" p="0 10" gap="5" align="middle-left">
            <img src="https://api.iconify.design/lucide/trending-up.svg?color=%23B8F36B" w="14" h="14" />
            <text value="8.4%" text-style="Caption" color="$primary" />
          </row>
        </row>

        <!-- Portfolio sparkline -->
        <frame w="314" h="94" clip="true">
          <line x="0" y="76" w="314" fill="$line" />
          <line x="0" y="46" w="314" fill="$line" />
          <line x="0" y="16" w="314" fill="$line" />
          <line x="0" y="73" w="28" rotate="-7" fill="$primary" stroke-width="3" />
          <line x="27" y="69" w="28" rotate="-10" fill="$primary" stroke-width="3" />
          <line x="54" y="64" w="28" rotate="5" fill="$primary" stroke-width="3" />
          <line x="81" y="67" w="28" rotate="-18" fill="$primary" stroke-width="3" />
          <line x="107" y="58" w="28" rotate="-15" fill="$primary" stroke-width="3" />
          <line x="134" y="51" w="28" rotate="8" fill="$primary" stroke-width="3" />
          <line x="161" y="55" w="28" rotate="-24" fill="$primary" stroke-width="3" />
          <line x="186" y="43" w="28" rotate="-12" fill="$primary" stroke-width="3" />
          <line x="213" y="37" w="28" rotate="6" fill="$primary" stroke-width="3" />
          <line x="240" y="40" w="28" rotate="-22" fill="$primary" stroke-width="3" />
          <line x="266" y="29" w="28" rotate="-18" fill="$primary" stroke-width="3" />
          <ellipse x="303" y="19" w="10" h="10" fill="$primary" />
        </frame>

        <row role="segmented-control" w="314" h="34" p="3" fill="$surface-2" radius="10" gap="2">
          <row w="60" h="28" radius="8" align="middle-center"><text value="1D" text-style="Caption" color="$muted" /></row>
          <row w="60" h="28" radius="8" align="middle-center"><text value="1W" text-style="Caption" color="$muted" /></row>
          <row w="60" h="28" radius="8" align="middle-center"><text value="1M" text-style="Caption" color="$muted" /></row>
          <row w="60" h="28" radius="8" fill="$surface-3" align="middle-center"><text value="1Y" text-style="Caption" color="$text" /></row>
          <row w="60" h="28" radius="8" align="middle-center"><text value="ALL" text-style="Caption" color="$muted" /></row>
        </row>
      </col>

      <!-- Quick actions -->
      <row w="350" gap="10">
        <col role="button" w="80" h="78" radius="$radius-small" fill="$surface" gap="8" align="middle-center">
          <row w="32" h="32" radius="16" fill="$primary-soft" align="middle-center"><img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%23B8F36B" w="17" h="17" /></row>
          <text value="Send" text-style="Caption" color="$text" />
        </col>
        <col role="button" w="80" h="78" radius="$radius-small" fill="$surface" gap="8" align="middle-center">
          <row w="32" h="32" radius="16" fill="$blue-soft" align="middle-center"><img src="https://api.iconify.design/lucide/arrow-down-left.svg?color=%236CB7FF" w="17" h="17" /></row>
          <text value="Add cash" text-style="Caption" color="$text" />
        </col>
        <col role="button" w="80" h="78" radius="$radius-small" fill="$surface" gap="8" align="middle-center">
          <row w="32" h="32" radius="16" fill="$surface-3" align="middle-center"><img src="https://api.iconify.design/lucide/repeat-2.svg?color=%23F5F7F8" w="17" h="17" /></row>
          <text value="Exchange" text-style="Caption" color="$text" />
        </col>
        <col role="button" w="80" h="78" radius="$radius-small" fill="$surface" gap="8" align="middle-center">
          <row w="32" h="32" radius="16" fill="$surface-3" align="middle-center"><img src="https://api.iconify.design/lucide/scan-line.svg?color=%23F5F7F8" w="17" h="17" /></row>
          <text value="Scan" text-style="Caption" color="$text" />
        </col>
      </row>

      <!-- Spending overview -->
      <col role="card" w="350" fill="$surface" radius="$radius-card" p="16" gap="16">
        <row w="318" align="middle-left">
          <col w="fill" gap="3">
            <text value="AUGUST SPENDING" text-style="Tiny" color="$blue" />
            <text value="$3,420 of $5,000" text-style="H2" color="$text" />
          </col>
          <text value="68%" text-style="BodyStrong" color="$muted" />
        </row>
        <frame w="318" h="10">
          <rect x="0" y="0" w="318" h="10" radius="5" fill="$surface-3" />
          <rect x="0" y="0" w="216" h="10" radius="5" fill="$blue" />
        </frame>
        <row w="318" gap="10">
          <col w="fill" p="12" radius="$radius-small" fill="$surface-2" gap="7">
            <row align="middle-left" gap="7"><ellipse w="8" h="8" fill="$amber" /><text value="Housing" text-style="Caption" color="$muted" /></row>
            <text value="$1,480" text-style="BodyStrong" color="$text" />
          </col>
          <col w="fill" p="12" radius="$radius-small" fill="$surface-2" gap="7">
            <row align="middle-left" gap="7"><ellipse w="8" h="8" fill="$blue" /><text value="Lifestyle" text-style="Caption" color="$muted" /></row>
            <text value="$1,120" text-style="BodyStrong" color="$text" />
          </col>
          <col w="fill" p="12" radius="$radius-small" fill="$surface-2" gap="7">
            <row align="middle-left" gap="7"><ellipse w="8" h="8" fill="$primary" /><text value="Other" text-style="Caption" color="$muted" /></row>
            <text value="$820" text-style="BodyStrong" color="$text" />
          </col>
        </row>
      </col>

      <!-- Accounts -->
      <col role="card" w="350" fill="$surface" radius="$radius-card" p="16" gap="14">
        <row w="318" align="middle-left">
          <text w="fill" value="Accounts" text-style="H2" color="$text" />
          <text value="See all" text-style="Caption" color="$primary" />
        </row>
        <row w="318" h="48" align="middle-left" gap="12">
          <row w="40" h="40" radius="12" fill="$primary-soft" align="middle-center"><img src="https://api.iconify.design/lucide/landmark.svg?color=%23B8F36B" w="20" h="20" /></row>
          <col w="fill" gap="2"><text value="Everyday account" text-style="BodyStrong" color="$text" /><text value="•• 4821" text-style="Caption" color="$muted" /></col>
          <text value="$12,640.20" text-style="BodyStrong" color="$text" />
        </row>
        <line w="318" fill="$line" />
        <row w="318" h="48" align="middle-left" gap="12">
          <row w="40" h="40" radius="12" fill="$blue-soft" align="middle-center"><img src="https://api.iconify.design/lucide/chart-no-axes-combined.svg?color=%236CB7FF" w="20" h="20" /></row>
          <col w="fill" gap="2"><text value="Investments" text-style="BodyStrong" color="$text" /><text value="4 holdings" text-style="Caption" color="$muted" /></col>
          <col align="middle-right" gap="2"><text value="$64,920.10" text-style="BodyStrong" color="$text" /><text value="+$420.80 today" text-style="Caption" color="$primary" /></col>
        </row>
        <line w="318" fill="$line" />
        <row w="318" h="48" align="middle-left" gap="12">
          <row w="40" h="40" radius="12" fill="$surface-3" align="middle-center"><img src="https://api.iconify.design/lucide/credit-card.svg?color=%23F5F7F8" w="20" h="20" /></row>
          <col w="fill" gap="2"><text value="Platinum card" text-style="BodyStrong" color="$text" /><text value="Due 18 Aug" text-style="Caption" color="$muted" /></col>
          <text value="−$3,299.90" text-style="BodyStrong" color="$danger" />
        </row>
      </col>

      <!-- Recent activity -->
      <col role="card" w="350" fill="$surface" radius="$radius-card" p="16" gap="14">
        <row w="318" align="middle-left">
          <text w="fill" value="Recent activity" text-style="H2" color="$text" />
          <img src="https://api.iconify.design/lucide/search.svg?color=%2394A3AF" w="18" h="18" />
        </row>
        <row w="318" h="48" align="middle-left" gap="12">
          <row w="40" h="40" radius="12" fill="$surface-2" align="middle-center"><text value="☕" font-size="18" /></row>
          <col w="fill" gap="2"><text value="Seven Fortunes" text-style="BodyStrong" color="$text" /><text value="Today · Dining" text-style="Caption" color="$muted" /></col>
          <text value="−$24.50" text-style="BodyStrong" color="$text" />
        </row>
        <row w="318" h="48" align="middle-left" gap="12">
          <row w="40" h="40" radius="12" fill="$surface-2" align="middle-center"><img src="https://api.iconify.design/lucide/building-2.svg?color=%236CB7FF" w="19" h="19" /></row>
          <col w="fill" gap="2"><text value="Salary" text-style="BodyStrong" color="$text" /><text value="Yesterday · Income" text-style="Caption" color="$muted" /></col>
          <text value="+$8,200.00" text-style="BodyStrong" color="$primary" />
        </row>
        <row w="318" h="48" align="middle-left" gap="12">
          <row w="40" h="40" radius="12" fill="$surface-2" align="middle-center"><img src="https://api.iconify.design/lucide/shopping-bag.svg?color=%23FFB866" w="19" h="19" /></row>
          <col w="fill" gap="2"><text value="Apple Store" text-style="BodyStrong" color="$text" /><text value="5 Aug · Shopping" text-style="Caption" color="$muted" /></col>
          <text value="−$199.00" text-style="BodyStrong" color="$text" />
        </row>
      </col>
    </col>

    <!-- Bottom navigation -->
    <col w="390" fill="$surface" border-top="1 $line">
      <row role="tab-bar" w="390" h="54" align="middle-left">
        <col w="78" h="52" gap="3" align="middle-center"><img src="https://api.iconify.design/lucide/layout-dashboard.svg?color=%23B8F36B" w="22" h="22" /><text value="Home" font-family="SF Pro" font-size="10" font-weight="700" color="$primary" /></col>
        <col w="78" h="52" gap="3" align="middle-center"><img src="https://api.iconify.design/lucide/arrow-left-right.svg?color=%2394A3AF" w="22" h="22" /><text value="Move" font-family="SF Pro" font-size="10" font-weight="500" color="$muted" /></col>
        <col w="78" h="52" gap="3" align="middle-center"><img src="https://api.iconify.design/lucide/chart-pie.svg?color=%2394A3AF" w="22" h="22" /><text value="Insights" font-family="SF Pro" font-size="10" font-weight="500" color="$muted" /></col>
        <col w="78" h="52" gap="3" align="middle-center"><img src="https://api.iconify.design/lucide/wallet-cards.svg?color=%2394A3AF" w="22" h="22" /><text value="Cards" font-family="SF Pro" font-size="10" font-weight="500" color="$muted" /></col>
        <col w="78" h="52" gap="3" align="middle-center"><img src="https://api.iconify.design/lucide/user-round.svg?color=%2394A3AF" w="22" h="22" /><text value="Profile" font-family="SF Pro" font-size="10" font-weight="500" color="$muted" /></col>
      </row>
      <frame w="390" h="34" clip="true"><rect fill="$text" w="140" h="5" radius="3" x="125" y="15" /></frame>
    </col>
  </col>
</gui>

```