---
title: "Larkspur Court - Plan B, Unit 4B Floor Plan"
platform: android
slug: larkspur-court-plan-b-unit-4b-floor-plan
screens: []
domains: ["real-estate"]
style: "skeuomorphic"
fonts: ["Roboto", "Roboto Mono"]
roles: ["top-navigation-bar", "button", "card", "badge", "segmented-control", "divider", "chip", "tab-bar"]
score: {clean: 100, consistent: 68, accessible: 68, comprehensible: 54}
url: https://gui.farm/android/larkspur-court-plan-b-unit-4b-floor-plan
raw: https://gui.farm/android/larkspur-court-plan-b-unit-4b-floor-plan/design.guix
download: https://gui.farm/android/larkspur-court-plan-b-unit-4b-floor-plan.gui
---

# Larkspur Court - Plan B, Unit 4B Floor Plan

A skeuomorphic Android floor-plan viewer for a rental apartment listing, showing a to-scale room layout with dimensions, a per-room square-footage breakdown, and a schedule-a-tour action.

- **Live preview:** https://gui.farm/android/larkspur-court-plan-b-unit-4b-floor-plan
- **Raw source:** https://gui.farm/android/larkspur-court-plan-b-unit-4b-floor-plan/design.guix
- **Download (.gui):** https://gui.farm/android/larkspur-court-plan-b-unit-4b-floor-plan.gui

## Source (design.guix)

```xml
<?xml version="1.0" encoding="UTF-8"?>
<gui version="0.2" name="Larkspur Court - Plan B, Unit 4B Floor Plan">
  <mode name="theme" values="light dark" default="light" />

  <tokens>
    <color name="bg"         value="#E7DFD0" />
    <color name="paper"      value="#FBF8F1" />
    <color name="paper-2"    value="#F1E9DA" />
    <color name="ink"        value="#262119" />
    <color name="ink-2"      value="#5E5647" />
    <color name="ink-3"      value="#756C5B" />
    <color name="wall"       value="#322B20" />
    <color name="hair"       value="#D9CFBD" />
    <color name="room"       value="#EFE6D3" />
    <color name="amber"      value="#C77C1B" />
    <color name="amber-br"   value="#E6A23A" />
    <color name="amber-dp"   value="#CE851E" />
    <color name="amber-text" value="#8A4D08" />
    <color name="amber-ink"  value="#5A3305" />
    <color name="amber-tint" value="#F4E5C9" />
    <color name="on-cta"     value="#3A2306" />

    <number name="r-card" value="18" />
    <number name="r-tile" value="12" />
    <number name="r-pill" value="999" />
    <number name="r-sm"   value="8" />
  </tokens>

  <fonts>
    <font family="Roboto"      source="google" weights="400 500 600 700" styles="normal" />
    <font family="Roboto Mono" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>

  <styles>
    <text-style name="Status"   font-family="Roboto"      font-size="13" font-weight="600" line-height="16" />
    <text-style name="Eyebrow"  font-family="Roboto"      font-size="11" font-weight="700" line-height="14" letter-spacing="1.4" />
    <text-style name="NavTitle" font-family="Roboto"      font-size="16" font-weight="700" line-height="20" />
    <text-style name="Price"    font-family="Roboto Mono" font-size="20" font-weight="700" line-height="24" letter-spacing="-0.5" />
    <text-style name="PriceU"   font-family="Roboto"      font-size="13" font-weight="500" line-height="17" />
    <text-style name="Addr"     font-family="Roboto"      font-size="13" font-weight="500" line-height="18" />
    <text-style name="Seg"      font-family="Roboto"      font-size="13" font-weight="600" line-height="17" />
    <text-style name="PlanLbl"  font-family="Roboto"      font-size="14" font-weight="700" line-height="18" />
    <text-style name="Dims"     font-family="Roboto Mono" font-size="11" font-weight="600" line-height="14" letter-spacing="0.2" />
    <text-style name="RoomName" font-family="Roboto"      font-size="12" font-weight="700" line-height="15" />
    <text-style name="RoomMeta" font-family="Roboto Mono" font-size="10" font-weight="500" line-height="13" />
    <text-style name="Scale"    font-family="Roboto Mono" font-size="10" font-weight="600" line-height="13" letter-spacing="0.3" />
    <text-style name="Compass"  font-family="Roboto Mono" font-size="10" font-weight="700" line-height="12" />
    <text-style name="SecHead"  font-family="Roboto"      font-size="14" font-weight="700" line-height="18" />
    <text-style name="LegName"  font-family="Roboto"      font-size="13" font-weight="600" line-height="17" />
    <text-style name="LegDim"   font-family="Roboto Mono" font-size="11" font-weight="500" line-height="15" />
    <text-style name="LegVal"   font-family="Roboto Mono" font-size="13" font-weight="700" line-height="17" />
    <text-style name="StatVal"  font-family="Roboto Mono" font-size="17" font-weight="700" line-height="20" letter-spacing="-0.5" />
    <text-style name="StatLbl"  font-family="Roboto"      font-size="9"  font-weight="700" line-height="12" letter-spacing="0.6" />
    <text-style name="Chip"     font-family="Roboto"      font-size="12" font-weight="600" line-height="16" />
    <text-style name="Btn"      font-family="Roboto"      font-size="15" font-weight="700" line-height="20" />
    <text-style name="Nav"      font-family="Roboto"      font-size="11" font-weight="500" line-height="14" />
    <text-style name="Badge"    font-family="Roboto"      font-size="10" font-weight="700" line-height="13" letter-spacing="0.4" />
  </styles>

  <col w="360" fill="$bg" gap="14" align="top-center">

    <!-- Status bar (untagged device chrome) -->
    <row w="fill" p="12 16 0" align="middle-center" gap="auto">
      <text text-style="Status" value="9:41" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%23262119" w="16" h="16" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%23262119" w="16" h="16" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt.svg?color=%23262119" w="16" h="16" />
      </row>
    </row>

    <!-- Top navigation -->
    <row role="top-navigation-bar" w="fill" p="2 12 0" align="middle-center" gap="auto">
      <col role="button" w="40" h="40" radius="$r-pill" fill="$paper" align="middle-center" border="1 $hair">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F0E9DB 100%)" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
          <effect type="drop-shadow" x="0" y="2" radius="6" spread="0" color="#2A200F1F" />
        </appearance>
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23262119" w="23" h="23" />
      </col>
      <col gap="2" align="middle-center">
        <text text-style="Eyebrow" text-case="uppercase" value="Larkspur Court" color="$amber-text" align="center" />
        <text text-style="NavTitle" value="Plan B · Unit 4B" color="$ink" align="center" />
      </col>
      <col role="button" w="40" h="40" radius="$r-pill" fill="$paper" align="middle-center" border="1 $hair">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F0E9DB 100%)" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
          <effect type="drop-shadow" x="0" y="2" radius="6" spread="0" color="#2A200F1F" />
        </appearance>
        <img src="https://api.iconify.design/material-symbols/ios-share.svg?color=%23262119" w="20" h="20" />
      </col>
    </row>

    <!-- Unit header card -->
    <row role="card" w="328" radius="$r-card" p="12" gap="13" fill="$paper" border="1 $hair" align="middle-left">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F5EFE2 100%)" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
        <effect type="drop-shadow" x="0" y="6" radius="16" spread="-4" color="#2A200F26" />
      </appearance>
      <frame w="64" h="64" radius="$r-tile">
        <rect x="0" y="0" w="64" h="64" radius="$r-tile" fill="$room" />
        <img x="0" y="0" src="https://images.unsplash.com/photo-1749930206000-179d0b85aa7e?w=256&amp;h=256&amp;fit=crop&amp;q=80&amp;auto=format" w="64" h="64" radius="$r-tile" fit="cover" />
        <row abs="true" x="4" y="44" role="badge" h="16" radius="$r-pill" fill="#1B160DCC" p="0 6" gap="3" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/photo-camera-outline-rounded.svg?color=%23FBF8F1" w="10" h="10" />
          <text text-style="Badge" value="24" color="$paper" />
        </row>
      </frame>
      <col w="fill" gap="4" align="top-left">
        <row gap="4" align="bottom-left">
          <text text-style="Price" value="$3,150" color="$ink" />
          <text text-style="PriceU" value="/mo" color="$ink-2" pb="2" />
        </row>
        <text text-style="Addr" value="1200 Marlowe St, Apt 4B" color="$ink-2" />
        <row role="badge" h="19" radius="$r-pill" fill="$amber-tint" p="0 8" gap="4" align="middle-center" border="1 #E3C98F">
          <ellipse w="6" h="6" fill="$amber" />
          <text text-style="Badge" value="AVAILABLE SEP 1" color="$amber-text" />
        </row>
      </col>
      <col role="button" w="38" h="38" radius="$r-pill" fill="$paper-2" align="middle-center" border="1 $hair">
        <img src="https://api.iconify.design/material-symbols/bookmark-outline-rounded.svg?color=%238A4D08" w="21" h="21" />
      </col>
    </row>

    <!-- Plan variant selector -->
    <row role="segmented-control" w="328" h="42" radius="$r-pill" fill="$paper-2" p="4" gap="4" align="middle-center" border="1 $hair">
      <col w="fill" h="fill" radius="$r-pill" align="middle-center">
        <text text-style="Seg" value="A · 1BR" color="$ink-2" />
      </col>
      <col w="fill" h="fill" radius="$r-pill" align="middle-center" fill="$amber">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #E6A23A 0%, #CE851E 100%)" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF66" />
          <effect type="drop-shadow" x="0" y="2" radius="6" spread="0" color="#9A5E0F59" />
        </appearance>
        <text text-style="Seg" value="B · 2BR" color="$on-cta" />
      </col>
      <col w="fill" h="fill" radius="$r-pill" align="middle-center">
        <text text-style="Seg" value="C · 2BR+Den" color="$ink-2" />
      </col>
    </row>

    <!-- Floor plan card -->
    <col role="card" w="328" radius="$r-card" p="16" gap="13" fill="$paper" border="1 $hair" align="top-center">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F4EEE0 100%)" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
        <effect type="drop-shadow" x="0" y="8" radius="20" spread="-6" color="#2A200F2E" />
      </appearance>

      <row w="fill" align="middle-left" gap="auto">
        <col gap="3" align="top-left">
          <text text-style="Eyebrow" text-case="uppercase" value="Floor Plan" color="$amber-text" />
          <text text-style="PlanLbl" value="Level 4 · 816 sq ft" color="$ink" />
        </col>
        <row role="badge" h="24" radius="$r-sm" fill="$paper-2" p="0 9" gap="5" align="middle-center" border="1 $hair">
          <img src="https://api.iconify.design/material-symbols/straighten-outline-rounded.svg?color=%235E5647" w="14" h="14" />
          <text text-style="Dims" value="34 × 24 ft" color="$ink-2" />
        </row>
      </row>

      <line w="fill" fill="$hair" role="divider" />

      <!-- The drawing -->
      <frame w="296" h="250">
        <!-- wall backing -->
        <rect x="16" y="20" w="272" h="192" radius="3" fill="$wall" />

        <!-- room fills (inset 2px = walls) -->
        <rect x="18"  y="22"  w="156" h="108" radius="2" fill="$room" />
        <rect x="178" y="22"  w="108" h="68"  radius="2" fill="$room" />
        <rect x="178" y="94"  w="108" h="60"  radius="2" fill="$room" />
        <rect x="178" y="158" w="108" h="52"  radius="2" fill="$room" />
        <rect x="18"  y="134" w="156" h="76"  radius="2" fill="$amber-tint" border="1.5 $amber" />

        <!-- doorway threshold gaps -->
        <rect x="86"  y="129" w="20" h="6" fill="$room" />
        <rect x="172" y="48"  w="8"  h="18" fill="$room" />
        <rect x="172" y="118" w="8"  h="16" fill="$room" />

        <!-- room labels -->
        <col abs="true" x="18" y="22" w="156" h="108" align="middle-center" gap="3">
          <img src="https://api.iconify.design/material-symbols/weekend-outline-rounded.svg?color=%235E5647" w="18" h="18" />
          <text text-style="RoomName" value="Living &amp; Dining" color="$ink" align="center" />
          <text text-style="RoomMeta" value="20' × 14' · 280 sq ft" color="$ink-2" align="center" />
        </col>

        <col abs="true" x="178" y="22" w="108" h="68" align="middle-center" gap="2">
          <img src="https://api.iconify.design/material-symbols/countertops-outline-rounded.svg?color=%235E5647" w="16" h="16" />
          <text text-style="RoomName" value="Kitchen" color="$ink" align="center" />
          <text text-style="RoomMeta" value="14' × 9' · 126" color="$ink-2" align="center" />
        </col>

        <col abs="true" x="178" y="94" w="108" h="60" align="middle-center" gap="2">
          <img src="https://api.iconify.design/material-symbols/bed-outline-rounded.svg?color=%235E5647" w="16" h="16" />
          <text text-style="RoomName" value="Bedroom 2" color="$ink" align="center" />
          <text text-style="RoomMeta" value="14' × 8' · 112" color="$ink-2" align="center" />
        </col>

        <col abs="true" x="178" y="158" w="108" h="52" align="middle-center" gap="2">
          <img src="https://api.iconify.design/material-symbols/bathtub-outline-rounded.svg?color=%235E5647" w="15" h="15" />
          <text text-style="RoomName" value="Bath" color="$ink" align="center" />
          <text text-style="RoomMeta" value="14' × 7' · 98" color="$ink-2" align="center" />
        </col>

        <col abs="true" x="18" y="134" w="156" h="76" align="middle-center" gap="3">
          <img src="https://api.iconify.design/material-symbols/king-bed-outline-rounded.svg?color=%238A4D08" w="18" h="18" />
          <text text-style="RoomName" value="Primary Bedroom" color="$amber-ink" align="center" />
          <text text-style="RoomMeta" value="20' × 10' · 200 sq ft" color="$amber-text" align="center" />
        </col>

        <!-- compass rose -->
        <col abs="true" x="255" y="25" w="28" h="30" radius="$r-sm" fill="$paper" align="middle-center" gap="0" border="1 $hair">
          <appearance>
            <effect type="drop-shadow" x="0" y="1" radius="4" spread="0" color="#2A200F26" />
          </appearance>
          <img src="https://api.iconify.design/material-symbols/navigation-rounded.svg?color=%23C77C1B" w="14" h="14" />
          <text text-style="Compass" value="N" color="$amber-text" align="center" />
        </col>

        <!-- scale bar -->
        <rect x="18" y="228" w="2"  h="11" fill="$ink-2" />
        <rect x="18" y="232" w="40" h="3"  radius="1" fill="$amber" />
        <rect x="56" y="228" w="2"  h="11" fill="$ink-2" />
        <text abs="true" x="64" y="228" text-style="Scale" value="5 ft" color="$amber-text" />
      </frame>
    </col>

    <!-- Room breakdown -->
    <col role="card" w="328" radius="$r-card" p="4 16" gap="0" fill="$paper" border="1 $hair">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F5EFE2 100%)" />
        <effect type="drop-shadow" x="0" y="6" radius="16" spread="-4" color="#2A200F24" />
      </appearance>

      <row w="fill" p="12 0 10" align="middle-left" gap="auto">
        <text text-style="SecHead" value="Room breakdown" color="$ink" />
        <text text-style="StatLbl" text-case="uppercase" value="Interior area" color="$ink-3" />
      </row>
      <line w="fill" fill="$hair" role="divider" />

      <row w="fill" p="11 0" align="middle-left" gap="auto">
        <col gap="2" align="top-left">
          <text text-style="LegName" value="Living &amp; Dining" color="$ink" />
          <text text-style="LegDim" value="20' × 14'" color="$ink-3" />
        </col>
        <text text-style="LegVal" value="280" color="$ink" />
      </row>
      <line w="fill" fill="$hair" role="divider" />
      <row w="fill" p="11 0" align="middle-left" gap="auto">
        <col gap="2" align="top-left">
          <text text-style="LegName" value="Primary Bedroom" color="$amber-text" />
          <text text-style="LegDim" value="20' × 10'" color="$ink-3" />
        </col>
        <text text-style="LegVal" value="200" color="$amber-text" />
      </row>
      <line w="fill" fill="$hair" role="divider" />
      <row w="fill" p="11 0" align="middle-left" gap="auto">
        <col gap="2" align="top-left">
          <text text-style="LegName" value="Kitchen" color="$ink" />
          <text text-style="LegDim" value="14' × 9'" color="$ink-3" />
        </col>
        <text text-style="LegVal" value="126" color="$ink" />
      </row>
      <line w="fill" fill="$hair" role="divider" />
      <row w="fill" p="11 0" align="middle-left" gap="auto">
        <col gap="2" align="top-left">
          <text text-style="LegName" value="Bedroom 2" color="$ink" />
          <text text-style="LegDim" value="14' × 8'" color="$ink-3" />
        </col>
        <text text-style="LegVal" value="112" color="$ink" />
      </row>
      <line w="fill" fill="$hair" role="divider" />
      <row w="fill" p="11 0" align="middle-left" gap="auto">
        <col gap="2" align="top-left">
          <text text-style="LegName" value="Bath" color="$ink" />
          <text text-style="LegDim" value="14' × 7'" color="$ink-3" />
        </col>
        <text text-style="LegVal" value="98" color="$ink" />
      </row>
      <line w="fill" fill="$hair" role="divider" />
      <row w="fill" p="12 0 14" align="middle-left" gap="auto">
        <text text-style="SecHead" value="Total interior" color="$ink" />
        <row gap="4" align="bottom-left">
          <text text-style="LegVal" value="816" color="$amber-text" />
          <text text-style="LegDim" value="sq ft" color="$ink-2" pb="1" />
        </row>
      </row>
    </col>

    <!-- Key stats -->
    <row w="328" gap="10" align="top-center">
      <col role="card" w="fill" h="72" radius="$r-tile" fill="$paper" align="middle-center" gap="4" border="1 $hair">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F3ECDE 100%)" />
          <effect type="drop-shadow" x="0" y="3" radius="8" spread="0" color="#2A200F1F" />
        </appearance>
        <img src="https://api.iconify.design/material-symbols/king-bed-outline-rounded.svg?color=%23C77C1B" w="19" h="19" />
        <text text-style="StatVal" value="2" color="$ink" />
        <text text-style="StatLbl" text-case="uppercase" value="Beds" color="$ink-3" />
      </col>
      <col role="card" w="fill" h="72" radius="$r-tile" fill="$paper" align="middle-center" gap="4" border="1 $hair">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F3ECDE 100%)" />
          <effect type="drop-shadow" x="0" y="3" radius="8" spread="0" color="#2A200F1F" />
        </appearance>
        <img src="https://api.iconify.design/material-symbols/bathtub-outline-rounded.svg?color=%23C77C1B" w="19" h="19" />
        <text text-style="StatVal" value="1" color="$ink" />
        <text text-style="StatLbl" text-case="uppercase" value="Bath" color="$ink-3" />
      </col>
      <col role="card" w="fill" h="72" radius="$r-tile" fill="$paper" align="middle-center" gap="4" border="1 $hair">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F3ECDE 100%)" />
          <effect type="drop-shadow" x="0" y="3" radius="8" spread="0" color="#2A200F1F" />
        </appearance>
        <img src="https://api.iconify.design/material-symbols/square-foot-rounded.svg?color=%23C77C1B" w="19" h="19" />
        <text text-style="StatVal" value="816" color="$ink" />
        <text text-style="StatLbl" text-case="uppercase" value="Sq ft" color="$ink-3" />
      </col>
      <col role="card" w="fill" h="72" radius="$r-tile" fill="$paper" align="middle-center" gap="4" border="1 $hair">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F3ECDE 100%)" />
          <effect type="drop-shadow" x="0" y="3" radius="8" spread="0" color="#2A200F1F" />
        </appearance>
        <img src="https://api.iconify.design/material-symbols/explore-outline-rounded.svg?color=%23C77C1B" w="19" h="19" />
        <text text-style="StatVal" value="SE" color="$ink" />
        <text text-style="StatLbl" text-case="uppercase" value="Facing" color="$ink-3" />
      </col>
    </row>

    <!-- Amenities -->
    <col w="328" gap="8" align="top-left">
      <row w="fill" gap="8" align="middle-left">
        <row role="chip" h="30" radius="$r-pill" fill="$paper" p="0 12" gap="6" align="middle-center" border="1 $hair">
          <img src="https://api.iconify.design/material-symbols/local-laundry-service-outline-rounded.svg?color=%238A4D08" w="15" h="15" />
          <text text-style="Chip" value="In-unit laundry" color="$ink" />
        </row>
        <row role="chip" h="30" radius="$r-pill" fill="$paper" p="0 12" gap="6" align="middle-center" border="1 $hair">
          <img src="https://api.iconify.design/material-symbols/balcony-outline-rounded.svg?color=%238A4D08" w="15" h="15" />
          <text text-style="Chip" value="Private balcony" color="$ink" />
        </row>
      </row>
      <row w="fill" gap="8" align="middle-left">
        <row role="chip" h="30" radius="$r-pill" fill="$paper" p="0 12" gap="6" align="middle-center" border="1 $hair">
          <img src="https://api.iconify.design/material-symbols/dishwasher-gen-outline-rounded.svg?color=%238A4D08" w="15" h="15" />
          <text text-style="Chip" value="Dishwasher" color="$ink" />
        </row>
        <row role="chip" h="30" radius="$r-pill" fill="$paper" p="0 12" gap="6" align="middle-center" border="1 $hair">
          <img src="https://api.iconify.design/material-symbols/mode-fan-outline-rounded.svg?color=%238A4D08" w="15" h="15" />
          <text text-style="Chip" value="Central air" color="$ink" />
        </row>
        <row role="chip" h="30" radius="$r-pill" fill="$paper" p="0 12" gap="6" align="middle-center" border="1 $hair">
          <img src="https://api.iconify.design/material-symbols/pets-rounded.svg?color=%238A4D08" w="15" h="15" />
          <text text-style="Chip" value="Pet friendly" color="$ink" />
        </row>
      </row>
    </col>

    <!-- Primary action -->
    <col role="button" w="328" h="52" radius="$r-pill" align="middle-center" fill="$amber">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #E6A23A 0%, #CE851E 100%)" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF80" />
        <effect type="drop-shadow" x="0" y="6" radius="16" spread="-4" color="#9A5E0F66" />
      </appearance>
      <row gap="9" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/calendar-month-outline-rounded.svg?color=%233A2306" w="20" h="20" />
        <text text-style="Btn" value="Schedule a tour" color="$on-cta" />
      </row>
    </col>

    <!-- Tab bar (viewport-fixed, last flow child) -->
    <col role="tab-bar" w="fill" fill="$paper" border="1 $hair" align="top-center">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F1EADC 100%)" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
      </appearance>
      <row w="fill" h="60" p="9 24 0" align="top-center" gap="auto">
        <col w="56" align="top-center" gap="5">
          <img src="https://api.iconify.design/material-symbols/info-outline-rounded.svg?color=%23756C5B" w="23" h="23" />
          <text text-style="Nav" value="Overview" color="$ink-3" align="center" />
        </col>
        <col w="56" align="top-center" gap="5">
          <col w="40" h="26" radius="$r-pill" fill="$amber-tint" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/square-foot-rounded.svg?color=%23C77C1B" w="22" h="22" />
          </col>
          <text text-style="Nav" value="Floor plan" color="$amber-text" align="center" />
        </col>
        <col w="56" align="top-center" gap="5">
          <img src="https://api.iconify.design/material-symbols/photo-library-outline-rounded.svg?color=%23756C5B" w="23" h="23" />
          <text text-style="Nav" value="Gallery" color="$ink-3" align="center" />
        </col>
        <col w="56" align="top-center" gap="5">
          <img src="https://api.iconify.design/material-symbols/bookmark-outline-rounded.svg?color=%23756C5B" w="23" h="23" />
          <text text-style="Nav" value="Saved" color="$ink-3" align="center" />
        </col>
      </row>
      <row w="fill" h="20" align="middle-center">
        <rect w="108" h="4" radius="$r-pill" fill="$hair" />
      </row>
    </col>

  </col>
</gui>

```