---
title: "Casa Alameda — 412 Alameda Vista"
platform: ios
slug: casa-alameda-412-alameda-vista
screens: ["product-detail"]
domains: ["real-estate"]
style: null
fonts: ["SF Pro Display", "EB Garamond"]
roles: ["button"]
score: {clean: 100, consistent: 62, accessible: 90, comprehensible: 3}
url: https://gui.farm/ios/casa-alameda-412-alameda-vista
raw: https://gui.farm/ios/casa-alameda-412-alameda-vista/design.guix
download: https://gui.farm/ios/casa-alameda-412-alameda-vista.gui
---

# Casa Alameda — 412 Alameda Vista

An editorial iOS real-estate listing detail for a 1926 Spanish Revival home, with a photographic hero, spec strip, an estimated-monthly-payment breakdown, property facts, and an agent contact card.

- **Live preview:** https://gui.farm/ios/casa-alameda-412-alameda-vista
- **Raw source:** https://gui.farm/ios/casa-alameda-412-alameda-vista/design.guix
- **Download (.gui):** https://gui.farm/ios/casa-alameda-412-alameda-vista.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Casa Alameda — 412 Alameda Vista">
  <tokens>
    <color name="paper" value="#F4EEE3" />
    <color name="surface" value="#FBF7EF" />
    <color name="ink" value="#241F19" />
    <color name="ink-soft" value="#5A5348" />
    <color name="muted" value="#6E6656" />
    <color name="hairline" value="#E3D9C8" />
    <color name="accent" value="#B4472A" />
    <color name="accent-ink" value="#9A3B21" />
    <color name="tan" value="#C98A5E" />
    <color name="cream" value="#F4EEE3" />
  </tokens>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="EB Garamond" source="google" weights="400 500 600" styles="normal italic" />
  </fonts>
  <!-- No scroll: content-hugging col root, fixed bar is the last flow child. -->
  <col w="393" fill="$paper" align="top-center">
    <!-- iOS status bar (device chrome, untagged) -->
    <row w="fill" h="47" p="0 22" align="middle-left" gap="auto">
      <text value="9:41" font-family="SF Pro Display" font-size="15" font-weight="600" color="$ink" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23241F19" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23241F19" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23241F19" w="22" h="13" />
      </row>
    </row>
    <!-- Top bar -->
    <row w="fill" h="52" p="0 16" gap="auto" align="middle-center">
      <row w="40" h="40" radius="999" fill="$surface" border="1 $hairline" align="middle-center">
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%23241F19" w="20" h="20" />
      </row>
      <row gap="10" align="middle-right">
        <row w="40" h="40" radius="999" fill="$surface" border="1 $hairline" align="middle-center">
          <img src="https://api.iconify.design/lucide/share.svg?color=%23241F19" w="18" h="18" />
        </row>
        <row w="40" h="40" radius="999" fill="$surface" border="1 $hairline" align="middle-center">
          <img src="https://api.iconify.design/lucide/bookmark.svg?color=%23241F19" w="18" h="18" />
        </row>
      </row>
    </row>
    <!-- Hero photograph -->
    <frame w="393" h="300" clip="true" fill="$surface">
      <img
        abs="true"
        x="0"
        y="0"
        w="393"
        h="300"
        src="https://images.unsplash.com/photo-1759355787174-044355f63c55?auto=format&amp;fit=crop&amp;w=786&amp;h=600&amp;q=80"
        fit="cover"
      />
      <row abs="true" x="16" y="16" fill="$accent" radius="6" p="6 11" align="middle-center">
        <text
          value="FOR SALE"
          font-family="SF Pro Display"
          font-size="11"
          font-weight="700"
          letter-spacing="1.1"
          text-case="uppercase"
          color="$cream"
        />
      </row>
      <row abs="true" x="311" y="256" fill="#241F19B3" radius="999" p="6 11" gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/camera.svg?color=%23F4EEE3" w="14" h="14" />
        <text value="24" font-family="SF Pro Display" font-size="12" font-weight="600" color="$cream" />
      </row>
    </frame>
    <!-- Headline block -->
    <col w="fill" p="16 24">
      <text
        value="FOR SALE · OJAI, CALIFORNIA"
        font-family="SF Pro Display"
        font-size="12"
        font-weight="600"
        letter-spacing="1.6"
        text-case="uppercase"
        color="$accent-ink"
      />
      <text
        w="fill"
        pt="8"
        value="Casa Alameda"
        font-family="EB Garamond"
        font-size="40"
        font-weight="600"
        letter-spacing="-0.4"
        line-height="44"
        color="$ink"
      />
      <row w="fill" pt="12" gap="auto" align="middle-left">
        <text value="$1,285,000" font-family="EB Garamond" font-size="28" font-weight="500" color="$ink" />
        <text value="Listed 9 days ago" font-family="SF Pro Display" font-size="12" color="$muted" />
      </row>
      <row gap="7" pt="8" align="middle-left">
        <img src="https://api.iconify.design/lucide/map-pin.svg?color=%236E6656" w="15" h="15" />
        <text
          value="412 Alameda Vista, Ojai, CA 93023"
          font-family="SF Pro Display"
          font-size="14"
          color="$ink-soft"
        />
      </row>
    </col>
    <!-- Spec strip: 4 cells, hairline dividers -->
    <col w="fill" p="16 24">
      <row w="fill" fill="$surface" border="1 $hairline" radius="16" p="16 0" align="middle-center">
        <col w="fill" gap="3" align="top-center">
          <text value="3" font-family="EB Garamond" font-size="24" font-weight="500" color="$ink" />
          <text
            value="BEDS"
            font-family="SF Pro Display"
            font-size="10"
            font-weight="600"
            letter-spacing="0.8"
            text-case="uppercase"
            color="$muted"
          />
        </col>
        <rect w="1" h="34" fill="$hairline" />
        <col w="fill" gap="3" align="top-center">
          <text value="2" font-family="EB Garamond" font-size="24" font-weight="500" color="$ink" />
          <text
            value="BATHS"
            font-family="SF Pro Display"
            font-size="10"
            font-weight="600"
            letter-spacing="0.8"
            text-case="uppercase"
            color="$muted"
          />
        </col>
        <rect w="1" h="34" fill="$hairline" />
        <col w="fill" gap="3" align="top-center">
          <text value="1,940" font-family="EB Garamond" font-size="24" font-weight="500" color="$ink" />
          <text
            value="SQ FT"
            font-family="SF Pro Display"
            font-size="10"
            font-weight="600"
            letter-spacing="0.8"
            text-case="uppercase"
            color="$muted"
          />
        </col>
        <rect w="1" h="34" fill="$hairline" />
        <col w="fill" gap="3" align="top-center">
          <text value="0.31" font-family="EB Garamond" font-size="24" font-weight="500" color="$ink" />
          <text
            value="ACRE"
            font-family="SF Pro Display"
            font-size="10"
            font-weight="600"
            letter-spacing="0.8"
            text-case="uppercase"
            color="$muted"
          />
        </col>
      </row>
    </col>
    <!-- Editorial lead -->
    <col w="fill" p="16 24">
      <text
        w="fill"
        value="A 1926 Spanish Revival tucked behind an olive tree on the east end of the valley. Arched doorways, hand-glazed Saltillo tile, and a walled courtyard that catches the afternoon light. Restored in 2023 with radiant floors and a new clay-tile roof, it keeps the patina and loses the maintenance."
        font-family="SF Pro Display"
        font-size="15"
        line-height="26"
        color="$ink-soft"
      />
    </col>
    <!-- Estimated monthly + stacked bar -->
    <col w="fill" p="16 24">
      <col w="fill" fill="$surface" border="1 $hairline" radius="18" p="16 18" gap="4">
        <row w="fill" gap="auto" align="middle-left">
          <text
            value="ESTIMATED MONTHLY"
            font-family="SF Pro Display"
            font-size="12"
            font-weight="600"
            letter-spacing="1.2"
            text-case="uppercase"
            color="$accent-ink"
          />
          <text value="$662 / sq ft" font-family="SF Pro Display" font-size="12" color="$muted" />
        </row>
        <row w="fill" pt="6" gap="auto" align="bottom-left">
          <text value="$8,025" font-family="EB Garamond" font-size="34" font-weight="500" color="$ink" />
          <text value="/ mo" font-family="SF Pro Display" font-size="14" color="$muted" pb="4" />
        </row>
        <!-- stacked bar: 288 + 51 + 6 = 345 -->
        <row w="fill" h="10" radius="5" clip="true" pt="0" align="middle-left">
          <rect w="fill" h="10" fill="$accent" />
          <rect w="51" h="10" fill="$tan" />
          <rect w="6" h="10" fill="$muted" />
        </row>
        <col w="fill" pt="14" gap="10">
          <row w="fill" gap="auto" align="middle-left">
            <row gap="8" align="middle-center">
              <ellipse w="9" h="9" fill="$accent" />
              <text
                value="Principal &amp; interest"
                font-family="SF Pro Display"
                font-size="14"
                color="$ink-soft"
              />
            </row>
            <text value="$6,702" font-family="SF Pro Display" font-size="14" font-weight="600" color="$ink" />
          </row>
          <row w="fill" gap="auto" align="middle-left">
            <row gap="8" align="middle-center">
              <ellipse w="9" h="9" fill="$tan" />
              <text value="Property tax" font-family="SF Pro Display" font-size="14" color="$ink-soft" />
            </row>
            <text value="$1,178" font-family="SF Pro Display" font-size="14" font-weight="600" color="$ink" />
          </row>
          <row w="fill" gap="auto" align="middle-left">
            <row gap="8" align="middle-center">
              <ellipse w="9" h="9" fill="$muted" />
              <text
                value="Homeowner's insurance"
                font-family="SF Pro Display"
                font-size="14"
                color="$ink-soft"
              />
            </row>
            <text value="$145" font-family="SF Pro Display" font-size="14" font-weight="600" color="$ink" />
          </row>
        </col>
        <text
          w="fill"
          pt="14"
          value="30-yr fixed at 6.8%, 20% down ($257,000 on a $1,028,000 loan)."
          font-family="SF Pro Display"
          font-size="12"
          line-height="18"
          color="$muted"
        />
      </col>
    </col>
    <!-- Facts list -->
    <col w="fill" p="16 24" gap="16">
      <text
        value="THE DETAILS"
        font-family="SF Pro Display"
        font-size="12"
        font-weight="600"
        letter-spacing="1.2"
        text-case="uppercase"
        color="$muted"
      />
      <col w="fill" pt="10" fill="$surface" border="1 $hairline" radius="16" p="4 18">
        <row w="fill" p="14 0" gap="auto" align="middle-center" border-bottom="1 $hairline">
          <text value="Year built" font-family="SF Pro Display" font-size="14" color="$muted" />
          <text value="1926" font-family="SF Pro Display" font-size="14" font-weight="600" color="$ink" />
        </row>
        <row w="fill" p="14 0" gap="auto" align="middle-center" border-bottom="1 $hairline">
          <text value="Property type" font-family="SF Pro Display" font-size="14" color="$muted" />
          <text
            value="Single-family"
            font-family="SF Pro Display"
            font-size="14"
            font-weight="600"
            color="$ink"
          />
        </row>
        <row w="fill" p="14 0" gap="auto" align="middle-center" border-bottom="1 $hairline">
          <text value="Heating" font-family="SF Pro Display" font-size="14" color="$muted" />
          <text
            value="Radiant floor"
            font-family="SF Pro Display"
            font-size="14"
            font-weight="600"
            color="$ink"
          />
        </row>
        <row w="fill" p="14 0" gap="auto" align="middle-center" border-bottom="1 $hairline">
          <text value="Parking" font-family="SF Pro Display" font-size="14" color="$muted" />
          <text
            value="2-car, detached"
            font-family="SF Pro Display"
            font-size="14"
            font-weight="600"
            color="$ink"
          />
        </row>
        <row w="fill" p="14 0" gap="auto" align="middle-center">
          <text value="MLS number" font-family="SF Pro Display" font-size="14" color="$muted" />
          <text value="OJ-224471" font-family="SF Pro Display" font-size="14" font-weight="600" color="$ink" />
        </row>
      </col>
    </col>
    <!-- Listing agent -->
    <col w="fill" p="16 24">
      <row w="fill" fill="$surface" border="1 $hairline" radius="18" p="16" gap="14" align="middle-left">
        <col w="52" h="52" radius="999" fill="$accent" align="middle-center">
          <text value="MV" font-family="EB Garamond" font-size="19" font-weight="600" color="$cream" />
        </col>
        <col w="fill" gap="3">
          <text
            value="Marisol Vega"
            font-family="SF Pro Display"
            font-size="16"
            font-weight="600"
            color="$ink"
          />
          <text
            value="Ojai Valley Realty · DRE #01984472"
            font-family="SF Pro Display"
            font-size="12"
            color="$muted"
          />
        </col>
        <row gap="10" align="middle-right">
          <row w="42" h="42" radius="999" fill="$paper" border="1 $hairline" align="middle-center">
            <img src="https://api.iconify.design/lucide/message-circle.svg?color=%239A3B21" w="18" h="18" />
          </row>
          <row w="42" h="42" radius="999" fill="$paper" border="1 $hairline" align="middle-center">
            <img src="https://api.iconify.design/lucide/phone.svg?color=%239A3B21" w="18" h="18" />
          </row>
        </row>
      </row>
    </col>
    <!-- Fixed action bar: last flow child (re-anchored to bottom) -->
    <col w="fill" fill="#F4EEE3F2" border-top="1 $hairline">
      <row w="fill" p="14 20 12" gap="14" align="middle-center">
        <col gap="1">
          <text value="$1,285,000" font-family="SF Pro Display" font-size="16" font-weight="600" color="$ink" />
          <text value="Est. $8,025/mo" font-family="SF Pro Display" font-size="12" color="$muted" />
        </col>
        <row w="fill" h="52" radius="14" fill="$accent" gap="9" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/calendar-check.svg?color=%23FFFFFF" w="18" h="18" />
          <text
            value="Schedule Tour"
            font-family="SF Pro Display"
            font-size="15"
            font-weight="600"
            color="#FFFFFF"
          />
        </row>
      </row>
      <row w="fill" p="0 0 10" align="middle-center">
        <rect w="134" h="5" radius="3" fill="$ink" />
      </row>
    </col>
  </col>
</gui>
```