---
title: "Meridian Freight - Live Feed"
platform: ios
slug: meridian-freight-live-feed
screens: ["feed"]
domains: ["logistics"]
style: "glassmorphism"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "button", "item-indicator", "card", "badge", "segmented-control", "divider", "chip", "tab-bar"]
score: {clean: 100, consistent: 69, accessible: 73, comprehensible: 42}
url: https://gui.farm/ios/meridian-freight-live-feed
raw: https://gui.farm/ios/meridian-freight-live-feed/design.guix
download: https://gui.farm/ios/meridian-freight-live-feed.gui
---

# Meridian Freight - Live Feed

A dark glassmorphism iOS live operations feed for a 3PL freight dispatcher, streaming detention, reefer-temp, ETA-slip, check-in, POD and load-tender events with acknowledge actions.

- **Live preview:** https://gui.farm/ios/meridian-freight-live-feed
- **Raw source:** https://gui.farm/ios/meridian-freight-live-feed/design.guix
- **Download (.gui):** https://gui.farm/ios/meridian-freight-live-feed.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Meridian Freight - Live Feed">

  <tokens>
    <color name="glass" value="#FFFFFF12" />
    <color name="glass-2" value="#FFFFFF1A" />
    <color name="gline" value="#FFFFFF2E" />
    <color name="gline-soft" value="#FFFFFF17" />
    <color name="text" value="#F4F6FA" />
    <color name="text-2" value="#C3CAD6" />
    <color name="text-3" value="#97A0AE" />
    <color name="neutral-bar" value="#FFFFFF3D" />
    <color name="ink" value="#1A0705" />
    <color name="red" value="#FF4438" />
    <color name="red-t" value="#FF8A80" />
    <color name="red-dim" value="#FF44381A" />
    <color name="red-deep" value="#B81E12" />
    <color name="amber" value="#FFB020" />
    <color name="amber-t" value="#FFC65C" />
    <color name="amber-dim" value="#FFB0201A" />
    <color name="green" value="#34D17E" />
    <color name="green-t" value="#6FE0A6" />
    <color name="green-dim" value="#34D17E1A" />
    <number name="r-card" value="20" />
    <number name="r-lg" value="16" />
    <number name="r-md" value="14" />
    <number name="r-pill" value="999" />
  </tokens>

  <styles>
    <text-style name="NavTitle" font-family="SF Pro Display" font-size="18" font-weight="700" line-height="22" />
    <text-style name="NavSub" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="15" />
    <text-style name="Kicker" font-family="SF Pro Display" font-size="11" font-weight="700" line-height="14" letter-spacing="1.4" />
    <text-style name="HeroTitle" font-family="SF Pro Display" font-size="17" font-weight="700" line-height="21" />
    <text-style name="StatNum" font-family="SF Pro Display" font-size="22" font-weight="700" line-height="26" letter-spacing="-0.4" />
    <text-style name="StatLabel" font-family="SF Pro Display" font-size="11" font-weight="600" line-height="14" letter-spacing="0.3" />
    <text-style name="Legend" font-family="SF Pro Display" font-size="11" font-weight="500" line-height="14" />
    <text-style name="Seg" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="16" />
    <text-style name="ColHead" font-family="SF Pro Display" font-size="11" font-weight="700" line-height="14" letter-spacing="0.8" />
    <text-style name="EventTitle" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="19" />
    <text-style name="EventMeta" font-family="SF Pro Display" font-size="13" font-weight="500" line-height="17" />
    <text-style name="Detail" font-family="SF Pro Display" font-size="12" font-weight="400" line-height="16" />
    <text-style name="Time" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="15" />
    <text-style name="ChipText" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="13" letter-spacing="0.5" />
    <text-style name="Action" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="16" />
    <text-style name="TabLabel" font-family="SF Pro Display" font-size="10" font-weight="600" line-height="12" />
    <text-style name="BadgeNum" font-family="SF Pro Display" font-size="9" font-weight="700" line-height="11" />
    <text-style name="Clock" font-family="SF Pro Display" font-size="14" font-weight="600" line-height="18" />
    <text-style name="StatusDot" font-family="SF Pro Display" font-size="11" font-weight="600" line-height="14" />
  </styles>

  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
  </fonts>

  <col w="393" fill="linear-gradient(180deg, #0C0E13 0%, #0A0B0F 58%, #08090C 100%)">

    <!-- status bar (device chrome, untagged) -->
    <row w="fill" h="24" p="0 20" 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.svg?color=%23F4F6FA" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F4F6FA" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F4F6FA" w="20" h="16" />
      </row>
    </row>

    <!-- top navigation bar -->
    <row role="top-navigation-bar" w="fill" h="58" p="0 12 0 16" gap="auto" align="middle-center">
      <row gap="11" align="middle-center">
        <row w="38" h="38" radius="12" fill="$red" align="middle-center">
          <img src="https://api.iconify.design/lucide/radio-tower.svg?color=%231A0705" w="21" h="21" />
        </row>
        <col gap="2">
          <text text-style="NavTitle" value="Live Feed" color="$text" />
          <text text-style="NavSub" value="Meridian Freight · Central dispatch" color="$text-3" />
        </col>
      </row>
      <row gap="8" align="middle-center">
        <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $gline-soft" align="middle-center">
          <img src="https://api.iconify.design/lucide/sliders-horizontal.svg?color=%23F4F6FA" w="20" h="20" />
        </row>
        <frame w="40" h="40">
          <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $gline-soft" align="middle-center">
            <img src="https://api.iconify.design/lucide/bell.svg?color=%23F4F6FA" w="20" h="20" />
          </row>
          <ellipse role="item-indicator" x="25" y="7" w="9" h="9" fill="$red" border="2 #0A0B0F" />
        </frame>
      </row>
    </row>

    <col w="fill" p="6 16 0 16" gap="16">

      <!-- hero glass summary card -->
      <col role="card" w="fill" fill="$glass" border="1 $gline" radius="$r-card" clip="true">
        <frame w="361" h="132">
          <img src="https://images.unsplash.com/photo-1704716553676-4240c68ca57b?w=1200&amp;q=80&amp;auto=format&amp;fit=crop" x="0" y="0" w="361" h="132" fit="cover" />
          <rect x="0" y="0" w="361" h="132" fill="linear-gradient(180deg, #05060933 0%, #050609F2 100%)" />
          <row role="badge" x="14" y="14" h="24" radius="$r-pill" fill="$red-dim" border="1 $red" p="0 10" gap="7" align="middle-center">
            <ellipse w="7" h="7" fill="$red" />
            <text text-style="ChipText" value="LIVE" color="$red-t" />
          </row>
          <col x="14" y="80" gap="4">
            <text text-style="Kicker" value="OSLO HUB · UPDATED 14:37" color="$text-2" />
            <text text-style="HeroTitle" value="34 loads moving right now" color="$text" />
          </col>
        </frame>
        <col w="fill" p="14 16 16 16" gap="13">
          <row w="fill" gap="10" align="top-left">
            <col w="fill" gap="3">
              <text text-style="StatNum" value="34" color="$text" />
              <text text-style="StatLabel" value="ACTIVE LOADS" color="$text-3" />
            </col>
            <col w="fill" gap="3">
              <text text-style="StatNum" value="2" color="$red-t" />
              <text text-style="StatLabel" value="EXCEPTIONS" color="$text-3" />
            </col>
            <col w="fill" gap="3">
              <text text-style="StatNum" value="96.4%" color="$text" />
              <text text-style="StatLabel" value="ON-TIME · 7D" color="$text-3" />
            </col>
          </row>
          <frame w="329" h="8">
            <rect x="0" y="0" w="277.2" h="8" radius="4" fill="$neutral-bar" />
            <rect x="279.2" y="0" w="19.1" h="8" radius="4" fill="$red" />
            <rect x="300.3" y="0" w="28.7" h="8" radius="4" fill="$green" />
          </frame>
          <row w="fill" gap="14" align="middle-left">
            <row gap="6" align="middle-center">
              <ellipse w="8" h="8" fill="$neutral-bar" />
              <text text-style="Legend" value="29 on track" color="$text-2" />
            </row>
            <row gap="6" align="middle-center">
              <ellipse w="8" h="8" fill="$red" />
              <text text-style="Legend" value="2 exceptions" color="$text-2" />
            </row>
            <row gap="6" align="middle-center">
              <ellipse w="8" h="8" fill="$green" />
              <text text-style="Legend" value="3 delivered" color="$text-2" />
            </row>
          </row>
        </col>
      </col>

      <!-- filter segmented control -->
      <row role="segmented-control" w="fill" h="40" radius="$r-pill" fill="$glass" border="1 $gline" p="4" gap="2" align="middle-center">
        <row w="fill" h="fill" radius="$r-pill" fill="$red" align="middle-center">
          <text text-style="Seg" value="All" color="$ink" />
        </row>
        <row w="fill" h="fill" radius="$r-pill" align="middle-center">
          <text text-style="Seg" value="Exceptions" color="$text-2" />
        </row>
        <row w="fill" h="fill" radius="$r-pill" align="middle-center">
          <text text-style="Seg" value="Check-ins" color="$text-2" />
        </row>
        <row w="fill" h="fill" radius="$r-pill" align="middle-center">
          <text text-style="Seg" value="System" color="$text-2" />
        </row>
      </row>

      <!-- feed section header -->
      <col w="fill" gap="8">
        <row w="fill" gap="auto" align="middle-center">
          <row gap="7" align="middle-center">
            <ellipse w="7" h="7" fill="$red" />
            <text text-style="ColHead" value="TODAY" color="$text-2" />
          </row>
          <text text-style="Time" value="6 new events" color="$text-3" />
        </row>
        <line w="fill" fill="$gline-soft" role="divider" />
      </col>

      <!-- EVENT 1 · detention exception (red) -->
      <row role="card" w="fill" fill="$glass" border="1 $gline" radius="$r-lg" clip="true">
        <rect w="3" h="fill" fill="$red" />
        <row w="fill" p="12 14 13 12" gap="11" align="top-left">
          <row w="34" h="34" radius="17" fill="$red-dim" border="1 $red" align="middle-center">
            <img src="https://api.iconify.design/lucide/clock.svg?color=%23FF8A80" w="18" h="18" />
          </row>
          <col w="fill" gap="6">
            <row w="fill" gap="8" align="top-left">
              <text w="fill" text-style="EventTitle" value="Detention alert · 47 min at dock" color="$text" />
              <text text-style="Time" value="14:36" color="$text-3" />
            </row>
            <text text-style="EventMeta" value="ML-20471 · Nordic Cold Chain · R. Alvsaker" color="$text-2" />
            <text text-style="Detail" value="Trailer idle past its 45-min free time at Oslo DC, dock 6." color="$text-3" />
            <row gap="8" align="middle-left" p="1 0 0 0">
              <row role="chip" h="22" radius="$r-pill" fill="$red-dim" border="1 $red" p="0 9" align="middle-center">
                <text text-style="ChipText" value="EXCEPTION" color="$red-t" />
              </row>
              <row role="button" h="32" radius="$r-pill" fill="$red" p="0 14" gap="6" align="middle-center">
                <img src="https://api.iconify.design/lucide/check.svg?color=%231A0705" w="15" h="15" />
                <text text-style="Action" value="Acknowledge" color="$ink" />
              </row>
            </row>
          </col>
        </row>
      </row>

      <!-- EVENT 2 · reefer temperature (red) -->
      <row role="card" w="fill" fill="$glass" border="1 $gline" radius="$r-lg" clip="true">
        <rect w="3" h="fill" fill="$red" />
        <row w="fill" p="12 14 13 12" gap="11" align="top-left">
          <row w="34" h="34" radius="17" fill="$red-dim" border="1 $red" align="middle-center">
            <img src="https://api.iconify.design/lucide/thermometer-snowflake.svg?color=%23FF8A80" w="18" h="18" />
          </row>
          <col w="fill" gap="6">
            <row w="fill" gap="8" align="top-left">
              <text w="fill" text-style="EventTitle" value="Reefer temp above range" color="$text" />
              <text text-style="Time" value="14:29" color="$text-3" />
            </row>
            <text text-style="EventMeta" value="ML-20455 · Baltica Reefer · trailer BR-338" color="$text-2" />
            <row gap="7" align="middle-left">
              <text text-style="Detail" value="Setpoint -18.0°C" color="$text-3" />
              <text text-style="Detail" value="·" color="$text-3" />
              <text text-style="Detail" value="Now -15.6°C" color="$text-2" />
              <row role="chip" h="20" radius="$r-pill" fill="$red-dim" border="1 $red" p="0 7" align="middle-center">
                <text text-style="ChipText" value="+2.4°C" color="$red-t" />
              </row>
            </row>
            <row gap="8" align="middle-left" p="1 0 0 0">
              <row role="button" h="32" radius="$r-pill" fill="$red" p="0 14" gap="6" align="middle-center">
                <img src="https://api.iconify.design/lucide/check.svg?color=%231A0705" w="15" h="15" />
                <text text-style="Action" value="Acknowledge" color="$ink" />
              </row>
              <row role="button" h="32" radius="$r-pill" fill="$glass-2" border="1 $gline" p="0 13" gap="6" align="middle-center">
                <img src="https://api.iconify.design/lucide/bell-off.svg?color=%23F4F6FA" w="15" h="15" />
                <text text-style="Action" value="Mute 30m" color="$text" />
              </row>
            </row>
          </col>
        </row>
      </row>

      <!-- EVENT 3 · ETA at-risk (amber) -->
      <row role="card" w="fill" fill="$glass" border="1 $gline" radius="$r-lg" clip="true">
        <rect w="3" h="fill" fill="$amber" />
        <row w="fill" p="12 14 13 12" gap="11" align="top-left">
          <row w="34" h="34" radius="17" fill="$amber-dim" border="1 $amber" align="middle-center">
            <img src="https://api.iconify.design/lucide/traffic-cone.svg?color=%23FFC65C" w="18" h="18" />
          </row>
          <col w="fill" gap="6">
            <row w="fill" gap="8" align="top-left">
              <text w="fill" text-style="EventTitle" value="ETA slipped 35 min on E6" color="$text" />
              <text text-style="Time" value="14:22" color="$text-3" />
            </row>
            <text text-style="EventMeta" value="ML-20460 · Gothenburg to Malmö" color="$text-2" />
            <row gap="8" align="middle-left">
              <text text-style="Detail" value="15:35" color="$text-3" />
              <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%2397A0AE" w="14" h="14" />
              <text text-style="StatusDot" value="16:10" color="$amber-t" />
              <row role="chip" h="20" radius="$r-pill" fill="$amber-dim" border="1 $amber" p="0 7" align="middle-center">
                <text text-style="ChipText" value="AT RISK" color="$amber-t" />
              </row>
            </row>
          </col>
        </row>
      </row>

      <!-- EVENT 4 · driver check-in (neutral) -->
      <row role="card" w="fill" fill="$glass" border="1 $gline" radius="$r-lg" clip="true">
        <rect w="3" h="fill" fill="$gline" />
        <row w="fill" p="12 14 13 12" gap="11" align="top-left">
          <row w="34" h="34" radius="17" fill="$glass-2" border="1 $gline" align="middle-center">
            <img src="https://api.iconify.design/lucide/map-pin-check.svg?color=%23F4F6FA" w="18" h="18" />
          </row>
          <col w="fill" gap="6">
            <row w="fill" gap="8" align="top-left">
              <text w="fill" text-style="EventTitle" value="Driver checked in at pickup" color="$text" />
              <text text-style="Time" value="14:18" color="$text-3" />
            </row>
            <text text-style="EventMeta" value="ML-20468 · Hamburg Hub · T. Bauer" color="$text-2" />
            <row gap="8" align="middle-left">
              <row role="chip" h="20" radius="$r-pill" fill="$glass-2" border="1 $gline" p="0 8" align="middle-center">
                <text text-style="ChipText" value="GATE 4" color="$text-2" />
              </row>
              <text text-style="Detail" value="On time · loading now" color="$text-3" />
            </row>
          </col>
        </row>
      </row>

      <!-- EVENT 5 · POD delivered (green, with photo) -->
      <row role="card" w="fill" fill="$glass" border="1 $gline" radius="$r-lg" clip="true">
        <rect w="3" h="fill" fill="$green" />
        <row w="fill" p="12 14 13 12" gap="11" align="top-left">
          <row w="34" h="34" radius="17" fill="$green-dim" border="1 $green" align="middle-center">
            <img src="https://api.iconify.design/lucide/package-check.svg?color=%236FE0A6" w="18" h="18" />
          </row>
          <col w="fill" gap="8">
            <col w="fill" gap="6">
              <row w="fill" gap="8" align="top-left">
                <text w="fill" text-style="EventTitle" value="POD uploaded · delivered" color="$text" />
                <text text-style="Time" value="13:57" color="$text-3" />
              </row>
              <text text-style="EventMeta" value="ML-20442 · Rotterdam to Antwerp · signed M. Visser" color="$text-2" />
            </col>
            <row w="fill" gap="10" align="middle-left" fill="$glass-2" radius="$r-md" border="1 $gline-soft" p="8" clip="true">
              <img src="https://images.unsplash.com/photo-1759216373394-91146ca977c7?w=400&amp;q=80&amp;auto=format&amp;fit=crop" w="52" h="52" radius="10" fit="cover" />
              <col w="fill" gap="3">
                <text text-style="EventMeta" value="Proof of delivery" color="$text" />
                <text text-style="Detail" value="1 photo · 8 pallets · dock B" color="$text-3" />
              </col>
              <row role="chip" h="20" radius="$r-pill" fill="$green-dim" border="1 $green" p="0 8" align="middle-center">
                <text text-style="ChipText" value="DELIVERED" color="$green-t" />
              </row>
            </row>
          </col>
        </row>
      </row>

      <!-- EVENT 6 · load tendered (neutral) -->
      <row role="card" w="fill" fill="$glass" border="1 $gline" radius="$r-lg" clip="true">
        <rect w="3" h="fill" fill="$gline" />
        <row w="fill" p="12 14 13 12" gap="11" align="top-left">
          <row w="34" h="34" radius="17" fill="$glass-2" border="1 $gline" align="middle-center">
            <img src="https://api.iconify.design/lucide/handshake.svg?color=%23F4F6FA" w="18" h="18" />
          </row>
          <col w="fill" gap="6">
            <row w="fill" gap="8" align="top-left">
              <text w="fill" text-style="EventTitle" value="Load tendered and accepted" color="$text" />
              <text text-style="Time" value="13:41" color="$text-3" />
            </row>
            <text text-style="EventMeta" value="ML-20473 · Copenhagen to Bremen · Jutland Haul" color="$text-2" />
            <row gap="8" align="middle-left">
              <row role="chip" h="20" radius="$r-pill" fill="$glass-2" border="1 $gline" p="0 8" align="middle-center">
                <text text-style="ChipText" value="TENDERED" color="$text-2" />
              </row>
              <text text-style="Detail" value="Pickup Fri 08:00 · €1,240 linehaul" color="$text-3" />
            </row>
          </col>
        </row>
      </row>

    </col>

    <!-- bottom tab bar (fixed, last flow child) -->
    <col w="fill" fill="$glass-2" border="1 0 0 0 $gline" p="8 8 0 8">
      <row role="tab-bar" w="fill" h="52" gap="0" align="middle-center">
        <col w="fill" h="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/activity.svg?color=%23FF8A80" w="23" h="23" />
          <text text-style="TabLabel" value="Feed" color="$red-t" />
        </col>
        <col w="fill" h="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/package.svg?color=%2397A0AE" w="23" h="23" />
          <text text-style="TabLabel" value="Loads" color="$text-3" />
        </col>
        <col w="fill" h="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/map.svg?color=%2397A0AE" w="23" h="23" />
          <text text-style="TabLabel" value="Map" color="$text-3" />
        </col>
        <col w="fill" h="fill" gap="4" align="middle-center">
          <frame w="23" h="23">
            <img src="https://api.iconify.design/lucide/triangle-alert.svg?color=%2397A0AE" w="23" h="23" />
            <row role="badge" x="12" y="-3" h="15" radius="$r-pill" fill="$red-deep" p="0 4" align="middle-center">
              <text text-style="BadgeNum" value="2" color="$text" />
            </row>
          </frame>
          <text text-style="TabLabel" value="Alerts" color="$text-3" />
        </col>
        <col w="fill" h="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/user.svg?color=%2397A0AE" w="23" h="23" />
          <text text-style="TabLabel" value="You" color="$text-3" />
        </col>
      </row>
      <!-- home indicator (device chrome, untagged) -->
      <row w="fill" h="20" align="middle-center">
        <rect w="134" h="5" radius="3" fill="$gline" />
      </row>
    </col>

  </col>
</gui>
```