---
title: "Halloran Studio Invoice INV-0042"
platform: ios
slug: halloran-studio-invoice-inv-0042
screens: ["invoice"]
domains: ["fintech"]
style: "brutalist"
fonts: ["JetBrains Mono", "SF Pro Display"]
roles: ["top-navigation-bar", "button", "card", "badge", "divider", "table", "toolbar"]
score: {clean: 100, consistent: 82, accessible: 91, comprehensible: 56}
url: https://gui.farm/ios/halloran-studio-invoice-inv-0042
raw: https://gui.farm/ios/halloran-studio-invoice-inv-0042/design.guix
download: https://gui.farm/ios/halloran-studio-invoice-inv-0042.gui
---

# Halloran Studio Invoice INV-0042

A brutalist iOS invoice-detail screen where a freelance design studio bills a client for an overdue balance, with itemized line items, a running total, an overdue timeline, and a pay/remind action bar.

- **Live preview:** https://gui.farm/ios/halloran-studio-invoice-inv-0042
- **Raw source:** https://gui.farm/ios/halloran-studio-invoice-inv-0042/design.guix
- **Download (.gui):** https://gui.farm/ios/halloran-studio-invoice-inv-0042.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Halloran Studio Invoice INV-0042">
  <tokens>
    <color name="bg" value="#0F0F12" />
    <color name="slab" value="#17171B" />
    <color name="raised" value="#23232C" />
    <color name="ink" value="#F5F1EA" />
    <color name="muted" value="#ABA79E" />
    <color name="line" value="#34333B" />
    <color name="clay" value="#B23C15" />
    <color name="clay-ink" value="#F07A47" />
  </tokens>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="JetBrains Mono" source="google" weights="500 700 800" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Wordmark" font-family="JetBrains Mono" font-size="16" font-weight="800" line-height="19" letter-spacing="1" />
    <text-style name="NavTitle" font-family="JetBrains Mono" font-size="13" font-weight="700" line-height="16" letter-spacing="0.5" />
    <text-style name="Label" font-family="JetBrains Mono" font-size="11" font-weight="700" line-height="14" letter-spacing="0.7" />
    <text-style name="LabelSm" font-family="JetBrains Mono" font-size="10" font-weight="700" line-height="13" letter-spacing="1" />
    <text-style name="Hero" font-family="JetBrains Mono" font-size="40" font-weight="800" line-height="42" letter-spacing="-1.5" />
    <text-style name="H2" font-family="SF Pro Display" font-size="17" font-weight="700" line-height="22" />
    <text-style name="ItemName" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Body" font-family="SF Pro Display" font-size="14" font-weight="400" line-height="20" />
    <text-style name="Sub" font-family="SF Pro Display" font-size="13" font-weight="500" line-height="18" />
    <text-style name="Mono" font-family="JetBrains Mono" font-size="12" font-weight="500" line-height="16" />
    <text-style name="MonoB" font-family="JetBrains Mono" font-size="13" font-weight="700" line-height="16" />
    <text-style name="Num" font-family="JetBrains Mono" font-size="14" font-weight="700" line-height="18" />
    <text-style name="Cell" font-family="JetBrains Mono" font-size="15" font-weight="800" line-height="18" letter-spacing="-0.2" />
    <text-style name="TotalNum" font-family="JetBrains Mono" font-size="22" font-weight="800" line-height="24" letter-spacing="-0.5" />
    <text-style name="Avatar" font-family="JetBrains Mono" font-size="16" font-weight="800" line-height="18" />
    <text-style name="BtnLabel" font-family="JetBrains Mono" font-size="15" font-weight="800" line-height="18" letter-spacing="0.5" />
  </styles>

  <col w="393" fill="$bg" clip="true">

    <!-- status bar (device chrome, untagged) -->
    <row w="393" h="54" p="16 20 0 20" align="middle-left">
      <text w="fill" value="9:41" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="18" color="$ink" />
      <text value="●  ◒  ▰" font-family="SF Pro Display" font-size="12" font-weight="600" line-height="16" color="$ink" />
    </row>

    <!-- top navigation -->
    <row w="393" h="58" p="0 16" gap="10" align="middle-left" fill="$bg" border-bottom="2 $ink" role="top-navigation-bar">
      <col w="40" h="40" fill="$slab" border="2 $ink" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/arrow-left.svg?color=%23F5F1EA" w="18" h="18" />
      </col>
      <col w="fill" gap="2" align="middle-left">
        <text value="INVOICE INV-0042" text-style="NavTitle" color="$ink" />
        <text value="HALLORAN STUDIO" text-style="LabelSm" color="$muted" />
      </col>
      <col w="40" h="40" fill="$slab" border="2 $ink" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/share.svg?color=%23F5F1EA" w="17" h="17" />
      </col>
    </row>

    <!-- body -->
    <col w="393" p="20" gap="16">

      <!-- amount-due header -->
      <col w="353" fill="$slab" border="2 $ink" p="18" gap="14" role="card">
        <appearance>
          <fill type="color" value="#17171B" />
          <effect type="drop-shadow" x="6" y="6" radius="0" spread="0" color="#B23C15" />
        </appearance>
        <row w="317" gap="10" align="middle-left">
          <text w="fill" value="AMOUNT DUE" text-style="Label" color="$muted" />
          <row p="7 11" gap="7" fill="$clay" border="2 $ink" align="middle-center" role="badge">
            <img src="https://api.iconify.design/lucide/triangle-alert.svg?color=%23F5F1EA" w="13" h="13" />
            <text value="OVERDUE" text-style="Label" color="$ink" />
          </row>
        </row>
        <col w="317" gap="6">
          <text value="$9,391.29" text-style="Hero" color="$ink" />
          <text value="14 days overdue · net 14 terms · USD" text-style="Mono" color="$clay-ink" />
        </col>
        <!-- overdue timeline bar: 28-day span, due at day 14 -->
        <col w="317" gap="9">
          <frame w="317" h="24" clip="true">
            <rect x="0" y="8" w="317" h="8" fill="$raised" />
            <rect x="0" y="8" w="158" h="8" fill="$muted" />
            <rect x="158" y="8" w="159" h="8" fill="$clay" />
            <rect x="157" y="2" w="3" h="20" fill="$ink" />
            <rect x="313" y="0" w="4" h="24" fill="$clay-ink" />
          </frame>
          <row w="317" align="middle-left">
            <text w="fill" value="ISSUED JUL 18" text-style="Mono" color="$muted" />
            <text value="DUE AUG 1" text-style="Mono" color="$ink" align="center" />
            <text w="fill" value="TODAY AUG 15" text-style="Mono" color="$clay-ink" align="right" />
          </row>
        </col>
      </col>

      <!-- bill-to -->
      <row w="353" fill="$slab" border="2 $ink" p="14" gap="12" align="middle-left" role="card">
        <col w="48" h="48" fill="$clay" border="2 $ink" align="middle-center">
          <text value="CC" text-style="Avatar" color="$ink" />
        </col>
        <col w="fill" gap="3" align="middle-left">
          <text value="Cormorant Coffee Roasters" text-style="H2" color="$ink" />
          <text value="Dana Whitfield · dana@cormorantroasters.co" text-style="Sub" color="$muted" />
        </col>
      </row>

      <!-- meta grid 2x2 -->
      <col w="353" gap="9">
        <row w="353" gap="9" align="top-left">
          <col w="172" fill="$slab" border="2 $ink" p="12" gap="6" role="card">
            <text value="ISSUED" text-style="LabelSm" color="$muted" />
            <text value="Jul 18, 2026" text-style="Cell" color="$ink" />
          </col>
          <col w="172" fill="$slab" border="2 $ink" p="12" gap="6" role="card">
            <text value="DUE DATE" text-style="LabelSm" color="$muted" />
            <text value="Aug 1, 2026" text-style="Cell" color="$clay-ink" />
          </col>
        </row>
        <row w="353" gap="9" align="top-left">
          <col w="172" fill="$slab" border="2 $ink" p="12" gap="6" role="card">
            <text value="TERMS" text-style="LabelSm" color="$muted" />
            <text value="Net 14" text-style="Cell" color="$ink" />
          </col>
          <col w="172" fill="$slab" border="2 $ink" p="12" gap="6" role="card">
            <text value="PROJECT" text-style="LabelSm" color="$muted" />
            <text value="Rebrand 2026" text-style="Cell" color="$ink" />
          </col>
        </row>
      </col>

      <!-- line items -->
      <col w="353" fill="$slab" border="2 $ink" p="16" gap="12" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="Line items" text-style="H2" color="$ink" />
          <text value="4 ITEMS" text-style="Label" color="$muted" align="right" />
        </row>
        <line w="321" fill="$line" thickness="2" role="divider" />
        <col w="321" gap="0" role="table">
          <row w="321" p="0 0 12 0" gap="10" align="top-left" border-bottom="2 $line">
            <col w="fill" gap="3" align="top-left">
              <text value="Brand identity system" text-style="ItemName" color="$ink" />
              <text value="1 × $4,200.00" text-style="Mono" color="$muted" />
            </col>
            <text value="$4,200.00" text-style="Num" color="$ink" align="right" />
          </row>
          <row w="321" p="12 0" gap="10" align="top-left" border-bottom="2 $line">
            <col w="fill" gap="3" align="top-left">
              <text value="Packaging design, 3 SKUs" text-style="ItemName" color="$ink" />
              <text value="3 × $760.00" text-style="Mono" color="$muted" />
            </col>
            <text value="$2,280.00" text-style="Num" color="$ink" align="right" />
          </row>
          <row w="321" p="12 0" gap="10" align="top-left" border-bottom="2 $line">
            <col w="fill" gap="3" align="top-left">
              <text value="Website art direction" text-style="ItemName" color="$ink" />
              <text value="18.5 hrs × $145.00" text-style="Mono" color="$muted" />
            </col>
            <text value="$2,682.50" text-style="Num" color="$ink" align="right" />
          </row>
          <row w="321" p="12 0 0 0" gap="10" align="top-left">
            <col w="fill" gap="3" align="top-left">
              <text value="Photography licensing" text-style="ItemName" color="$ink" />
              <text value="1 × $540.00" text-style="Mono" color="$muted" />
            </col>
            <text value="$540.00" text-style="Num" color="$ink" align="right" />
          </row>
        </col>
      </col>

      <!-- summary -->
      <col w="353" fill="$slab" border="2 $ink" p="16" gap="12" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="SUBTOTAL" text-style="Label" color="$muted" />
          <text value="$9,702.50" text-style="Num" color="$ink" align="right" />
        </row>
        <row w="321" align="middle-left">
          <text w="fill" value="RETURNING-CLIENT CREDIT" text-style="Label" color="$muted" />
          <text value="-$450.00" text-style="Num" color="$clay-ink" align="right" />
        </row>
        <row w="321" align="middle-left">
          <text w="fill" value="LATE FEE (1.5%)" text-style="Label" color="$muted" />
          <text value="+$138.79" text-style="Num" color="$ink" align="right" />
        </row>
        <line w="321" fill="$line" thickness="2" role="divider" />
        <row w="321" h="58" fill="$clay" border="2 $ink" p="0 16" gap="10" align="middle-left">
          <col w="fill" gap="2" align="middle-left">
            <text value="TOTAL DUE" text-style="LabelSm" color="$ink" />
            <text value="Payable to Halloran Studio LLC" text-style="Mono" color="$ink" />
          </col>
          <text value="$9,391.29" text-style="TotalNum" color="$ink" align="right" />
        </row>
      </col>

      <text w="353" value="Questions about this invoice? Reply to hello@halloran.studio or call (503) 555-0148." text-style="Body" color="$muted" />

    </col>

    <!-- sticky action bar (last flow child) -->
    <col w="393" fill="$slab" border-top="2 $ink" p="14 20 10 20" gap="11" role="toolbar">
      <row w="353" gap="8" align="middle-left">
        <row w="fill" h="52" fill="$bg" border="2 $ink" p="0 14" gap="8" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/bell.svg?color=%23F5F1EA" w="17" h="17" />
          <text value="REMIND" text-style="MonoB" color="$ink" />
        </row>
        <row w="fill" h="52" fill="$clay" border="2 $ink" p="0 14" gap="8" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23F5F1EA" w="18" h="18" />
          <text value="PAY $9,391.29" text-style="BtnLabel" color="$ink" />
        </row>
      </row>
      <text w="353" value="Secured by Stripe · card, ACH, or wire accepted" text-style="Mono" color="$muted" align="center" />
      <row w="353" h="14" align="bottom-center">
        <rect w="134" h="5" fill="$ink" />
      </row>
    </col>

  </col>
</gui>
```