---
title: "HomeMatch - Rex St vs Woodstock"
platform: ios
slug: homematch-rex-st-vs-woodstock
screens: ["comparison"]
domains: ["real-estate"]
style: "brutalist"
fonts: ["Archivo", "IBM Plex Mono", "SF Pro Display"]
roles: ["top-navigation-bar", "button", "card", "badge", "divider", "table", "toolbar"]
score: {clean: 99, consistent: 82, accessible: 87, comprehensible: 53}
url: https://gui.farm/ios/homematch-rex-st-vs-woodstock
raw: https://gui.farm/ios/homematch-rex-st-vs-woodstock/design.guix
download: https://gui.farm/ios/homematch-rex-st-vs-woodstock.gui
---

# HomeMatch - Rex St vs Woodstock

A brutalist dark iOS side-by-side home comparison where a buyer weighs two shortlisted Portland listings across price, size, cost, and features to pick the better value.

- **Live preview:** https://gui.farm/ios/homematch-rex-st-vs-woodstock
- **Raw source:** https://gui.farm/ios/homematch-rex-st-vs-woodstock/design.guix
- **Download (.gui):** https://gui.farm/ios/homematch-rex-st-vs-woodstock.gui

## Source (design.guix)

```xml
<gui version="0.2" name="HomeMatch - Rex St vs Woodstock">
  <tokens>
    <color name="bg" value="#121210" />
    <color name="slab" value="#1C1B17" />
    <color name="raised" value="#26241C" />
    <color name="ink" value="#F4F1E8" />
    <color name="muted" value="#A7A395" />
    <color name="line" value="#38352B" />
    <color name="amber" value="#E7A33A" />
    <color name="amber-deep" value="#C9871E" />
    <color name="amber-ink" value="#F2BC55" />
  </tokens>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Archivo" source="google" weights="600 700 800" styles="normal" />
    <font family="IBM Plex Mono" source="google" weights="500 600 700" styles="normal" />
  </fonts>
  <styles>
    <text-style
      name="NavTitle"
      font-family="Archivo"
      font-size="14"
      font-weight="800"
      line-height="17"
      letter-spacing="0.2"
    />
    <text-style
      name="NavSub"
      font-family="IBM Plex Mono"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="1"
    />
    <text-style
      name="Label"
      font-family="IBM Plex Mono"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="0.7"
    />
    <text-style
      name="LabelSm"
      font-family="IBM Plex Mono"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="1"
    />
    <text-style
      name="Addr"
      font-family="Archivo"
      font-size="15"
      font-weight="700"
      line-height="19"
      letter-spacing="-0.2"
    />
    <text-style
      name="PriceHero"
      font-family="IBM Plex Mono"
      font-size="19"
      font-weight="700"
      line-height="22"
      letter-spacing="-0.5"
    />
    <text-style name="H2" font-family="Archivo" font-size="16" font-weight="700" line-height="21" />
    <text-style
      name="Cell"
      font-family="IBM Plex Mono"
      font-size="14"
      font-weight="700"
      line-height="18"
      letter-spacing="-0.2"
    />
    <text-style
      name="RowLabel"
      font-family="SF Pro Display"
      font-size="13"
      font-weight="500"
      line-height="17"
    />
    <text-style name="Body" font-family="SF Pro Display" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Sub" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="VerdictHead"
      font-family="Archivo"
      font-size="18"
      font-weight="800"
      line-height="22"
      letter-spacing="-0.4"
    />
    <text-style
      name="Delta"
      font-family="IBM Plex Mono"
      font-size="12"
      font-weight="700"
      line-height="15"
      letter-spacing="-0.2"
    />
    <text-style
      name="BtnLabel"
      font-family="Archivo"
      font-size="14"
      font-weight="800"
      line-height="18"
      letter-spacing="0.3"
    />
    <text-style
      name="BtnLabelSm"
      font-family="IBM Plex Mono"
      font-size="13"
      font-weight="700"
      line-height="16"
      letter-spacing="0.3"
    />
  </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"
      />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23F4F1E8" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F4F1E8" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F4F1E8" w="20" h="16" />
      </row>
    </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=%23F4F1E8" w="18" h="18" />
      </col>
      <col w="fill" gap="2" align="middle-left">
        <text value="COMPARE HOMES" text-style="NavTitle" color="$ink" />
        <text value="WOODSTOCK · PORTLAND OR" text-style="NavSub" 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/arrow-left-right.svg?color=%23F4F1E8" w="17" h="17" />
      </col>
    </row>
    <!-- body -->
    <col w="393" p="20" gap="16">
      <!-- two property header columns -->
      <row w="353" gap="9" align="top-left">
        <!-- Option A: Rex St -->
        <col w="172" fill="$slab" border="2 $ink" gap="0" role="card" h="fill">
          <img
            src="https://images.unsplash.com/photo-1761061079517-2ff8192b2f02?w=360&amp;h=240&amp;fit=crop&amp;auto=format&amp;q=70"
            w="172"
            h="116"
          />
          <col w="172" p="12" gap="6" align="top-left" h="hug">
            <row w="148" p="4 8" fill="$raised" border="2 $line" align="middle-center" role="badge">
              <text value="OPTION A" text-style="LabelSm" color="$muted" />
            </row>
            <text value="4032 SE Rex St" text-style="Addr" color="$ink" />
            <text value="Tudor · Built 1926" text-style="Sub" color="$muted" />
            <text value="$812,000" text-style="PriceHero" color="$ink" />
            <text value="$419 / sqft" text-style="Label" color="$muted" />
          </col>
        </col>
        <!-- Option B: Woodstock (recommended) -->
        <col w="172" fill="$slab" border="2 $amber" gap="0" role="card">
          <appearance>
            <fill type="color" value="#1C1B17" />
            <effect type="drop-shadow" x="5" y="5" radius="0" spread="0" color="#C9871E" />
          </appearance>
          <img
            src="https://images.unsplash.com/photo-1773427657182-4776c4f5b363?w=360&amp;h=240&amp;fit=crop&amp;auto=format&amp;q=70"
            w="172"
            h="116"
          />
          <col w="172" p="12" gap="6" align="top-left">
            <row w="148" p="4 8" gap="5" fill="$amber" align="middle-center" role="badge">
              <img src="https://api.iconify.design/lucide/star.svg?color=%23121210" w="12" h="12" />
              <text value="BEST VALUE" text-style="LabelSm" color="$bg" />
            </row>
            <text value="3915 SE Woodstoc..." text-style="Addr" color="$ink" />
            <text value="Ranch · Built 1949" text-style="Sub" color="$muted" />
            <text value="$779,500" text-style="PriceHero" color="$amber-ink" />
            <text value="$368 / sqft" text-style="Label" color="$amber-ink" />
          </col>
        </col>
      </row>
      <!-- spec comparison table -->
      <col w="353" fill="$slab" border="2 $ink" p="16" gap="12" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="Spec by spec" text-style="H2" color="$ink" />
          <text value="12 ROWS" text-style="LabelSm" color="$muted" align="right" />
        </row>
        <!-- column key -->
        <row w="321" gap="6" align="middle-left">
          <text w="fill" value="" text-style="LabelSm" color="$muted" />
          <text w="88" value="REX ST" text-style="LabelSm" color="$muted" align="right" />
          <text w="88" value="WOODSTK" text-style="LabelSm" color="$amber-ink" align="right" />
        </row>
        <line w="321" fill="$ink" thickness="2" role="divider" />
        <col w="321" gap="0" role="table">
          <row w="321" p="0 0 9 0" gap="6" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="Status" text-style="RowLabel" color="$muted" />
            <text w="88" value="For sale" text-style="Cell" color="$ink" align="right" />
            <text w="88" value="For sale" text-style="Cell" color="$ink" align="right" />
          </row>
          <row w="321" p="9 0" gap="6" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="List price" text-style="RowLabel" color="$muted" />
            <text w="88" value="$812,000" text-style="Cell" color="$ink" align="right" />
            <text w="88" value="$779,500" text-style="Cell" color="$amber-ink" align="right" />
          </row>
          <row w="321" p="9 0" gap="6" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="Price / sqft" text-style="RowLabel" color="$muted" />
            <text w="88" value="$419" text-style="Cell" color="$ink" align="right" />
            <text w="88" value="$368" text-style="Cell" color="$amber-ink" align="right" />
          </row>
          <row w="321" p="9 0" gap="6" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="Bedrooms" text-style="RowLabel" color="$muted" />
            <text w="88" value="3" text-style="Cell" color="$ink" align="right" />
            <text w="88" value="4" text-style="Cell" color="$amber-ink" align="right" />
          </row>
          <row w="321" p="9 0" gap="6" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="Bathrooms" text-style="RowLabel" color="$muted" />
            <text w="88" value="2.0" text-style="Cell" color="$ink" align="right" />
            <text w="88" value="2.5" text-style="Cell" color="$amber-ink" align="right" />
          </row>
          <row w="321" p="9 0" gap="6" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="Interior" text-style="RowLabel" color="$muted" />
            <text w="88" value="1,940 sf" text-style="Cell" color="$ink" align="right" />
            <text w="88" value="2,120 sf" text-style="Cell" color="$amber-ink" align="right" />
          </row>
          <row w="321" p="9 0" gap="6" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="Lot size" text-style="RowLabel" color="$muted" />
            <text w="88" value="4,500 sf" text-style="Cell" color="$ink" align="right" />
            <text w="88" value="6,200 sf" text-style="Cell" color="$amber-ink" align="right" />
          </row>
          <row w="321" p="9 0" gap="6" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="Year built" text-style="RowLabel" color="$muted" />
            <text w="88" value="1926" text-style="Cell" color="$ink" align="right" />
            <text w="88" value="1949" text-style="Cell" color="$ink" align="right" />
          </row>
          <row w="321" p="9 0" gap="6" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="Property tax" text-style="RowLabel" color="$muted" />
            <text w="88" value="$9,180/yr" text-style="Cell" color="$ink" align="right" />
            <text w="88" value="$8,240/yr" text-style="Cell" color="$amber-ink" align="right" />
          </row>
          <row w="321" p="9 0" gap="6" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="Est. P&amp;I / mo" text-style="RowLabel" color="$muted" />
            <text w="88" value="$4,278" text-style="Cell" color="$ink" align="right" />
            <text w="88" value="$4,107" text-style="Cell" color="$amber-ink" align="right" />
          </row>
          <row w="321" p="9 0" gap="6" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="Days on market" text-style="RowLabel" color="$muted" />
            <text w="88" value="6" text-style="Cell" color="$ink" align="right" />
            <text w="88" value="3" text-style="Cell" color="$ink" align="right" />
          </row>
          <row w="321" p="9 0 0 0" gap="6" align="middle-left">
            <text w="fill" value="Walk Score" text-style="RowLabel" color="$muted" />
            <text w="88" value="88" text-style="Cell" color="$amber-ink" align="right" />
            <text w="88" value="74" text-style="Cell" color="$ink" align="right" />
          </row>
        </col>
      </col>
      <!-- feature checklist -->
      <col w="353" fill="$slab" border="2 $ink" p="16" gap="12" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="Features" text-style="H2" color="$ink" />
          <text value="WHAT EACH HAS" text-style="LabelSm" color="$muted" align="right" />
        </row>
        <line w="321" fill="$line" thickness="2" role="divider" />
        <col w="321" gap="12">
          <row w="321" gap="6" align="middle-left">
            <text w="fill" value="Off-street garage" text-style="RowLabel" color="$ink" />
            <col w="88" h="30" fill="$amber" border="2 $ink" align="middle-center">
              <text value="2-CAR" text-style="LabelSm" color="$bg" />
            </col>
            <col w="88" h="30" fill="$amber" border="2 $ink" align="middle-center">
              <text value="1-CAR" text-style="LabelSm" color="$bg" />
            </col>
          </row>
          <row w="321" gap="6" align="middle-left">
            <text w="fill" value="Central air conditioning" text-style="RowLabel" color="$ink" />
            <col w="88" h="30" fill="$raised" border="2 $line" align="middle-center">
              <img src="https://api.iconify.design/lucide/x.svg?color=%23A7A395" w="15" h="15" />
            </col>
            <col w="88" h="30" fill="$amber" border="2 $ink" align="middle-center">
              <img src="https://api.iconify.design/lucide/check.svg?color=%23121210" w="15" h="15" />
            </col>
          </row>
          <row w="321" gap="6" align="middle-left">
            <text w="fill" value="Renovated kitchen" text-style="RowLabel" color="$ink" />
            <col w="88" h="30" fill="$amber" border="2 $ink" align="middle-center">
              <img src="https://api.iconify.design/lucide/check.svg?color=%23121210" w="15" h="15" />
            </col>
            <col w="88" h="30" fill="$raised" border="2 $line" align="middle-center">
              <img src="https://api.iconify.design/lucide/x.svg?color=%23A7A395" w="15" h="15" />
            </col>
          </row>
          <row w="321" gap="6" align="middle-left">
            <text w="fill" value="Finished basement" text-style="RowLabel" color="$ink" />
            <col w="88" h="30" fill="$raised" border="2 $line" align="middle-center">
              <img src="https://api.iconify.design/lucide/x.svg?color=%23A7A395" w="15" h="15" />
            </col>
            <col w="88" h="30" fill="$amber" border="2 $ink" align="middle-center">
              <img src="https://api.iconify.design/lucide/check.svg?color=%23121210" w="15" h="15" />
            </col>
          </row>
          <row w="321" gap="6" align="middle-left">
            <text w="fill" value="Fenced backyard" text-style="RowLabel" color="$ink" />
            <col w="88" h="30" fill="$amber" border="2 $ink" align="middle-center">
              <img src="https://api.iconify.design/lucide/check.svg?color=%23121210" w="15" h="15" />
            </col>
            <col w="88" h="30" fill="$amber" border="2 $ink" align="middle-center">
              <img src="https://api.iconify.design/lucide/check.svg?color=%23121210" w="15" h="15" />
            </col>
          </row>
        </col>
      </col>
      <!-- verdict / the pick -->
      <col w="353" fill="$slab" border="2 $ink" p="16" gap="13" role="card">
        <appearance>
          <fill type="color" value="#1C1B17" />
          <effect type="drop-shadow" x="6" y="6" radius="0" spread="0" color="#E7A33A" />
        </appearance>
        <row w="321" gap="10" align="middle-left">
          <text w="fill" value="The pick" text-style="H2" color="$ink" />
          <row p="6 10" gap="6" fill="$amber" align="middle-center" role="badge">
            <img src="https://api.iconify.design/lucide/badge-check.svg?color=%23121210" w="14" h="14" />
            <text value="WOODSTOCK" text-style="Label" color="$bg" />
          </row>
        </row>
        <text w="321" value="3915 SE Woodstock Blvd" text-style="VerdictHead" color="$ink" />
        <text
          w="321"
          value="Bigger home, cheaper per foot, and lighter to carry each month. Rex St still wins on walkability if that outweighs the extra bedroom."
          text-style="Body"
          color="$muted"
        />
        <line w="321" fill="$line" thickness="2" role="divider" />
        <!-- list price bars -->
        <text w="321" value="LIST PRICE" text-style="LabelSm" color="$muted" />
        <row w="321" gap="10" align="middle-center">
          <text w="52" value="REX" text-style="Delta" color="$muted" />
          <frame w="165" h="18" clip="true">
            <rect x="0" y="0" w="165" h="18" fill="$raised" />
            <rect x="0" y="0" w="165" h="18" fill="$muted" />
          </frame>
          <text w="fill" value="$812,000" text-style="Cell" color="$ink" align="right" />
        </row>
        <row w="321" gap="10" align="middle-center">
          <text w="52" value="WOOD" text-style="Delta" color="$amber-ink" />
          <frame w="165" h="18" clip="true">
            <rect x="0" y="0" w="165" h="18" fill="$raised" />
            <rect x="0" y="0" w="158" h="18" fill="$amber" />
          </frame>
          <text w="fill" value="$779,500" text-style="Cell" color="$amber-ink" align="right" />
        </row>
        <!-- interior size bars -->
        <text w="321" value="INTERIOR SIZE" text-style="LabelSm" color="$muted" />
        <row w="321" gap="10" align="middle-center">
          <text w="52" value="REX" text-style="Delta" color="$muted" />
          <frame w="165" h="18" clip="true">
            <rect x="0" y="0" w="165" h="18" fill="$raised" />
            <rect x="0" y="0" w="151" h="18" fill="$muted" />
          </frame>
          <text w="fill" value="1,940 sf" text-style="Cell" color="$ink" align="right" />
        </row>
        <row w="321" gap="10" align="middle-center">
          <text w="52" value="WOOD" text-style="Delta" color="$amber-ink" />
          <frame w="165" h="18" clip="true">
            <rect x="0" y="0" w="165" h="18" fill="$raised" />
            <rect x="0" y="0" w="165" h="18" fill="$amber" />
          </frame>
          <text w="fill" value="2,120 sf" text-style="Cell" color="$amber-ink" align="right" />
        </row>
        <line w="321" fill="$line" thickness="2" role="divider" />
        <!-- deltas -->
        <row w="321" gap="7" align="middle-left">
          <col w="fill" h="44" fill="$raised" border="2 $line" gap="1" p="0 10" align="middle-left">
            <text value="-$32,500" text-style="Delta" color="$amber-ink" />
            <text value="PRICE" text-style="LabelSm" color="$muted" />
          </col>
          <col w="fill" h="44" fill="$raised" border="2 $line" gap="1" p="0 10" align="middle-left">
            <text value="-$51/sf" text-style="Delta" color="$amber-ink" />
            <text value="PER FOOT" text-style="LabelSm" color="$muted" />
          </col>
          <col w="fill" h="44" fill="$raised" border="2 $line" gap="1" p="0 10" align="middle-left">
            <text value="+180 sf" text-style="Delta" color="$amber-ink" />
            <text value="SPACE" text-style="LabelSm" color="$muted" />
          </col>
        </row>
      </col>
      <text
        w="353"
        value="Estimates use 20% down, 6.9% APR, 30-yr fixed. Verify figures with your lender before touring."
        text-style="Sub"
        color="$muted"
        align="center"
      />
    </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/bookmark.svg?color=%23F4F1E8" w="17" h="17" />
          <text value="SAVE" text-style="BtnLabelSm" color="$ink" />
        </row>
        <row w="fill" h="52" fill="$amber" border="2 $ink" p="0 14" gap="8" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/calendar-check.svg?color=%23121210" w="18" h="18" />
          <text value="TOUR" text-style="BtnLabel" color="$bg" />
        </row>
      </row>
      <text
        w="353"
        value="Comparing 2 of 4 shortlisted homes · updated 2:14 PM"
        text-style="Sub"
        color="$muted"
        align="center"
      />
      <row w="353" h="14" align="bottom-center">
        <rect w="134" h="5" fill="$ink" />
      </row>
    </col>
  </col>
</gui>
```