---
title: "Basketly · Review Substitution"
platform: android
slug: basketly-review-substitution-android
screens: ["checkout"]
domains: ["food-delivery"]
style: "flat"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "badge", "card", "divider", "action-sheet"]
score: {clean: 100, consistent: 82, accessible: 100, comprehensible: 47}
url: https://gui.farm/android/basketly-review-substitution-android
raw: https://gui.farm/android/basketly-review-substitution-android/design.guix
download: https://gui.farm/android/basketly-review-substitution-android.gui
---

# Basketly · Review Substitution

Grocery-delivery substitution review — approve a shopper's recommended replacement or choose a refund mid-order.

- **Live preview:** https://gui.farm/android/basketly-review-substitution-android
- **Raw source:** https://gui.farm/android/basketly-review-substitution-android/design.guix
- **Download (.gui):** https://gui.farm/android/basketly-review-substitution-android.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Basketly · Review Substitution">
  <tokens>
    <color name="bg" value="#141512" />
    <color name="surface" value="#1E201B" />
    <color name="surface-high" value="#292C25" />
    <color name="surface-bright" value="#34382F" />
    <color name="text" value="#E6E9DF" />
    <color name="secondary" value="#C3C8BC" />
    <color name="outline" value="#4B5046" />
    <color name="primary" value="#B8F397" />
    <color name="primary-container" value="#2C4A20" />
    <color name="on-primary" value="#102008" />
    <color name="amber" value="#FFD18B" />
    <color name="amber-container" value="#4A3516" />
    <color name="red" value="#FFB4AB" />
    <color name="red-container" value="#5A1F1C" />
    <number name="r-xs" value="4" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="16" />
    <number name="r-xl" value="28" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="400" line-height="28" />
    <text-style name="Headline" font-family="Roboto" font-size="24" font-weight="400" line-height="32" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="BodyLarge" font-family="Roboto" font-size="16" font-weight="400" line-height="24" />
    <text-style name="Body" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="Label" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="Caption" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Price" font-family="Roboto" font-size="20" font-weight="500" line-height="26" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500" styles="normal" />
  </fonts>
  <col w="360" fill="$bg" clip="true">
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" color="$text" />
      <row gap="6" align="middle-right">
        <img
          src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/signal-cellular-alt-rounded.svg"
          w="15"
          h="15"
        />
        <img
          src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/wifi-rounded.svg"
          w="15"
          h="15"
        />
        <img
          src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/battery-full-alt-rounded.svg"
          w="17"
          h="17"
        />
      </row>
    </row>
    <row role="top-navigation-bar" w="360" h="64" p="0 8" gap="4" align="middle-left">
      <row role="button" w="48" h="48" radius="$r-full" align="middle-center">
        <img
          src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/arrow-back-rounded.svg"
          w="24"
          h="24"
        />
      </row>
      <text w="fill" text-style="TitleLarge" value="Review substitution" color="$text" />
      <row role="button" w="48" h="48" radius="$r-full" align="middle-center">
        <img
          src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/chat-bubble-outline-rounded.svg"
          w="23"
          h="23"
        />
      </row>
    </row>
    <col w="360" p="8 16 24 16" gap="24">
      <col w="328" gap="16">
        <row w="fill" gap="auto" align="bottom-left">
          <col gap="2" w="fill">
            <text text-style="Headline" value="Your shopper needs a choice" color="$text" w="fill" />
            <text text-style="Body" value="Order BSK-2841 · Marina Market" color="$secondary" />
          </col>
          <row role="badge" h="28" radius="$r-full" fill="$amber-container" p="0 10" align="middle-center">
            <text text-style="Caption" value="4:32 left" color="$amber" />
          </row>
        </row>
        <frame w="328" h="8" radius="4" clip="true">
          <rect x="0" y="0" w="328" h="8" fill="$surface-high" />
          <rect x="0" y="0" w="255.11" h="8" radius="4" fill="$primary" />
        </frame>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Caption" value="7 of 9 items found" color="$secondary" />
          <text text-style="Caption" value="Shopper is in frozen foods" color="$primary" />
        </row>
      </col>
      <col role="card" w="328" radius="$r-lg" fill="$surface" clip="true">
        <row w="328" p="14" gap="12" align="middle-left">
          <row w="52" h="52" radius="$r-md" fill="$red-container" align="middle-center">
            <img
              src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/ac-unit-rounded.svg"
              w="28"
              h="28"
            />
          </row>
          <col w="fill" gap="3">
            <row role="badge" h="20" radius="$r-xs" fill="$red-container" p="0 7" align="middle-center">
              <text text-style="Caption" value="UNAVAILABLE" color="$red" />
            </row>
            <text text-style="TitleMedium" value="Organic mixed berries · 450 g" color="$text" />
            <text text-style="Body" value="Requested · AED 18.75" color="$secondary" />
          </col>
        </row>
        <line role="divider" w="328" fill="$outline" />
        <col w="328" p="14" gap="16">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="Caption" value="SHOPPER RECOMMENDS" color="$primary" />
            <row role="badge" h="22" radius="$r-full" fill="$primary-container" p="0 8" align="middle-center">
              <text text-style="Caption" value="Closest match" color="$primary" />
            </row>
          </row>
          <row w="300" gap="12" align="middle-left">
            <row w="64" h="72" radius="$r-md" fill="$primary-container" align="middle-center">
              <img
                src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/grocery-rounded.svg"
                w="34"
                h="34"
              />
            </row>
            <col w="fill" gap="3">
              <text text-style="TitleMedium" value="Forest fruit blend · 500 g" color="$text" />
              <text text-style="Body" value="Same brand · 50 g more" color="$secondary" />
              <row gap="8" align="middle-left">
                <text text-style="Price" value="AED 19.90" color="$text" />
                <text text-style="Caption" value="+ AED 1.15" color="$amber" />
              </row>
            </col>
          </row>
          <row role="button" w="300" h="48" radius="$r-full" fill="$primary" gap="8" align="middle-center">
            <img
              src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/check-rounded.svg"
              w="20"
              h="20"
            />
            <text text-style="Label" value="Approve replacement" color="$on-primary" />
          </row>
        </col>
      </col>
      <col role="card" w="328" radius="$r-lg" fill="$surface" p="14" gap="12">
        <row w="fill" gap="auto" align="middle-left">
          <col gap="2">
            <text text-style="TitleMedium" value="If this happens again" color="$text" />
            <text text-style="Body" value="Apply to remaining unavailable items" color="$secondary" />
          </col>
          <img
            src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/info-outline-rounded.svg"
            w="20"
            h="20"
          />
        </row>
        <row w="300" h="48" radius="$r-md" fill="$surface-high" p="0 12" gap="10" align="middle-left">
          <frame w="20" h="20">
            <ellipse x="0" y="0" w="20" h="20" fill="$primary" />
            <ellipse x="6" y="6" w="8" h="8" fill="$on-primary" />
          </frame>
          <text w="fill" text-style="BodyLarge" value="Ask me before replacing" color="$text" />
          <img
            src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/expand-more-rounded.svg"
            w="22"
            h="22"
          />
        </row>
      </col>
      <row role="button" w="328" h="48" radius="$r-full" border="1 $outline" gap="8" align="middle-center">
        <img
          src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/block-rounded.svg"
          w="20"
          h="20"
        />
        <text text-style="Label" value="Choose refund instead" color="$red" />
      </row>
      <row w="328" gap="8" align="middle-left">
        <img
          src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/lock-outline-rounded.svg"
          w="17"
          h="17"
        />
        <text text-style="Caption" value="Your total updates only after approval" color="$secondary" />
      </row>
    </col>
    <col
      role="action-sheet"
      w="360"
      radius="$r-xl $r-xl 0 0"
      fill="$surface-high"
      p="12 16 0 16"
      gap="12"
      align="middle-center"
    >
      <rect w="32" h="4" radius="2" fill="$outline" />
      <col w="328" gap="4">
        <text text-style="TitleLarge" value="Refund this item?" color="$text" />
        <text
          text-style="Body"
          value="The shopper will skip berries and continue your order."
          color="$secondary"
        />
      </col>
      <row w="328" h="52" radius="$r-md" fill="$surface-bright" p="0 14" gap="12" align="middle-left">
        <img
          src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/account-balance-wallet-outline-rounded.svg"
          w="22"
          h="22"
        />
        <col w="fill" gap="1">
          <text text-style="Label" value="Refund AED 18.75" color="$text" />
          <text text-style="Caption" value="Returns to your original payment method" color="$secondary" />
        </col>
        <img
          src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/264f16e6-80d2-4135-95f5-7ef903617ad2/chevron-right-rounded.svg"
          w="22"
          h="22"
        />
      </row>
      <row role="button" w="328" h="48" radius="$r-full" border="1 $outline" align="middle-center">
        <text text-style="Label" value="Keep recommended replacement" color="$primary" />
      </row>
      <row w="328" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$text" />
      </row>
    </col>
  </col>
</gui>
```