---
title: "Mile Live Delivery Tracking"
platform: ios
slug: mile-ios-delivery-tracking
screens: ["map-view"]
domains: ["food-delivery"]
style: "minimal"
fonts: ["SF Pro"]
roles: ["button", "top-navigation-bar", "card", "badge", "avatar"]
score: {clean: 100, consistent: 75, accessible: 90, comprehensible: 30}
url: https://gui.farm/ios/mile-ios-delivery-tracking
raw: https://gui.farm/ios/mile-ios-delivery-tracking/design.guix
download: https://gui.farm/ios/mile-ios-delivery-tracking.gui
---

# Mile Live Delivery Tracking

iOS live delivery-tracking screen with a route map, courier detail card, and order status in a forest-green and cream palette.

- **Live preview:** https://gui.farm/ios/mile-ios-delivery-tracking
- **Raw source:** https://gui.farm/ios/mile-ios-delivery-tracking/design.guix
- **Download (.gui):** https://gui.farm/ios/mile-ios-delivery-tracking.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Mile Live Delivery Tracking">
  <tokens>
    <color name="ink" value="#17201B" />
    <color name="forest" value="#1F6B4F" />
    <color name="forest-dark" value="#164B39" />
    <color name="mint" value="#DCEFE5" />
    <color name="cream" value="#FBF8F2" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-2" value="#F3F0EA" />
    <color name="line" value="#E8E3DB" />
    <color name="muted" value="#6E756F" />
    <color name="orange" value="#F47645" />
    <color name="white" value="#FFFFFF" />
    <number name="sheet-radius" value="28" />
    <number name="card-radius" value="18" />
  </tokens>
  <fonts>
    <font family="SF Pro" source="system" weights="400 500 600 700" styles="normal" />
  </fonts>
  <components>
    <component name="CircleAction" id="comp-circle-action">
      <props>
        <prop name="icon" type="image" target="action-icon" />
        <prop name="label" type="text" target="action-label" />
      </props>
      <col role="button" w="52" gap="5" align="middle-center">
        <row w="44" h="44" radius="999" fill="$surface" border="1 $line" align="middle-center">
          <img
            id="action-icon"
            src="https://api.iconify.design/lucide/message-circle.svg?color=%231F6B4F"
            w="20"
            h="20"
          />
        </row>
        <text
          id="action-label"
          value="Message"
          font-family="SF Pro"
          font-size="11"
          line-height="14"
          font-weight="500"
          color="$muted"
          align="center"
        />
      </col>
    </component>
  </components>
  <col w="390" h="844" fill="$cream">
    <frame w="390" h="420" clip="true">
      <img
        x="0"
        y="0"
        w="390"
        h="420"
        fit="cover"
        src="https://gui.farm/tools/map-generator.png?from=25.0334%2C55.1507&amp;to=25.0288%2C55.1433&amp;zoom=16&amp;mode=light&amp;color=%231F6B4F&amp;line=solid&amp;thickness=7&amp;pins=both&amp;labels=show&amp;ratio=4:5&amp;width=780"
      />
      <rect
        x="0"
        y="0"
        w="390"
        h="88"
        fill="linear-gradient(180deg, rgba(251,248,242,0.94) 0%, rgba(251,248,242,0) 100%)"
      />
      <row x="0" y="0" w="390" h="47" p="14 22 0 22" gap="251" align="middle-center">
        <text
          value="9:41"
          font-family="SF Pro"
          font-size="15"
          line-height="18"
          font-weight="600"
          color="$ink"
        />
        <row gap="6" align="middle-center">
          <img src="https://api.iconify.design/lucide/signal.svg?color=%2317201B" w="16" h="16" />
          <img src="https://api.iconify.design/lucide/wifi.svg?color=%2317201B" w="16" h="16" />
          <img src="https://api.iconify.design/lucide/battery-full.svg?color=%2317201B" w="20" h="16" />
        </row>
      </row>
      <row role="top-navigation-bar" x="16" y="55" w="358" gap="84" align="middle-center">
        <row role="button" w="44" h="44" radius="999" fill="$surface" border="1 $line" align="middle-center">
          <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%2317201B" w="22" h="22" />
        </row>
        <row h="36" radius="999" fill="$surface" border="1 $line" p="0 13" gap="7" align="middle-center">
          <ellipse w="8" h="8" fill="$forest" />
          <text
            value="Live tracking"
            font-family="SF Pro"
            font-size="13"
            line-height="16"
            font-weight="600"
            color="$ink"
          />
        </row>
        <row role="button" w="44" h="44" radius="999" fill="$surface" border="1 $line" align="middle-center">
          <img src="https://api.iconify.design/lucide/help-circle.svg?color=%2317201B" w="20" h="20" />
        </row>
      </row>
      <col
        role="card"
        x="16"
        y="284"
        w="358"
        h="120"
        radius="22"
        fill="$surface"
        border="1 $line"
        p="15 16"
        gap="10"
      >
        <row w="fill" gap="auto" align="middle-left">
          <col gap="2">
            <text
              value="Arriving in 4-6 min"
              font-family="SF Pro"
              font-size="21"
              line-height="25"
              font-weight="700"
              color="$ink"
            />
            <text
              value="Rami is turning onto Gardens Boulevard"
              font-family="SF Pro"
              font-size="13"
              line-height="17"
              font-weight="400"
              color="$muted"
            />
          </col>
          <row role="badge" h="28" radius="999" fill="$mint" p="0 10" align="middle-center">
            <text
              value="ON TIME"
              font-family="SF Pro"
              font-size="10"
              line-height="13"
              font-weight="700"
              letter-spacing="0.6"
              color="$forest-dark"
            />
          </row>
        </row>
        <row w="fill" h="8" radius="999" fill="$surface-2" clip="true">
          <rect w="256" h="8" radius="999" fill="$forest" />
        </row>
        <row gap="6" align="middle-left">
          <img src="https://api.iconify.design/lucide/navigation.svg?color=%23F47645" w="14" h="14" />
          <text
            value="0.8 km away · 2 stops before you"
            font-family="SF Pro"
            font-size="12"
            line-height="15"
            font-weight="500"
            color="$ink"
          />
        </row>
      </col>
    </frame>
    <col w="390" h="424" fill="$cream" radius="$sheet-radius" p="10 18 14 18" gap="14">
      <row w="fill" h="5" align="middle-center">
        <rect w="42" h="5" radius="999" fill="#D4CFC6" />
      </row>
      <row w="fill" h="64" gap="12" align="middle-left">
        <frame role="avatar" w="52" h="52" radius="999" clip="true">
          <img
            x="0"
            y="0"
            w="52"
            h="52"
            fit="cover"
            src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=85"
          />
          <ellipse x="38" y="38" w="12" h="12" fill="$forest" border="2 $surface" />
        </frame>
        <col w="fill" gap="3">
          <row gap="7" align="middle-left">
            <text
              value="Rami K."
              font-family="SF Pro"
              font-size="17"
              line-height="21"
              font-weight="700"
              color="$ink"
            />
            <row role="badge" h="22" radius="999" fill="$surface-2" p="0 7" gap="3" align="middle-center">
              <img src="https://api.iconify.design/lucide/star.svg?color=%23F47645" w="11" h="11" />
              <text
                value="4.9"
                font-family="SF Pro"
                font-size="11"
                line-height="13"
                font-weight="600"
                color="$ink"
              />
            </row>
          </row>
          <text
            value="Your courier · Black Honda bike"
            font-family="SF Pro"
            font-size="13"
            line-height="17"
            font-weight="400"
            color="$muted"
          />
        </col>
        <instance
          component="comp-circle-action"
          icon="https://api.iconify.design/lucide/message-circle.svg?color=%231F6B4F"
          label="Message"
        />
        <instance
          component="comp-circle-action"
          icon="https://api.iconify.design/lucide/phone.svg?color=%231F6B4F"
          label="Call"
        />
      </row>
      <col
        role="card"
        w="fill"
        h="hug"
        radius="$card-radius"
        fill="$surface"
        border="1 $line"
        p="12 14"
        gap="8"
      >
        <row w="fill" gap="auto" align="middle-center">
          <col gap="2">
            <text
              value="Share this code at the door"
              font-family="SF Pro"
              font-size="13"
              line-height="16"
              font-weight="600"
              color="$ink"
            />
            <text
              value="Keeps your hand-off secure"
              font-family="SF Pro"
              font-size="11"
              line-height="14"
              font-weight="400"
              color="$muted"
            />
          </col>
          <row gap="5" align="middle-center">
            <text
              value="4"
              font-family="SF Pro"
              font-size="20"
              line-height="24"
              font-weight="700"
              color="$forest"
            />
            <text
              value="8"
              font-family="SF Pro"
              font-size="20"
              line-height="24"
              font-weight="700"
              color="$forest"
            />
            <text
              value="1"
              font-family="SF Pro"
              font-size="20"
              line-height="24"
              font-weight="700"
              color="$forest"
            />
            <text
              value="2"
              font-family="SF Pro"
              font-size="20"
              line-height="24"
              font-weight="700"
              color="$forest"
            />
          </row>
        </row>
      </col>
      <col w="fill" gap="12">
        <row w="fill" gap="12" align="middle-left">
          <row w="40" h="40" radius="12" fill="$mint" align="middle-center">
            <img src="https://api.iconify.design/lucide/shopping-bag.svg?color=%231F6B4F" w="19" h="19" />
          </row>
          <col w="fill" gap="2">
            <text
              value="8 grocery items"
              font-family="SF Pro"
              font-size="14"
              line-height="18"
              font-weight="600"
              color="$ink"
            />
            <text
              value="Order #ML-2841 · AED 126.40"
              font-family="SF Pro"
              font-size="12"
              line-height="15"
              font-weight="400"
              color="$muted"
            />
          </col>
          <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%236E756F" w="18" h="18" />
        </row>
        <line fill="$line" />
        <row w="fill" gap="12" align="middle-left">
          <row w="40" h="40" radius="12" fill="#FDE8DF" align="middle-center">
            <img src="https://api.iconify.design/lucide/map-pin.svg?color=%23F47645" w="19" h="19" />
          </row>
          <col w="fill" gap="2">
            <text
              value="Commercial · Tower 1"
              font-family="SF Pro"
              font-size="14"
              line-height="18"
              font-weight="600"
              color="$ink"
            />
            <text
              value="Lobby hand-off · London, UK"
              font-family="SF Pro"
              font-size="12"
              line-height="15"
              font-weight="400"
              color="$muted"
            />
          </col>
          <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%236E756F" w="18" h="18" />
        </row>
      </col>
      <row role="button" w="fill" h="48" radius="16" fill="$forest" gap="8" align="middle-center">
        <img src="https://api.iconify.design/lucide/bell-ring.svg?color=%23FFFFFF" w="18" h="18" />
        <text
          value="Notify me when Rami arrives"
          font-family="SF Pro"
          font-size="15"
          line-height="19"
          font-weight="600"
          color="$white"
        />
      </row>
      <row w="fill" h="20" align="bottom-center">
        <rect w="134" h="5" radius="999" fill="$ink" />
      </row>
    </col>
  </col>
</gui>
```