---
title: "Halvard - Settle Up, Lisbon 4 Nights"
platform: ios
slug: halvard-settle-up-lisbon-4-nights
screens: []
domains: ["fintech"]
style: "neumorphic"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "card", "badge", "segmented-control", "toolbar", "button"]
score: {clean: 100, consistent: 82, accessible: 85, comprehensible: 24}
url: https://gui.farm/ios/halvard-settle-up-lisbon-4-nights
raw: https://gui.farm/ios/halvard-settle-up-lisbon-4-nights/design.guix
download: https://gui.farm/ios/halvard-settle-up-lisbon-4-nights.gui
---

# Halvard - Settle Up, Lisbon 4 Nights

A light neumorphic iOS shared-expense settle-up screen where a friend on a four-person Lisbon trip sees each member's net balance as a diverging bar, the simplest three-payment settlement, and recent split expenses.

- **Live preview:** https://gui.farm/ios/halvard-settle-up-lisbon-4-nights
- **Raw source:** https://gui.farm/ios/halvard-settle-up-lisbon-4-nights/design.guix
- **Download (.gui):** https://gui.farm/ios/halvard-settle-up-lisbon-4-nights.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Halvard - Settle Up, Lisbon 4 Nights">
  <mode name="theme" values="light dark" default="light" />
  <tokens>
    <color name="base" value="#ECE8EA" />
    <color name="well" value="#E2DBDF" />
    <color name="sh-dark" value="#C9C0C6" />
    <color name="sh-light" value="#FFFFFF" />
    <color name="ink" value="#221A1F" />
    <color name="sub" value="#5C525E" />
    <color name="faint" value="#9E95A0" />
    <color name="line" value="#D8D0D5" />
    <color name="rose" value="#E14C7C" />
    <color name="rose-deep" value="#A8124D" />
    <color name="rose-tint" value="#F4D9E4" />
    <color name="pos" value="#2E9C6C" />
    <color name="pos-deep" value="#0F6B41" />
    <color name="pos-tint" value="#D7EEE2" />
    <color name="white" value="#FFFFFF" />
    <number name="r-pill" value="999" />
    <number name="r-card" value="22" />
    <number name="r-tile" value="14" />
  </tokens>
  <styles>
    <text-style
      name="Eyebrow"
      font-family="SF Pro Display"
      font-size="11"
      font-weight="600"
      line-height="14"
      letter-spacing="1.4"
    />
    <text-style
      name="NavTitle"
      font-family="SF Pro Display"
      font-size="16"
      font-weight="700"
      line-height="20"
    />
    <text-style name="NavSub" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="15" />
    <text-style
      name="HeroCap"
      font-family="SF Pro Display"
      font-size="12"
      font-weight="600"
      line-height="15"
      letter-spacing="0.4"
    />
    <text-style
      name="HeroAmt"
      font-family="SF Pro Display"
      font-size="36"
      font-weight="700"
      line-height="40"
      letter-spacing="-1.2"
    />
    <text-style name="HeroSub" font-family="SF Pro Display" font-size="13" font-weight="500" line-height="18" />
    <text-style
      name="StatCap"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="0.8"
    />
    <text-style name="StatNum" font-family="SF Pro Display" font-size="14" font-weight="700" line-height="18" />
    <text-style name="Seg" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="16" />
    <text-style name="H2" font-family="SF Pro Display" font-size="15" font-weight="700" line-height="19" />
    <text-style name="Cap" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Name"
      font-family="SF Pro Display"
      font-size="14"
      font-weight="700"
      line-height="17"
      letter-spacing="-0.1"
    />
    <text-style name="Mono" font-family="SF Pro Display" font-size="13" font-weight="700" line-height="16" />
    <text-style name="AmtBig" font-family="SF Pro Display" font-size="15" font-weight="700" line-height="18" />
    <text-style
      name="Init"
      font-family="SF Pro Display"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="0.2"
    />
    <text-style
      name="Tiny"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="600"
      line-height="13"
      letter-spacing="0.4"
    />
    <text-style name="PillTxt" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="16" />
    <text-style
      name="BtnLabel"
      font-family="SF Pro Display"
      font-size="16"
      font-weight="700"
      line-height="20"
    />
  </styles>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="393" fill="$base" pb="0" gap="16" align="top-center">
    <!-- Status bar (untagged device chrome) -->
    <row w="fill" p="15 22 0" align="middle-center" gap="auto">
      <text value="9:41" font-family="SF Pro Display" font-size="15" font-weight="600" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23221A1F" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23221A1F" w="17" h="17" />
        <row w="24" h="12" radius="3" border="1 $faint" p="2" align="middle-left">
          <rect w="15" h="6" radius="1" fill="$ink" />
        </row>
      </row>
    </row>
    <!-- Top navigation -->
    <row role="top-navigation-bar" w="fill" p="4 18 0" align="middle-center" gap="auto">
      <frame w="40" h="40" radius="$r-pill" align="middle-center">
        <appearance>
          <fill type="color" value="$base" />
          <effect type="drop-shadow" x="5" y="5" radius="10" spread="0" color="$sh-dark" />
          <effect type="drop-shadow" x="-4" y="-4" radius="9" spread="0" color="$sh-light" />
        </appearance>
        <img
          abs="true"
          x="9"
          y="9"
          src="https://api.iconify.design/lucide/chevron-left.svg?color=%23221A1F"
          w="22"
          h="22"
        />
      </frame>
      <col gap="2" align="middle-center">
        <text
          text-style="Eyebrow"
          text-case="uppercase"
          value="Group · 4 people"
          color="$rose-deep"
          align="center"
        />
        <text text-style="NavTitle" value="Lisbon, 4 Nights" color="$ink" align="center" />
      </col>
      <frame w="40" h="40" radius="$r-pill" align="middle-center">
        <appearance>
          <fill type="color" value="$base" />
          <effect type="drop-shadow" x="5" y="5" radius="10" spread="0" color="$sh-dark" />
          <effect type="drop-shadow" x="-4" y="-4" radius="9" spread="0" color="$sh-light" />
        </appearance>
        <img
          abs="true"
          x="10"
          y="10"
          src="https://api.iconify.design/lucide/user-plus.svg?color=%235C525E"
          w="20"
          h="20"
        />
      </frame>
    </row>
    <!-- Hero: your net position -->
    <col role="card" w="353" radius="$r-card" p="18" gap="15">
      <appearance>
        <fill type="color" value="$base" />
        <effect type="drop-shadow" x="9" y="9" radius="18" spread="0" color="$sh-dark" />
        <effect type="drop-shadow" x="-7" y="-7" radius="15" spread="0" color="$sh-light" />
      </appearance>
      <row w="fill" align="top-left" gap="auto">
        <col gap="4" align="top-left">
          <text text-style="HeroCap" text-case="uppercase" value="You owe" color="$rose-deep" />
          <text text-style="HeroAmt" value="€117.50" color="$rose-deep" />
          <text text-style="HeroSub" value="Settle with Marisa Duarte to square up." color="$sub" />
        </col>
        <col role="badge" radius="$r-pill" p="7 12" align="middle-center">
          <appearance>
            <fill type="color" value="$rose-tint" />
          </appearance>
          <text text-style="Tiny" text-case="uppercase" value="Not settled" color="$rose-deep" />
        </col>
      </row>
      <!-- Your share paid: 128.00 / 245.50 = 52.1% -> 165 of 317 -->
      <col w="fill" gap="7">
        <row w="fill" align="middle-left" gap="auto">
          <text text-style="StatCap" text-case="uppercase" value="Your share paid" color="$sub" />
          <text text-style="Mono" value="€128.00 / €245.50" color="$ink" />
        </row>
        <frame w="317" h="12">
          <frame abs="true" x="0" y="0" w="317" h="12" radius="6">
            <appearance>
              <fill type="color" value="$well" />
              <effect type="inner-shadow" x="2" y="2" radius="3" spread="0" color="$sh-dark" />
              <effect type="inner-shadow" x="-1" y="-1" radius="2" spread="0" color="$sh-light" />
            </appearance>
          </frame>
          <rect abs="true" x="0" y="0" w="165" h="12" radius="6" fill="$rose" />
        </frame>
      </col>
      <rect w="fill" h="1" fill="$line" />
      <row w="fill" align="middle-center" gap="auto">
        <col gap="3" align="top-left">
          <text text-style="StatCap" text-case="uppercase" value="Group total" color="$sub" />
          <text text-style="StatNum" value="€982.00" color="$ink" />
        </col>
        <rect w="1" h="30" fill="$line" />
        <col gap="3" align="top-center">
          <text text-style="StatCap" text-case="uppercase" value="Your share" color="$sub" />
          <text text-style="StatNum" value="€245.50" color="$ink" align="center" />
        </col>
        <rect w="1" h="30" fill="$line" />
        <col gap="3" align="top-right">
          <text text-style="StatCap" text-case="uppercase" value="Settled" color="$sub" />
          <text text-style="StatNum" value="0 of 3" color="$ink" align="right" />
        </col>
      </row>
    </col>
    <!-- Segmented control -->
    <row role="segmented-control" w="353" h="44" radius="$r-pill" p="4" gap="4" align="middle-center">
      <appearance>
        <fill type="color" value="$well" />
        <effect type="inner-shadow" x="2" y="2" radius="4" spread="0" color="$sh-dark" />
        <effect type="inner-shadow" x="-2" y="-2" radius="4" spread="0" color="$sh-light" />
      </appearance>
      <row w="fill" h="fill" radius="$r-pill" align="middle-center">
        <appearance>
          <fill type="color" value="$rose-deep" />
          <effect type="drop-shadow" x="0" y="2" radius="6" spread="0" color="#A8124D40" />
        </appearance>
        <text text-style="Seg" value="Balances" color="$white" />
      </row>
      <row w="fill" h="fill" radius="$r-pill" align="middle-center">
        <text text-style="Seg" value="Expenses" color="$sub" />
      </row>
      <row w="fill" h="fill" radius="$r-pill" align="middle-center">
        <text text-style="Seg" value="Activity" color="$sub" />
      </row>
    </row>
    <!-- Balances card: diverging bars, center at x=70 of a 140px track -->
    <col role="card" w="353" radius="$r-card" p="16" gap="14">
      <appearance>
        <fill type="color" value="$base" />
        <effect type="drop-shadow" x="9" y="9" radius="18" spread="0" color="$sh-dark" />
        <effect type="drop-shadow" x="-7" y="-7" radius="15" spread="0" color="$sh-light" />
      </appearance>
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="H2" value="Who owes what" color="$ink" />
        <text text-style="Cap" value="net balance" color="$sub" />
      </row>
      <!-- Marisa: +452.90 -> right w=70 x=70 -->
      <row w="321" align="middle-center" gap="8">
        <frame w="28" h="28" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="color" value="$pos-tint" />
            <effect type="drop-shadow" x="2" y="2" radius="4" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-2" y="-2" radius="4" spread="0" color="$sh-light" />
          </appearance>
          <text text-style="Init" value="MD" color="$pos-deep" align="center" x="6" y="6" />
        </frame>
        <col w="58" gap="2" align="top-left">
          <text text-style="Name" value="Marisa" color="$ink" />
          <text text-style="Tiny" value="gets back" color="$pos-deep" />
        </col>
        <frame w="140" h="26" align="middle-center">
          <frame abs="true" x="0" y="9" w="140" h="8" radius="4">
            <appearance>
              <fill type="color" value="$well" />
              <effect type="inner-shadow" x="1" y="1" radius="2" spread="0" color="$sh-dark" />
              <effect type="inner-shadow" x="-1" y="-1" radius="2" spread="0" color="$sh-light" />
            </appearance>
          </frame>
          <rect abs="true" x="70" y="9" w="70" h="8" radius="4" fill="$pos" />
          <rect abs="true" x="69" y="3" w="2" h="20" radius="1" fill="$faint" />
        </frame>
        <text w="59" text-style="AmtBig" value="+€452.90" color="$pos-deep" align="right" />
      </row>
      <!-- Theo: -184.30 -> left w=28 x=42 -->
      <row w="321" align="middle-center" gap="8">
        <frame w="28" h="28" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="color" value="$rose-tint" />
            <effect type="drop-shadow" x="2" y="2" radius="4" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-2" y="-2" radius="4" spread="0" color="$sh-light" />
          </appearance>
          <text text-style="Init" value="TA" color="$rose-deep" align="center" x="6" y="6" />
        </frame>
        <col w="58" gap="2" align="top-left">
          <text text-style="Name" value="Theo" color="$ink" />
          <text text-style="Tiny" value="owes" color="$rose-deep" />
        </col>
        <frame w="140" h="26" align="middle-center">
          <frame abs="true" x="0" y="9" w="140" h="8" radius="4">
            <appearance>
              <fill type="color" value="$well" />
              <effect type="inner-shadow" x="1" y="1" radius="2" spread="0" color="$sh-dark" />
              <effect type="inner-shadow" x="-1" y="-1" radius="2" spread="0" color="$sh-light" />
            </appearance>
          </frame>
          <rect abs="true" x="42" y="9" w="28" h="8" radius="4" fill="$rose" />
          <rect abs="true" x="69" y="3" w="2" h="20" radius="1" fill="$faint" />
        </frame>
        <text w="59" text-style="AmtBig" value="-€184.30" color="$rose-deep" align="right" />
      </row>
      <!-- Priya: -151.10 -> left w=23 x=47 -->
      <row w="321" align="middle-center" gap="8">
        <frame w="28" h="28" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="color" value="$rose-tint" />
            <effect type="drop-shadow" x="2" y="2" radius="4" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-2" y="-2" radius="4" spread="0" color="$sh-light" />
          </appearance>
          <text text-style="Init" value="PN" color="$rose-deep" align="center" x="6" y="6" />
        </frame>
        <col w="58" gap="2" align="top-left">
          <text text-style="Name" value="Priya" color="$ink" />
          <text text-style="Tiny" value="owes" color="$rose-deep" />
        </col>
        <frame w="140" h="26" align="middle-center">
          <frame abs="true" x="0" y="9" w="140" h="8" radius="4">
            <appearance>
              <fill type="color" value="$well" />
              <effect type="inner-shadow" x="1" y="1" radius="2" spread="0" color="$sh-dark" />
              <effect type="inner-shadow" x="-1" y="-1" radius="2" spread="0" color="$sh-light" />
            </appearance>
          </frame>
          <rect abs="true" x="47" y="9" w="23" h="8" radius="4" fill="$rose" />
          <rect abs="true" x="69" y="3" w="2" h="20" radius="1" fill="$faint" />
        </frame>
        <text w="59" text-style="AmtBig" value="-€151.10" color="$rose-deep" align="right" />
      </row>
      <!-- Danny (You): -117.50 -> left w=18 x=52 -->
      <row w="321" align="middle-center" gap="8">
        <frame w="28" h="28" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="color" value="$rose" />
            <effect type="drop-shadow" x="2" y="2" radius="4" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-2" y="-2" radius="4" spread="0" color="$sh-light" />
          </appearance>
          <text text-style="Init" value="DK" color="$white" align="center" x="6" y="6" />
        </frame>
        <col w="58" gap="2" align="top-left">
          <text text-style="Name" value="You" color="$ink" />
          <text text-style="Tiny" value="owes" color="$rose-deep" />
        </col>
        <frame w="140" h="26" align="middle-center">
          <frame abs="true" x="0" y="9" w="140" h="8" radius="4">
            <appearance>
              <fill type="color" value="$well" />
              <effect type="inner-shadow" x="1" y="1" radius="2" spread="0" color="$sh-dark" />
              <effect type="inner-shadow" x="-1" y="-1" radius="2" spread="0" color="$sh-light" />
            </appearance>
          </frame>
          <rect abs="true" x="52" y="9" w="18" h="8" radius="4" fill="$rose" />
          <rect abs="true" x="69" y="3" w="2" h="20" radius="1" fill="$faint" />
        </frame>
        <text w="59" text-style="AmtBig" value="-€117.50" color="$rose-deep" align="right" />
      </row>
    </col>
    <!-- Suggested settle-up: 3 payments = 452.90 -->
    <col role="card" w="353" radius="$r-card" p="16" gap="13">
      <appearance>
        <fill type="color" value="$base" />
        <effect type="drop-shadow" x="9" y="9" radius="18" spread="0" color="$sh-dark" />
        <effect type="drop-shadow" x="-7" y="-7" radius="15" spread="0" color="$sh-light" />
      </appearance>
      <row w="fill" align="middle-left" gap="auto">
        <row gap="8" align="middle-center">
          <img src="https://api.iconify.design/lucide/git-merge.svg?color=%23A8124D" w="17" h="17" />
          <text text-style="H2" value="Simplest way to settle" color="$ink" />
        </row>
        <text text-style="Cap" value="3 payments" color="$sub" />
      </row>
      <!-- You pay Marisa (highlighted) -->
      <row w="321" radius="$r-tile" p="11 12" align="middle-center" gap="10">
        <appearance>
          <fill type="color" value="$rose-tint" />
        </appearance>
        <frame w="26" h="26" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="color" value="$rose" />
          </appearance>
          <text text-style="Init" value="DK" color="$white" align="center" x="6" y="6" />
        </frame>
        <row w="fill" gap="6" align="middle-left">
          <text text-style="PillTxt" value="You" color="$ink" />
          <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23A8124D" w="15" h="15" />
          <text text-style="PillTxt" value="Marisa" color="$ink" />
        </row>
        <text text-style="AmtBig" value="€117.50" color="$rose-deep" align="right" />
      </row>
      <!-- Priya pays Marisa -->
      <row w="321" p="0 12" align="middle-center" gap="10">
        <frame w="26" h="26" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="color" value="$rose-tint" />
          </appearance>
          <text text-style="Init" value="PN" color="$rose-deep" align="center" x="6" y="6" />
        </frame>
        <row w="fill" gap="6" align="middle-left">
          <text text-style="PillTxt" value="Priya" color="$sub" />
          <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%239E95A0" w="15" h="15" />
          <text text-style="PillTxt" value="Marisa" color="$sub" />
        </row>
        <text text-style="AmtBig" value="€151.10" color="$ink" align="right" />
      </row>
      <rect w="321" h="1" fill="$line" />
      <!-- Theo pays Marisa -->
      <row w="321" p="0 12" align="middle-center" gap="10">
        <frame w="26" h="26" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="color" value="$rose-tint" />
          </appearance>
          <text text-style="Init" value="TA" color="$rose-deep" align="center" x="6" y="6" />
        </frame>
        <row w="fill" gap="6" align="middle-left">
          <text text-style="PillTxt" value="Theo" color="$sub" />
          <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%239E95A0" w="15" h="15" />
          <text text-style="PillTxt" value="Marisa" color="$sub" />
        </row>
        <text text-style="AmtBig" value="€184.30" color="$ink" align="right" />
      </row>
    </col>
    <!-- Recent expenses -->
    <col w="353" gap="10">
      <row w="fill" p="0 4" align="middle-left" gap="auto">
        <text text-style="StatCap" text-case="uppercase" value="Recent expenses" color="$sub" />
        <text text-style="Cap" value="5 total" color="$faint" />
      </row>
      <col role="card" w="353" radius="$r-card" p="6" gap="2">
        <appearance>
          <fill type="color" value="$base" />
          <effect type="drop-shadow" x="9" y="9" radius="18" spread="0" color="$sh-dark" />
          <effect type="drop-shadow" x="-7" y="-7" radius="15" spread="0" color="$sh-light" />
        </appearance>
        <!-- Casa Alfama -->
        <row w="fill" p="10" align="middle-center" gap="12">
          <frame w="38" h="38" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$well" />
              <effect type="inner-shadow" x="1" y="1" radius="2" spread="0" color="$sh-dark" />
              <effect type="inner-shadow" x="-1" y="-1" radius="2" spread="0" color="$sh-light" />
            </appearance>
            <img
              src="https://api.iconify.design/lucide/house.svg?color=%23A8124D"
              w="19"
              h="19"
              x="10"
              y="10"
            />
          </frame>
          <col w="fill" gap="2" align="top-left">
            <text text-style="Name" value="Casa Alfama" color="$ink" />
            <text text-style="Cap" value="Marisa paid · split 4 ways" color="$sub" />
          </col>
          <col gap="2" align="top-right">
            <text text-style="AmtBig" value="€680.00" color="$ink" align="right" />
            <text text-style="Tiny" value="you: €170.00" color="$sub" align="right" />
          </col>
        </row>
        <rect w="fill" h="1" fill="$line" />
        <!-- Time Out Market -->
        <row w="fill" p="10" align="middle-center" gap="12">
          <frame w="38" h="38" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$well" />
              <effect type="inner-shadow" x="1" y="1" radius="2" spread="0" color="$sh-dark" />
              <effect type="inner-shadow" x="-1" y="-1" radius="2" spread="0" color="$sh-light" />
            </appearance>
            <img
              src="https://api.iconify.design/lucide/utensils.svg?color=%23A8124D"
              w="19"
              h="19"
              x="10"
              y="10"
            />
          </frame>
          <col w="fill" gap="2" align="top-left">
            <text text-style="Name" value="Time Out Market" color="$ink" />
            <text text-style="Cap" value="You paid · split 4 ways" color="$sub" />
          </col>
          <col gap="2" align="top-right">
            <text text-style="AmtBig" value="€128.00" color="$ink" align="right" />
            <text text-style="Tiny" value="you: €32.00" color="$sub" align="right" />
          </col>
        </row>
        <rect w="fill" h="1" fill="$line" />
        <!-- Sintra day -->
        <row w="fill" p="10" align="middle-center" gap="12">
          <frame w="38" h="38" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$well" />
              <effect type="inner-shadow" x="1" y="1" radius="2" spread="0" color="$sh-dark" />
              <effect type="inner-shadow" x="-1" y="-1" radius="2" spread="0" color="$sh-light" />
            </appearance>
            <img
              src="https://api.iconify.design/lucide/train-front.svg?color=%23A8124D"
              w="19"
              h="19"
              x="10"
              y="10"
            />
          </frame>
          <col w="fill" gap="2" align="top-left">
            <text text-style="Name" value="Sintra day tickets" color="$ink" />
            <text text-style="Cap" value="Theo paid · split 4 ways" color="$sub" />
          </col>
          <col gap="2" align="top-right">
            <text text-style="AmtBig" value="€61.20" color="$ink" align="right" />
            <text text-style="Tiny" value="you: €15.30" color="$sub" align="right" />
          </col>
        </row>
      </col>
    </col>
    <!-- Bottom action bar (viewport-fixed, last flow child) -->
    <col role="toolbar" w="fill" fill="$base" border="1 $line" p="14 20 12" gap="12" align="top-center">
      <row w="fill" align="middle-center" gap="auto">
        <col gap="2" align="top-left">
          <text text-style="StatCap" text-case="uppercase" value="You owe" color="$sub" />
          <text text-style="AmtBig" value="€117.50" color="$rose-deep" />
        </col>
        <row role="button" radius="$r-pill" p="14 26" gap="9" align="middle-center">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #C7285F 0%, #A8124D 100%)" />
            <effect type="drop-shadow" x="0" y="5" radius="14" spread="0" color="#A8124D66" />
          </appearance>
          <img src="https://api.iconify.design/lucide/check-check.svg?color=%23FFFFFF" w="18" h="18" />
          <text text-style="BtnLabel" value="Settle up" color="$white" />
        </row>
      </row>
      <rect w="140" h="5" radius="$r-pill" fill="$faint" />
    </col>
  </col>
</gui>
```