---
title: "Cascade Freight — PRO 7746-120 Tracking"
platform: android
slug: cascade-freight-pro-7746-120-tracking
screens: ["order-tracking"]
domains: ["logistics"]
style: null
fonts: ["Roboto", "Roboto Mono"]
roles: ["top-navigation-bar", "button", "card", "badge", "chip", "divider", "avatar", "banner", "toolbar"]
score: {clean: 100, consistent: 82, accessible: 77, comprehensible: 27}
url: https://gui.farm/android/cascade-freight-pro-7746-120-tracking
raw: https://gui.farm/android/cascade-freight-pro-7746-120-tracking/design.guix
download: https://gui.farm/android/cascade-freight-pro-7746-120-tracking.gui
---

# Cascade Freight — PRO 7746-120 Tracking

A drafting-blueprint Android shipment-tracking screen where a shipper follows an LTL reefer freight load down the I-5 lane, with an ETA and mileage progress hero, a dimensioned waypoint lane profile, reefer-temperature gauge, carrier details, and delivery appointment note.

- **Live preview:** https://gui.farm/android/cascade-freight-pro-7746-120-tracking
- **Raw source:** https://gui.farm/android/cascade-freight-pro-7746-120-tracking/design.guix
- **Download (.gui):** https://gui.farm/android/cascade-freight-pro-7746-120-tracking.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Cascade Freight — PRO 7746-120 Tracking">
  <tokens>
    <color name="ground" value="#ECE6D8" />
    <color name="card" value="#F6F1E6" />
    <color name="ink" value="#23272E" />
    <color name="ink2" value="#585B50" />
    <color name="line" value="#CBC3B0" />
    <color name="line-strong" value="#3A3E45" />
    <color name="track" value="#DED7C6" />
    <color name="amber" value="#C2790F" />
    <color name="amber-dim" value="#C2790F33" />
    <color name="amber-deep" value="#8A5207" />
    <color name="amber-tint" value="#C2790F1A" />
    <color name="on-amber" value="#241800" />
    <color name="white" value="#FFFFFF" />
    <number name="r-lg" value="16" />
    <number name="r-md" value="12" />
    <number name="r-pill" value="999" />
  </tokens>

  <styles>
    <text-style name="Title" font-family="Roboto" font-size="18" font-weight="700" line-height="22" />
    <text-style name="NavSub" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Eyebrow" font-family="Roboto" font-size="11" font-weight="700" line-height="14" letter-spacing="0.8" />
    <text-style name="H1" font-family="Roboto" font-size="26" font-weight="700" line-height="30" />
    <text-style name="BodyMed" font-family="Roboto" font-size="14" font-weight="600" line-height="20" />
    <text-style name="Body" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="Sub" font-family="Roboto" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Name" font-family="Roboto" font-size="16" font-weight="700" line-height="20" />
    <text-style name="LabelMed" font-family="Roboto" font-size="12" font-weight="600" line-height="16" />
    <text-style name="Label" font-family="Roboto" font-size="14" font-weight="600" line-height="20" />
    <text-style name="Chip" font-family="Roboto" font-size="11" font-weight="700" line-height="14" letter-spacing="0.4" />
    <text-style name="Mono" font-family="Roboto Mono" font-size="13" font-weight="500" line-height="18" />
    <text-style name="MonoLarge" font-family="Roboto Mono" font-size="22" font-weight="600" line-height="26" />
    <text-style name="MonoSmall" font-family="Roboto Mono" font-size="11" font-weight="500" line-height="14" letter-spacing="0.3" />
  </styles>

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

  <col w="360" fill="$ground">

    <row w="fill" h="28" p="0 16" gap="auto" align="middle-center">
      <text text-style="Mono" value="9:41" color="$ink" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%2323272E" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%2323272E" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%2323272E" w="15" h="15" />
      </row>
    </row>

    <row role="top-navigation-bar" w="fill" h="60" p="0 8 0 4" gap="4" align="middle-center">
      <row role="button" w="48" h="48" radius="$r-pill" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%2323272E" w="24" h="24" />
      </row>
      <col w="fill" gap="0">
        <text text-style="Title" value="Track shipment" color="$ink" />
        <text text-style="NavSub" value="Cascade Freight Lines" color="$ink2" />
      </col>
      <row role="button" w="48" h="48" radius="$r-pill" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/ios-share-rounded.svg?color=%2323272E" w="22" h="22" />
      </row>
    </row>

    <col w="360" p="6 16 8 16" gap="14">

      <row role="card" w="328" fill="$card" border="1 $line" radius="$r-md" p="12 14" gap="12" align="middle-center">
        <row w="40" h="40" radius="$r-md" fill="$ground" border="1 $line" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/local-shipping-outline-rounded.svg?color=%238A5207" w="22" h="22" />
        </row>
        <col w="fill" gap="2">
          <text text-style="Mono" value="PRO 7746-120" color="$ink" />
          <text text-style="Sub" value="LTL · Reefer · protect from freeze" color="$ink2" />
        </col>
        <col role="badge" h="24" radius="$r-pill" fill="$ground" border="1 $line" p="0 10" align="middle-center">
          <text text-style="MonoSmall" value="REV 03" color="$ink2" />
        </col>
      </row>

      <col role="card" w="328" fill="$card" border="1 $line" radius="$r-lg" p="16" gap="14">
        <row w="fill" gap="auto" align="middle-center">
          <row role="chip" h="24" radius="$r-pill" fill="$amber" p="0 10" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/local-shipping-rounded.svg?color=%23241800" w="14" h="14" />
            <text text-style="Chip" value="OUT FOR DELIVERY" color="$on-amber" />
          </row>
          <row gap="6" align="middle-center">
            <ellipse w="7" h="7" fill="$amber-deep" />
            <text text-style="MonoSmall" value="ON SCHEDULE" color="$amber-deep" />
          </row>
        </row>
        <col gap="3">
          <text text-style="Eyebrow" value="ESTIMATED DELIVERY · SUN, AUG 16" color="$ink2" />
          <text text-style="H1" value="by 4:30 PM" color="$ink" />
          <text text-style="Sub" value="Out for delivery in Sacramento, CA · 68 mi remaining" color="$ink2" />
        </col>
        <col w="fill" gap="7">
          <frame w="296" h="10" radius="$r-pill" clip="true">
            <rect x="0" y="0" w="296" h="10" radius="$r-pill" fill="$track" />
            <rect x="0" y="0" w="261" h="10" radius="$r-pill" fill="$amber" />
          </frame>
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="Mono" value="512 / 580 mi" color="$ink" />
            <text text-style="Mono" value="88%" color="$amber-deep" />
          </row>
        </col>
      </col>

      <col role="card" w="328" fill="$card" border="1 $line" radius="$r-lg" p="16 14" gap="12">
        <row w="fill" gap="auto" align="middle-center">
          <row gap="8" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/route-rounded.svg?color=%23585B50" w="15" h="15" />
            <text text-style="Eyebrow" value="SECTION A · LANE PROFILE" color="$ink2" />
          </row>
          <text text-style="MonoSmall" value="580 MI" color="$ink2" />
        </row>

        <row w="300" h="72" gap="10" align="top-left">
          <col w="46" gap="1" align="top-right">
            <text text-style="Mono" value="06:20" color="$ink" />
            <text text-style="MonoSmall" value="SAT" color="$ink2" />
          </col>
          <col w="20" h="72" gap="0" align="top-center">
            <frame w="20" h="18">
              <ellipse x="2" y="1" w="16" h="16" fill="$amber" />
              <img x="4" y="3" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF" w="12" h="12" />
            </frame>
            <rect w="2" h="54" fill="$amber" />
          </col>
          <col w="fill" gap="2" align="top-left">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="BodyMed" value="Portland, OR" color="$ink" />
              <text text-style="MonoSmall" value="TERM PDX" color="$ink2" />
            </row>
            <text text-style="Sub" value="Origin terminal · load tendered, picked up" color="$ink2" />
            <row gap="6" align="middle-center" p="3 0 0 0">
              <rect w="9" h="2" fill="$line-strong" />
              <text text-style="MonoSmall" value="111 MI · 2H 05M" color="$ink2" />
            </row>
          </col>
        </row>

        <row w="300" h="72" gap="10" align="top-left">
          <col w="46" gap="1" align="top-right">
            <text text-style="Mono" value="10:05" color="$ink" />
            <text text-style="MonoSmall" value="SAT" color="$ink2" />
          </col>
          <col w="20" h="72" gap="0" align="top-center">
            <frame w="20" h="18">
              <ellipse x="2" y="1" w="16" h="16" fill="$amber" />
              <img x="4" y="3" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF" w="12" h="12" />
            </frame>
            <rect w="2" h="54" fill="$amber" />
          </col>
          <col w="fill" gap="2" align="top-left">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="BodyMed" value="Eugene, OR" color="$ink" />
              <text text-style="MonoSmall" value="TERM EUG" color="$ink2" />
            </row>
            <text text-style="Sub" value="Line-haul terminal · departed on trailer 8842" color="$ink2" />
            <row gap="6" align="middle-center" p="3 0 0 0">
              <rect w="9" h="2" fill="$line-strong" />
              <text text-style="MonoSmall" value="164 MI · 3H 00M" color="$ink2" />
            </row>
          </col>
        </row>

        <row w="300" h="72" gap="10" align="top-left">
          <col w="46" gap="1" align="top-right">
            <text text-style="Mono" value="15:48" color="$ink" />
            <text text-style="MonoSmall" value="SAT" color="$ink2" />
          </col>
          <col w="20" h="72" gap="0" align="top-center">
            <frame w="20" h="18">
              <ellipse x="2" y="1" w="16" h="16" fill="$amber" />
              <img x="4" y="3" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF" w="12" h="12" />
            </frame>
            <rect w="2" h="54" fill="$amber" />
          </col>
          <col w="fill" gap="2" align="top-left">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="BodyMed" value="Medford, OR" color="$ink" />
              <text text-style="MonoSmall" value="TERM MFR" color="$ink2" />
            </row>
            <text text-style="Sub" value="Relay terminal · driver handoff to R. Whitfield" color="$ink2" />
            <row gap="6" align="middle-center" p="3 0 0 0">
              <rect w="9" h="2" fill="$line-strong" />
              <text text-style="MonoSmall" value="164 MI · 3H 00M" color="$ink2" />
            </row>
          </col>
        </row>

        <row w="300" h="76" gap="10" align="top-left">
          <col w="46" gap="1" align="top-right">
            <text text-style="Mono" value="07:12" color="$ink" />
            <text text-style="MonoSmall" value="SUN" color="$amber-deep" />
          </col>
          <col w="20" h="76" gap="0" align="top-center">
            <frame w="20" h="20">
              <ellipse x="0" y="0" w="20" h="20" fill="$amber-dim" border="2 $amber" />
              <ellipse x="6" y="6" w="8" h="8" fill="$amber" />
            </frame>
            <rect w="2" h="56" fill="$amber-dim" />
          </col>
          <col w="fill" gap="2" align="top-left">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="BodyMed" value="Redding, CA" color="$ink" />
              <text text-style="MonoSmall" value="TERM RDD" color="$amber-deep" />
            </row>
            <text text-style="Sub" value="Delivery terminal · on vehicle for delivery" color="$ink2" />
            <row gap="6" align="middle-center" p="3 0 0 0">
              <rect w="9" h="2" fill="$amber" />
              <text text-style="MonoSmall" value="141 MI · 2H 40M REMAINING" color="$amber-deep" />
            </row>
          </col>
        </row>

        <row w="300" h="hug" gap="10" align="top-left">
          <col w="46" gap="1" align="top-right">
            <text text-style="Mono" value="16:30" color="$ink2" />
            <text text-style="MonoSmall" value="ETA" color="$ink2" />
          </col>
          <col w="20" h="hug" gap="0" align="top-center">
            <ellipse w="16" h="16" fill="$card" border="2 $line-strong" />
          </col>
          <col w="fill" gap="2" align="top-left">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="BodyMed" value="Sacramento, CA" color="$ink" />
              <text text-style="MonoSmall" value="CONSIGNEE" color="$ink2" />
            </row>
            <text text-style="Sub" value="Harbor Point Cold Storage · appointment window" color="$ink2" />
          </col>
        </row>
      </col>

      <col role="card" w="328" fill="$card" border="1 $line" radius="$r-lg" p="16 14" gap="14">
        <text text-style="Eyebrow" value="SHIPMENT DETAIL" color="$ink2" />
        <row w="300" gap="10" align="top-left">
          <col w="fill" gap="2">
            <text text-style="MonoSmall" value="PRO NUMBER" color="$ink2" />
            <text text-style="Mono" value="7746-120" color="$ink" />
          </col>
          <col w="fill" gap="2">
            <text text-style="MonoSmall" value="SERVICE" color="$ink2" />
            <text text-style="Mono" value="LTL · REEFER" color="$ink" />
          </col>
        </row>
        <row w="300" gap="10" align="top-left">
          <col w="fill" gap="2">
            <text text-style="MonoSmall" value="PIECES / WEIGHT" color="$ink2" />
            <text text-style="Mono" value="14 PLT · 12,480 LB" color="$ink" />
          </col>
          <col w="fill" gap="2">
            <text text-style="MonoSmall" value="FREIGHT CLASS" color="$ink2" />
            <text text-style="Mono" value="NMFC 70" color="$ink" />
          </col>
        </row>

        <rect role="divider" w="300" h="1" fill="$line" />

        <row w="fill" gap="auto" align="middle-center">
          <col gap="1">
            <text text-style="Eyebrow" value="REEFER TEMP" color="$ink2" />
            <text text-style="Sub" value="Set 34°F · continuous, ±2°F" color="$ink2" />
          </col>
          <text text-style="MonoLarge" value="35°F" color="$ink" />
        </row>
        <col w="fill" gap="6">
          <frame w="296" h="12" radius="$r-pill" clip="true">
            <rect x="0" y="0" w="296" h="12" radius="$r-pill" fill="$track" />
            <rect x="74" y="0" w="148" h="12" fill="$amber-dim" />
            <rect x="147" y="0" w="2" h="12" fill="$line-strong" />
            <rect x="183" y="0" w="4" h="12" radius="2" fill="$amber" />
          </frame>
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="MonoSmall" value="30°F" color="$ink2" />
            <text text-style="MonoSmall" value="SAFE 32-36°F" color="$amber-deep" />
            <text text-style="MonoSmall" value="38°F" color="$ink2" />
          </row>
        </col>
      </col>

      <row role="card" w="328" fill="$card" border="1 $line" radius="$r-lg" p="14" gap="14" align="middle-center">
        <frame role="avatar" w="56" h="56" radius="28" border="1 $line" clip="true">
          <img x="0" y="0" w="56" h="56" fit="cover" src="https://images.unsplash.com/photo-1626712211690-8de4fe30177c?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80" />
        </frame>
        <col w="fill" gap="3">
          <text text-style="Name" value="Ray Whitfield" color="$ink" />
          <text text-style="Sub" value="Cascade Freight Lines · DOT 2841596" color="$ink2" />
          <row gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23C2790F" w="15" h="15" />
            <text text-style="LabelMed" value="4.8" color="$ink" />
            <ellipse w="3" h="3" fill="$ink2" />
            <text text-style="LabelMed" value="512 loads · Reefer 53'" color="$ink2" />
          </row>
        </col>
        <row gap="8" align="middle-center">
          <row role="button" w="44" h="44" radius="$r-pill" fill="$ground" border="1 $line" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/call-outline-rounded.svg?color=%238A5207" w="20" h="20" />
          </row>
          <row role="button" w="44" h="44" radius="$r-pill" fill="$ground" border="1 $line" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/chat-bubble-outline-rounded.svg?color=%238A5207" w="20" h="20" />
          </row>
        </row>
      </row>

      <row role="banner" w="328" fill="$amber-tint" border="1 $amber" radius="$r-md" p="12 14" gap="10" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/info-outline-rounded.svg?color=%238A5207" w="18" h="18" />
        <text w="fill" text-style="Sub" value="Appointment required at Dock C. FCFS receiving after 1:00 PM local time." color="$ink" />
      </row>

      <row w="fill" gap="auto" p="2 2 0 2" align="middle-center">
        <text text-style="MonoSmall" value="CASCADE FREIGHT LINES" color="$ink2" />
        <text text-style="MonoSmall" value="PRO 7746-120 · SHEET 1 OF 1" color="$ink2" />
      </row>

    </col>

    <row role="toolbar" w="360" h="80" fill="$card" border="1 0 0 0 $line" p="14 16 22 16" gap="12" align="top-center">
      <row role="button" w="108" h="48" radius="$r-pill" fill="$ground" border="1 $ink" gap="8" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/ios-share-rounded.svg?color=%2323272E" w="18" h="18" />
        <text text-style="Label" value="Share" color="$ink" />
      </row>
      <row role="button" w="fill" h="48" radius="$r-pill" fill="$amber" gap="8" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/notifications-active-outline-rounded.svg?color=%23241800" w="18" h="18" />
        <text text-style="Label" value="Get delivery alerts" color="$on-amber" />
      </row>
    </row>

  </col>
</gui>

```