---
title: "Loadhive — New Shipment"
platform: android
slug: loadhive-new-shipment
screens: ["wizard"]
domains: ["logistics"]
style: "material"
fonts: ["Roboto", "Roboto Mono"]
roles: ["top-navigation-bar", "button", "card", "chip", "segmented-control", "stepper", "avatar", "toolbar"]
score: {clean: 100, consistent: 84, accessible: 92, comprehensible: 38}
url: https://gui.farm/android/loadhive-new-shipment
raw: https://gui.farm/android/loadhive-new-shipment/design.guix
download: https://gui.farm/android/loadhive-new-shipment.gui
---

# Loadhive — New Shipment

A freight shipment-booking wizard (step 2 of 4: route and stops) where a logistics dispatcher sets pickup/delivery, reefer equipment, assigned carrier, and reviews the rate estimate.

- **Live preview:** https://gui.farm/android/loadhive-new-shipment
- **Raw source:** https://gui.farm/android/loadhive-new-shipment/design.guix
- **Download (.gui):** https://gui.farm/android/loadhive-new-shipment.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Loadhive — New Shipment">
  <tokens>
    <color name="surface" value="#151310" />
    <color name="surface-container" value="#221E19" />
    <color name="surface-container-high" value="#2B261F" />
    <color name="on-surface" value="#EDE1D4" />
    <color name="on-surface-variant" value="#CBBDA9" />
    <color name="outline" value="#9C8E7C" />
    <color name="outline-variant" value="#524A3E" />
    <color name="primary" value="#FFB77C" />
    <color name="on-primary" value="#4A2500" />
    <color name="primary-container" value="#7A4200" />
    <color name="on-primary-container" value="#FFDCC0" />
    <number name="r-lg" value="16" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Headline" font-family="Roboto" font-size="24" font-weight="500" line-height="30" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="20" font-weight="500" line-height="26" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="22" />
    <text-style name="BodyLarge" font-family="Roboto" font-size="15" font-weight="400" line-height="22" />
    <text-style name="BodyMedium" font-family="Roboto" font-size="13" font-weight="400" line-height="18" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="11" font-weight="500" line-height="14" />
    <text-style
      name="Overline"
      font-family="Roboto"
      font-size="11"
      font-weight="700"
      line-height="16"
      letter-spacing="1.2"
    />
    <text-style name="Mono" font-family="Roboto Mono" font-size="14" font-weight="500" line-height="20" />
    <text-style name="MonoLarge" font-family="Roboto Mono" font-size="22" font-weight="500" line-height="26" />
    <text-style name="MonoSmall" font-family="Roboto Mono" font-size="12" font-weight="500" line-height="16" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
    <font family="Roboto Mono" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <col w="360" fill="$surface">
    <!-- system status bar : device chrome, untagged -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelMedium" value="9:41" fill="$on-surface" />
      <row gap="6" align="middle-right">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23EDE1D4"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23EDE1D4" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23EDE1D4"
          w="15"
          h="15"
        />
      </row>
    </row>
    <!-- M3 small top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 8 0 4" gap="4" align="middle-left">
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23EDE1D4"
          w="24"
          h="24"
        />
      </row>
      <col w="fill" gap="0">
        <text text-style="TitleLarge" value="New shipment" fill="$on-surface" />
      </col>
      <row role="button" h="40" radius="$r-full" p="0 14" align="middle-center">
        <text text-style="LabelLarge" value="Save" fill="$primary" />
      </row>
    </row>
    <!-- STEP PROGRESS -->
    <col w="360" p="8 16 4 16" gap="14">
      <row w="328" gap="0" align="top-left">
        <!-- step 1 : Cargo, done -->
        <col w="40" gap="6" align="middle-center">
          <row w="28" h="28" radius="$r-full" fill="$primary-container" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFDCC0"
              w="18"
              h="18"
            />
          </row>
          <text text-style="LabelSmall" value="Cargo" fill="$on-surface-variant" align="center" />
        </col>
        <col w="56" h="28" align="middle-center">
          <rect w="56" h="2" radius="1" fill="$primary" />
        </col>
        <!-- step 2 : Route, active -->
        <col w="40" gap="6" align="middle-center">
          <row w="28" h="28" radius="$r-full" fill="$primary" align="middle-center">
            <text text-style="LabelLarge" value="2" fill="$on-primary" />
          </row>
          <text text-style="LabelSmall" value="Route" fill="$on-surface" align="center" />
        </col>
        <col w="56" h="28" align="middle-center">
          <rect w="56" h="2" radius="1" fill="$outline-variant" />
        </col>
        <!-- step 3 : Schedule, upcoming -->
        <col w="40" gap="6" align="middle-center">
          <row w="28" h="28" radius="$r-full" fill="none" border="1 $outline-variant" align="middle-center">
            <text text-style="LabelLarge" value="3" fill="$on-surface-variant" />
          </row>
          <text text-style="LabelSmall" value="Sched." fill="$on-surface-variant" align="center" />
        </col>
        <col w="56" h="28" align="middle-center">
          <rect w="56" h="2" radius="1" fill="$outline-variant" />
        </col>
        <!-- step 4 : Review, upcoming -->
        <col w="40" gap="6" align="middle-center">
          <row w="28" h="28" radius="$r-full" fill="none" border="1 $outline-variant" align="middle-center">
            <text text-style="LabelLarge" value="4" fill="$on-surface-variant" />
          </row>
          <text text-style="LabelSmall" value="Review" fill="$on-surface-variant" align="center" />
        </col>
      </row>
    </col>
    <!-- HEADING -->
    <col w="360" p="6 16 6 16" gap="4">
      <row w="328" gap="8" align="middle-left">
        <text text-style="Overline" value="STEP 2 OF 4" fill="$primary" />
        <text text-style="MonoSmall" value="SHP-24817" fill="$on-surface-variant" w="fill" align="right" />
      </row>
      <text text-style="Headline" value="Route &amp; stops" fill="$on-surface" />
      <text
        text-style="BodyMedium"
        value="Where should the driver pick up and drop off this load?"
        fill="$on-surface-variant"
        w="300"
      />
    </col>
    <!-- ROUTE CARD -->
    <col w="360" p="6 16 6 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="24 16" gap="12">
        <!-- pickup -->
        <row w="296" gap="12" align="top-left" p="0">
          <col w="28" gap="0" align="middle-center">
            <row w="28" h="28" radius="$r-full" fill="$primary-container" align="middle-center">
              <ellipse w="12" h="12" fill="none" border="3 $primary" />
            </row>
          </col>
          <col w="fill" gap="3">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="Overline" value="PICKUP" fill="$on-surface-variant" w="fill" />
              <text text-style="LabelMedium" value="Edit" fill="$primary" />
            </row>
            <text text-style="TitleMedium" value="Nor-Cal Cold Storage" fill="$on-surface" />
            <text
              text-style="BodyMedium"
              value="1180 Piner Rd, Santa Rosa, CA 95403"
              fill="$on-surface-variant"
            />
            <row w="fill" gap="6" align="middle-left" p="2 0 0 0">
              <img
                src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%23CBBDA9"
                w="15"
                h="15"
              />
              <text text-style="LabelMedium" value="Dock 7 · Appt 08:30" fill="$on-surface-variant" />
            </row>
          </col>
        </row>
        <!-- connector + leg stat -->
        <row w="296" gap="12" align="middle-left" p="4 0 4 0">
          <col w="28" gap="0" align="middle-center">
            <rect w="2" h="26" radius="1" fill="$outline-variant" />
          </col>
          <row w="fill" gap="8" align="middle-left">
            <row
              role="chip"
              h="26"
              radius="$r-full"
              fill="$surface-container-high"
              p="0 12"
              gap="6"
              align="middle-center"
            >
              <img
                src="https://api.iconify.design/material-symbols/local-shipping-outline-rounded.svg?color=%23CBBDA9"
                w="15"
                h="15"
              />
              <text text-style="LabelMedium" value="431 mi" fill="$on-surface" />
              <ellipse w="3" h="3" fill="$on-surface-variant" />
              <text text-style="LabelMedium" value="est. 7h 40m" fill="$on-surface-variant" />
            </row>
          </row>
        </row>
        <!-- delivery -->
        <row w="296" gap="12" align="top-left" p="0 0 0 0">
          <col w="28" gap="0" align="middle-center">
            <row w="28" h="28" radius="$r-full" fill="$primary" align="middle-center">
              <img
                src="https://api.iconify.design/material-symbols/location-on-rounded.svg?color=%234A2500"
                w="18"
                h="18"
              />
            </row>
          </col>
          <col w="fill" gap="3">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="Overline" value="DELIVERY" fill="$on-surface-variant" w="fill" />
              <text text-style="LabelMedium" value="Edit" fill="$primary" />
            </row>
            <text text-style="TitleMedium" value="Harborview Produce Market" fill="$on-surface" />
            <text
              text-style="BodyMedium"
              value="2401 E 15th St, Los Angeles, CA 90021"
              fill="$on-surface-variant"
            />
            <row w="fill" gap="6" align="middle-left" p="2 0 0 0">
              <img
                src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%23CBBDA9"
                w="15"
                h="15"
              />
              <text text-style="LabelMedium" value="Dock C · FCFS" fill="$on-surface-variant" />
            </row>
          </col>
        </row>
        <!-- add stop -->
        <row w="296" gap="12" align="middle-left" p="0 0 0 40">
          <row
            role="button"
            h="36"
            radius="$r-full"
            fill="none"
            border="1 $outline-variant"
            p="0 16"
            gap="8"
            align="middle-center"
          >
            <img
              src="https://api.iconify.design/material-symbols/add-location-alt-outline-rounded.svg?color=%23FFB77C"
              w="18"
              h="18"
            />
            <text text-style="LabelLarge" value="Add a stop" fill="$primary" />
          </row>
        </row>
      </col>
    </col>
    <!-- EQUIPMENT CARD -->
    <col w="360" p="6 16 6 16" gap="8">
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="16 14" gap="16">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="Equipment" fill="$on-surface" />
          <text text-style="LabelMedium" value="53 ft trailer" fill="$on-surface-variant" />
        </row>
        <!-- segmented : 3 equal 100px, Reefer active -->
        <row
          role="segmented-control"
          w="300"
          h="44"
          radius="$r-full"
          fill="none"
          border="1 $outline-variant"
          clip="true"
          align="middle-left"
        >
          <row w="100" h="44" gap="6" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/box-rounded.svg?color=%23CBBDA9"
              w="18"
              h="18"
            />
            <text text-style="LabelLarge" value="Dry van" fill="$on-surface-variant" />
          </row>
          <row w="100" h="44" fill="$primary-container" gap="6" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/ac-unit-rounded.svg?color=%23FFDCC0"
              w="18"
              h="18"
            />
            <text text-style="LabelLarge" value="Reefer" fill="$on-primary-container" />
          </row>
          <row w="100" h="44" gap="6" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/deployed-code-outline-rounded.svg?color=%23CBBDA9"
              w="18"
              h="18"
            />
            <text text-style="LabelLarge" value="Flatbed" fill="$on-surface-variant" />
          </row>
        </row>
        <line w="300" fill="$outline-variant" />
        <!-- temperature set point stepper -->
        <row w="fill" gap="auto" align="middle-left">
          <col w="fill" gap="1">
            <text text-style="BodyLarge" value="Temperature set point" fill="$on-surface" />
            <text text-style="BodyMedium" value="Continuous, ±2°F tolerance" fill="$on-surface-variant" />
          </col>
          <row role="stepper" gap="12" align="middle-center">
            <row w="36" h="36" radius="$r-full" fill="none" border="1 $outline-variant" align="middle-center">
              <img
                src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%23FFB77C"
                w="20"
                h="20"
              />
            </row>
            <text text-style="Mono" value="34°F" fill="$on-surface" w="44" align="center" />
            <row w="36" h="36" radius="$r-full" fill="none" border="1 $outline-variant" align="middle-center">
              <img
                src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23FFB77C"
                w="20"
                h="20"
              />
            </row>
          </row>
        </row>
      </col>
    </col>
    <!-- ASSIGNED CARRIER CARD -->
    <col w="360" p="6 16 6 16" gap="8">
      <text text-style="Overline" value="ASSIGNED CARRIER" fill="$on-surface-variant" p="0 0 0 4" />
      <row role="card" w="328" radius="$r-lg" fill="$surface-container" p="14" gap="14" align="middle-left">
        <frame role="avatar" w="52" h="52" radius="26" clip="true">
          <img
            x="0"
            y="0"
            w="52"
            h="52"
            fit="cover"
            src="https://images.unsplash.com/photo-1705645930353-0e335311ef20?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80"
          />
        </frame>
        <col w="fill" gap="3">
          <text text-style="TitleMedium" value="Marco Ruiz" fill="$on-surface" />
          <text text-style="BodyMedium" value="Ruiz Freight LLC · DOT 3184756" fill="$on-surface-variant" />
          <row w="fill" gap="6" align="middle-left" p="1 0 0 0">
            <img
              src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23FFB77C"
              w="15"
              h="15"
            />
            <text text-style="LabelMedium" value="4.9" fill="$on-surface" />
            <ellipse w="3" h="3" fill="$on-surface-variant" />
            <text text-style="LabelMedium" value="218 loads · Reefer 53'" fill="$on-surface-variant" />
          </row>
        </col>
        <row
          role="button"
          h="36"
          radius="$r-full"
          fill="none"
          border="1 $outline-variant"
          p="0 14"
          align="middle-center"
        >
          <text text-style="LabelLarge" value="Change" fill="$primary" />
        </row>
      </row>
    </col>
    <!-- RATE ESTIMATE CARD -->
    <col w="360" p="6 16 6 16" gap="8">
      <text text-style="Overline" value="RATE ESTIMATE" fill="$on-surface-variant" p="0 0 0 4" />
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="16 14" gap="12">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyLarge" value="Linehaul" fill="$on-surface-variant" w="fill" />
          <text text-style="Mono" value="$1,842.00" fill="$on-surface" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyLarge" value="Fuel surcharge (18%)" fill="$on-surface-variant" w="fill" />
          <text text-style="Mono" value="$331.56" fill="$on-surface" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyLarge" value="Reefer / temp control" fill="$on-surface-variant" w="fill" />
          <text text-style="Mono" value="$145.00" fill="$on-surface" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyLarge" value="Lumper / accessorials" fill="$on-surface-variant" w="fill" />
          <text text-style="Mono" value="$90.00" fill="$on-surface" />
        </row>
        <line w="300" fill="$outline-variant" />
        <row w="fill" gap="auto" align="middle-left">
          <col gap="2">
            <text text-style="TitleMedium" value="Estimated total" fill="$on-surface" />
            <text text-style="BodyMedium" value="$5.59 / mi · 431 mi" fill="$on-surface-variant" />
          </col>
          <text text-style="MonoLarge" value="$2,408.56" fill="$on-surface" align="right" />
        </row>
      </col>
    </col>
    <!-- BOTTOM ACTION BAR : last flow child -->
    <row role="toolbar" w="fill" h="80" fill="$surface-container" p="14 16 22 16" gap="12" align="top-left">
      <row
        role="button"
        w="104"
        h="48"
        radius="$r-full"
        fill="none"
        border="1 $outline"
        gap="8"
        align="middle-center"
      >
        <img
          src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23EDE1D4"
          w="18"
          h="18"
        />
        <text text-style="LabelLarge" value="Back" fill="$on-surface" />
      </row>
      <row role="button" w="fill" h="48" radius="$r-full" fill="$primary" gap="8" align="middle-center">
        <text text-style="LabelLarge" value="Continue to schedule" fill="$on-primary" />
        <img
          src="https://api.iconify.design/material-symbols/arrow-forward-rounded.svg?color=%234A2500"
          w="18"
          h="18"
        />
      </row>
    </row>
  </col>
</gui>
```