---
title: "Arcade — Return an Item"
platform: android
slug: arcade-return-item-android
screens: []
domains: ["ecommerce"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "stepper", "card", "badge", "select", "checkbox", "divider"]
score: {clean: 100, consistent: 86, accessible: 96, comprehensible: 48}
url: https://gui.farm/android/arcade-return-item-android
raw: https://gui.farm/android/arcade-return-item-android/design.guix
download: https://gui.farm/android/arcade-return-item-android.gui
---

# Arcade — Return an Item

A dark Material 3 workflow for choosing a return reason, return method, and reviewing the estimated refund.

- **Live preview:** https://gui.farm/android/arcade-return-item-android
- **Raw source:** https://gui.farm/android/arcade-return-item-android/design.guix
- **Download (.gui):** https://gui.farm/android/arcade-return-item-android.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Arcade — Return an Item">
  <tokens>
    <color name="bg" value="#111514" />
    <color name="surface" value="#181D1B" />
    <color name="surface-high" value="#222826" />
    <color name="surface-bright" value="#2B3430" />
    <color name="outline" value="#74817B" />
    <color name="outline-soft" value="#3B4541" />
    <color name="text" value="#F1F5F2" />
    <color name="text-secondary" value="#BCC7C1" />
    <color name="primary" value="#9DDBC1" />
    <color name="on-primary" value="#0D251B" />
    <color name="primary-container" value="#254B3B" />
    <color name="on-primary-container" value="#D6F6E7" />
    <color name="on-warning" value="#F7E3A8" />
    <number name="r-sm" value="12" />
    <number name="r-md" value="18" />
    <number name="r-lg" value="24" />
    <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="Headline" font-family="Roboto" font-size="28" font-weight="500" line-height="34" letter-spacing="-0.2" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="500" line-height="28" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="BodyMedium" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <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="16" />
  </styles>
  <fonts><font family="Roboto" source="google" weights="400 500 700" styles="normal" /></fonts>
  <col w="360" fill="$bg">
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" fill="$text" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23F1F5F2" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23F1F5F2" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23F1F5F2" w="15" h="15" />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="64" p="0 4" gap="4" align="middle-left">
      <row role="button" w="48" h="48" radius="$r-full" align="middle-center"><img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23F1F5F2" w="24" h="24" /></row>
      <text w="fill" text-style="TitleLarge" value="Return item" fill="$text" />
      <row role="button" w="48" h="48" radius="$r-full" align="middle-center"><img src="https://api.iconify.design/material-symbols/help-outline-rounded.svg?color=%23BCC7C1" w="23" h="23" /></row>
    </row>
    <col w="fill" p="8 16 28 16" gap="22">
      <col role="stepper" w="328" gap="10">
        <row w="fill" gap="auto" align="middle-left"><text text-style="LabelMedium" value="STEP 2 OF 3" fill="$primary" /><text text-style="LabelMedium" value="Return details" fill="$text-secondary" /></row>
        <row w="328" gap="8"><rect w="104" h="5" radius="3" fill="$primary" /><rect w="104" h="5" radius="3" fill="$primary" /><rect w="104" h="5" radius="3" fill="$surface-bright" /></row>
      </col>
      <col w="328" gap="5"><text text-style="Headline" value="Tell us what happened" fill="$text" /><text text-style="BodyMedium" value="We’ll use your choices to prepare the fastest return." fill="$text-secondary" /></col>
      <row role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline-soft" p="14" gap="14" align="middle-left">
        <row w="72" h="72" radius="$r-md" fill="$primary-container" align="middle-center"><img src="https://api.iconify.design/material-symbols/backpack-outline-rounded.svg?color=%23D6F6E7" w="36" h="36" /></row>
        <col w="fill" gap="3"><text text-style="TitleMedium" value="Ridge 18L daypack" fill="$text" /><text text-style="BodyMedium" value="Forest · Order AR-4827" fill="$text-secondary" /><row role="badge" h="24" radius="$r-full" fill="$surface-high" p="0 9" align="middle-center"><text text-style="LabelSmall" value="RETURN BY AUG 26" fill="$text-secondary" /></row></col>
        <text text-style="TitleMedium" value="AED 249" fill="$text" />
      </row>
      <col w="328" gap="10">
        <text text-style="TitleMedium" value="Reason for return" fill="$text" />
        <row role="select" w="328" h="64" radius="$r-md" fill="$surface" border="1 $outline" p="0 16" gap="12" align="middle-left">
          <row w="36" h="36" radius="$r-full" fill="$primary-container" align="middle-center"><img src="https://api.iconify.design/material-symbols/straighten-rounded.svg?color=%23D6F6E7" w="19" h="19" /></row>
          <col w="fill" gap="1"><text text-style="LabelSmall" value="SELECTED REASON" fill="$primary" /><text text-style="BodyMedium" value="Smaller than expected" fill="$text" /></col>
          <img src="https://api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg?color=%23BCC7C1" w="22" h="22" />
        </row>
      </col>
      <col role="card" w="328" radius="$r-md" fill="$surface" border="1 $outline-soft" clip="true">
        <row w="fill" p="16" gap="12" align="top-left">
          <row role="checkbox" w="24" h="24" radius="6" fill="$primary" align="middle-center"><img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%230D251B" w="17" h="17" /></row>
          <col w="fill" gap="3"><text text-style="TitleMedium" value="Item is unused" fill="$text" /><text text-style="BodyMedium" value="Tags are attached and the original packaging is included." fill="$text-secondary" /></col>
        </row>
        <line role="divider" w="fill" fill="$outline-soft" />
        <row w="fill" p="14 16" gap="10" align="middle-left"><img src="https://api.iconify.design/material-symbols/info-outline-rounded.svg?color=%23F7E3A8" w="19" h="19" /><text w="fill" text-style="BodyMedium" value="A warehouse check is required before the refund is released." fill="$on-warning" /></row>
      </col>
      <col w="328" gap="10">
        <text text-style="TitleMedium" value="How will you send it back?" fill="$text" />
        <col role="card" w="328" radius="$r-md" fill="$surface" border="1 $outline-soft" clip="true">
          <row w="fill" p="14 16" gap="12" align="middle-left">
            <row w="22" h="22" radius="$r-full" fill="$primary" align="middle-center"><ellipse w="8" h="8" fill="$on-primary" /></row>
            <row w="40" h="40" radius="$r-sm" fill="$primary-container" align="middle-center"><img src="https://api.iconify.design/material-symbols/storefront-outline-rounded.svg?color=%23D6F6E7" w="22" h="22" /></row>
            <col w="fill" gap="2"><text text-style="TitleMedium" value="Drop off nearby" fill="$text" /><text text-style="BodyMedium" value="Creek Mall · open until 10 PM" fill="$text-secondary" /></col>
            <row role="badge" h="26" radius="$r-full" fill="$primary-container" p="0 9" align="middle-center"><text text-style="LabelMedium" value="FREE" fill="$on-primary-container" /></row>
          </row>
          <line role="divider" w="fill" fill="$outline-soft" />
          <row w="fill" p="14 16" gap="12" align="middle-left">
            <ellipse w="22" h="22" fill="none" border="2 $outline" />
            <row w="40" h="40" radius="$r-sm" fill="$surface-high" align="middle-center"><img src="https://api.iconify.design/material-symbols/local-shipping-outline-rounded.svg?color=%23BCC7C1" w="22" h="22" /></row>
            <col w="fill" gap="2"><text text-style="TitleMedium" value="Courier pickup" fill="$text" /><text text-style="BodyMedium" value="Tomorrow · 9 AM to 1 PM" fill="$text-secondary" /></col>
            <text text-style="LabelLarge" value="AED 18" fill="$text-secondary" />
          </row>
        </col>
      </col>
      <col role="card" w="328" radius="$r-lg" fill="$surface-high" p="16" gap="12">
        <row w="fill" gap="auto" align="middle-left"><text text-style="TitleMedium" value="Estimated refund" fill="$text" /><text text-style="TitleLarge" value="AED 249" fill="$primary" /></row>
        <line role="divider" w="fill" fill="$outline-soft" />
        <row w="fill" gap="auto" align="middle-left"><text text-style="BodyMedium" value="Item price" fill="$text-secondary" /><text text-style="BodyMedium" value="AED 279" fill="$text" /></row>
        <row w="fill" gap="auto" align="middle-left"><text text-style="BodyMedium" value="Promotion applied" fill="$text-secondary" /><text text-style="BodyMedium" value="− AED 30" fill="$text" /></row>
        <row w="fill" gap="auto" align="middle-left"><text text-style="BodyMedium" value="Drop-off fee" fill="$text-secondary" /><text text-style="BodyMedium" value="AED 0" fill="$text" /></row>
        <row w="fill" p="10 12" radius="$r-sm" fill="$primary-container" gap="10" align="middle-left"><img src="https://api.iconify.design/material-symbols/account-balance-wallet-outline-rounded.svg?color=%23D6F6E7" w="20" h="20" /><text w="fill" text-style="BodyMedium" value="Original Visa ending 1842 · 5 to 7 days" fill="$on-primary-container" /></row>
      </col>
    </col>
    <col w="fill" fill="$surface" border="1 0 0 0 $outline-soft" p="12 16 8 16" gap="8">
      <row w="328" h="56" gap="12" align="middle-left">
        <col w="fill" gap="1"><text text-style="LabelSmall" value="REFUND" fill="$text-secondary" /><text text-style="TitleMedium" value="AED 249" fill="$text" /></col>
        <row role="button" h="52" radius="$r-full" fill="$primary" p="0 24" gap="8" align="middle-center"><text text-style="LabelLarge" value="Review return" fill="$on-primary" /><img src="https://api.iconify.design/material-symbols/arrow-forward-rounded.svg?color=%230D251B" w="19" h="19" /></row>
      </row>
      <row w="fill" h="20" align="middle-center"><rect w="108" h="4" radius="2" fill="$text-secondary" /></row>
    </col>
  </col>
</gui>
```