---
title: "Kestrel & Vale — Deal Pipeline"
platform: web
slug: real-estate-deal-pipeline
screens: ["kanban"]
domains: ["real-estate"]
style: "brutalist"
fonts: ["Space Grotesk", "JetBrains Mono"]
roles: ["avatar", "top-navigation-bar", "search-bar", "button", "toolbar", "card"]
score: {clean: 100, consistent: 81, accessible: 73, comprehensible: 33}
url: https://gui.farm/web/real-estate-deal-pipeline
raw: https://gui.farm/web/real-estate-deal-pipeline/design.guix
download: https://gui.farm/web/real-estate-deal-pipeline.gui
---

# Kestrel & Vale — Deal Pipeline

A brutalist real-estate brokerage deal-pipeline kanban board tracking listings from new leads through viewings, offers, and closings.

- **Live preview:** https://gui.farm/web/real-estate-deal-pipeline
- **Raw source:** https://gui.farm/web/real-estate-deal-pipeline/design.guix
- **Download (.gui):** https://gui.farm/web/real-estate-deal-pipeline.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Kestrel &amp; Vale — Deal Pipeline">
  <tokens>
    <color name="paper" value="#EFEAD9" />
    <color name="card" value="#FFFFFF" />
    <color name="ink" value="#141210" />
    <color name="muted" value="#5A554B" />
    <color name="amber" value="#F5A800" />
    <color name="amber-soft" value="#FBE3A6" />
    <number name="r0" value="0" />
  </tokens>
  <fonts>
    <font family="Space Grotesk" source="google" weights="500 600 700" styles="normal" />
    <font family="JetBrains Mono" source="google" weights="500 700" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Board" font-family="Space Grotesk" font-size="24" font-weight="700" line-height="28" />
    <text-style name="Addr" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="19" />
    <text-style name="Price" font-family="JetBrains Mono" font-size="19" font-weight="700" line-height="22" />
    <text-style name="ColHead" font-family="JetBrains Mono" font-size="13" font-weight="700" line-height="16" />
    <text-style name="Mono" font-family="JetBrains Mono" font-size="11" font-weight="500" line-height="14" />
    <text-style name="MonoB" font-family="JetBrains Mono" font-size="12" font-weight="700" line-height="15" />
    <text-style name="Chip" font-family="JetBrains Mono" font-size="10" font-weight="700" line-height="12" />
  </styles>
  <components>
    <component name="Chip" id="comp-chip">
      <props>
        <prop name="label" type="text" target="cl" />
      </props>
      <row p="3 6" fill="none" border="2 $ink" align="middle-center">
        <text id="cl" text-style="Chip" value="CHIP" color="$ink" text-case="uppercase" letter-spacing="0.4" />
      </row>
    </component>
    <component name="Avatar" id="comp-avatar">
      <props>
        <prop name="ini" type="text" target="av" />
      </props>
      <row w="30" h="30" fill="$amber" border="2 $ink" align="middle-center" role="avatar">
        <text id="av" text-style="Chip" font-size="11" value="PN" color="$ink" />
      </row>
    </component>
  </components>
  <col w="1440" fill="$paper">
    <!-- ============ TOP NAV ============ -->
    <row
      w="fill"
      h="66"
      p="0 24"
      gap="20"
      align="middle-left"
      fill="$card"
      border-bottom="3 $ink"
      role="top-navigation-bar"
    >
      <row gap="10" align="middle-center">
        <rect w="30" h="30" fill="$amber" border="2 $ink" />
        <text
          font-family="JetBrains Mono"
          font-size="16"
          font-weight="700"
          value="KESTREL &amp; VALE"
          color="$ink"
          letter-spacing="0.5"
        />
      </row>
      <row gap="0" align="middle-left" h="fill">
        <row p="0 16" h="66" align="middle-center" border-bottom="4 $amber">
          <text text-style="MonoB" value="BOARD" color="$ink" text-case="uppercase" />
        </row>
        <row p="0 16" h="66" align="middle-center">
          <text text-style="MonoB" value="LIST" color="$muted" text-case="uppercase" />
        </row>
        <row p="0 16" h="66" align="middle-center">
          <text text-style="MonoB" value="MAP" color="$muted" text-case="uppercase" />
        </row>
        <row p="0 16" h="66" align="middle-center">
          <text text-style="MonoB" value="REPORTS" color="$muted" text-case="uppercase" />
        </row>
      </row>
      <row w="fill" gap="14" align="middle-right">
        <row w="216" p="8 10" gap="8" fill="$paper" border="2 $ink" align="middle-left" role="search-bar">
          <img src="https://api.iconify.design/lucide/search.svg?color=%235A554B" w="15" h="15" />
          <text text-style="Mono" value="Search deals, agents…" color="$muted" />
        </row>
        <row gap="0" align="middle-center">
          <instance component="comp-avatar" ini="DC" />
          <row w="30" h="30" fill="$card" border="2 $ink" align="middle-center">
            <text text-style="Chip" font-size="11" value="MR" color="$ink" />
          </row>
          <row w="30" h="30" fill="$card" border="2 $ink" align="middle-center">
            <text text-style="Chip" font-size="11" value="+4" color="$muted" />
          </row>
        </row>
        <row p="9 14" gap="8" fill="$amber" border="2 $ink" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/plus.svg?color=%23141210" w="16" h="16" />
          <text text-style="MonoB" value="NEW DEAL" color="$ink" text-case="uppercase" />
        </row>
      </row>
    </row>
    <!-- ============ TOOLBAR ============ -->
    <row
      w="fill"
      h="60"
      p="0 24"
      gap="16"
      align="middle-left"
      fill="$paper"
      border-bottom="2 $ink"
      role="toolbar"
    >
      <text text-style="Board" value="Q3 Sales Pipeline" color="$ink" />
      <row p="4 8" fill="$ink" align="middle-center">
        <text text-style="Chip" font-size="11" value="9 ACTIVE DEALS" color="$paper" />
      </row>
      <row w="fill" gap="16" align="middle-right">
        <row gap="10" align="middle-center">
          <text text-style="Mono" value="PIPELINE VALUE" color="$muted" text-case="uppercase" />
          <row p="4 8" fill="$amber" border="2 $ink" align="middle-center">
            <text text-style="MonoB" font-size="14" value="$8,215,000" color="$ink" />
          </row>
        </row>
        <row p="8 12" gap="8" fill="$card" border="2 $ink" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/sliders-horizontal.svg?color=%23141210" w="15" h="15" />
          <text text-style="MonoB" value="FILTER" color="$ink" text-case="uppercase" />
        </row>
        <row p="8 12" gap="8" fill="$card" border="2 $ink" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/arrow-up-down.svg?color=%23141210" w="15" h="15" />
          <text text-style="MonoB" value="SORT" color="$ink" text-case="uppercase" />
        </row>
      </row>
    </row>
    <!-- ============ BOARD ============ -->
    <row w="fill" p="24" gap="24" align="top-left">
      <!-- ===== COLUMN 1 — NEW LEADS ===== -->
      <col w="330" gap="12">
        <col w="fill" gap="10" p="0 2">
          <row w="fill" gap="8" align="middle-left">
            <rect w="12" h="12" fill="$amber" border="2 $ink" />
            <text text-style="ColHead" value="NEW LEADS" color="$ink" text-case="uppercase" />
            <row w="22" h="22" fill="$ink" align="middle-center">
              <text text-style="Chip" font-size="11" value="3" color="$paper" />
            </row>
            <row w="fill" align="middle-right">
              <img src="https://api.iconify.design/lucide/plus.svg?color=%23141210" w="18" h="18" />
            </row>
          </row>
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="Mono" value="STAGE VALUE" color="$muted" />
            <text text-style="MonoB" value="$2,185,000" color="$ink" />
          </row>
          <row w="fill" h="10" border="2 $ink" fill="$card" align="middle-left">
            <rect w="79" h="10" fill="$amber" />
          </row>
        </col>
        <!-- card: 1420 Alcott St -->
        <col w="fill" p="14" gap="11" fill="$card" border="2 $ink" role="card">
          <appearance>
            <effect type="drop-shadow" x="3" y="3" radius="0" spread="0" color="#141210" />
          </appearance>
          <row w="fill" gap="8" align="top-left">
            <text w="fill" text-style="Addr" value="1420 Alcott St" color="$ink" />
            <instance component="comp-chip" label="NEW" />
          </row>
          <text text-style="Price" value="$625,000" color="$ink" />
          <row gap="6" align="middle-left">
            <instance component="comp-chip" label="SFH" />
            <instance component="comp-chip" label="3 BD" />
            <instance component="comp-chip" label="2 BA" />
          </row>
          <line fill="$ink" thickness="2" />
          <row w="fill" gap="8" align="middle-left">
            <instance component="comp-avatar" ini="PN" />
            <text w="fill" text-style="Mono" value="Priya Nair" color="$ink" />
            <text text-style="Mono" value="2 DAYS" color="$muted" />
          </row>
        </col>
        <!-- card: 88 Harbor View Rd -->
        <col w="fill" p="14" gap="11" fill="$card" border="2 $ink" role="card">
          <appearance>
            <effect type="drop-shadow" x="3" y="3" radius="0" spread="0" color="#141210" />
          </appearance>
          <row w="fill" gap="8" align="top-left">
            <text w="fill" text-style="Addr" value="88 Harbor View Rd" color="$ink" />
          </row>
          <text text-style="Price" value="$1,150,000" color="$ink" />
          <row gap="6" align="middle-left">
            <instance component="comp-chip" label="SFH" />
            <instance component="comp-chip" label="4 BD" />
            <instance component="comp-chip" label="3 BA" />
          </row>
          <line fill="$ink" thickness="2" />
          <row w="fill" gap="8" align="middle-left">
            <instance component="comp-avatar" ini="DC" />
            <text w="fill" text-style="Mono" value="Dana Cole" color="$ink" />
            <text text-style="Mono" value="5 DAYS" color="$muted" />
          </row>
        </col>
        <!-- card: 305 Juniper Ln -->
        <col w="fill" p="14" gap="11" fill="$card" border="2 $ink" role="card">
          <appearance>
            <effect type="drop-shadow" x="3" y="3" radius="0" spread="0" color="#141210" />
          </appearance>
          <row w="fill" gap="8" align="top-left">
            <text w="fill" text-style="Addr" value="305 Juniper Ln" color="$ink" />
            <instance component="comp-chip" label="NEW" />
          </row>
          <text text-style="Price" value="$410,000" color="$ink" />
          <row gap="6" align="middle-left">
            <instance component="comp-chip" label="CONDO" />
            <instance component="comp-chip" label="2 BD" />
            <instance component="comp-chip" label="1 BA" />
          </row>
          <line fill="$ink" thickness="2" />
          <row w="fill" gap="8" align="middle-left">
            <instance component="comp-avatar" ini="MR" />
            <text w="fill" text-style="Mono" value="Marcus Reyes" color="$ink" />
            <text text-style="Mono" value="1 DAY" color="$muted" />
          </row>
        </col>
      </col>
      <!-- ===== COLUMN 2 — VIEWINGS ===== -->
      <col w="330" gap="12">
        <col w="fill" gap="10" p="0 2">
          <row w="fill" gap="8" align="middle-left">
            <rect w="12" h="12" fill="$card" border="2 $ink" />
            <text text-style="ColHead" value="VIEWINGS" color="$ink" text-case="uppercase" />
            <row w="22" h="22" fill="$ink" align="middle-center">
              <text text-style="Chip" font-size="11" value="2" color="$paper" />
            </row>
            <row w="fill" align="middle-right">
              <img src="https://api.iconify.design/lucide/plus.svg?color=%23141210" w="18" h="18" />
            </row>
          </row>
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="Mono" value="STAGE VALUE" color="$muted" />
            <text text-style="MonoB" value="$1,225,000" color="$ink" />
          </row>
          <row w="fill" h="10" border="2 $ink" fill="$card" align="middle-left">
            <rect w="44" h="10" fill="$amber" />
          </row>
        </col>
        <!-- card: 77 Beacon Hill Ct -->
        <col w="fill" p="14" gap="11" fill="$card" border="2 $ink" role="card">
          <appearance>
            <effect type="drop-shadow" x="3" y="3" radius="0" spread="0" color="#141210" />
          </appearance>
          <row w="fill" gap="8" align="top-left">
            <text w="fill" text-style="Addr" value="77 Beacon Hill Ct" color="$ink" />
          </row>
          <text text-style="Price" value="$890,000" color="$ink" />
          <row gap="6" align="middle-left">
            <instance component="comp-chip" label="SFH" />
            <instance component="comp-chip" label="3 BD" />
            <instance component="comp-chip" label="2 BA" />
          </row>
          <row w="fill" p="6 8" fill="$amber-soft" border="2 $ink" gap="6" align="middle-left">
            <img src="https://api.iconify.design/lucide/calendar-clock.svg?color=%23141210" w="14" h="14" />
            <text text-style="Chip" value="SHOWING FRI 3:00 PM" color="$ink" />
          </row>
          <line fill="$ink" thickness="2" />
          <row w="fill" gap="8" align="middle-left">
            <instance component="comp-avatar" ini="DC" />
            <text w="fill" text-style="Mono" value="Dana Cole" color="$ink" />
            <text text-style="Mono" value="9 DAYS" color="$muted" />
          </row>
        </col>
        <!-- card: 2210 Vine St #4B -->
        <col w="fill" p="14" gap="11" fill="$card" border="2 $ink" role="card">
          <appearance>
            <effect type="drop-shadow" x="3" y="3" radius="0" spread="0" color="#141210" />
          </appearance>
          <row w="fill" gap="8" align="top-left">
            <text w="fill" text-style="Addr" value="2210 Vine St #4B" color="$ink" />
          </row>
          <text text-style="Price" value="$335,000" color="$ink" />
          <row gap="6" align="middle-left">
            <instance component="comp-chip" label="CONDO" />
            <instance component="comp-chip" label="1 BD" />
            <instance component="comp-chip" label="1 BA" />
          </row>
          <row w="fill" p="6 8" fill="$amber-soft" border="2 $ink" gap="6" align="middle-left">
            <img src="https://api.iconify.design/lucide/calendar-clock.svg?color=%23141210" w="14" h="14" />
            <text text-style="Chip" value="SHOWING SAT 11:00 AM" color="$ink" />
          </row>
          <line fill="$ink" thickness="2" />
          <row w="fill" gap="8" align="middle-left">
            <instance component="comp-avatar" ini="PN" />
            <text w="fill" text-style="Mono" value="Priya Nair" color="$ink" />
            <text text-style="Mono" value="12 DAYS" color="$muted" />
          </row>
        </col>
      </col>
      <!-- ===== COLUMN 3 — UNDER OFFER ===== -->
      <col w="330" gap="12">
        <col w="fill" gap="10" p="0 2">
          <row w="fill" gap="8" align="middle-left">
            <rect w="12" h="12" fill="$ink" border="2 $ink" />
            <text text-style="ColHead" value="UNDER OFFER" color="$ink" text-case="uppercase" />
            <row w="22" h="22" fill="$ink" align="middle-center">
              <text text-style="Chip" font-size="11" value="2" color="$paper" />
            </row>
            <row w="fill" align="middle-right">
              <img src="https://api.iconify.design/lucide/plus.svg?color=%23141210" w="18" h="18" />
            </row>
          </row>
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="Mono" value="STAGE VALUE" color="$muted" />
            <text text-style="MonoB" value="$2,035,000" color="$ink" />
          </row>
          <row w="fill" h="10" border="2 $ink" fill="$card" align="middle-left">
            <rect w="74" h="10" fill="$amber" />
          </row>
        </col>
        <!-- card: 940 Ridgeline Dr -->
        <col w="fill" p="14" gap="11" fill="$card" border="2 $ink" role="card">
          <appearance>
            <effect type="drop-shadow" x="3" y="3" radius="0" spread="0" color="#141210" />
          </appearance>
          <row w="fill" gap="8" align="top-left">
            <text w="fill" text-style="Addr" value="940 Ridgeline Dr" color="$ink" />
          </row>
          <row w="fill" gap="8" align="bottom-left">
            <text text-style="Mono" value="LIST" color="$muted" />
            <text
              text-style="Mono"
              font-size="12"
              value="$1,475,000"
              color="$muted"
              decoration="strikethrough"
            />
          </row>
          <row w="fill" p="6 8" fill="$ink" gap="8" align="middle-left">
            <text text-style="Chip" value="OFFER" color="$amber" />
            <text
              w="fill"
              font-family="JetBrains Mono"
              font-size="16"
              font-weight="700"
              value="$1,430,000"
              color="$card"
            />
          </row>
          <row gap="6" align="middle-left">
            <instance component="comp-chip" label="4 BD" />
            <instance component="comp-chip" label="3 BA" />
            <instance component="comp-chip" label="97% ASK" />
          </row>
          <line fill="$ink" thickness="2" />
          <row w="fill" gap="8" align="middle-left">
            <instance component="comp-avatar" ini="MR" />
            <text w="fill" text-style="Mono" value="Marcus Reyes" color="$ink" />
            <text text-style="Mono" value="21 DAYS" color="$muted" />
          </row>
        </col>
        <!-- card: 512 Wren Ave -->
        <col w="fill" p="14" gap="11" fill="$card" border="2 $ink" role="card">
          <appearance>
            <effect type="drop-shadow" x="3" y="3" radius="0" spread="0" color="#141210" />
          </appearance>
          <row w="fill" gap="8" align="top-left">
            <text w="fill" text-style="Addr" value="512 Wren Ave" color="$ink" />
          </row>
          <row w="fill" gap="8" align="bottom-left">
            <text text-style="Mono" value="LIST" color="$muted" />
            <text text-style="Mono" font-size="12" value="$560,000" color="$muted" decoration="strikethrough" />
          </row>
          <row w="fill" p="6 8" fill="$ink" gap="8" align="middle-left">
            <text text-style="Chip" value="OFFER" color="$amber" />
            <text
              w="fill"
              font-family="JetBrains Mono"
              font-size="16"
              font-weight="700"
              value="$548,000"
              color="$card"
            />
          </row>
          <row gap="6" align="middle-left">
            <instance component="comp-chip" label="3 BD" />
            <instance component="comp-chip" label="2 BA" />
            <instance component="comp-chip" label="98% ASK" />
          </row>
          <line fill="$ink" thickness="2" />
          <row w="fill" gap="8" align="middle-left">
            <instance component="comp-avatar" ini="DC" />
            <text w="fill" text-style="Mono" value="Dana Cole" color="$ink" />
            <text text-style="Mono" value="16 DAYS" color="$muted" />
          </row>
        </col>
      </col>
      <!-- ===== COLUMN 4 — CLOSED ===== -->
      <col w="330" gap="12">
        <col w="fill" gap="10" p="0 2">
          <row w="fill" gap="8" align="middle-left">
            <rect w="12" h="12" fill="$amber" border="2 $ink" />
            <text text-style="ColHead" value="CLOSED" color="$ink" text-case="uppercase" />
            <row w="22" h="22" fill="$ink" align="middle-center">
              <text text-style="Chip" font-size="11" value="2" color="$paper" />
            </row>
            <row w="fill" align="middle-right">
              <img src="https://api.iconify.design/lucide/plus.svg?color=%23141210" w="18" h="18" />
            </row>
          </row>
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="Mono" value="STAGE VALUE" color="$muted" />
            <text text-style="MonoB" value="$2,770,000" color="$ink" />
          </row>
          <row w="fill" h="10" border="2 $ink" fill="$card" align="middle-left">
            <rect w="100" h="10" fill="$amber" />
          </row>
        </col>
        <!-- card: 33 Sycamore Pl -->
        <col w="fill" p="14" gap="11" fill="$card" border="2 $ink" role="card">
          <appearance>
            <effect type="drop-shadow" x="3" y="3" radius="0" spread="0" color="#141210" />
          </appearance>
          <row w="fill" gap="8" align="top-left">
            <text w="fill" text-style="Addr" value="33 Sycamore Pl" color="$ink" />
            <row w="20" h="20" fill="$amber" border="2 $ink" align="middle-center">
              <img src="https://api.iconify.design/lucide/check.svg?color=%23141210" w="13" h="13" />
            </row>
          </row>
          <text text-style="Price" value="$720,000" color="$ink" />
          <row gap="6" align="middle-left">
            <instance component="comp-chip" label="SFH" />
            <instance component="comp-chip" label="SOLD OVER ASK" />
          </row>
          <line fill="$ink" thickness="2" />
          <row w="fill" gap="8" align="middle-left">
            <instance component="comp-avatar" ini="PN" />
            <text w="fill" text-style="Mono" value="Priya Nair" color="$ink" />
            <text text-style="Mono" value="CLOSED JUL 30" color="$muted" />
          </row>
        </col>
        <!-- card: 1801 Lakeshore Blvd -->
        <col w="fill" p="14" gap="11" fill="$card" border="2 $ink" role="card">
          <appearance>
            <effect type="drop-shadow" x="3" y="3" radius="0" spread="0" color="#141210" />
          </appearance>
          <row w="fill" gap="8" align="top-left">
            <text w="fill" text-style="Addr" value="1801 Lakeshore Blvd" color="$ink" />
            <row w="20" h="20" fill="$amber" border="2 $ink" align="middle-center">
              <img src="https://api.iconify.design/lucide/check.svg?color=%23141210" w="13" h="13" />
            </row>
          </row>
          <text text-style="Price" value="$2,050,000" color="$ink" />
          <row gap="6" align="middle-left">
            <instance component="comp-chip" label="WATERFRONT" />
            <instance component="comp-chip" label="5 BD" />
          </row>
          <line fill="$ink" thickness="2" />
          <row w="fill" gap="8" align="middle-left">
            <instance component="comp-avatar" ini="DC" />
            <text w="fill" text-style="Mono" value="Dana Cole" color="$ink" />
            <text text-style="Mono" value="CLOSED AUG 8" color="$muted" />
          </row>
        </col>
      </col>
    </row>
  </col>
</gui>
```