---
title: "Cargoloop — Live Freight"
platform: android
slug: cargoloop-live-freight
screens: ["data-table"]
domains: ["logistics"]
style: "glassmorphism"
fonts: ["Roboto", "Roboto Mono"]
roles: ["card", "chip", "top-navigation-bar", "button", "item-indicator", "search-bar", "segmented-control", "divider", "table", "floating-action-button", "tab-bar", "badge"]
score: {clean: 100, consistent: 69, accessible: 53, comprehensible: 72}
url: https://gui.farm/android/cargoloop-live-freight
raw: https://gui.farm/android/cargoloop-live-freight/design.guix
download: https://gui.farm/android/cargoloop-live-freight.gui
---

# Cargoloop — Live Freight

An Android live-freight shipment tracking data-table for logistics dispatchers, with status chips, ETAs, and filters.

- **Live preview:** https://gui.farm/android/cargoloop-live-freight
- **Raw source:** https://gui.farm/android/cargoloop-live-freight/design.guix
- **Download (.gui):** https://gui.farm/android/cargoloop-live-freight.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Cargoloop — Live Freight">
  <tokens>
    <color name="text" value="#FFFFFF" />
    <color name="text-70" value="#FFFFFFC2" />
    <color name="text-50" value="#FFFFFF96" />
    <color name="ink-dark" value="#12100B" />
    <color name="glass" value="#FFFFFF12" />
    <color name="glass-2" value="#FFFFFF1F" />
    <color name="glass-line" value="#FFFFFF33" />
    <color name="glass-line-soft" value="#FFFFFF1F" />
    <color name="orange" value="#FF7A1A" />
    <color name="orange-text" value="#FFB061" />
    <color name="orange-dim" value="#FF7A1A2B" />
    <color name="red" value="#FF6459" />
    <color name="red-text" value="#FF988F" />
    <color name="red-dim" value="#FF64592B" />
    <color name="red-deep" value="#A81E15" />
    <color name="green" value="#34D17E" />
    <color name="green-text" value="#6FE0A6" />
    <color name="green-dim" value="#34D17E2B" />
    <number name="r-pill" value="999" />
    <number name="r-lg" value="18" />
    <number name="r-md" value="14" />
    <number name="r-sm" value="10" />
  </tokens>

  <styles>
    <text-style name="H1" font-family="Roboto" font-size="20" font-weight="700" line-height="26" />
    <text-style name="Caption" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Seg" font-family="Roboto" font-size="13" font-weight="600" line-height="16" />
    <text-style name="StatValue" font-family="Roboto" font-size="24" font-weight="700" line-height="28" />
    <text-style name="StatLabel" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Micro" font-family="Roboto" font-size="11" font-weight="500" line-height="14" />
    <text-style name="ColHead" font-family="Roboto" font-size="11" font-weight="600" line-height="14" letter-spacing="0.6" />
    <text-style name="ShipId" font-family="Roboto Mono" font-size="14" font-weight="600" line-height="18" />
    <text-style name="Route" font-family="Roboto" font-size="12" font-weight="400" line-height="16" />
    <text-style name="ChipText" font-family="Roboto" font-size="11" font-weight="700" line-height="14" />
    <text-style name="Eta" font-family="Roboto" font-size="13" font-weight="600" line-height="16" />
    <text-style name="TabLabel" font-family="Roboto" font-size="10" font-weight="600" line-height="12" />
    <text-style name="Body" font-family="Roboto" font-size="14" font-weight="400" line-height="18" />
  </styles>

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

  <components>
    <component name="StatTile" id="comp-stat">
      <props>
        <prop name="value" type="text" target="s-val" />
        <prop name="label" type="text" target="s-lbl" />
        <prop name="sub" type="text" target="s-sub" />
      </props>
      <col role="card" w="fill" fill="$glass" border="1 $glass-line" radius="$r-md" p="12 12 12 12" gap="4">
        <text id="s-val" text-style="StatValue" value="0" color="$text" />
        <text id="s-lbl" text-style="StatLabel" value="Label" color="$text-70" />
        <text id="s-sub" text-style="Micro" value="sub" color="$text-50" />
      </col>
    </component>

    <component name="SegItem" id="comp-seg">
      <props>
        <prop name="label" type="text" target="sg-lbl" />
      </props>
      <row w="fill" h="fill" radius="$r-pill" align="middle-center">
        <text id="sg-lbl" text-style="Seg" value="Seg" color="$text-70" />
      </row>
    </component>

    <component name="ShipmentRow" id="comp-row">
      <props>
        <prop name="id" type="text" target="r-id" />
        <prop name="route" type="text" target="r-rte" />
        <prop name="eta" type="text" target="r-eta" />
        <prop name="transit" type="visible" target="chip-transit" />
        <prop name="delayed" type="visible" target="chip-delayed" />
        <prop name="arriving" type="visible" target="chip-arriving" />
      </props>
      <row w="fill" h="56" border="0 0 1 0 $glass-line-soft" p="0 12" gap="10" align="middle-center">
        <col w="fill" gap="3">
          <text id="r-id" text-style="ShipId" value="CL-0000" color="$text" />
          <text id="r-rte" text-style="Route" value="Origin to Dest" color="$text-70" />
        </col>
        <row w="76" align="middle-left">
          <row id="chip-transit" role="chip" h="22" radius="$r-pill" fill="$orange-dim" border="1 $orange" p="0 8" align="middle-center">
            <text text-style="ChipText" value="In transit" color="$orange-text" />
          </row>
          <row id="chip-delayed" role="chip" h="22" radius="$r-pill" fill="$red-dim" border="1 $red" p="0 8" align="middle-center">
            <text text-style="ChipText" value="Delayed" color="$red-text" />
          </row>
          <row id="chip-arriving" role="chip" h="22" radius="$r-pill" fill="$green-dim" border="1 $green" p="0 8" align="middle-center">
            <text text-style="ChipText" value="Arriving" color="$green-text" />
          </row>
        </row>
        <text id="r-eta" w="52" text-style="Eta" value="0m" color="$text" align="right" />
      </row>
    </component>
  </components>

  <col w="360" fill="linear-gradient(180deg, #17130E 0%, #0E0C0F 55%, #0A090C 100%)">

    <row w="fill" h="24" p="0 16" gap="auto" align="middle-center">
      <text font-family="Roboto" font-size="12" font-weight="600" line-height="16" value="9:41" color="$text" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%23FFFFFF" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%23FFFFFF" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full.svg?color=%23FFFFFF" w="15" h="15" />
      </row>
    </row>

    <row role="top-navigation-bar" w="fill" h="60" p="0 8 0 16" gap="auto" align="middle-center">
      <row gap="10" align="middle-center">
        <row role="button" w="40" h="40" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/menu.svg?color=%23FFFFFF" w="24" h="24" />
        </row>
        <col gap="1">
          <text text-style="H1" value="Live Freight" color="$text" />
          <text text-style="Caption" value="Rotterdam hub · updated 14:32" color="$text-70" />
        </col>
      </row>
      <row gap="6" align="middle-center">
        <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/tune.svg?color=%23FFFFFF" w="22" h="22" />
        </row>
        <frame w="40" h="40">
          <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/notifications-outline.svg?color=%23FFFFFF" w="22" h="22" />
          </row>
          <ellipse role="item-indicator" x="26" y="8" w="9" h="9" fill="$orange" border="2 $ink-dark" />
        </frame>
      </row>
    </row>

    <col w="fill" p="4 16 12 16" gap="16">

      <row role="search-bar" w="fill" h="44" radius="$r-pill" fill="$glass" border="1 $glass-line" p="0 14" gap="10" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/search.svg?color=%23FFFFFF96" w="20" h="20" />
        <text w="fill" text-style="Body" value="Search ID, route, or carrier" color="$text-50" />
        <img src="https://api.iconify.design/material-symbols/mic-outline.svg?color=%23FFFFFF96" w="20" h="20" />
      </row>

      <row role="segmented-control" w="fill" h="40" radius="$r-pill" fill="$glass" border="1 $glass-line" p="4" gap="2" align="middle-center">
        <row w="fill" h="fill" radius="$r-pill" fill="$orange" align="middle-center">
          <text text-style="Seg" value="All" color="$ink-dark" />
        </row>
        <instance component="comp-seg" label="In transit" />
        <instance component="comp-seg" label="Delayed" />
        <instance component="comp-seg" label="Delivered" />
      </row>

      <row w="fill" gap="10" align="top-left">
        <instance component="comp-stat" value="128" label="In transit" sub="6 lanes active" />
        <instance component="comp-stat" value="9" label="Delayed" sub="2 critical" />
        <instance component="comp-stat" value="94.2%" label="On-time" sub="7-day avg" />
      </row>

      <col w="fill" gap="8">
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="ColHead" value="ACTIVE SHIPMENTS" color="$text-70" />
          <text text-style="Caption" value="48 total" color="$text-50" />
        </row>
        <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />
      </col>

      <col role="table" w="fill" fill="$glass" border="1 $glass-line" radius="$r-md" p="4 0" gap="0">
        <row w="fill" h="28" p="0 12" gap="10" align="middle-center">
          <text w="fill" text-style="ColHead" value="SHIPMENT" color="$text-50" />
          <text w="76" text-style="ColHead" value="STATUS" color="$text-50" />
          <text w="52" text-style="ColHead" value="ETA" color="$text-50" align="right" />
        </row>
        <instance component="comp-row" id="CL-4821" route="Rotterdam to Hamburg" eta="2h 10m" transit="true" delayed="false" arriving="false" />
        <instance component="comp-row" id="CL-4816" route="Antwerp to Munich" eta="5h 40m" transit="true" delayed="false" arriving="false" />
        <instance component="comp-row" id="CL-4809" route="Gdansk to Rotterdam" eta="41m" transit="false" delayed="false" arriving="true" />
        <instance component="comp-row" id="CL-4803" route="Le Havre to Lyon" eta="3h 05m" transit="false" delayed="true" arriving="false" />
        <instance component="comp-row" id="CL-4798" route="Bremen to Prague" eta="8h 15m" transit="true" delayed="false" arriving="false" />
        <instance component="comp-row" id="CL-4791" route="Zeebrugge to Milan" eta="1h 20m" transit="false" delayed="false" arriving="true" />
        <instance component="comp-row" id="CL-4785" route="Valencia to Porto" eta="6h 50m" transit="false" delayed="true" arriving="false" />
      </col>

    </col>

    <frame w="360" h="76">
      <row role="floating-action-button" x="288" y="8" w="56" h="56" radius="$r-pill" fill="$orange" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/add.svg?color=%2312100B" w="26" h="26" />
      </row>
    </frame>

    <row role="tab-bar" w="360" h="64" p="0 8" gap="0" fill="$glass-2" border="1 0 0 0 $glass-line" align="middle-center">
      <col w="fill" h="fill" align="middle-center" gap="3">
        <img src="https://api.iconify.design/material-symbols/space-dashboard-outline.svg?color=%23FFFFFF96" w="24" h="24" />
        <text text-style="TabLabel" value="Overview" color="$text-50" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="3">
        <img src="https://api.iconify.design/material-symbols/local-shipping.svg?color=%23FF7A1A" w="24" h="24" />
        <text text-style="TabLabel" value="Shipments" color="$orange-text" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="3">
        <img src="https://api.iconify.design/material-symbols/directions-boat-outline.svg?color=%23FFFFFF96" w="24" h="24" />
        <text text-style="TabLabel" value="Fleet" color="$text-50" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="3">
        <frame w="24" h="24">
          <img src="https://api.iconify.design/material-symbols/warning-outline.svg?color=%23FFFFFF96" w="24" h="24" />
          <row role="badge" x="13" y="-2" h="15" radius="$r-pill" fill="$red-deep" p="0 4" align="middle-center">
            <text font-family="Roboto" font-size="9" font-weight="700" line-height="12" value="3" color="$text" />
          </row>
        </frame>
        <text text-style="TabLabel" value="Alerts" color="$text-50" />
      </col>
    </row>

  </col>
</gui>

```