---
title: "Kona Pacific KP 176 - Live Flight, SFO to Honolulu"
platform: ios
slug: kona-pacific-kp-176-live-flight-sfo-to-honolulu
screens: []
domains: ["travel"]
style: "glassmorphism"
fonts: ["SF Pro Display", "JetBrains Mono"]
roles: ["top-navigation-bar", "button", "card", "divider", "badge", "tab-bar"]
score: {clean: 100, consistent: 69, accessible: 32, comprehensible: 28}
url: https://gui.farm/ios/kona-pacific-kp-176-live-flight-sfo-to-honolulu
raw: https://gui.farm/ios/kona-pacific-kp-176-live-flight-sfo-to-honolulu/design.guix
download: https://gui.farm/ios/kona-pacific-kp-176-live-flight-sfo-to-honolulu.gui
---

# Kona Pacific KP 176 - Live Flight, SFO to Honolulu

A dark glassmorphism iOS live flight-tracker where a passenger mid-flight follows Kona Pacific KP 176 from San Francisco to Honolulu, with a route-progress line at 62%, live altitude/speed/distance stats, a flight timeline, and arrival gate and seat details.

- **Live preview:** https://gui.farm/ios/kona-pacific-kp-176-live-flight-sfo-to-honolulu
- **Raw source:** https://gui.farm/ios/kona-pacific-kp-176-live-flight-sfo-to-honolulu/design.guix
- **Download (.gui):** https://gui.farm/ios/kona-pacific-kp-176-live-flight-sfo-to-honolulu.gui

## Source (design.guix)

```xml
<?xml version="1.0" encoding="UTF-8"?>
<gui version="0.2" name="Kona Pacific KP 176 - Live Flight, SFO to Honolulu">
  <tokens>
    <color name="text" value="#FBF4F8" />
    <color name="text-2" value="#DBC9D4" />
    <color name="text-3" value="#A99AA5" />
    <color name="glass" value="#FFFFFF10" />
    <color name="glass-2" value="#FFFFFF1A" />
    <color name="glass-line" value="#FFFFFF2E" />
    <color name="glass-line-soft" value="#FFFFFF18" />
    <color name="track" value="#FFFFFF26" />
    <color name="track-soft" value="#FFFFFF14" />
    <color name="rose" value="#F0468A" />
    <color name="rose-ink" value="#2A0713" />
    <color name="rose-text" value="#FF9CC1" />
    <color name="rose-soft" value="#F0468A2B" />
    <color name="rose-tint" value="#F0468A14" />
    <color name="amber" value="#F2B455" />
    <color name="amber-text" value="#F7C87E" />
    <color name="green" value="#4BD6A6" />
    <number name="r-card" value="22" />
    <number name="r-pill" value="999" />
    <number name="r-sm" value="12" />
    <number name="r-bar" value="3" />
  </tokens>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="JetBrains Mono" source="google" weights="500 600 700" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Clock" font-family="SF Pro Display" font-size="14" font-weight="600" line-height="18" />
    <text-style
      name="NavKick"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="700"
      line-height="12"
      letter-spacing="0.8"
    />
    <text-style
      name="NavTitle"
      font-family="JetBrains Mono"
      font-size="15"
      font-weight="700"
      line-height="18"
      letter-spacing="0.4"
    />
    <text-style
      name="Pill"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="700"
      line-height="12"
      letter-spacing="0.8"
    />
    <text-style
      name="HeroTitle"
      font-family="SF Pro Display"
      font-size="23"
      font-weight="700"
      line-height="27"
      letter-spacing="-0.3"
    />
    <text-style name="HeroSub" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Code"
      font-family="JetBrains Mono"
      font-size="28"
      font-weight="700"
      line-height="30"
      letter-spacing="-0.5"
    />
    <text-style name="City" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="15" />
    <text-style
      name="Chip"
      font-family="JetBrains Mono"
      font-size="10"
      font-weight="700"
      line-height="12"
      letter-spacing="0.4"
    />
    <text-style name="EndTime" font-family="JetBrains Mono" font-size="13" font-weight="700" line-height="16" />
    <text-style name="EndMeta" font-family="SF Pro Display" font-size="11" font-weight="500" line-height="14" />
    <text-style
      name="CardH"
      font-family="SF Pro Display"
      font-size="12"
      font-weight="700"
      line-height="15"
      letter-spacing="0.8"
    />
    <text-style
      name="StatLabel"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="0.6"
    />
    <text-style
      name="StatNum"
      font-family="JetBrains Mono"
      font-size="18"
      font-weight="700"
      line-height="21"
      letter-spacing="-0.4"
    />
    <text-style
      name="StatUnit"
      font-family="SF Pro Display"
      font-size="11"
      font-weight="600"
      line-height="14"
    />
    <text-style name="TLTitle" font-family="SF Pro Display" font-size="14" font-weight="600" line-height="17" />
    <text-style name="TLMeta" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="15" />
    <text-style name="TLTime" font-family="JetBrains Mono" font-size="12" font-weight="700" line-height="15" />
    <text-style
      name="TLTag"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="0.4"
    />
    <text-style
      name="GridLabel"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="0.6"
    />
    <text-style name="GridVal" font-family="JetBrains Mono" font-size="15" font-weight="700" line-height="18" />
    <text-style name="Btn" font-family="SF Pro Display" font-size="15" font-weight="700" line-height="18" />
    <text-style name="Foot" font-family="SF Pro Display" font-size="11" font-weight="500" line-height="15" />
    <text-style
      name="TabLabel"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="600"
      line-height="12"
    />
  </styles>
  <col w="393" fill="linear-gradient(180deg, #140A11 0%, #0D070B 55%, #08060A 100%)">
    <!-- status bar (device chrome, untagged) -->
    <row w="fill" h="24" p="0 22" gap="auto" align="middle-center">
      <text text-style="Clock" value="9:41" color="$text" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal-high.svg?color=%23FBF4F8" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23FBF4F8" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23FBF4F8" w="20" h="20" />
      </row>
    </row>
    <!-- top navigation -->
    <row role="top-navigation-bar" w="fill" h="52" p="0 12" gap="auto" align="middle-center">
      <row
        role="button"
        w="38"
        h="38"
        radius="$r-pill"
        fill="$glass"
        border="1 $glass-line-soft"
        align="middle-center"
      >
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%23FBF4F8" w="20" h="20" />
      </row>
      <col gap="2" align="top-center">
        <text text-style="NavKick" value="FLIGHT STATUS" color="$rose-text" align="center" />
        <text text-style="NavTitle" value="KP 176" color="$text" align="center" />
      </col>
      <row
        role="button"
        w="38"
        h="38"
        radius="$r-pill"
        fill="$glass"
        border="1 $glass-line-soft"
        align="middle-center"
      >
        <img src="https://api.iconify.design/lucide/share.svg?color=%23FBF4F8" w="17" h="17" />
      </row>
    </row>
    <!-- hero: real sunset-from-altitude photo + legibility scrim -->
    <frame w="393" h="196" clip="true">
      <img
        x="0"
        y="0"
        w="393"
        h="196"
        fit="cover"
        src="https://images.unsplash.com/photo-1738788174099-b05d15e8a720?w=786&amp;h=392&amp;fit=crop&amp;q=80&amp;auto=format"
      />
      <rect
        x="0"
        y="0"
        w="393"
        h="196"
        fill="linear-gradient(180deg, #140A1126 0%, #140A11A6 62%, #0D070B 100%)"
      />
      <row x="16" y="16" h="26" p="0 11" radius="$r-pill" gap="7" fill="$rose" align="middle-center">
        <rect w="7" h="7" radius="4" fill="$rose-ink" />
        <text text-style="Pill" value="EN ROUTE" color="$rose-ink" />
      </row>
      <row x="317" y="16" h="26" p="0 10" radius="$r-pill" gap="6" align="middle-center" w="hug">
        <appearance>
          <fill type="color" value="#140A11A6" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="18" />
        </appearance>
        <img src="https://api.iconify.design/lucide/plane.svg?color=%23FF9CC1" w="12" h="12" />
        <text text-style="Chip" value="62%" color="$text" />
      </row>
      <col x="16" y="120" gap="6" align="top-left">
        <text text-style="HeroTitle" value="San Francisco to Honolulu" color="$text" />
        <text text-style="HeroSub" value="Kona Pacific  -  Airbus A321neo  -  Fri, Aug 15" color="$text-2" />
      </col>
    </frame>
    <col w="fill" p="14 16 20 16" gap="14">
      <!-- route progress card: plane at 62% of a 317px great-circle track (1,487 of 2,398 mi flown) -->
      <col role="card" w="fill" radius="$r-card" p="18 16 16 16" gap="14" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="30" />
        </appearance>
        <!-- airport codes -->
        <row w="fill" gap="auto" align="top-center">
          <col gap="2" align="top-left">
            <text text-style="Code" value="SFO" color="$text" />
            <text text-style="City" value="San Francisco" color="$text-3" />
          </col>
          <col gap="2" align="top-right">
            <text text-style="Code" value="HNL" color="$text" align="right" />
            <text text-style="City" value="Honolulu" color="$text-3" align="right" />
          </col>
        </row>
        <!-- the track: left dot at x=6, right dot at x=323, plane centered at x=203 = 6 + 0.62*317 -->
        <frame w="329" h="40">
          <rect x="6" y="19" w="197" h="4" radius="$r-bar" fill="$rose" />
          <rect x="203" y="19" w="114" h="4" radius="$r-bar" fill="$track" />
          <rect x="0" y="15" w="12" h="12" radius="6" fill="$rose" />
          <rect x="317" y="15" w="12" h="12" radius="6" fill="$track" />
          <col x="187" y="5" w="30" h="30" radius="$r-pill" fill="$rose" align="middle-center">
            <img src="https://api.iconify.design/lucide/plane.svg?color=%232A0713" w="17" h="17" />
          </col>
        </frame>
        <!-- distance chip -->
        <row w="fill" align="middle-center">
          <row
            h="24"
            p="0 12"
            radius="$r-pill"
            gap="7"
            fill="$rose-soft"
            border="1 $rose-tint"
            align="middle-center"
          >
            <img src="https://api.iconify.design/lucide/navigation.svg?color=%23FF9CC1" w="12" h="12" />
            <text text-style="Chip" value="911 MI TO GO  -  1H 44M" color="$rose-text" />
          </row>
        </row>
        <line w="fill" fill="$glass-line-soft" thickness="1" role="divider" />
        <!-- departure / arrival times -->
        <row w="fill" gap="auto" align="top-center">
          <col gap="3" align="top-left">
            <text text-style="EndTime" value="5:22 PM" color="$text" />
            <text text-style="EndMeta" value="Departed  -  Gate B24" color="$text-3" />
          </col>
          <col gap="3" align="top-right">
            <text text-style="EndTime" value="8:01 PM" color="$rose-text" align="right" />
            <text text-style="EndMeta" value="Est. arrival  -  Gate C7" color="$text-3" align="right" />
          </col>
        </row>
      </col>
      <!-- live stats: 2x2 -->
      <col role="card" w="fill" radius="$r-card" p="16" gap="14" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="30" />
        </appearance>
        <row w="fill" gap="12" align="middle-center">
          <text text-style="CardH" value="LIVE" color="$text" />
          <row role="badge" h="20" p="0 8" radius="$r-pill" gap="5" fill="$rose-soft" align="middle-center">
            <rect w="6" h="6" radius="3" fill="$rose" />
            <text text-style="TLTag" value="UPDATED 12s AGO" color="$rose-text" />
          </row>
        </row>
        <row w="fill" gap="0" align="top-center">
          <col w="fill" gap="7" align="top-left">
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/mountain-snow.svg?color=%23A99AA5" w="14" h="14" />
              <text text-style="StatLabel" value="ALTITUDE" color="$text-3" />
            </row>
            <row gap="5" align="bottom-left">
              <text text-style="StatNum" value="38,000" color="$text" />
              <text text-style="StatUnit" value="ft" color="$text-2" />
            </row>
          </col>
          <line h="40" w="1" fill="$glass-line-soft" thickness="1" role="divider" />
          <col w="fill" gap="7" p="0 0 0 16" align="top-left">
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/gauge.svg?color=%23A99AA5" w="14" h="14" />
              <text text-style="StatLabel" value="GROUND SPEED" color="$text-3" />
            </row>
            <row gap="5" align="bottom-left">
              <text text-style="StatNum" value="528" color="$text" />
              <text text-style="StatUnit" value="mph" color="$text-2" />
            </row>
          </col>
        </row>
        <line w="fill" fill="$glass-line-soft" thickness="1" role="divider" />
        <row w="fill" gap="0" align="top-center">
          <col w="fill" gap="7" align="top-left">
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/ruler.svg?color=%23A99AA5" w="14" h="14" />
              <text text-style="StatLabel" value="DISTANCE LEFT" color="$text-3" />
            </row>
            <row gap="5" align="bottom-left">
              <text text-style="StatNum" value="911" color="$text" />
              <text text-style="StatUnit" value="mi" color="$text-2" />
            </row>
          </col>
          <line h="40" w="1" fill="$glass-line-soft" thickness="1" role="divider" />
          <col w="fill" gap="7" p="0 0 0 16" align="top-left">
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/clock.svg?color=%23A99AA5" w="14" h="14" />
              <text text-style="StatLabel" value="LANDING IN" color="$text-3" />
            </row>
            <row gap="5" align="bottom-left">
              <text text-style="StatNum" value="1:44" color="$text" />
              <text text-style="StatUnit" value="hrs" color="$text-2" />
            </row>
          </col>
        </row>
      </col>
      <!-- flight timeline -->
      <col role="card" w="fill" radius="$r-card" p="16" gap="0" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="30" />
        </appearance>
        <text text-style="CardH" value="FLIGHT TIMELINE" color="$text" />
        <!-- Boarded (done) -->
        <row w="fill" gap="12" align="top-left">
          <frame w="24" h="54">
            <rect x="11" y="27" w="2" h="27" fill="$track-soft" />
            <col
              x="4"
              y="20"
              w="16"
              h="16"
              radius="$r-pill"
              fill="$glass-2"
              border="1 $glass-line"
              align="middle-center"
            >
              <img src="https://api.iconify.design/lucide/check.svg?color=%234BD6A6" w="11" h="11" />
            </col>
          </frame>
          <col w="fill" gap="3" p="16 0 0 0" align="top-left">
            <text text-style="TLTitle" value="Boarding complete" color="$text" />
            <text text-style="TLMeta" value="SFO  -  Gate B24, Terminal 1" color="$text-3" />
          </col>
          <col gap="3" p="16 0 0 0" align="top-right">
            <text text-style="TLTime" value="4:35 PM" color="$text-2" align="right" />
            <text text-style="TLTag" value="ON TIME" color="$green" align="right" />
          </col>
        </row>
        <!-- Departed (done) -->
        <row w="fill" gap="12" align="top-left">
          <frame w="24" h="54">
            <rect x="11" y="0" w="2" h="54" fill="$track-soft" />
            <col
              x="4"
              y="20"
              w="16"
              h="16"
              radius="$r-pill"
              fill="$glass-2"
              border="1 $glass-line"
              align="middle-center"
            >
              <img src="https://api.iconify.design/lucide/plane-takeoff.svg?color=%234BD6A6" w="11" h="11" />
            </col>
          </frame>
          <col w="fill" gap="3" p="14 0 0 0" align="top-left">
            <text text-style="TLTitle" value="Departed" color="$text" />
            <text text-style="TLMeta" value="SFO  -  Runway 28R" color="$text-3" />
          </col>
          <col gap="3" p="14 0 0 0" align="top-right">
            <text text-style="TLTime" value="5:22 PM" color="$text-2" align="right" />
            <text text-style="TLTag" value="+17 MIN" color="$amber-text" align="right" />
          </col>
        </row>
        <!-- Cruising (active) -->
        <row w="fill" gap="12" align="top-left">
          <frame w="24" h="58">
            <rect x="11" y="0" w="2" h="26" fill="$track-soft" />
            <rect x="11" y="30" w="2" h="28" fill="$track-soft" />
            <col
              x="1"
              y="14"
              w="22"
              h="22"
              radius="$r-pill"
              fill="$rose-soft"
              border="1 $rose"
              align="middle-center"
            >
              <rect w="10" h="10" radius="5" fill="$rose" />
            </col>
          </frame>
          <col w="fill" gap="3" p="12 0 0 0" align="top-left">
            <text text-style="TLTitle" value="Cruising at 38,000 ft" color="$rose-text" />
            <text text-style="TLMeta" value="Over the Pacific  -  911 mi from HNL" color="$text-2" />
          </col>
          <col gap="3" p="12 0 0 0" align="top-right">
            <text text-style="TLTime" value="NOW" color="$rose-text" align="right" />
            <text text-style="TLTag" value="LIVE" color="$rose-text" align="right" />
          </col>
        </row>
        <!-- Top of descent (upcoming) -->
        <row w="fill" gap="12" align="top-left">
          <frame w="24" h="54">
            <rect x="11" y="0" w="2" h="54" fill="$track-soft" />
            <rect x="6" y="22" w="12" h="12" radius="6" fill="$track" />
          </frame>
          <col w="fill" gap="3" p="16 0 0 0" align="top-left">
            <text text-style="TLTitle" value="Top of descent" color="$text-2" />
            <text text-style="TLMeta" value="~250 mi from HNL" color="$text-3" />
          </col>
          <col gap="3" p="16 0 0 0" align="top-right">
            <text text-style="TLTime" value="7:24 PM" color="$text-3" align="right" />
            <text text-style="TLTag" value="EST" color="$text-3" align="right" />
          </col>
        </row>
        <!-- Landing (upcoming) -->
        <row w="fill" gap="12" align="top-left">
          <frame w="24" h="54">
            <rect x="11" y="0" w="2" h="54" fill="$track-soft" />
            <rect x="6" y="22" w="12" h="12" radius="6" fill="$track" />
          </frame>
          <col w="fill" gap="3" p="16 0 0 0" align="top-left">
            <text text-style="TLTitle" value="Landing" color="$text-2" />
            <text text-style="TLMeta" value="HNL  -  Runway 8L" color="$text-3" />
          </col>
          <col gap="3" p="16 0 0 0" align="top-right">
            <text text-style="TLTime" value="8:01 PM" color="$text-3" align="right" />
            <text text-style="TLTag" value="EST" color="$text-3" align="right" />
          </col>
        </row>
        <!-- Bags (upcoming, last: rail only above) -->
        <row w="fill" gap="12" align="top-left">
          <frame w="24" h="40">
            <rect x="11" y="0" w="2" h="26" fill="$track-soft" />
            <col
              x="4"
              y="20"
              w="16"
              h="16"
              radius="$r-pill"
              fill="$glass-2"
              border="1 $glass-line-soft"
              align="middle-center"
            >
              <img src="https://api.iconify.design/lucide/luggage.svg?color=%23A99AA5" w="11" h="11" />
            </col>
          </frame>
          <col w="fill" gap="3" p="16 0 0 0" align="top-left">
            <text text-style="TLTitle" value="Baggage claim" color="$text-2" />
            <text text-style="TLMeta" value="HNL  -  Carousel 3" color="$text-3" />
          </col>
          <col gap="3" p="16 0 0 0" align="top-right">
            <text text-style="TLTime" value="8:20 PM" color="$text-3" align="right" />
            <text text-style="TLTag" value="EST" color="$text-3" align="right" />
          </col>
        </row>
      </col>
      <!-- arrival detail grid -->
      <row role="card" w="fill" radius="$r-card" p="16" gap="0" clip="true" align="middle-center">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="30" />
        </appearance>
        <col w="fill" gap="6" align="top-left">
          <text text-style="GridLabel" value="TERMINAL" color="$text-3" />
          <text text-style="GridVal" value="1" color="$text" />
        </col>
        <line h="34" w="1" fill="$glass-line-soft" thickness="1" role="divider" />
        <col w="fill" gap="6" p="0 0 0 14" align="top-left">
          <text text-style="GridLabel" value="GATE" color="$text-3" />
          <text text-style="GridVal" value="C7" color="$text" />
        </col>
        <line h="34" w="1" fill="$glass-line-soft" thickness="1" role="divider" />
        <col w="fill" gap="6" p="0 0 0 14" align="top-left">
          <text text-style="GridLabel" value="SEAT" color="$text-3" />
          <text text-style="GridVal" value="14A" color="$text" />
        </col>
        <line h="34" w="1" fill="$glass-line-soft" thickness="1" role="divider" />
        <col w="fill" gap="6" p="0 0 0 14" align="top-left">
          <text text-style="GridLabel" value="CABIN" color="$text-3" />
          <text text-style="GridVal" value="Main" color="$text" />
        </col>
      </row>
      <!-- primary actions -->
      <row w="fill" gap="10" align="middle-center">
        <row role="button" w="fill" h="52" radius="$r-pill" gap="8" fill="$rose" align="middle-center">
          <img src="https://api.iconify.design/lucide/map.svg?color=%232A0713" w="18" h="18" />
          <text text-style="Btn" value="Open live map" color="$rose-ink" />
        </row>
        <row
          role="button"
          w="52"
          h="52"
          radius="$r-pill"
          fill="$glass"
          border="1 $glass-line"
          align="middle-center"
        >
          <img src="https://api.iconify.design/lucide/bell.svg?color=%23FF9CC1" w="19" h="19" />
        </row>
      </row>
      <text
        text-style="Foot"
        value="Live tracking updates every 10 seconds while in range. Times shown in each airport's local zone."
        color="$text-3"
        align="center"
      />
    </col>
    <!-- tab bar (last flow child) -->
    <row
      role="tab-bar"
      w="393"
      h="64"
      p="0 6"
      gap="0"
      fill="#0C070B"
      border="1 0 0 0 $glass-line-soft"
      align="middle-center"
    >
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/plane.svg?color=%23FF9CC1" w="22" h="22" />
        <text text-style="TabLabel" value="Trips" color="$rose-text" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/search.svg?color=%23A99AA5" w="22" h="22" />
        <text text-style="TabLabel" value="Search" color="$text-3" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/bell.svg?color=%23A99AA5" w="22" h="22" />
        <text text-style="TabLabel" value="Alerts" color="$text-3" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/user-round.svg?color=%23A99AA5" w="22" h="22" />
        <text text-style="TabLabel" value="You" color="$text-3" />
      </col>
    </row>
    <!-- home indicator (device chrome, untagged) -->
    <frame w="393" h="22">
      <rect x="129" y="8" w="134" h="5" radius="3" fill="#FFFFFFCC" />
    </frame>
  </col>
</gui>
```