---
title: "Ledgerline — August Envelopes"
platform: ios
slug: ledgerline-august-envelopes
screens: []
domains: ["fintech"]
style: "glassmorphism"
fonts: ["SF Pro Display", "JetBrains Mono"]
roles: ["top-navigation-bar", "button", "card", "badge", "divider", "segmented-control", "floating-action-button", "tab-bar"]
score: {clean: 100, consistent: 81, accessible: 33, comprehensible: 33}
url: https://gui.farm/ios/ledgerline-august-envelopes
raw: https://gui.farm/ios/ledgerline-august-envelopes/design.guix
download: https://gui.farm/ios/ledgerline-august-envelopes.gui
---

# Ledgerline — August Envelopes

An iOS envelope-budgeting screen showing safe-to-spend, overall spent-vs-budgeted, and seven spending categories each with a spent/allocated progress bar and one over-budget category.

- **Live preview:** https://gui.farm/ios/ledgerline-august-envelopes
- **Raw source:** https://gui.farm/ios/ledgerline-august-envelopes/design.guix
- **Download (.gui):** https://gui.farm/ios/ledgerline-august-envelopes.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Ledgerline — August Envelopes">
  <tokens>
    <color name="text" value="#F5F8FB" />
    <color name="text-2" value="#C4CDD8" />
    <color name="text-3" value="#95A0AE" />
    <color name="glass" value="#FFFFFF10" />
    <color name="glass-line" value="#FFFFFF2E" />
    <color name="glass-line-soft" value="#FFFFFF17" />
    <color name="track" value="#FFFFFF1F" />
    <color name="bar" value="#0E1219" />
    <color name="cyan" value="#35D0EA" />
    <color name="cyan-t" value="#8AE6F4" />
    <color name="cyan-dim" value="#35D0EA26" />
    <color name="ink" value="#05222A" />
    <color name="red" value="#FF6B70" />
    <color name="red-t" value="#FFA9AD" />
    <color name="red-dim" value="#FF6B7026" />
    <number name="r-pill" value="999" />
    <number name="r-card" value="22" />
    <number name="r-sm" value="12" />
  </tokens>

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

  <styles>
    <text-style name="Clock" font-family="SF Pro Display" font-size="14" font-weight="600" line-height="18" />
    <text-style name="Kicker" font-family="SF Pro Display" font-size="11" font-weight="700" line-height="14" letter-spacing="1.4" />
    <text-style name="H1" font-family="SF Pro Display" font-size="24" font-weight="700" line-height="28" letter-spacing="-0.3" />
    <text-style name="BigAmt" font-family="JetBrains Mono" font-size="32" font-weight="700" line-height="36" letter-spacing="-1" />
    <text-style name="Sub" font-family="SF Pro Display" font-size="13" font-weight="500" line-height="17" />
    <text-style name="Tiny" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="13" letter-spacing="0.6" />
    <text-style name="StatLabel" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="13" letter-spacing="0.8" />
    <text-style name="StatNum" font-family="JetBrains Mono" font-size="15" font-weight="700" line-height="19" letter-spacing="-0.3" />
    <text-style name="Seg" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="16" />
    <text-style name="ChipTxt" font-family="SF Pro Display" font-size="11" font-weight="700" line-height="14" letter-spacing="0.3" />
    <text-style name="EnvName" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="19" />
    <text-style name="EnvMeta" font-family="JetBrains Mono" font-size="11" font-weight="500" line-height="15" />
    <text-style name="EnvRight" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="16" />
    <text-style name="Foot" font-family="SF Pro Display" font-size="11" font-weight="500" line-height="14" />
    <text-style name="TabLabel" font-family="SF Pro Display" font-size="10" font-weight="600" line-height="12" />
  </styles>

  <col w="393" fill="linear-gradient(180deg, #0C0F14 0%, #0A0C11 55%, #08090C 100%)">

    <!-- status bar (device chrome, untagged) -->
    <row w="fill" h="24" p="0 22" gap="auto" align="middle-center">
      <text text-style="Clock" value="9:41" color="$text" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal-high.svg?color=%23F5F8FB" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F5F8FB" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F5F8FB" w="20" h="20" />
      </row>
    </row>

    <!-- top navigation -->
    <row role="top-navigation-bar" w="fill" h="60" p="0 16" gap="auto" align="middle-center">
      <col gap="3">
        <text text-style="Kicker" value="AUGUST 2026" color="$cyan" />
        <text text-style="H1" value="Budget" color="$text" />
      </col>
      <row gap="10" align="middle-center">
        <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
          <img src="https://api.iconify.design/lucide/sliders-horizontal.svg?color=%23F5F8FB" w="18" h="18" />
        </row>
        <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
          <img src="https://api.iconify.design/lucide/user-round.svg?color=%23F5F8FB" w="18" h="18" />
        </row>
      </row>
    </row>

    <col w="fill" p="4 16 24 16" gap="14">

      <!-- ───────── Hero: safe to spend ───────── -->
      <col role="card" w="fill" radius="$r-card" p="18" gap="14" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="32" />
        </appearance>

        <row w="fill" gap="auto" align="top-left">
          <col gap="5">
            <text text-style="Kicker" value="SAFE TO SPEND" color="$cyan" />
            <text text-style="BigAmt" value="$578.38" color="$text" />
            <text text-style="Sub" value="of $4,200.00 budgeted · 14 days left" color="$text-2" />
          </col>
          <col gap="6" align="top-right">
            <row role="badge" h="26" radius="$r-pill" fill="$red-dim" border="1 $red" p="0 10" gap="5" align="middle-center">
              <img src="https://api.iconify.design/lucide/triangle-alert.svg?color=%23FFA9AD" w="13" h="13" />
              <text text-style="ChipTxt" value="1 over" color="$red-t" />
            </row>
            <text text-style="Tiny" value="86% USED" color="$text-3" align="right" />
          </col>
        </row>

        <!-- overall spent bar: 3621.62 / 4200 = 86.23% -> 280 of 325 (hero inner width) -->
        <frame w="fill" h="12">
          <rect x="0" y="0" w="fill" h="12" radius="6" fill="$track" />
          <rect x="0" y="0" w="280" h="12" radius="6" fill="$cyan" />
        </frame>

        <row w="fill" gap="auto" align="middle-center">
          <col gap="3">
            <text text-style="StatLabel" value="BUDGETED" color="$text-3" />
            <text text-style="StatNum" value="$4,200.00" color="$text" />
          </col>
          <rect role="divider" w="1" h="30" fill="$glass-line-soft" />
          <col gap="3" align="top-center">
            <text text-style="StatLabel" value="SPENT" color="$text-3" />
            <text text-style="StatNum" value="$3,621.62" color="$cyan" />
          </col>
          <rect role="divider" w="1" h="30" fill="$glass-line-soft" />
          <col gap="3" align="top-right">
            <text text-style="StatLabel" value="REMAINING" color="$text-3" />
            <text text-style="StatNum" value="$578.38" color="$text" align="right" />
          </col>
        </row>
      </col>

      <!-- ───────── Segmented control ───────── -->
      <row role="segmented-control" w="fill" h="40" radius="$r-pill" fill="$glass" border="1 $glass-line" p="4" gap="2" align="middle-center">
        <row w="fill" h="fill" radius="$r-pill" fill="$cyan" align="middle-center">
          <text text-style="Seg" value="This Month" color="$ink" />
        </row>
        <row w="fill" h="fill" radius="$r-pill" align="middle-center">
          <text text-style="Seg" value="Categories" color="$text-2" />
        </row>
        <row w="fill" h="fill" radius="$r-pill" align="middle-center">
          <text text-style="Seg" value="Trends" color="$text-2" />
        </row>
      </row>

      <!-- ───────── Envelope list ───────── -->
      <col w="fill" gap="9">
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="StatLabel" value="ENVELOPES" color="$text-3" />
          <text text-style="StatLabel" value="7 CATEGORIES" color="$text-3" />
        </row>

        <col role="card" w="fill" radius="$r-card" p="4 16" gap="0" clip="true">
          <appearance>
            <fill type="color" value="$glass" />
            <border color="$glass-line" w="1" />
            <effect type="background-blur" radius="28" />
          </appearance>

          <!-- Rent & Utilities: 1850.00/1850.00 = 100% -> 329 (funded) -->
          <col w="fill" p="14 0" gap="9">
            <row w="fill" gap="12" align="middle-center">
              <row w="36" h="36" radius="$r-sm" fill="$cyan-dim" align="middle-center">
                <img src="https://api.iconify.design/lucide/house.svg?color=%2335D0EA" w="18" h="18" />
              </row>
              <col w="fill" gap="2">
                <text text-style="EnvName" value="Rent &amp; Utilities" color="$text" />
                <text text-style="EnvMeta" value="$1,850.00 of $1,850.00" color="$text-3" />
              </col>
              <text text-style="EnvRight" value="Paid" color="$cyan-t" align="right" />
            </row>
            <frame w="fill" h="6">
              <rect x="0" y="0" w="fill" h="6" radius="3" fill="$track" />
              <rect x="0" y="0" w="329" h="6" radius="3" fill="$cyan" />
            </frame>
          </col>
          <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />

          <!-- Groceries: 412.60/650.00 = 63.5% -> 209 -->
          <col w="fill" p="14 0" gap="9">
            <row w="fill" gap="12" align="middle-center">
              <row w="36" h="36" radius="$r-sm" fill="$cyan-dim" align="middle-center">
                <img src="https://api.iconify.design/lucide/shopping-basket.svg?color=%2335D0EA" w="18" h="18" />
              </row>
              <col w="fill" gap="2">
                <text text-style="EnvName" value="Groceries" color="$text" />
                <text text-style="EnvMeta" value="$412.60 of $650.00" color="$text-3" />
              </col>
              <text text-style="EnvRight" value="$237.40 left" color="$text-2" align="right" />
            </row>
            <frame w="fill" h="6">
              <rect x="0" y="0" w="fill" h="6" radius="3" fill="$track" />
              <rect x="0" y="0" w="209" h="6" radius="3" fill="$cyan" />
            </frame>
          </col>
          <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />

          <!-- Dining & Coffee: 238.90/200.00 = 119.5% OVER -> capped 329 red -->
          <col w="fill" p="14 0" gap="9">
            <row w="fill" gap="12" align="middle-center">
              <row w="36" h="36" radius="$r-sm" fill="$red-dim" align="middle-center">
                <img src="https://api.iconify.design/lucide/utensils.svg?color=%23FF6B70" w="18" h="18" />
              </row>
              <col w="fill" gap="2">
                <text text-style="EnvName" value="Dining &amp; Coffee" color="$text" />
                <text text-style="EnvMeta" value="$238.90 of $200.00" color="$text-3" />
              </col>
              <text text-style="EnvRight" value="$38.90 over" color="$red-t" align="right" />
            </row>
            <frame w="fill" h="6">
              <rect x="0" y="0" w="fill" h="6" radius="3" fill="$track" />
              <rect x="0" y="0" w="329" h="6" radius="3" fill="$red" />
            </frame>
          </col>
          <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />

          <!-- Transport: 86.40/150.00 = 57.6% -> 190 -->
          <col w="fill" p="14 0" gap="9">
            <row w="fill" gap="12" align="middle-center">
              <row w="36" h="36" radius="$r-sm" fill="$cyan-dim" align="middle-center">
                <img src="https://api.iconify.design/lucide/bus.svg?color=%2335D0EA" w="18" h="18" />
              </row>
              <col w="fill" gap="2">
                <text text-style="EnvName" value="Transport" color="$text" />
                <text text-style="EnvMeta" value="$86.40 of $150.00" color="$text-3" />
              </col>
              <text text-style="EnvRight" value="$63.60 left" color="$text-2" align="right" />
            </row>
            <frame w="fill" h="6">
              <rect x="0" y="0" w="fill" h="6" radius="3" fill="$track" />
              <rect x="0" y="0" w="190" h="6" radius="3" fill="$cyan" />
            </frame>
          </col>
          <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />

          <!-- Subscriptions: 64.97/80.00 = 81.2% -> 267 -->
          <col w="fill" p="14 0" gap="9">
            <row w="fill" gap="12" align="middle-center">
              <row w="36" h="36" radius="$r-sm" fill="$cyan-dim" align="middle-center">
                <img src="https://api.iconify.design/lucide/repeat.svg?color=%2335D0EA" w="18" h="18" />
              </row>
              <col w="fill" gap="2">
                <text text-style="EnvName" value="Subscriptions" color="$text" />
                <text text-style="EnvMeta" value="$64.97 of $80.00" color="$text-3" />
              </col>
              <text text-style="EnvRight" value="$15.03 left" color="$text-2" align="right" />
            </row>
            <frame w="fill" h="6">
              <rect x="0" y="0" w="fill" h="6" radius="3" fill="$track" />
              <rect x="0" y="0" w="267" h="6" radius="3" fill="$cyan" />
            </frame>
          </col>
          <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />

          <!-- Shopping & Gifts: 118.75/420.00 = 28.3% -> 93 -->
          <col w="fill" p="14 0" gap="9">
            <row w="fill" gap="12" align="middle-center">
              <row w="36" h="36" radius="$r-sm" fill="$cyan-dim" align="middle-center">
                <img src="https://api.iconify.design/lucide/gift.svg?color=%2335D0EA" w="18" h="18" />
              </row>
              <col w="fill" gap="2">
                <text text-style="EnvName" value="Shopping &amp; Gifts" color="$text" />
                <text text-style="EnvMeta" value="$118.75 of $420.00" color="$text-3" />
              </col>
              <text text-style="EnvRight" value="$301.25 left" color="$text-2" align="right" />
            </row>
            <frame w="fill" h="6">
              <rect x="0" y="0" w="fill" h="6" radius="3" fill="$track" />
              <rect x="0" y="0" w="93" h="6" radius="3" fill="$cyan" />
            </frame>
          </col>
          <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />

          <!-- Savings Transfer: 850.00/850.00 = 100% -> 329 (funded) -->
          <col w="fill" p="14 0" gap="9">
            <row w="fill" gap="12" align="middle-center">
              <row w="36" h="36" radius="$r-sm" fill="$cyan-dim" align="middle-center">
                <img src="https://api.iconify.design/lucide/piggy-bank.svg?color=%2335D0EA" w="18" h="18" />
              </row>
              <col w="fill" gap="2">
                <text text-style="EnvName" value="Savings Transfer" color="$text" />
                <text text-style="EnvMeta" value="$850.00 of $850.00" color="$text-3" />
              </col>
              <text text-style="EnvRight" value="Funded" color="$cyan-t" align="right" />
            </row>
            <frame w="fill" h="6">
              <rect x="0" y="0" w="fill" h="6" radius="3" fill="$track" />
              <rect x="0" y="0" w="329" h="6" radius="3" fill="$cyan" />
            </frame>
          </col>
        </col>

        <row w="fill" p="2 0 0 0" gap="6" align="middle-center">
          <img src="https://api.iconify.design/lucide/rotate-cw.svg?color=%2395A0AE" w="13" h="13" />
          <text text-style="Foot" value="Envelopes reset Sep 1 · unspent rolls over" color="$text-3" />
        </row>
      </col>
    </col>

    <!-- floating action button -->
    <frame w="393" h="78">
      <row role="floating-action-button" x="305" y="8" w="56" h="56" radius="$r-pill" fill="$cyan" align="middle-center">
        <appearance>
          <fill type="color" value="$cyan" />
          <effect type="drop-shadow" x="0" y="8" radius="20" spread="0" color="#35D0EA55" />
        </appearance>
        <img src="https://api.iconify.design/lucide/plus.svg?color=%2305222A" w="26" h="26" />
      </row>
    </frame>

    <!-- tab bar (last flow child) -->
    <row role="tab-bar" w="393" h="64" p="0 8" gap="0" fill="$bar" border="1 0 0 0 $glass-line-soft" align="middle-center">
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/wallet.svg?color=%2395A0AE" w="23" h="23" />
        <text text-style="TabLabel" value="Accounts" color="$text-3" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/chart-pie.svg?color=%2335D0EA" w="23" h="23" />
        <text text-style="TabLabel" value="Budget" color="$cyan" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/receipt.svg?color=%2395A0AE" w="23" h="23" />
        <text text-style="TabLabel" value="Activity" color="$text-3" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/settings.svg?color=%2395A0AE" w="23" h="23" />
        <text text-style="TabLabel" value="Settings" color="$text-3" />
      </col>
    </row>

    <!-- home indicator (device chrome, untagged) -->
    <frame w="393" h="22">
      <rect x="129" y="8" w="134" h="5" radius="3" fill="#FFFFFFCC" />
    </frame>

  </col>
</gui>
```