---
title: "Anvil & Ash — Checkout"
platform: android
slug: anvil-ash-checkout
screens: ["checkout"]
domains: ["ecommerce"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "banner", "card", "button", "badge", "stepper", "divider", "segmented-control", "chip"]
score: {clean: 100, consistent: 89, accessible: 93, comprehensible: 52}
url: https://gui.farm/android/anvil-ash-checkout
raw: https://gui.farm/android/anvil-ash-checkout/design.guix
download: https://gui.farm/android/anvil-ash-checkout.gui
---

# Anvil & Ash — Checkout

A dark Material 3 Android checkout that reviews cart items, delivery, an applied promo and an itemised total before placing an order.

- **Live preview:** https://gui.farm/android/anvil-ash-checkout
- **Raw source:** https://gui.farm/android/anvil-ash-checkout/design.guix
- **Download (.gui):** https://gui.farm/android/anvil-ash-checkout.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Anvil &amp; Ash — Checkout">
  <tokens>
    <color name="surface" value="#14110D" />
    <color name="surface-container" value="#1F1B16" />
    <color name="surface-container-high" value="#2A241D" />
    <color name="surface-container-highest" value="#342D24" />
    <color name="on-surface" value="#F2E7D8" />
    <color name="on-surface-variant" value="#CBBBA6" />
    <color name="outline-variant" value="#4A4136" />
    <color name="primary" value="#F3B85E" />
    <color name="on-primary" value="#3A2600" />
    <color name="primary-container" value="#52401C" />
    <color name="on-primary-container" value="#FAD9A2" />
    <color name="success" value="#86D6A0" />
    <color name="success-container" value="#274A33" />
    <color name="on-success-container" value="#A9E9BE" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-full" value="999" />
  </tokens>

  <styles>
    <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="BodyLarge" font-family="Roboto" font-size="16" font-weight="400" 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" letter-spacing="0.5" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="11" font-weight="500" line-height="16" />
    <text-style name="PriceLarge" font-family="Roboto" font-size="20" font-weight="700" line-height="24" />
  </styles>

  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>

  <col w="360" fill="$surface">

    <!-- device chrome: status bar (untagged) -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelSmall" 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=%23F2E7D8" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23F2E7D8" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23F2E7D8" w="15" h="15" />
      </row>
    </row>

    <!-- top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 6" gap="4" align="middle-left">
      <row w="48" h="48" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23F2E7D8" w="24" h="24" />
      </row>
      <text w="fill" text-style="TitleLarge" value="Checkout" fill="$on-surface" />
      <row w="48" h="48" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/help-outline-rounded.svg?color=%23CBBBA6" w="22" h="22" />
      </row>
    </row>

    <!-- content -->
    <col w="360" p="8 16 20 16" gap="16">

      <!-- free-delivery progress banner -->
      <col role="banner" w="fill" radius="$r-md" fill="$surface-container" p="14" gap="10">
        <row w="fill" gap="10" align="middle-left">
          <img src="https://api.iconify.design/material-symbols/local-shipping-outline-rounded.svg?color=%23F3B85E" w="20" h="20" />
          <text w="fill" text-style="BodyMedium" value="Spend $35.00 more for free delivery" fill="$on-surface" />
        </row>
        <frame w="300" h="6" radius="3" fill="$surface-container-highest">
          <rect x="0" y="0" w="270" h="6" radius="3" fill="$primary" />
        </frame>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="LabelSmall" value="$315.00 of $350.00" fill="$on-surface-variant" />
          <text text-style="LabelSmall" value="90%" fill="$primary" />
        </row>
      </col>

      <!-- delivery address -->
      <col role="card" w="fill" radius="$r-md" fill="$surface-container" p="16" gap="12">
        <row w="fill" gap="8" align="top-left">
          <img src="https://api.iconify.design/material-symbols/location-on-outline-rounded.svg?color=%23F3B85E" w="20" h="20" />
          <col w="180" gap="3">
            <text text-style="LabelMedium" value="DELIVER TO" fill="$on-surface-variant" />
            <text text-style="BodyLarge" value="Jordan Avery" fill="$on-surface" />
            <text text-style="BodyMedium" value="48 Kestrel Lane, Apt 6 · Portland, OR 97204" fill="$on-surface-variant" />
          </col>
          <row w="fill" gap="0" align="top-right">
            <row role="button" h="32" radius="$r-full" p="0 12" align="middle-center">
              <text text-style="LabelLarge" value="Change" fill="$primary" />
            </row>
          </row>
        </row>
      </col>

      <!-- items -->
      <col w="fill" gap="10">
        <row w="fill" gap="8" align="middle-left">
          <text text-style="LabelMedium" value="ITEMS" fill="$on-surface-variant" />
          <row role="badge" h="18" radius="$r-full" fill="$surface-container-high" p="0 7" align="middle-center">
            <text text-style="LabelSmall" value="2" fill="$on-surface-variant" />
          </row>
        </row>

        <col role="card" w="fill" radius="$r-md" fill="$surface-container" p="12" gap="12">
          <!-- item 1 -->
          <row w="fill" gap="12" align="top-left">
            <frame w="64" h="64" radius="$r-sm" clip="true" fill="$surface-container-high">
              <img x="0" y="0" w="64" h="64" fit="cover" src="https://images.unsplash.com/photo-1718049720133-1bd494f6797c?auto=format&amp;fit=crop&amp;w=200&amp;h=200&amp;q=80" />
            </frame>
            <col w="fill" gap="6">
              <text text-style="BodyLarge" value="Lumen Arc Table Lamp" fill="$on-surface" />
              <text text-style="BodyMedium" value="Brushed brass · Small" fill="$on-surface-variant" />
              <row role="stepper" h="32" radius="$r-full" border="1 $outline-variant" align="middle-center">
                <row w="34" h="32" align="middle-center">
                  <img src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%23CBBBA6" w="18" h="18" />
                </row>
                <text w="28" text-style="LabelLarge" value="1" fill="$on-surface" align="center" />
                <row w="34" h="32" align="middle-center">
                  <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23CBBBA6" w="18" h="18" />
                </row>
              </row>
            </col>
            <text w="80" text-style="BodyLarge" value="$199.00" fill="$on-surface" align="right" />
          </row>

          <line role="divider" w="304" fill="$outline-variant" />

          <!-- item 2 -->
          <row w="fill" gap="12" align="top-left">
            <frame w="64" h="64" radius="$r-sm" clip="true" fill="$surface-container-high">
              <img x="0" y="0" w="64" h="64" fit="cover" src="https://images.unsplash.com/photo-1526198049595-f32cde2a219d?auto=format&amp;fit=crop&amp;w=200&amp;h=200&amp;q=80" />
            </frame>
            <col w="fill" gap="6">
              <text text-style="BodyLarge" value="Halden Ceramic Vase" fill="$on-surface" />
              <text text-style="BodyMedium" value="Cobalt matte" fill="$on-surface-variant" />
              <row role="stepper" h="32" radius="$r-full" border="1 $outline-variant" align="middle-center">
                <row w="34" h="32" align="middle-center">
                  <img src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%23CBBBA6" w="18" h="18" />
                </row>
                <text w="28" text-style="LabelLarge" value="2" fill="$on-surface" align="center" />
                <row w="34" h="32" align="middle-center">
                  <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23CBBBA6" w="18" h="18" />
                </row>
              </row>
            </col>
            <col w="80" gap="2">
              <text w="fill" text-style="BodyLarge" value="$116.00" fill="$on-surface" align="right" />
              <text w="fill" text-style="LabelSmall" value="$58.00 each" fill="$on-surface-variant" align="right" />
            </col>
          </row>
        </col>
      </col>

      <!-- delivery method -->
      <col w="fill" gap="10">
        <text text-style="LabelMedium" value="DELIVERY" fill="$on-surface-variant" />
        <row role="segmented-control" w="fill" h="48" radius="$r-full" fill="$surface-container" p="4" gap="4" align="middle-center">
          <row w="fill" h="40" radius="$r-full" fill="$primary-container" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/local-shipping-outline-rounded.svg?color=%23FAD9A2" w="18" h="18" />
            <text text-style="LabelLarge" value="Standard · $12" fill="$on-primary-container" />
          </row>
          <row w="fill" h="40" radius="$r-full" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/bolt-rounded.svg?color=%23CBBBA6" w="18" h="18" />
            <text text-style="LabelLarge" value="Express · $24" fill="$on-surface-variant" />
          </row>
        </row>
      </col>

      <!-- promo applied -->
      <row w="fill" gap="10" align="middle-left">
        <img src="https://api.iconify.design/material-symbols/sell-outline-rounded.svg?color=%2386D6A0" w="18" h="18" />
        <row role="chip" h="32" radius="$r-sm" fill="$success-container" p="0 8 0 12" gap="6" align="middle-center">
          <text text-style="LabelLarge" value="STUDIO10" fill="$on-success-container" />
          <img src="https://api.iconify.design/material-symbols/close-rounded.svg?color=%23A9E9BE" w="16" h="16" />
        </row>
        <text w="fill" text-style="LabelLarge" value="−$31.50" fill="$success" align="right" />
      </row>

      <!-- order summary -->
      <col role="card" w="fill" radius="$r-md" fill="$surface-container" p="16" gap="10">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyMedium" value="Subtotal" fill="$on-surface-variant" />
          <text text-style="BodyMedium" value="$315.00" fill="$on-surface" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyMedium" value="Discount (STUDIO10)" fill="$on-surface-variant" />
          <text text-style="BodyMedium" value="−$31.50" fill="$success" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyMedium" value="Delivery" fill="$on-surface-variant" />
          <text text-style="BodyMedium" value="$12.00" fill="$on-surface" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyMedium" value="Estimated tax" fill="$on-surface-variant" />
          <text text-style="BodyMedium" value="$22.68" fill="$on-surface" />
        </row>
        <line role="divider" w="296" fill="$outline-variant" />
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="Total" fill="$on-surface" />
          <text text-style="TitleMedium" value="$318.18" fill="$on-surface" />
        </row>
      </col>

    </col>

    <!-- viewport-fixed action bar: last flow child -->
    <row w="fill" h="96" fill="$surface-container" p="16 16 24 16" gap="12" align="middle-left">
      <col gap="0">
        <text text-style="LabelMedium" value="Total" fill="$on-surface-variant" />
        <text text-style="PriceLarge" value="$318.18" fill="$on-surface" />
      </col>
      <row role="button" w="fill" h="56" radius="$r-full" fill="$primary" gap="8" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/lock-rounded.svg?color=%233A2600" w="18" h="18" />
        <text text-style="LabelLarge" value="Place order" fill="$on-primary" />
      </row>
    </row>

  </col>
</gui>

```