---
title: "Terra — Checkout"
platform: android
slug: terra-checkout
screens: ["checkout"]
domains: ["ecommerce"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "card", "stepper", "text-field", "segmented-control", "divider", "button"]
score: {clean: 100, consistent: 92, accessible: 92, comprehensible: 44}
url: https://gui.farm/android/terra-checkout
raw: https://gui.farm/android/terra-checkout/design.guix
download: https://gui.farm/android/terra-checkout.gui
---

# Terra — Checkout

A dark Material 3 checkout screen for a ceramics shop, for reviewing items, delivery and payment before placing an order.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Terra — Checkout">
  <tokens>
    <color name="surface" value="#171310" />
    <color name="surface-container" value="#231D18" />
    <color name="surface-container-high" value="#2E2721" />
    <color name="on-surface" value="#EEE3DB" />
    <color name="on-surface-variant" value="#CDBFB4" />
    <color name="outline-variant" value="#4B423B" />
    <color name="primary" value="#FFB59A" />
    <color name="on-primary" value="#521B08" />
    <color name="positive" value="#7FE0A2" />
    <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-full" value="999" />
  </tokens>

  <styles>
    <text-style name="TitleLarge" font-family="Roboto" font-size="20" 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" />
    <text-style name="TotalAmount" 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">

    <!-- system status bar : device chrome, deliberately 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=%23EEE3DB" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23EEE3DB" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23EEE3DB" w="15" h="15" />
      </row>
    </row>

    <!-- M3 centre-aligned top app bar -->
    <row role="top-navigation-bar" w="fill" h="60" p="0 12" gap="4" align="middle-left">
      <row w="40" h="40" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23EEE3DB" w="24" h="24" />
      </row>
      <text w="fill" text-style="TitleLarge" value="Checkout" fill="$on-surface" align="center" />
      <row w="40" h="40" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/help-outline-rounded.svg?color=%23CDBFB4" w="22" h="22" />
      </row>
    </row>

    <col w="360" p="6 16 16 16" gap="14">

      <text text-style="LabelMedium" value="Final step — review &amp; pay" fill="$on-surface-variant" />

      <!-- delivery address -->
      <row role="card" w="328" radius="$r-md" fill="$surface-container" p="14" gap="12" align="middle-left">
        <row w="40" h="40" radius="$r-full" fill="$surface-container-high" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/location-on-outline-rounded.svg?color=%23FFB59A" w="22" h="22" />
        </row>
        <col w="fill" gap="2">
          <text text-style="TitleMedium" value="Jinson Johny" fill="$on-surface" />
          <text w="fill" text-style="BodyMedium" value="48 Alder Court, Brooklyn, NY 11215" fill="$on-surface-variant" />
        </col>
        <text text-style="LabelLarge" value="Change" fill="$primary" />
      </row>

      <!-- order items -->
      <row w="328" gap="auto" align="middle-left">
        <text text-style="TitleMedium" value="Your order" fill="$on-surface" />
        <text text-style="LabelMedium" value="2 items" fill="$on-surface-variant" />
      </row>

      <row role="card" w="328" radius="$r-md" fill="$surface-container" p="12" gap="12" align="top-left">
        <frame w="56" h="56" radius="$r-sm" clip="true">
          <img x="0" y="0" w="56" h="56" fit="cover" src="https://images.unsplash.com/photo-1587411768065-fd9b9dd13359?auto=format&amp;fit=crop&amp;w=112&amp;h=112&amp;q=80" />
        </frame>
        <col w="fill" gap="2">
          <row w="fill" gap="8" align="top-left">
            <text w="fill" text-style="TitleMedium" value="Hana Stoneware Mug" fill="$on-surface" />
            <text text-style="TitleMedium" value="$36.00" fill="$on-surface" />
          </row>
          <text text-style="BodyMedium" value="Clay glaze · 350 ml" fill="$on-surface-variant" />
          <row w="fill" p="6 0 0 0" gap="8" align="middle-left">
            <row role="stepper" w="104" h="32" radius="$r-sm" fill="$surface-container-high" gap="0" align="middle-center">
              <row w="34" h="32" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%23CDBFB4" w="18" h="18" />
              </row>
              <text w="36" 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=%23FFB59A" w="18" h="18" />
              </row>
            </row>
            <text w="fill" text-style="LabelSmall" value="$18.00 each" fill="$on-surface-variant" align="right" />
          </row>
        </col>
      </row>

      <row role="card" w="328" radius="$r-md" fill="$surface-container" p="12" gap="12" align="top-left">
        <frame w="56" h="56" radius="$r-sm" clip="true">
          <img x="0" y="0" w="56" h="56" fit="cover" src="https://images.unsplash.com/photo-1526198049595-f32cde2a219d?auto=format&amp;fit=crop&amp;w=112&amp;h=112&amp;q=80" />
        </frame>
        <col w="fill" gap="2">
          <row w="fill" gap="8" align="top-left">
            <text w="fill" text-style="TitleMedium" value="Ridge Ceramic Vase" fill="$on-surface" />
            <text text-style="TitleMedium" value="$42.00" fill="$on-surface" />
          </row>
          <text text-style="BodyMedium" value="Cobalt · Medium" fill="$on-surface-variant" />
          <row w="fill" p="6 0 0 0" gap="8" align="middle-left">
            <row role="stepper" w="104" h="32" radius="$r-sm" fill="$surface-container-high" gap="0" align="middle-center">
              <row w="34" h="32" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%23CDBFB4" w="18" h="18" />
              </row>
              <text w="36" 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=%23FFB59A" w="18" h="18" />
              </row>
            </row>
            <text w="fill" text-style="LabelSmall" value="$42.00 each" fill="$on-surface-variant" align="right" />
          </row>
        </col>
      </row>

      <!-- free-delivery progress : untagged, no confirmed role for a progress bar -->
      <col role="card" w="328" radius="$r-md" fill="$surface-container" p="14" gap="10">
        <row w="300" gap="8" align="middle-left">
          <img src="https://api.iconify.design/material-symbols/local-shipping-outline-rounded.svg?color=%23FFB59A" w="20" h="20" />
          <text w="fill" text-style="BodyMedium" value="Add $22.00 more for free delivery" fill="$on-surface" />
        </row>
        <row w="300" h="8" radius="$r-full" fill="$surface-container-high" align="middle-left">
          <rect w="234" h="8" radius="$r-full" fill="$positive" />
        </row>
      </col>

      <!-- applied promo code -->
      <row role="text-field" w="328" h="48" radius="$r-md" fill="$surface-container" border="1 $outline-variant" p="0 12" gap="10" align="middle-left">
        <img src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%237FE0A2" w="20" h="20" />
        <text w="fill" text-style="BodyMedium" value="Promo code SAVE10 applied" fill="$on-surface" />
        <text text-style="LabelLarge" value="Remove" fill="$primary" />
      </row>

      <!-- delivery method -->
      <text text-style="TitleMedium" value="Delivery" fill="$on-surface" />
      <row role="segmented-control" w="328" h="52" radius="$r-sm" fill="$surface-container-high" p="4" gap="4" align="middle-left">
        <col w="158" h="44" radius="$r-xs" fill="$primary" gap="1" align="middle-center">
          <text text-style="LabelLarge" value="Standard" fill="$on-primary" />
          <text text-style="LabelSmall" value="3–5 days · $4.90" fill="$on-primary" />
        </col>
        <col w="158" h="44" radius="$r-xs" gap="1" align="middle-center">
          <text text-style="LabelLarge" value="Express" fill="$on-surface" />
          <text text-style="LabelSmall" value="1–2 days · $9.90" fill="$on-surface-variant" />
        </col>
      </row>

      <!-- payment method -->
      <text text-style="TitleMedium" value="Payment" fill="$on-surface" />
      <row role="card" w="328" radius="$r-md" fill="$surface-container" p="14" gap="12" align="middle-left">
        <row w="36" h="24" radius="$r-xs" fill="$surface-container-high" align="middle-center">
          <text text-style="LabelSmall" value="VISA" fill="$on-surface" />
        </row>
        <col w="fill" gap="1">
          <text text-style="TitleMedium" value="Visa •••• 4242" fill="$on-surface" />
          <text text-style="LabelMedium" value="Expires 08 / 28" fill="$on-surface-variant" />
        </col>
        <text text-style="LabelLarge" value="Change" fill="$primary" />
      </row>

      <line w="328" fill="$outline-variant" />

      <!-- price breakdown -->
      <col w="328" gap="10">
        <row w="328" gap="8" align="middle-left">
          <text w="fill" text-style="BodyMedium" value="Subtotal" fill="$on-surface-variant" />
          <text text-style="LabelLarge" value="$78.00" fill="$on-surface" />
        </row>
        <row w="328" gap="8" align="middle-left">
          <text w="fill" text-style="BodyMedium" value="Promo · SAVE10" fill="$on-surface-variant" />
          <text text-style="LabelLarge" value="-$7.80" fill="$positive" />
        </row>
        <row w="328" gap="8" align="middle-left">
          <text w="fill" text-style="BodyMedium" value="Delivery (Standard)" fill="$on-surface-variant" />
          <text text-style="LabelLarge" value="$4.90" fill="$on-surface" />
        </row>
        <row w="328" gap="8" align="top-left">
          <col w="fill" gap="1">
            <text text-style="BodyMedium" value="Estimated tax" fill="$on-surface-variant" />
            <text text-style="LabelSmall" value="Based on 11215" fill="$on-surface-variant" />
          </col>
          <text text-style="LabelLarge" value="$6.23" fill="$on-surface" />
        </row>
        <line role="divider" w="328" fill="$outline-variant" />
        <row w="328" gap="8" align="middle-left">
          <text w="fill" text-style="TitleMedium" value="Total" fill="$on-surface" />
          <text text-style="TotalAmount" value="$81.33" fill="$on-surface" />
        </row>
      </col>

    </col>

    <!-- checkout action bar : viewport-fixed, kept as the last flow child -->
    <row w="360" h="80" fill="$surface-container" border="1 0 0 0 $outline-variant" p="14 16" gap="12" align="middle-left">
      <col w="fill" gap="1">
        <text text-style="LabelMedium" value="Total incl. tax" fill="$on-surface-variant" />
        <text text-style="TotalAmount" value="$81.33" fill="$on-surface" />
      </col>
      <row role="button" w="190" h="52" radius="$r-lg" fill="$primary" gap="8" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/lock-rounded.svg?color=%23521B08" w="18" h="18" />
        <text text-style="LabelLarge" value="Place order" fill="$on-primary" />
      </row>
    </row>

  </col>
</gui>

```