---
title: "Kiln — Book a Wheel Session"
platform: android
slug: kiln-book-a-wheel-session
screens: ["checkout"]
domains: ["booking"]
style: "material"
fonts: ["Fraunces", "Roboto"]
roles: ["top-navigation-bar", "card", "badge", "avatar", "segmented-control", "button", "date-picker", "chip", "stepper", "select", "text-field", "accordion", "divider", "banner"]
score: {clean: 100, consistent: 86, accessible: 87, comprehensible: 54}
url: https://gui.farm/android/kiln-book-a-wheel-session
raw: https://gui.farm/android/kiln-book-a-wheel-session/design.guix
download: https://gui.farm/android/kiln-book-a-wheel-session.gui
---

# Kiln — Book a Wheel Session

A pottery studio booking screen for choosing a session length, date, time and seats before reserving.

- **Live preview:** https://gui.farm/android/kiln-book-a-wheel-session
- **Raw source:** https://gui.farm/android/kiln-book-a-wheel-session/design.guix
- **Download (.gui):** https://gui.farm/android/kiln-book-a-wheel-session.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Kiln — Book a Wheel Session">
  <tokens>
    <!-- warm paper ground, terracotta primary, celadon for the one glaze accent -->
    <color name="surface" value="#FCF6F0" />
    <color name="card" value="#FFFFFF" />
    <color name="surface-container-high" value="#EEE0D4" />
    <color name="on-surface" value="#221A16" />
    <color name="on-surface-variant" value="#55443C" />
    <color name="outline" value="#877268" />
    <color name="outline-variant" value="#E0CFC4" />
    <color name="primary" value="#9C4426" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="primary-container" value="#FFDBCF" />
    <color name="on-primary-container" value="#380D00" />
    <color name="celadon" value="#D9E6DC" />
    <color name="on-celadon" value="#16251B" />
    <color name="on-hero" value="#FFFFFF" />
    <color name="on-hero-variant" value="#FFE8DC" />
    <color name="disabled" value="#7F6F68" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="20" />
    <number name="r-full" value="999" />
  </tokens>

  <styles>
    <!-- Fraunces carries the brand voice; Roboto does all the interface work -->
    <text-style name="Display" font-family="Fraunces" font-size="26" font-weight="600" line-height="32" />
    <text-style name="Price" font-family="Fraunces" font-size="24" font-weight="600" 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" />
    <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" />
    <font family="Fraunces" source="google" weights="500 600" styles="normal" />
  </fonts>

  <!-- No scroll in .gui: the canvas expands to all content, so the root col
       hugs its children and the action bar is the last flow child, not a
       viewport-pinned overlay. -->
  <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=%23221A16" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23221A16" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23221A16" w="15" h="15" />
      </row>
    </row>

    <!-- M3 small top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 4" 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=%23221A16" w="24" h="24" />
      </row>
      <text w="fill" text-style="TitleMedium" value="Book a session" fill="$on-surface" />
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/help-outline-rounded.svg?color=%2355443C" w="24" h="24" />
      </row>
    </row>

    <col w="fill" p="4 16 28 16" gap="18">

      <!-- ============ HERO ============
           A photograph does the work the drawn wheel motif was failing to do.
           The scrim here is functional, not a patch over decoration: it exists
           only so the caption stays legible across whatever the crop lands on. -->
      <frame role="card" w="328" h="200" radius="$r-lg" clip="true">
        <appearance>
          <fill type="color" value="$surface-container-high" />
          <effect type="drop-shadow" x="0" y="6" radius="18" spread="-6" color="#56200E29" />
        </appearance>

        <img x="0" y="0" w="328" h="200" fit="cover"
             src="https://images.unsplash.com/photo-1753164725860-ffcd260b7b32?auto=format&amp;fit=crop&amp;w=656&amp;h=400&amp;q=80" />
        <rect x="0" y="86" w="328" h="114" fill="linear-gradient(180deg, #2A0F0500 0%, #2A0F05E6 100%)" />

        <row role="badge" x="16" y="16" h="28" radius="$r-full" fill="$card" p="0 12" gap="6" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/eco-outline-rounded.svg?color=%239C4426" w="14" h="14" />
          <text text-style="LabelMedium" value="Beginners welcome" fill="$primary" />
        </row>

        <col x="20" y="126" w="252" gap="4">
          <text text-style="Display" value="Wheel throwing" fill="$on-hero" />
          <text text-style="BodyMedium" value="Centering, pulling, trimming" fill="$on-hero-variant" />
        </col>
      </frame>

      <!-- class facts sit on the paper, where they need no scrim to be read -->
      <row w="328" gap="16" align="middle-left">
        <row gap="6" align="middle-left">
          <img src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%2355443C" w="16" h="16" />
          <text text-style="LabelMedium" value="2 hrs" fill="$on-surface-variant" />
        </row>
        <row gap="6" align="middle-left">
          <img src="https://api.iconify.design/material-symbols/group-outline-rounded.svg?color=%2355443C" w="16" h="16" />
          <text text-style="LabelMedium" value="6 wheels" fill="$on-surface-variant" />
        </row>
        <row gap="6" align="middle-left">
          <img src="https://api.iconify.design/material-symbols/location-on-outline-rounded.svg?color=%2355443C" w="16" h="16" />
          <text text-style="LabelMedium" value="SE Portland" fill="$on-surface-variant" />
        </row>
      </row>

      <!-- ============ INSTRUCTOR ============ -->
      <row w="328" gap="12" align="middle-left">
        <row role="avatar" w="46" h="46" radius="23" fill="$primary-container" align="middle-center">
          <text text-style="TitleMedium" value="EM" fill="$on-primary-container" />
        </row>
        <col w="fill" gap="1">
          <text text-style="TitleMedium" value="Elena Marsh" fill="$on-surface" />
          <text text-style="BodyMedium" value="Lead ceramicist · 8 years at the wheel" fill="$on-surface-variant" />
        </col>
        <row role="badge" h="26" radius="$r-full" fill="$surface-container-high" p="0 10" gap="4" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%239C4426" w="14" h="14" />
          <text text-style="LabelMedium" value="4.9" fill="$on-surface-variant" />
        </row>
      </row>

      <!-- ============ BOOKING CARD ============
           Length, date, time and seats are one decision, so they live in one
           elevated card divided by hairlines rather than four loose blocks.
           Every control inside is fully rounded — a deliberate echo of thrown
           forms, and it keeps the selected state unmistakable. -->
      <col w="328" radius="$r-lg" clip="true">
        <appearance>
          <fill type="color" value="$card" />
          <border color="$outline-variant" w="1" align="inside" />
          <effect type="drop-shadow" x="0" y="4" radius="16" spread="-6" color="#56200E1F" />
        </appearance>

        <!-- session length : price lives on the control, so the breakdown
             below reconciles against a number the user has already seen -->
        <col w="fill" p="16 16 14 16" gap="10">
          <text text-style="TitleMedium" value="Session length" fill="$on-surface" />
          <row role="segmented-control" w="296" h="58" radius="$r-full" border="1 $outline" align="middle-center">
            <col w="fill" h="fill" radius="$r-full" fill="$primary-container" gap="1" align="middle-center">
              <row gap="6" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23380D00" w="16" h="16" />
                <text text-style="LabelLarge" value="2 hrs" fill="$on-primary-container" />
              </row>
              <text text-style="LabelSmall" value="$95 per seat" fill="$on-primary-container" />
            </col>
            <col w="fill" h="fill" gap="1" align="middle-center">
              <text text-style="LabelLarge" value="3 hrs" fill="$on-surface-variant" />
              <text text-style="LabelSmall" value="$130 · with glazing" fill="$on-surface-variant" />
            </col>
          </row>
        </col>

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

        <!-- date : unselected days are transparent so the filled day carries
             all the weight, instead of six competing boxes -->
        <col w="fill" p="14 16" gap="10">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="TitleMedium" value="Pick a date" fill="$on-surface" />
            <row role="button" gap="4" align="middle-right">
              <text text-style="LabelMedium" value="Aug 2026" fill="$primary" />
              <img src="https://api.iconify.design/material-symbols/calendar-month-outline-rounded.svg?color=%239C4426" w="16" h="16" />
            </row>
          </row>

          <row role="date-picker" w="296" gap="6" align="middle-left">
            <col w="44" h="76" radius="22" fill="$primary" gap="4" align="middle-center">
              <text text-style="LabelSmall" value="TODAY" fill="$primary-container" />
              <text text-style="TitleMedium" value="11" fill="$on-primary" />
              <ellipse w="5" h="5" fill="$primary-container" />
            </col>
            <col w="44" h="76" radius="22" fill="none" gap="4" align="middle-center">
              <text text-style="LabelSmall" value="WED" fill="$on-surface-variant" />
              <text text-style="TitleMedium" value="12" fill="$on-surface" />
              <ellipse w="5" h="5" fill="$primary" />
            </col>
            <col w="44" h="76" radius="22" fill="none" gap="4" align="middle-center">
              <text text-style="LabelSmall" value="THU" fill="$disabled" />
              <text text-style="TitleMedium" value="13" fill="$disabled" />
              <text text-style="LabelSmall" value="Full" fill="$disabled" />
            </col>
            <col w="44" h="76" radius="22" fill="none" gap="4" align="middle-center">
              <text text-style="LabelSmall" value="FRI" fill="$on-surface-variant" />
              <text text-style="TitleMedium" value="14" fill="$on-surface" />
              <ellipse w="5" h="5" fill="$primary" />
            </col>
            <col w="44" h="76" radius="22" fill="none" gap="4" align="middle-center">
              <text text-style="LabelSmall" value="SAT" fill="$on-surface-variant" />
              <text text-style="TitleMedium" value="15" fill="$on-surface" />
              <ellipse w="5" h="5" fill="$primary" />
            </col>
            <col w="44" h="76" radius="22" fill="none" gap="4" align="middle-center">
              <text text-style="LabelSmall" value="SUN" fill="$on-surface-variant" />
              <text text-style="TitleMedium" value="16" fill="$on-surface" />
              <ellipse w="5" h="5" fill="$primary" />
            </col>
          </row>
        </col>

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

        <!-- time : three chips only — four 12-hour labels overflow 296 -->
        <col w="fill" p="14 16" gap="10">
          <text text-style="TitleMedium" value="Start time" fill="$on-surface" />
          <row w="296" gap="8" align="middle-left">
            <row role="chip" h="38" radius="$r-full" fill="none" border="1 $outline-variant" p="0 14" align="middle-center">
              <text text-style="LabelLarge" value="10:00 AM" fill="$disabled" />
            </row>
            <row role="chip" h="38" radius="$r-full" fill="$primary-container" p="0 12" gap="6" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23380D00" w="17" h="17" />
              <text text-style="LabelLarge" value="1:30 PM" fill="$on-primary-container" />
            </row>
            <row role="chip" h="38" radius="$r-full" fill="none" border="1 $outline" p="0 14" align="middle-center">
              <text text-style="LabelLarge" value="4:00 PM" fill="$on-surface-variant" />
            </row>
          </row>
          <row w="296" gap="6" align="middle-left">
            <ellipse w="6" h="6" fill="$primary" />
            <text text-style="LabelSmall" value="Only 2 seats left at 1:30 PM" fill="$primary" />
          </row>
        </col>

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

        <!-- seats -->
        <row role="stepper" w="fill" h="72" p="0 10 0 16" gap="auto" align="middle-left">
          <col gap="2">
            <text text-style="TitleMedium" value="Seats" fill="$on-surface" />
            <text text-style="LabelSmall" value="One wheel per person" fill="$on-surface-variant" />
          </col>
          <row gap="4" align="middle-right">
            <row w="44" h="44" radius="22" fill="none" border="1 $outline-variant" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%2355443C" w="20" h="20" />
            </row>
            <row w="36" align="middle-center">
              <text text-style="TitleMedium" value="2" fill="$on-surface" />
            </row>
            <row w="44" h="44" radius="22" fill="$primary-container" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23380D00" w="20" h="20" />
            </row>
          </row>
        </row>
      </col>

      <!-- ============ CLAY BODY SELECT ============ -->
      <row role="select" w="328" h="64" radius="$r-md" fill="$card" border="1 $outline" p="0 16" gap="12" align="middle-left">
        <col w="fill" gap="1">
          <text text-style="LabelSmall" value="Clay body" fill="$primary" />
          <text text-style="BodyLarge" value="Buff stoneware · cone 6" fill="$on-surface" />
        </col>
        <img src="https://api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg?color=%2355443C" w="22" h="22" />
      </row>

      <!-- ============ NOTES ============ -->
      <col w="328" gap="6">
        <col role="text-field" w="328" h="96" radius="$r-md" fill="$card" border="1 $outline-variant" p="12 16" gap="4">
          <text text-style="LabelSmall" value="Anything Elena should know?" fill="$on-surface-variant" />
          <text w="fill" max-lines="2" text-style="BodyLarge" value="Left-handed, and I'd love to try a taller form this time" fill="$on-surface" />
        </col>
        <row w="328" p="0 16" gap="auto" align="middle-left">
          <text text-style="LabelSmall" value="Optional" fill="$on-surface-variant" />
          <text text-style="LabelSmall" value="56 / 200" fill="$on-surface-variant" />
        </row>
      </col>

      <!-- ============ ACCORDION : first panel open, second collapsed ============ -->
      <col role="accordion" w="328" radius="$r-lg" fill="$card" border="1 $outline-variant" clip="true">
        <row w="fill" h="54" p="0 16" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="What's included" fill="$on-surface" />
          <img src="https://api.iconify.design/material-symbols/keyboard-arrow-up-rounded.svg?color=%2355443C" w="22" h="22" />
        </row>
        <col w="fill" p="0 16 16 16" gap="10">
          <row gap="10" align="middle-left">
            <img src="https://api.iconify.design/material-symbols/check-circle-outline-rounded.svg?color=%239C4426" w="18" h="18" />
            <text text-style="BodyMedium" value="5 lbs of clay, wedged and ready" fill="$on-surface-variant" />
          </row>
          <row gap="10" align="middle-left">
            <img src="https://api.iconify.design/material-symbols/check-circle-outline-rounded.svg?color=%239C4426" w="18" h="18" />
            <text text-style="BodyMedium" value="Bisque and glaze firing, two pieces" fill="$on-surface-variant" />
          </row>
          <row gap="10" align="middle-left">
            <img src="https://api.iconify.design/material-symbols/check-circle-outline-rounded.svg?color=%239C4426" w="18" h="18" />
            <text text-style="BodyMedium" value="Apron, tools, and very good coffee" fill="$on-surface-variant" />
          </row>
        </col>
        <line role="divider" w="fill" fill="$outline-variant" />
        <row w="fill" h="54" p="0 16" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="Cancellation policy" fill="$on-surface" />
          <img src="https://api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg?color=%2355443C" w="22" h="22" />
        </row>
      </col>

      <!-- ============ FIRING BANNER : celadon, the one non-clay hue ============ -->
      <row role="banner" w="328" radius="$r-lg" fill="$celadon" p="14 16" gap="12" align="top-left">
        <img src="https://api.iconify.design/material-symbols/local-fire-department-outline-rounded.svg?color=%2316251B" w="20" h="20" />
        <col w="fill" gap="3">
          <text text-style="LabelLarge" value="Your pieces come home in about 3 weeks" fill="$on-celadon" />
          <text text-style="BodyMedium" value="The kiln runs every other Sunday. We text you when yours is out." fill="$on-celadon" />
        </col>
      </row>

      <!-- ============ PRICE ============ 2 × $95 + $30 − $20 = $200 -->
      <col w="328" radius="$r-lg" p="16" gap="12">
        <appearance>
          <fill type="color" value="$card" />
          <border color="$outline-variant" w="1" align="inside" />
          <effect type="drop-shadow" x="0" y="4" radius="16" spread="-6" color="#56200E1F" />
        </appearance>
        <text text-style="TitleMedium" value="Price" fill="$on-surface" />
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyMedium" value="Class fee · 2 seats" fill="$on-surface-variant" />
          <text text-style="BodyMedium" value="$190" fill="$on-surface" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyMedium" value="Clay and firing" fill="$on-surface-variant" />
          <text text-style="BodyMedium" value="$30" fill="$on-surface" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyMedium" value="Returning student credit" fill="$on-surface-variant" />
          <text text-style="BodyMedium" value="− $20" fill="$primary" />
        </row>
        <line w="fill" fill="$outline-variant" />
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="LabelLarge" value="Total" fill="$on-surface-variant" />
          <text text-style="Price" value="$200" fill="$on-surface" />
        </row>
      </col>

    </col>

    <!-- ============ ACTION BAR : last flow child, so it sits at the bottom of
         the expanded canvas rather than floating over clipped content ============ -->
    <col w="fill">
      <appearance>
        <fill type="color" value="$card" />
        <border color="$outline-variant" w="1" align="inside" />
        <effect type="drop-shadow" x="0" y="-6" radius="20" spread="-6" color="#56200E1F" />
      </appearance>
      <row w="fill" h="72" p="0 16" gap="14" align="middle-left">
        <col w="fill" gap="1">
          <text text-style="LabelSmall" value="Total · Aug 11, 1:30 PM" fill="$on-surface-variant" />
          <text text-style="Price" value="$200" fill="$on-surface" />
        </col>
        <row role="button" h="52" radius="$r-full" fill="$primary" p="0 24" gap="8" align="middle-center">
          <text text-style="LabelLarge" value="Reserve seats" fill="$on-primary" />
          <img src="https://api.iconify.design/material-symbols/arrow-forward-rounded.svg?color=%23FFFFFF" w="18" h="18" />
        </row>
      </row>
      <row w="fill" h="26" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$on-surface-variant" />
      </row>
    </col>

  </col>
</gui>

```