---
title: "Beckett — Marston Boot"
platform: android
slug: beckett-marston-boot
screens: ["product-detail"]
domains: ["ecommerce"]
style: "minimal"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "carousel", "badge", "item-indicator", "hyperlink", "chip", "card", "avatar", "toolbar", "button"]
score: {clean: 99, consistent: 85, accessible: 97, comprehensible: 31}
url: https://gui.farm/android/beckett-marston-boot
raw: https://gui.farm/android/beckett-marston-boot/design.guix
download: https://gui.farm/android/beckett-marston-boot.gui
---

# Beckett — Marston Boot

Leather boot product detail page with image carousel, colour and size selectors, and construction specs.

- **Live preview:** https://gui.farm/android/beckett-marston-boot
- **Raw source:** https://gui.farm/android/beckett-marston-boot/design.guix
- **Download (.gui):** https://gui.farm/android/beckett-marston-boot.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Beckett — Marston Boot">
  <tokens>
    <color name="page" value="#F2EADB" />
    <color name="surface" value="#FFFDF8" />
    <color name="on-surface" value="#2A211A" />
    <color name="on-surface-variant" value="#6B5D50" />
    <color name="oxblood" value="#7C2F2C" />
    <color name="oxblood-text" value="#6E2622" />
    <color name="on-accent" value="#FBEEEA" />
    <color name="outline" value="#E2D6C2" />
    <color name="track" value="#E9DECC" />
    <color name="badge-tint" value="#F1E1DC" />
    <color name="lea-chestnut" value="#6B4A2F" />
    <color name="lea-oxblood" value="#7C2F2C" />
    <color name="lea-black" value="#241C16" />
    <color name="lea-tan" value="#B08653" />
    <color name="counter-bg" value="#241C16" />
    <number name="r-sm" value="8" />
    <number name="r-lg" value="16" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Eyebrow" font-family="Roboto" font-size="11" font-weight="500" line-height="16" letter-spacing="0.8" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="500" line-height="28" />
    <text-style name="PriceLarge" font-family="Roboto" font-size="24" font-weight="700" line-height="28" />
    <text-style name="PriceBar" font-family="Roboto" font-size="20" font-weight="700" line-height="24" />
    <text-style name="Display" font-family="Roboto" font-size="34" font-weight="700" line-height="40" />
    <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="ChipLabel" font-family="Roboto" font-size="15" font-weight="500" 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" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <col w="360" fill="$page">
    <!-- system status bar : device chrome, untagged -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelMedium" 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=%232A211A" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%232A211A" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%232A211A" w="15" h="15" />
      </row>
    </row>
    <!-- M3 top app bar : back on the left (Android), share + save on the right -->
    <row role="top-navigation-bar" w="fill" h="56" p="0 8" gap="4" align="middle-left">
      <row w="44" h="44" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%232A211A" w="24" h="24" />
      </row>
      <text w="fill" text-style="LabelLarge" value="" fill="$on-surface" />
      <row w="44" h="44" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/ios-share-rounded.svg?color=%232A211A" w="22" h="22" />
      </row>
      <row w="44" h="44" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/favorite-outline-rounded.svg?color=%232A211A" w="22" h="22" />
      </row>
    </row>
    <!-- HERO : product image carousel with dot indicator -->
    <frame role="carousel" w="360" h="360" fill="$track" clip="true">
      <img x="0" y="0" w="360" h="360" fit="cover" src="https://images.unsplash.com/photo-1449505278894-297fdb3edbc1?auto=format&amp;fit=crop&amp;w=720&amp;h=720&amp;q=80" />
      <!-- bestseller badge : self-contained fill, sits over photo -->
      <row role="badge" x="16" y="16" h="26" radius="$r-full" fill="$oxblood" p="0 12" align="middle-center">
        <text text-style="Eyebrow" value="BESTSELLER" fill="$on-accent" />
      </row>
      <!-- image counter : solid pill, self-contained contrast -->
      <row x="296" y="16" h="26" radius="$r-full" fill="$counter-bg" p="0 11" align="middle-center">
        <text text-style="LabelMedium" value="1 / 5" fill="$on-accent" />
      </row>
    </frame>
    <!-- carousel dots below the hero, on page bg (non-text indicator) -->
    <row role="item-indicator" w="360" gap="6" align="middle-center" p="12 0 0 0">
      <rect w="18" h="6" radius="3" fill="$oxblood" />
      <ellipse w="6" h="6" fill="$track" />
      <ellipse w="6" h="6" fill="$track" />
      <ellipse w="6" h="6" fill="$track" />
      <ellipse w="6" h="6" fill="$track" />
    </row>
    <!-- PRODUCT INFO -->
    <col w="360" p="16 16 0 16" gap="6">
      <text text-style="Eyebrow" value="BECKETT LEATHERGOODS" fill="$oxblood-text" />
      <text text-style="TitleLarge" value="Marston Derby Boot" fill="$on-surface" />
      <row w="fill" gap="auto" align="middle-left">
        <text text-style="PriceLarge" value="$340" fill="$oxblood-text" />
        <row gap="5" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%237C2F2C" w="18" h="18" />
          <text text-style="TitleMedium" value="4.6" fill="$on-surface" />
          <text text-style="BodyMedium" value="· 432 reviews" fill="$on-surface-variant" />
        </row>
      </row>
      <row gap="8" align="middle-left" p="4 0 0 0">
        <row role="badge" h="24" radius="$r-full" fill="$badge-tint" p="0 10" align="middle-center">
          <text text-style="LabelMedium" value="In stock" fill="$oxblood-text" />
        </row>
        <text text-style="BodyMedium" value="Ships in 2 days · Free returns" fill="$on-surface-variant" />
      </row>
    </col>
    <!-- LEATHER SELECTOR -->
    <col w="360" p="22 16 0 16" gap="12">
      <row w="fill" gap="auto" align="middle-left">
        <text text-style="TitleMedium" value="Leather" fill="$on-surface" />
        <text text-style="BodyMedium" value="Chestnut" fill="$on-surface-variant" />
      </row>
      <row gap="12" align="middle-left">
        <frame w="48" h="48" radius="$r-full" border="2 $oxblood" align="middle-center">
          <ellipse x="4" y="4" w="40" h="40" fill="$lea-chestnut" />
        </frame>
        <ellipse w="40" h="40" fill="$lea-oxblood" border="1 $outline" />
        <ellipse w="40" h="40" fill="$lea-black" border="1 $outline" />
        <ellipse w="40" h="40" fill="$lea-tan" border="1 $outline" />
      </row>
    </col>
    <!-- SIZE SELECTOR -->
    <col w="360" p="22 16 0 16" gap="10">
      <row w="fill" gap="auto" align="middle-left">
        <text text-style="TitleMedium" value="Size · UK" fill="$on-surface" />
        <text role="hyperlink" text-style="LabelLarge" value="Size guide" fill="$oxblood-text" />
      </row>
      <!-- row 1 : 4 chips of 76 + 3 gaps of 8 = 328 -->
      <row w="328" gap="8" align="middle-left">
        <row role="chip" w="76" h="48" radius="$r-sm" fill="$surface" border="1 $outline" align="middle-center">
          <text text-style="ChipLabel" value="7" fill="$on-surface" />
        </row>
        <row role="chip" w="76" h="48" radius="$r-sm" fill="$surface" border="1 $outline" align="middle-center">
          <text text-style="ChipLabel" value="7.5" fill="$on-surface" />
        </row>
        <row role="chip" w="76" h="48" radius="$r-sm" fill="$surface" border="1 $outline" align="middle-center">
          <text text-style="ChipLabel" value="8" fill="$on-surface" />
        </row>
        <row role="chip" w="76" h="48" radius="$r-sm" fill="$surface" border="1 $outline" align="middle-center">
          <text text-style="ChipLabel" value="8.5" fill="$on-surface" />
        </row>
      </row>
      <!-- row 2 : size 9 selected (oxblood), size 11 sold out -->
      <row w="328" gap="8" align="middle-left">
        <row role="chip" w="76" h="48" radius="$r-sm" fill="$oxblood" align="middle-center">
          <text text-style="ChipLabel" value="9" fill="$on-accent" />
        </row>
        <row role="chip" w="76" h="48" radius="$r-sm" fill="$surface" border="1 $outline" align="middle-center">
          <text text-style="ChipLabel" value="9.5" fill="$on-surface" />
        </row>
        <row role="chip" w="76" h="48" radius="$r-sm" fill="$surface" border="1 $outline" align="middle-center">
          <text text-style="ChipLabel" value="10" fill="$on-surface" />
        </row>
        <row role="chip" w="76" h="48" radius="$r-sm" fill="$page" border="1 $outline dashed" align="middle-center">
          <text text-style="ChipLabel" value="11" fill="$on-surface-variant" decoration="strikethrough" />
        </row>
      </row>
    </col>
    <!-- DETAILS -->
    <col w="360" p="22 16 0 16" gap="8">
      <text text-style="Eyebrow" value="DETAILS" fill="$oxblood-text" p="0 0 0 2" />
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline" p="4 16">
        <row w="fill" h="52" gap="auto" align="middle-left">
          <text text-style="BodyLarge" value="Construction" fill="$on-surface-variant" />
          <text text-style="BodyLarge" value="Goodyear welted" fill="$on-surface" />
        </row>
        <line w="296" fill="$outline" />
        <row w="fill" h="52" gap="auto" align="middle-left">
          <text text-style="BodyLarge" value="Sole" fill="$on-surface-variant" />
          <text text-style="BodyLarge" value="Dainite rubber" fill="$on-surface" />
        </row>
        <line w="296" fill="$outline" />
        <row w="fill" h="52" gap="auto" align="middle-left">
          <text text-style="BodyLarge" value="Lining" fill="$on-surface-variant" />
          <text text-style="BodyLarge" value="Veg-tanned calf" fill="$on-surface" />
        </row>
        <line w="296" fill="$outline" />
        <row w="fill" h="52" gap="auto" align="middle-left">
          <text text-style="BodyLarge" value="Made in" fill="$on-surface-variant" />
          <text text-style="BodyLarge" value="Portugal" fill="$on-surface" />
        </row>
      </col>
    </col>
    <!-- REVIEWS -->
    <col w="360" p="24 16 26 16" gap="14">
      <row w="fill" gap="auto" align="middle-left">
        <text text-style="TitleLarge" value="Reviews" fill="$on-surface" />
        <text role="hyperlink" text-style="LabelLarge" value="See all" fill="$oxblood-text" />
      </row>
      <!-- rating summary -->
      <row w="328" gap="14" align="middle-left">
        <text text-style="Display" value="4.6" fill="$on-surface" />
        <col gap="3" align="middle-left">
          <row gap="2" align="middle-left">
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%237C2F2C" w="18" h="18" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%237C2F2C" w="18" h="18" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%237C2F2C" w="18" h="18" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%237C2F2C" w="18" h="18" />
            <img src="https://api.iconify.design/material-symbols/star-half-rounded.svg?color=%237C2F2C" w="18" h="18" />
          </row>
          <text text-style="BodyMedium" value="Based on 432 verified reviews" fill="$on-surface-variant" />
        </col>
      </row>
      <!-- histogram : track 240 encodes max count 320 (factor 0.75) -->
      <col w="328" gap="8">
        <row w="328" gap="10" align="middle-left">
          <row w="26" gap="3" align="middle-right">
            <text text-style="LabelMedium" value="5" fill="$on-surface-variant" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236B5D50" w="12" h="12" />
          </row>
          <frame w="240" h="8">
            <rect x="0" y="0" w="240" h="8" radius="4" fill="$track" />
            <rect x="0" y="0" w="240" h="8" radius="4" fill="$oxblood" />
          </frame>
          <text w="fill" text-style="LabelMedium" value="320" fill="$on-surface-variant" align="right" />
        </row>
        <row w="328" gap="10" align="middle-left">
          <row w="26" gap="3" align="middle-right">
            <text text-style="LabelMedium" value="4" fill="$on-surface-variant" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236B5D50" w="12" h="12" />
          </row>
          <frame w="240" h="8">
            <rect x="0" y="0" w="240" h="8" radius="4" fill="$track" />
            <rect x="0" y="0" w="60" h="8" radius="4" fill="$oxblood" />
          </frame>
          <text w="fill" text-style="LabelMedium" value="80" fill="$on-surface-variant" align="right" />
        </row>
        <row w="328" gap="10" align="middle-left">
          <row w="26" gap="3" align="middle-right">
            <text text-style="LabelMedium" value="3" fill="$on-surface-variant" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236B5D50" w="12" h="12" />
          </row>
          <frame w="240" h="8">
            <rect x="0" y="0" w="240" h="8" radius="4" fill="$track" />
            <rect x="0" y="0" w="15" h="8" radius="4" fill="$oxblood" />
          </frame>
          <text w="fill" text-style="LabelMedium" value="20" fill="$on-surface-variant" align="right" />
        </row>
        <row w="328" gap="10" align="middle-left">
          <row w="26" gap="3" align="middle-right">
            <text text-style="LabelMedium" value="2" fill="$on-surface-variant" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236B5D50" w="12" h="12" />
          </row>
          <frame w="240" h="8">
            <rect x="0" y="0" w="240" h="8" radius="4" fill="$track" />
            <rect x="0" y="0" w="6" h="8" radius="4" fill="$oxblood" />
          </frame>
          <text w="fill" text-style="LabelMedium" value="8" fill="$on-surface-variant" align="right" />
        </row>
        <row w="328" gap="10" align="middle-left">
          <row w="26" gap="3" align="middle-right">
            <text text-style="LabelMedium" value="1" fill="$on-surface-variant" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236B5D50" w="12" h="12" />
          </row>
          <frame w="240" h="8">
            <rect x="0" y="0" w="240" h="8" radius="4" fill="$track" />
            <rect x="0" y="0" w="3" h="8" radius="4" fill="$oxblood" />
          </frame>
          <text w="fill" text-style="LabelMedium" value="4" fill="$on-surface-variant" align="right" />
        </row>
      </col>
      <line w="328" fill="$outline" />
      <!-- one featured review -->
      <row w="328" gap="12" align="top-left">
        <frame role="avatar" w="40" h="40" radius="$r-full" fill="$badge-tint" align="middle-center">
          <text text-style="LabelLarge" value="DM" fill="$oxblood-text" />
        </frame>
        <col w="fill" gap="4">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="TitleMedium" value="Daniel M." fill="$on-surface" />
            <text text-style="LabelMedium" value="2 weeks ago" fill="$on-surface-variant" />
          </row>
          <row gap="2" align="middle-left">
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%237C2F2C" w="15" h="15" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%237C2F2C" w="15" h="15" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%237C2F2C" w="15" h="15" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%237C2F2C" w="15" h="15" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%237C2F2C" w="15" h="15" />
          </row>
          <text w="fill" text-style="BodyMedium" value="Broke in within a week and the welt feels bomb-proof. Sized down a half from my trainers and the fit is spot on." fill="$on-surface" />
        </col>
      </row>
    </col>
    <!-- FIXED ACTION BAR : last flow child -->
    <row role="toolbar" w="fill" fill="$surface" border="1 $outline" p="12 16 22 16" gap="auto" align="middle-left">
      <col gap="1" align="middle-left">
        <text text-style="PriceBar" value="$340" fill="$on-surface" />
        <text text-style="LabelMedium" value="or 4 × $85 with Klarna" fill="$on-surface-variant" />
      </col>
      <row role="button" h="52" radius="$r-full" fill="$oxblood" p="0 24" gap="8" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/shopping-bag-rounded.svg?color=%23FBEEEA" w="20" h="20" />
        <text text-style="LabelLarge" value="Add to Bag" fill="$on-accent" />
      </row>
    </row>
  </col>
</gui>

```