---
title: "Saffron — Order Checkout"
platform: android
slug: saffron-order-checkout
screens: ["checkout"]
domains: ["food-delivery"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "card", "avatar", "badge", "segmented-control", "banner", "divider", "button"]
score: {clean: 100, consistent: 90, accessible: 98, comprehensible: 49}
url: https://gui.farm/android/saffron-order-checkout
raw: https://gui.farm/android/saffron-order-checkout/design.guix
download: https://gui.farm/android/saffron-order-checkout.gui
---

# Saffron — Order Checkout

A dark Material 3 food-delivery checkout screen for reviewing items, tipping, applying a promo, and placing an order.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Saffron — Order Checkout">
  <tokens>
    <color name="surface" value="#14120F" />
    <color name="surface-container" value="#201D19" />
    <color name="surface-container-high" value="#2B2723" />
    <color name="on-surface" value="#F1E9DF" />
    <color name="on-surface-variant" value="#C6BDB2" />
    <color name="outline-variant" value="#3A342D" />
    <color name="primary" value="#FFB870" />
    <color name="on-primary" value="#452B00" />
    <color name="success" value="#8AD59B" />
    <number name="r-card" value="16" />
    <number name="r-tile" value="12" />
    <number name="r-full" value="999" />
  </tokens>

  <styles>
    <text-style name="DisplayTotal" font-family="Roboto" font-size="22" font-weight="700" line-height="28" />
    <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" letter-spacing="0.4" />
  </styles>

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

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

    <!-- system status bar : device chrome, untagged -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-center">
      <text text-style="LabelSmall" value="9:41" fill="$on-surface" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23F1E9DF" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23F1E9DF" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23F1E9DF" w="15" h="15" />
      </row>
    </row>

    <!-- M3 small top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 8" gap="4" align="middle-left">
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23F1E9DF" w="24" h="24" />
      </row>
      <text w="fill" text-style="TitleLarge" value="Checkout" fill="$on-surface" />
      <row h="48" p="0 12" align="middle-center">
        <text text-style="LabelLarge" value="Help" fill="$primary" />
      </row>
    </row>

    <!-- scroll content : canvas hugs, no clip frame -->
    <col w="fill" p="4 16 16 16" gap="12">

      <!-- delivery address -->
      <row role="card" w="fill" radius="$r-card" fill="$surface-container" p="14 16" gap="12" align="middle-left">
        <row w="40" h="40" radius="$r-tile" fill="$surface-container-high" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/home-rounded.svg?color=%23FFB870" w="20" h="20" />
        </row>
        <col w="fill" gap="3">
          <text text-style="TitleMedium" value="Deliver to Home" fill="$on-surface" />
          <text text-style="BodyMedium" value="214 Marlowe St, Apt 6B · Brooklyn" fill="$on-surface-variant" />
        </col>
        <text text-style="LabelLarge" value="Change" fill="$primary" />
      </row>

      <!-- order items -->
      <col role="card" w="fill" radius="$r-card" fill="$surface-container" p="14 16" gap="12">
        <row w="fill" gap="12" align="middle-left">
          <row role="avatar" w="40" h="40" radius="$r-tile" fill="$primary" align="middle-center">
            <text text-style="TitleMedium" value="OT" fill="$on-primary" />
          </row>
          <col w="fill" gap="2">
            <text text-style="TitleMedium" value="Olive &amp; Thyme" fill="$on-surface" />
            <text text-style="LabelMedium" value="Wood-fired kitchen · 0.7 mi" fill="$on-surface-variant" />
          </col>
          <row role="badge" h="24" radius="$r-full" fill="$surface-container-high" p="0 10" align="middle-center">
            <text text-style="LabelSmall" value="25-35 MIN" fill="$on-surface-variant" />
          </row>
        </row>

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

        <!-- item 1 -->
        <row w="fill" gap="12" align="middle-left">
          <frame w="56" h="56" radius="$r-tile" clip="true">
            <img x="0" y="0" w="56" h="56" fit="cover" src="https://images.unsplash.com/photo-1649688423692-308d2fc1027d?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80" />
          </frame>
          <col w="fill" gap="3">
            <text text-style="LabelLarge" value="Wood-Fired Margherita" fill="$on-surface" />
            <text text-style="BodyMedium" value="San Marzano, mozzarella, basil" fill="$on-surface-variant" />
            <text text-style="LabelMedium" value="×1" fill="$on-surface-variant" />
          </col>
          <text text-style="LabelLarge" value="$16.00" fill="$on-surface" />
        </row>

        <!-- item 2 -->
        <row w="fill" gap="12" align="middle-left">
          <frame w="56" h="56" radius="$r-tile" clip="true">
            <img x="0" y="0" w="56" h="56" fit="cover" src="https://images.unsplash.com/photo-1682117650826-881357860ec9?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80" />
          </frame>
          <col w="fill" gap="3">
            <text text-style="LabelLarge" value="Truffle Parmesan Fries" fill="$on-surface" />
            <text text-style="BodyMedium" value="Truffle oil, grana padano" fill="$on-surface-variant" />
            <text text-style="LabelMedium" value="×2  ·  $4.50 each" fill="$on-surface-variant" />
          </col>
          <text text-style="LabelLarge" value="$9.00" fill="$on-surface" />
        </row>

        <!-- item 3 -->
        <row w="fill" gap="12" align="middle-left">
          <frame w="56" h="56" radius="$r-tile" clip="true">
            <img x="0" y="0" w="56" h="56" fit="cover" src="https://images.unsplash.com/photo-1561451055-0de615569a38?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80" />
          </frame>
          <col w="fill" gap="3">
            <text text-style="LabelLarge" value="Heirloom Tomato Salad" fill="$on-surface" />
            <text text-style="BodyMedium" value="Burrata, aged balsamic" fill="$on-surface-variant" />
            <text text-style="LabelMedium" value="×1" fill="$on-surface-variant" />
          </col>
          <text text-style="LabelLarge" value="$5.00" fill="$on-surface" />
        </row>

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

        <row w="fill" gap="8" align="middle-left">
          <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23FFB870" w="20" h="20" />
          <text text-style="LabelLarge" value="Add more items" fill="$primary" />
        </row>
      </col>

      <!-- tip -->
      <col role="card" w="fill" radius="$r-card" fill="$surface-container" p="14 16" gap="12">
        <col gap="2">
          <text text-style="TitleMedium" value="Add a tip" fill="$on-surface" />
          <text text-style="BodyMedium" value="100% goes to your courier" fill="$on-surface-variant" />
        </col>
        <row role="segmented-control" w="fill" gap="8" align="middle-center">
          <col w="68" h="56" radius="$r-tile" fill="$surface-container-high" gap="2" align="middle-center">
            <text text-style="LabelLarge" value="10%" fill="$on-surface" />
            <text text-style="LabelMedium" value="$3.00" fill="$on-surface-variant" />
          </col>
          <col w="68" h="56" radius="$r-tile" fill="$primary" gap="2" align="middle-center">
            <text text-style="LabelLarge" value="15%" fill="$on-primary" />
            <text text-style="LabelMedium" value="$4.50" fill="$on-primary" />
          </col>
          <col w="68" h="56" radius="$r-tile" fill="$surface-container-high" gap="2" align="middle-center">
            <text text-style="LabelLarge" value="20%" fill="$on-surface" />
            <text text-style="LabelMedium" value="$6.00" fill="$on-surface-variant" />
          </col>
          <col w="68" h="56" radius="$r-tile" fill="$surface-container-high" align="middle-center">
            <text text-style="LabelLarge" value="Custom" fill="$on-surface" />
          </col>
        </row>
      </col>

      <!-- utensils toggle : untagged M3 switch (no switch role in vocab) -->
      <row role="card" w="fill" radius="$r-card" fill="$surface-container" p="12 16" gap="12" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/restaurant-rounded.svg?color=%23C6BDB2" w="22" h="22" />
        <col w="fill" gap="2">
          <text text-style="LabelLarge" value="Add utensils &amp; napkins" fill="$on-surface" />
          <text text-style="BodyMedium" value="Skip it to cut plastic waste" fill="$on-surface-variant" />
        </col>
        <row w="52" h="32" radius="$r-full" fill="$primary" p="0 4" align="middle-right">
          <ellipse w="24" h="24" fill="$on-primary" />
        </row>
      </row>

      <!-- promo savings banner -->
      <row role="banner" w="fill" radius="$r-tile" fill="$surface-container" p="12 16" gap="12" border="1 $outline-variant" align="middle-center">
        <row w="34" h="34" radius="$r-full" fill="$surface-container-high" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/sell-rounded.svg?color=%238AD59B" w="18" h="18" />
        </row>
        <col w="fill" gap="2">
          <text text-style="LabelLarge" value="You're saving $3.00" fill="$success" />
          <text text-style="BodyMedium" value="Promo SAFFRON10 applied" fill="$on-surface-variant" />
        </col>
        <text text-style="LabelMedium" value="REMOVE" fill="$on-surface-variant" />
      </row>

      <!-- payment summary -->
      <col role="card" w="fill" radius="$r-card" fill="$surface-container" p="14 16" gap="10">
        <text text-style="TitleMedium" value="Payment summary" fill="$on-surface" />
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="BodyMedium" value="Subtotal" fill="$on-surface-variant" />
          <text text-style="LabelLarge" value="$30.00" fill="$on-surface" />
        </row>
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="BodyMedium" value="Delivery fee" fill="$on-surface-variant" />
          <text text-style="LabelLarge" value="$2.99" fill="$on-surface" />
        </row>
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="BodyMedium" value="Service fee" fill="$on-surface-variant" />
          <text text-style="LabelLarge" value="$1.50" fill="$on-surface" />
        </row>
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="BodyMedium" value="Promo (SAFFRON10)" fill="$on-surface-variant" />
          <text text-style="LabelLarge" value="-$3.00" fill="$success" />
        </row>
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="BodyMedium" value="Tip (15%)" fill="$on-surface-variant" />
          <text text-style="LabelLarge" value="$4.50" fill="$on-surface" />
        </row>
        <line role="divider" w="fill" fill="$outline-variant" />
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="TitleMedium" value="Total" fill="$on-surface" />
          <text text-style="DisplayTotal" value="$35.99" fill="$on-surface" />
        </row>
      </col>

      <!-- payment method -->
      <row role="card" w="fill" radius="$r-card" fill="$surface-container" p="14 16" gap="12" align="middle-left">
        <row w="40" h="40" radius="$r-tile" fill="$surface-container-high" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/credit-card-rounded.svg?color=%23C6BDB2" w="20" h="20" />
        </row>
        <col w="fill" gap="2">
          <text text-style="TitleMedium" value="Visa •••• 4242" fill="$on-surface" />
          <text text-style="BodyMedium" value="Apple Pay also available" fill="$on-surface-variant" />
        </col>
        <text text-style="LabelLarge" value="Change" fill="$primary" />
      </row>

    </col>

    <!-- fixed action bar : last flow child -->
    <line w="fill" fill="$outline-variant" />
    <row w="fill" h="84" p="14 16 16 16" fill="$surface-container" gap="auto" align="middle-center">
      <col gap="2">
        <text text-style="LabelMedium" value="Total · incl. fees" fill="$on-surface-variant" />
        <text text-style="DisplayTotal" value="$35.99" fill="$on-surface" />
      </col>
      <row role="button" w="188" h="52" radius="$r-full" fill="$primary" gap="8" align="middle-center">
        <text text-style="LabelLarge" value="Place order" fill="$on-primary" />
        <img src="https://api.iconify.design/material-symbols/arrow-forward-rounded.svg?color=%23452B00" w="20" h="20" />
      </row>
    </row>

  </col>
</gui>

```