---
title: "Ledgerline — August Budget"
platform: android
slug: ledgerline-august-budget
screens: []
domains: ["fintech"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "badge", "card", "banner", "hyperlink"]
score: {clean: 100, consistent: 82, accessible: 91, comprehensible: 37}
url: https://gui.farm/android/ledgerline-august-budget
raw: https://gui.farm/android/ledgerline-august-budget/design.guix
download: https://gui.farm/android/ledgerline-august-budget.gui
---

# Ledgerline — August Budget

A dark-theme Material Android monthly budget screen where a freelancer reviews August spending as category envelopes, each showing spent-of-allocated, a progress bar, and remaining, with one category flagged over budget.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Ledgerline — August Budget">
  <tokens>
    <color name="bg" value="#0E1218" />
    <color name="surface" value="#161C25" />
    <color name="surface-2" value="#212A36" />
    <color name="line" value="#2B3542" />
    <color name="ink" value="#F2F6FB" />
    <color name="body" value="#C4CEDC" />
    <color name="muted" value="#93A0B2" />
    <color name="accent" value="#4C8DFF" />
    <color name="accent-text" value="#9CC1FF" />
    <color name="accent-tint" value="#17263F" />
    <color name="on-accent" value="#07101D" />
    <color name="track" value="#232C38" />
    <color name="danger" value="#FF6B5E" />
    <color name="danger-text" value="#FF9C91" />
    <color name="danger-tint" value="#2C1B1C" />
    <color name="h1" value="#2F6BE0" />
    <color name="h2" value="#4C8DFF" />
    <color name="h3" value="#6EA6FF" />
    <color name="h4" value="#8FBEFF" />
    <color name="h5" value="#B2D2FF" />
    <color name="h6" value="#D3E4FF" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="18" />
    <number name="r-xl" value="26" />
    <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="40" font-weight="700" line-height="46" letter-spacing="-1.0" />
    <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="22" />
    <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="13" font-weight="400" line-height="18" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="15" font-weight="600" line-height="20" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="600" line-height="16" letter-spacing="0.4" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="11" font-weight="500" line-height="15" letter-spacing="0.3" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 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=%23F2F6FB" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23F2F6FB" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23F2F6FB" w="15" h="15" />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="64" p="0 4" gap="4" align="middle-left">
      <row role="button" w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23F2F6FB" w="24" h="24" />
      </row>
      <text w="fill" text-style="TitleLarge" value="Budget" fill="$ink" />
      <row role="button" w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/tune-rounded.svg?color=%23C4CEDC" w="23" h="23" />
      </row>
    </row>
    <col w="fill" p="6 16 24 16" gap="18">
      <row w="fill" gap="auto" align="middle-left">
        <row gap="6" align="middle-left">
          <row role="button" w="34" h="34" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/chevron-left-rounded.svg?color=%23C4CEDC" w="20" h="20" />
          </row>
          <text w="132" text-style="TitleMedium" value="August 2026" fill="$ink" align="center" />
          <row role="button" w="34" h="34" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23C4CEDC" w="20" h="20" />
          </row>
        </row>
        <row role="badge" h="26" radius="$r-full" fill="$surface-2" p="0 11" align="middle-center">
          <text text-style="LabelMedium" value="14 DAYS LEFT" fill="$body" />
        </row>
      </row>
      <col role="card" w="328" radius="$r-xl" fill="$surface" border="1 $line" p="20" gap="16">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="LabelMedium" value="LEFT TO SPEND" fill="$muted" />
          <row role="badge" h="26" radius="$r-full" fill="$accent-tint" p="0 11" gap="5" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%239CC1FF" w="14" h="14" />
            <text text-style="LabelMedium" value="ON TRACK" fill="$accent-text" />
          </row>
        </row>
        <col gap="4">
          <text text-style="Display" value="$426.45" fill="$ink" />
          <text text-style="BodyLarge" value="of $2,825.00 monthly budget" fill="$body" />
        </col>
        <row w="288" h="12" radius="$r-full" fill="$track" clip="true">
          <rect x="0" y="0" w="168.21" h="12" fill="$h1" />
          <rect x="168.21" y="0" w="31.73" h="12" fill="$h2" />
          <rect x="199.95" y="0" w="25.77" h="12" fill="$h3" />
          <rect x="225.72" y="0" w="8.51" h="12" fill="$h4" />
          <rect x="234.23" y="0" w="6.42" h="12" fill="$h5" />
          <rect x="240.65" y="0" w="3.87" h="12" fill="$h6" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="LabelMedium" value="$2,398.55 SPENT" fill="$body" />
          <text text-style="LabelMedium" value="84.9% USED" fill="$muted" />
        </row>
      </col>
      <row role="banner" w="328" radius="$r-lg" fill="$danger-tint" border="1 $line" p="14" gap="12" align="middle-left">
        <row w="40" h="40" radius="$r-full" fill="$surface" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/warning-rounded.svg?color=%23FF9C91" w="22" h="22" />
        </row>
        <col w="fill" gap="2">
          <text text-style="TitleMedium" value="Dining &amp; Coffee is over budget" fill="$ink" />
          <text text-style="BodyMedium" value="$12.80 above the $240.00 envelope this month." fill="$body" />
        </col>
      </row>
      <row w="fill" gap="auto" align="middle-left">
        <text text-style="TitleMedium" value="Envelopes" fill="$ink" />
        <row role="hyperlink" gap="2" align="middle-center">
          <text text-style="LabelLarge" value="Manage" fill="$accent-text" />
          <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%239CC1FF" w="18" h="18" />
        </row>
      </row>
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="12">
        <row w="fill" 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/home-rounded.svg?color=%23C4CEDC" w="22" h="22" />
          </row>
          <col w="fill" gap="2">
            <text text-style="TitleMedium" value="Rent &amp; Utilities" fill="$ink" />
            <text text-style="BodyMedium" value="$1,650.00 of $1,650.00 · 100%" fill="$muted" />
          </col>
          <col gap="1" align="middle-right">
            <text text-style="LabelLarge" value="$0.00" fill="$ink" />
            <text text-style="LabelSmall" value="LEFT" fill="$muted" />
          </col>
        </row>
        <row w="296" h="8" radius="$r-full" fill="$track" clip="true">
          <rect x="0" y="0" w="296" h="8" fill="$accent" />
        </row>
      </col>
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="12">
        <row w="fill" 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-cart-rounded.svg?color=%23C4CEDC" w="22" h="22" />
          </row>
          <col w="fill" gap="2">
            <text text-style="TitleMedium" value="Groceries" fill="$ink" />
            <text text-style="BodyMedium" value="$311.28 of $520.00 · 59.9%" fill="$muted" />
          </col>
          <col gap="1" align="middle-right">
            <text text-style="LabelLarge" value="$208.72" fill="$ink" />
            <text text-style="LabelSmall" value="LEFT" fill="$muted" />
          </col>
        </row>
        <row w="296" h="8" radius="$r-full" fill="$track" clip="true">
          <rect x="0" y="0" w="177.19" h="8" fill="$accent" />
        </row>
      </col>
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="12">
        <row w="fill" 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/restaurant-rounded.svg?color=%23C4CEDC" w="22" h="22" />
          </row>
          <col w="fill" gap="2">
            <text text-style="TitleMedium" value="Dining &amp; Coffee" fill="$ink" />
            <text text-style="BodyMedium" value="$252.80 of $240.00 · 105%" fill="$danger-text" />
          </col>
          <col gap="1" align="middle-right">
            <text text-style="LabelLarge" value="-$12.80" fill="$danger-text" />
            <text text-style="LabelSmall" value="OVER" fill="$danger-text" />
          </col>
        </row>
        <row w="296" h="8" radius="$r-full" fill="$track" clip="true">
          <rect x="0" y="0" w="296" h="8" fill="$danger" />
        </row>
      </col>
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="12">
        <row w="fill" 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/directions-car-rounded.svg?color=%23C4CEDC" w="22" h="22" />
          </row>
          <col w="fill" gap="2">
            <text text-style="TitleMedium" value="Transport" fill="$ink" />
            <text text-style="BodyMedium" value="$83.50 of $180.00 · 46.4%" fill="$muted" />
          </col>
          <col gap="1" align="middle-right">
            <text text-style="LabelLarge" value="$96.50" fill="$ink" />
            <text text-style="LabelSmall" value="LEFT" fill="$muted" />
          </col>
        </row>
        <row w="296" h="8" radius="$r-full" fill="$track" clip="true">
          <rect x="0" y="0" w="137.31" h="8" fill="$accent" />
        </row>
      </col>
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="12">
        <row w="fill" 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/autorenew-rounded.svg?color=%23C4CEDC" w="22" h="22" />
          </row>
          <col w="fill" gap="2">
            <text text-style="TitleMedium" value="Subscriptions" fill="$ink" />
            <text text-style="BodyMedium" value="$62.97 of $95.00 · 66.3%" fill="$muted" />
          </col>
          <col gap="1" align="middle-right">
            <text text-style="LabelLarge" value="$32.03" fill="$ink" />
            <text text-style="LabelSmall" value="LEFT" fill="$muted" />
          </col>
        </row>
        <row w="296" h="8" radius="$r-full" fill="$track" clip="true">
          <rect x="0" y="0" w="196.20" h="8" fill="$accent" />
        </row>
      </col>
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="12">
        <row w="fill" 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/fitness-center-rounded.svg?color=%23C4CEDC" w="22" h="22" />
          </row>
          <col w="fill" gap="2">
            <text text-style="TitleMedium" value="Health &amp; Fitness" fill="$ink" />
            <text text-style="BodyMedium" value="$38.00 of $140.00 · 27.1%" fill="$muted" />
          </col>
          <col gap="1" align="middle-right">
            <text text-style="LabelLarge" value="$102.00" fill="$ink" />
            <text text-style="LabelSmall" value="LEFT" fill="$muted" />
          </col>
        </row>
        <row w="296" h="8" radius="$r-full" fill="$track" clip="true">
          <rect x="0" y="0" w="80.34" h="8" fill="$accent" />
        </row>
      </col>
    </col>
    <col w="fill" fill="$surface" border="1 0 0 0 $line">
      <row w="fill" h="76" p="0 16" gap="12" align="middle-left">
        <col w="fill" gap="1">
          <text text-style="LabelSmall" value="RESETS SEP 1" fill="$muted" />
          <text text-style="TitleMedium" value="$426.45 to spend" fill="$ink" />
        </col>
        <row role="button" h="52" radius="$r-full" fill="$accent" p="0 22" gap="8" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%2307101D" w="20" h="20" />
          <text text-style="LabelLarge" value="Add expense" fill="$on-accent" />
        </row>
      </row>
      <row w="fill" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$muted" />
      </row>
    </col>
  </col>
</gui>

```