---
title: "Nokthom Thai — Order on its way"
platform: android
slug: nokthom-thai-order-on-its-way
screens: ["order-tracking"]
domains: ["food-delivery"]
style: "glassmorphism"
fonts: ["Roboto", "Roboto Mono"]
roles: ["top-navigation-bar", "button", "chip", "card", "divider", "text-field"]
score: {clean: 100, consistent: 81, accessible: 91, comprehensible: 25}
url: https://gui.farm/android/nokthom-thai-order-on-its-way
raw: https://gui.farm/android/nokthom-thai-order-on-its-way/design.guix
download: https://gui.farm/android/nokthom-thai-order-on-its-way.gui
---

# Nokthom Thai — Order on its way

An Android live order-tracking screen for a Thai food-delivery order, showing a courier status timeline, ETA, driver contact card, delivery route, and itemized order summary.

- **Live preview:** https://gui.farm/android/nokthom-thai-order-on-its-way
- **Raw source:** https://gui.farm/android/nokthom-thai-order-on-its-way/design.guix
- **Download (.gui):** https://gui.farm/android/nokthom-thai-order-on-its-way.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Nokthom Thai — Order on its way">
  <tokens>
    <color name="text" value="#F7EEEA" />
    <color name="text2" value="#CBBEB9" />
    <color name="glass" value="#FFFFFF12" />
    <color name="glass2" value="#FFFFFF1C" />
    <color name="line" value="#FFFFFF2E" />
    <color name="line-soft" value="#FFFFFF18" />
    <color name="ox" value="#A62B3B" />
    <color name="ox-deep" value="#6E1D28" />
    <color name="ox-text" value="#F2909F" />
    <color name="ox-dim" value="#A62B3B30" />
    <color name="white" value="#FFFFFF" />
    <number name="r-pill" value="999" />
    <number name="r-lg" value="18" />
  </tokens>

  <styles>
    <text-style name="Title" font-family="Roboto" font-size="18" font-weight="700" line-height="24" />
    <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.9" />
    <text-style name="H1" font-family="Roboto" font-size="30" font-weight="700" line-height="34" />
    <text-style name="Body" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="BodyMed" font-family="Roboto" font-size="14" font-weight="600" line-height="20" />
    <text-style name="Sub" font-family="Roboto" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Micro" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="StepLbl" font-family="Roboto" font-size="11" font-weight="600" line-height="14" />
    <text-style name="Name" font-family="Roboto" font-size="16" font-weight="700" line-height="20" />
    <text-style name="Price" font-family="Roboto" font-size="14" font-weight="600" line-height="20" />
    <text-style name="Total" font-family="Roboto" font-size="18" font-weight="700" line-height="22" />
    <text-style name="Chip" font-family="Roboto" font-size="11" font-weight="700" line-height="14" />
    <text-style name="Rating" font-family="Roboto" font-size="13" font-weight="600" line-height="16" />
    <text-style name="Mono" font-family="Roboto Mono" font-size="12" font-weight="500" line-height="16" />
  </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>

  <col w="360" fill="linear-gradient(180deg, #1A1311 0%, #140F0F 52%, #100C0D 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=%23F7EEEA" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%23F7EEEA" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full.svg?color=%23F7EEEA" w="15" h="15" />
      </row>
    </row>

    <row role="top-navigation-bar" w="fill" h="56" p="0 8 0 12" gap="auto" align="middle-center">
      <row gap="8" align="middle-center">
        <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $line-soft" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23F7EEEA" w="22" h="22" />
        </row>
        <col gap="1">
          <text text-style="Title" value="Track order" color="$text" />
          <text text-style="NavSub" value="Nokthom Thai Kitchen" color="$text2" />
        </col>
      </row>
      <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $line-soft" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/help-outline.svg?color=%23F7EEEA" w="22" h="22" />
      </row>
    </row>

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

      <frame w="fill" h="188" radius="$r-lg">
        <img x="0" y="0" src="https://images.unsplash.com/photo-1668665772043-bdd32e348998?w=720&amp;h=480&amp;fit=crop&amp;q=80&amp;auto=format" w="328" h="188" fit="cover" radius="$r-lg" />
        <rect x="0" y="0" w="328" h="188" radius="$r-lg" fill="linear-gradient(180deg, #12090A00 42%, #12090ACC 100%)" />
        <row x="12" y="12" role="chip" h="24" radius="$r-pill" fill="$ox" p="0 10" gap="6" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/moped-outline.svg?color=%23FFFFFF" w="14" h="14" />
          <text text-style="Chip" value="OUT FOR DELIVERY" color="$white" />
        </row>
        <col x="16" y="140" gap="2">
          <text text-style="Name" value="Nokthom Thai Kitchen" color="$white" />
          <text text-style="Micro" value="Riverside · 1.8 km from you" color="#F7EEEAD9" />
        </col>
      </frame>

      <col role="card" w="fill" fill="$glass" border="1 $line" radius="$r-lg" p="16" gap="14">
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="Eyebrow" value="ESTIMATED ARRIVAL" color="$ox-text" />
          <row role="chip" h="24" radius="$r-pill" fill="$ox-dim" border="1 $ox" p="0 10" gap="5" align="middle-center">
            <ellipse w="7" h="7" fill="$ox-text" />
            <text text-style="Chip" value="On the way" color="$ox-text" />
          </row>
        </row>
        <col gap="3">
          <text text-style="H1" value="7:42 PM" color="$text" />
          <text text-style="Sub" value="About 12 min away · 62% of the route" color="$text2" />
        </col>

        <col w="fill" gap="7">
          <row w="fill" h="6" radius="$r-pill" fill="$glass2" align="middle-left">
            <rect w="184" h="6" radius="$r-pill" fill="$ox" />
          </row>
        </col>

        <row w="fill" gap="0" align="top-center">
          <col w="fill" gap="8" align="top-center">
            <row w="fill" h="24" gap="0" align="middle-center">
              <rect w="fill" h="2" fill="#00000000" />
              <frame w="24" h="24">
                <ellipse w="24" h="24" fill="$ox" />
                <img x="4" y="4" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF" w="16" h="16" />
              </frame>
              <rect w="fill" h="2" fill="$ox" />
            </row>
            <text text-style="StepLbl" value="Received" color="$text2" align="center" />
          </col>
          <col w="fill" gap="8" align="top-center">
            <row w="fill" h="24" gap="0" align="middle-center">
              <rect w="fill" h="2" fill="$ox" />
              <frame w="24" h="24">
                <ellipse w="24" h="24" fill="$ox" />
                <img x="4" y="4" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF" w="16" h="16" />
              </frame>
              <rect w="fill" h="2" fill="$ox" />
            </row>
            <text text-style="StepLbl" value="Preparing" color="$text2" align="center" />
          </col>
          <col w="fill" gap="8" align="top-center">
            <row w="fill" h="24" gap="0" align="middle-center">
              <rect w="fill" h="2" fill="$ox" />
              <frame w="28" h="28">
                <ellipse x="0" y="0" w="28" h="28" fill="$ox-dim" border="2 $ox" />
                <ellipse x="4" y="4" w="20" h="20" fill="$ox" />
                <img x="6" y="6" src="https://api.iconify.design/material-symbols/moped-outline.svg?color=%23FFFFFF" w="16" h="16" />
              </frame>
              <rect w="fill" h="2" fill="$glass2" />
            </row>
            <text text-style="StepLbl" value="On the way" color="$ox-text" align="center" />
          </col>
          <col w="fill" gap="8" align="top-center">
            <row w="fill" h="24" gap="0" align="middle-center">
              <rect w="fill" h="2" fill="$glass2" />
              <frame w="24" h="24">
                <ellipse w="24" h="24" fill="$glass2" border="1 $line" />
                <img x="4" y="4" src="https://api.iconify.design/material-symbols/home-outline-rounded.svg?color=%23CBBEB9" w="16" h="16" />
              </frame>
              <rect w="fill" h="2" fill="#00000000" />
            </row>
            <text text-style="StepLbl" value="Delivered" color="$text2" align="center" />
          </col>
        </row>
      </col>

      <row role="card" w="fill" fill="$glass" border="1 $line" radius="$r-lg" p="14" gap="12" align="middle-center">
        <frame w="52" h="52">
          <ellipse w="52" h="52" fill="$ox-deep" border="1 $ox" />
          <text x="0" y="0" w="52" h="52" text-style="Name" value="AK" color="$text" align="center" />
        </frame>
        <col w="fill" gap="3">
          <text text-style="Name" value="Anucha K." color="$text" />
          <row gap="8" align="middle-center">
            <row gap="4" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F2909F" w="15" h="15" />
              <text text-style="Rating" value="4.9" color="$text" />
            </row>
            <text text-style="Sub" value="1,204 trips" color="$text2" />
          </row>
          <row gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/two-wheeler.svg?color=%23CBBEB9" w="15" h="15" />
            <text text-style="Mono" value="Honda · TH 8462" color="$text2" />
          </row>
        </col>
        <row gap="8" align="middle-center">
          <row role="button" w="44" h="44" radius="$r-pill" fill="$glass2" border="1 $line" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/call-outline.svg?color=%23F2909F" w="20" h="20" />
          </row>
          <row role="button" w="44" h="44" radius="$r-pill" fill="$glass2" border="1 $line" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/chat-bubble-outline-rounded.svg?color=%23F2909F" w="20" h="20" />
          </row>
        </row>
      </row>

      <col role="card" w="fill" fill="$glass" border="1 $line" radius="$r-lg" p="16" gap="12">
        <text text-style="Eyebrow" value="DELIVERY ROUTE" color="$text2" />
        <row w="fill" gap="12" align="top-left">
          <frame w="12" h="96">
            <ellipse x="1" y="7" w="10" h="10" fill="$ox" />
            <rect x="5" y="19" w="2" h="34" fill="$line" />
            <ellipse x="0" y="53" w="12" h="12" fill="$glass2" border="2 $ox-text" />
          </frame>
          <col w="fill" gap="0">
            <col w="fill" h="48" gap="2">
              <text text-style="BodyMed" value="Nokthom Thai Kitchen" color="$text" />
              <text text-style="Sub" value="Picked up · 7:18 PM" color="$text2" />
            </col>
            <col w="fill" h="48" gap="2">
              <text text-style="BodyMed" value="88 Maple Row, Apt 4B" color="$text" />
              <text text-style="Sub" value="Leave at door · ring the bell" color="$text2" />
            </col>
          </col>
        </row>
      </col>

      <col role="card" w="fill" fill="$glass" border="1 $line" radius="$r-lg" p="16" gap="12">
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="Eyebrow" value="YOUR ORDER" color="$text2" />
          <text text-style="Micro" value="3 items" color="$text2" />
        </row>

        <col w="fill" gap="10">
          <row w="fill" gap="10" align="top-left">
            <text w="24" text-style="BodyMed" value="1×" color="$ox-text" />
            <col w="fill" gap="1">
              <text text-style="Body" value="Green Curry Chicken" color="$text" />
              <text text-style="Sub" value="Medium heat · jasmine rice" color="$text2" />
            </col>
            <text w="60" text-style="Price" value="$14.50" color="$text" align="right" />
          </row>
          <row w="fill" gap="10" align="top-left">
            <text w="24" text-style="BodyMed" value="1×" color="$ox-text" />
            <col w="fill" gap="1">
              <text text-style="Body" value="Pad See Ew" color="$text" />
              <text text-style="Sub" value="Beef · extra chili" color="$text2" />
            </col>
            <text w="60" text-style="Price" value="$13.00" color="$text" align="right" />
          </row>
          <row w="fill" gap="10" align="top-left">
            <text w="24" text-style="BodyMed" value="2×" color="$ox-text" />
            <col w="fill" gap="1">
              <text text-style="Body" value="Thai Iced Tea" color="$text" />
              <text text-style="Sub" value="$4.50 each" color="$text2" />
            </col>
            <text w="60" text-style="Price" value="$9.00" color="$text" align="right" />
          </row>
        </col>

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

        <col w="fill" gap="7">
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="Sub" value="Subtotal" color="$text2" />
            <text text-style="Price" value="$36.50" color="$text" />
          </row>
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="Sub" value="Delivery fee" color="$text2" />
            <text text-style="Price" value="$3.99" color="$text" />
          </row>
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="Sub" value="Service fee" color="$text2" />
            <text text-style="Price" value="$2.19" color="$text" />
          </row>
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="Sub" value="Courier tip" color="$text2" />
            <text text-style="Price" value="$6.00" color="$text" />
          </row>
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="Sub" value="Tax" color="$text2" />
            <text text-style="Price" value="$3.24" color="$text" />
          </row>
        </col>

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

        <row w="fill" gap="auto" align="middle-center">
          <text text-style="Total" value="Total" color="$text" />
          <text text-style="Total" value="$51.92" color="$text" />
        </row>
      </col>

      <row w="fill" gap="6" p="2 2 0 2" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/receipt-long-outline.svg?color=%23CBBEB9" w="15" h="15" />
        <text text-style="Mono" value="Order NK-5192 · placed 7:04 PM" color="$text2" />
      </row>

    </col>

    <row w="360" h="72" p="10 12" gap="10" fill="$glass2" border="1 0 0 0 $line" align="middle-center">
      <row role="text-field" w="fill" h="44" radius="$r-pill" fill="$glass" border="1 $line" p="0 14" gap="10" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/chat-bubble-outline-rounded.svg?color=%23CBBEB9" w="18" h="18" />
        <text w="fill" text-style="Body" value="Message Anucha…" color="$text2" />
      </row>
      <row role="button" w="44" h="44" radius="$r-pill" fill="$ox" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/send-rounded.svg?color=%23FFFFFF" w="20" h="20" />
      </row>
    </row>

  </col>
</gui>

```