---
title: "Kaffa — Yirgacheffe Reserve"
platform: android
slug: kaffa-yirgacheffe-reserve
screens: ["product-detail"]
domains: ["ecommerce"]
style: "minimal"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "chip", "segmented-control", "badge", "card", "divider", "avatar", "stepper", "button"]
score: {clean: 100, consistent: 87, accessible: 97, comprehensible: 24}
url: https://gui.farm/android/kaffa-yirgacheffe-reserve
raw: https://gui.farm/android/kaffa-yirgacheffe-reserve/design.guix
download: https://gui.farm/android/kaffa-yirgacheffe-reserve.gui
---

# Kaffa — Yirgacheffe Reserve

Single-origin coffee product detail with tasting notes, roast-level and grind selectors, and size options.

- **Live preview:** https://gui.farm/android/kaffa-yirgacheffe-reserve
- **Raw source:** https://gui.farm/android/kaffa-yirgacheffe-reserve/design.guix
- **Download (.gui):** https://gui.farm/android/kaffa-yirgacheffe-reserve.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Kaffa — Yirgacheffe Reserve">
  <tokens>
    <color name="bg" value="#FAF5EE" />
    <color name="surface" value="#FFFFFF" />
    <color name="ink" value="#241C13" />
    <color name="body" value="#4A3B2A" />
    <color name="muted" value="#6E5D48" />
    <color name="line" value="#EBE1D3" />
    <color name="track" value="#EFE5D5" />
    <color name="amber" value="#D9791A" />
    <color name="amber-ink" value="#8A4F08" />
    <color name="on-amber" value="#2A1B08" />
    <color name="amber-tint" value="#FBEBD6" />
    <number name="r-hero" value="24" />
    <number name="r-card" value="16" />
    <number name="r-tile" value="12" />
    <number name="r-full" value="999" />
  </tokens>

  <styles>
    <text-style name="ProductTitle" font-family="Roboto" font-size="24" font-weight="700" line-height="30" letter-spacing="-0.3" />
    <text-style name="Price" font-family="Roboto" font-size="22" font-weight="700" line-height="28" />
    <text-style name="Score" font-family="Roboto" font-size="34" font-weight="700" line-height="36" letter-spacing="-0.5" />
    <text-style name="CardTitle" font-family="Roboto" font-size="16" font-weight="600" line-height="22" />
    <text-style name="SizePrice" font-family="Roboto" font-size="16" font-weight="700" line-height="22" />
    <text-style name="Body" font-family="Roboto" font-size="14" font-weight="400" line-height="22" />
    <text-style name="Label" font-family="Roboto" font-size="14" font-weight="600" line-height="20" />
    <text-style name="Value" font-family="Roboto" font-size="13" font-weight="500" line-height="18" />
    <text-style name="Caption" font-family="Roboto" font-size="12" font-weight="400" line-height="16" />
    <text-style name="Micro" font-family="Roboto" font-size="11" font-weight="700" line-height="16" letter-spacing="0.9" />
  </styles>

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

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

    <!-- status bar (untagged) -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-center">
      <text text-style="Value" value="9:41" color="$ink" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23241C13" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23241C13" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23241C13" w="15" h="15" />
      </row>
    </row>

    <!-- top app bar -->
    <row role="top-navigation-bar" w="fill" h="56" p="0 12" gap="auto" align="middle-center">
      <row w="42" h="42" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23241C13" w="22" h="22" />
      </row>
      <row gap="10" align="middle-center">
        <row w="42" h="42" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/ios-share-rounded.svg?color=%23241C13" w="20" h="20" />
        </row>
        <row w="42" h="42" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/favorite-outline-rounded.svg?color=%23241C13" w="20" h="20" />
        </row>
      </row>
    </row>

    <!-- hero -->
    <col w="fill" p="8 16 0">
      <frame w="328" h="300" radius="$r-hero" clip="true" fill="$track">
        <img x="0" y="0" w="328" h="300" fit="cover" src="https://images.unsplash.com/photo-1753837787691-84a06d715d24?auto=format&amp;fit=crop&amp;w=680&amp;h=640&amp;q=80" />
        <row x="14" y="258" fill="$ink" radius="$r-full" p="6 12" align="middle-center">
          <text text-style="Micro" value="SINGLE ORIGIN" color="#FFFFFF" />
        </row>
      </frame>
    </col>

    <!-- product info -->
    <col w="fill" p="20 16 4" gap="10">
      <text text-style="Micro" text-case="uppercase" value="Washed process · Lot 07" color="$amber-ink" />

      <row w="fill" gap="auto" align="top-left">
        <text w="212" text-style="ProductTitle" value="Yirgacheffe Reserve" color="$ink" />
        <text text-style="Price" value="$22.00" color="$ink" />
      </row>

      <row gap="8" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23D9791A" w="18" h="18" />
        <text text-style="Label" value="4.7" color="$ink" />
        <text text-style="Caption" value="· 326 reviews" color="$muted" />
      </row>

      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/location-on-rounded.svg?color=%236E5D48" w="15" h="15" />
        <text text-style="Caption" value="Gedeo, Ethiopia" color="$muted" />
        <text text-style="Caption" value="· Altitude 2,100 m · Roasted Aug 11" color="$muted" />
      </row>

      <text w="fill" pt="4" text-style="Body" value="Bright and unmistakably floral. Grown by smallholders in the Gedeo highlands and washed at the mill, it opens with jasmine, settles into bergamot, and finishes with a syrupy brown-sugar sweetness." color="$body" />

      <row gap="8" pt="4" align="middle-left">
        <row role="chip" fill="$amber-tint" radius="$r-full" p="6 12" align="middle-center">
          <text text-style="Value" value="Jasmine" color="$amber-ink" />
        </row>
        <row role="chip" fill="$amber-tint" radius="$r-full" p="6 12" align="middle-center">
          <text text-style="Value" value="Bergamot" color="$amber-ink" />
        </row>
        <row role="chip" fill="$amber-tint" radius="$r-full" p="6 12" align="middle-center">
          <text text-style="Value" value="Brown Sugar" color="$amber-ink" />
        </row>
      </row>
    </col>

    <!-- cards -->
    <col w="fill" p="12 16 24" gap="12">

      <!-- roast level meter -->
      <col w="fill" fill="$surface" border="1 $line" radius="$r-card" p="16" gap="12">
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="CardTitle" value="Roast level" color="$ink" />
          <text text-style="Label" value="Medium-Light" color="$amber-ink" />
        </row>
        <row w="fill" gap="8" align="top-left">
          <col w="68" gap="6" align="top-center">
            <rect w="68" h="6" radius="3" fill="$amber" />
            <text text-style="Caption" value="Light" color="$muted" align="center" />
          </col>
          <col w="68" gap="6" align="top-center">
            <rect w="68" h="6" radius="3" fill="$amber" />
            <text text-style="Value" value="Med-Light" color="$amber-ink" align="center" />
          </col>
          <col w="68" gap="6" align="top-center">
            <rect w="68" h="6" radius="3" fill="$track" />
            <text text-style="Caption" value="Medium" color="$muted" align="center" />
          </col>
          <col w="68" gap="6" align="top-center">
            <rect w="68" h="6" radius="3" fill="$track" />
            <text text-style="Caption" value="Dark" color="$muted" align="center" />
          </col>
        </row>
      </col>

      <!-- grind selector -->
      <col w="fill" fill="$surface" border="1 $line" radius="$r-card" p="16" gap="12">
        <text text-style="CardTitle" value="Grind size" color="$ink" />
        <row role="segmented-control" w="fill" gap="10" align="middle-center">
          <col w="92" h="66" radius="$r-tile" fill="$amber" gap="5" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/grain.svg?color=%232A1B08" w="20" h="20" />
            <text text-style="Value" value="Whole Bean" color="$on-amber" />
          </col>
          <col w="92" h="66" radius="$r-tile" fill="$surface" border="1 $line" gap="5" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/filter-alt-rounded.svg?color=%236E5D48" w="20" h="20" />
            <text text-style="Value" value="Filter" color="$ink" />
          </col>
          <col w="92" h="66" radius="$r-tile" fill="$surface" border="1 $line" gap="5" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/bolt-rounded.svg?color=%236E5D48" w="20" h="20" />
            <text text-style="Value" value="Espresso" color="$ink" />
          </col>
        </row>
      </col>

      <!-- size selector -->
      <col w="fill" fill="$surface" border="1 $line" radius="$r-card" p="16" gap="12">
        <text text-style="CardTitle" value="Size" color="$ink" />
        <row w="fill" gap="12" align="top-left">
          <col w="142" radius="$r-tile" fill="$amber-tint" border="2 $amber" p="12 14" gap="6">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Label" value="250 g" color="$ink" />
              <img src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%23D9791A" w="20" h="20" />
            </row>
            <text text-style="SizePrice" value="$22.00" color="$ink" />
          </col>
          <col w="142" radius="$r-tile" fill="$surface" border="1 $line" p="12 14" gap="6">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Label" value="1 kg" color="$ink" />
              <row role="badge" fill="$amber-tint" radius="$r-full" p="2 8" align="middle-center">
                <text text-style="Micro" value="SAVE 14%" color="$amber-ink" />
              </row>
            </row>
            <text text-style="SizePrice" value="$76.00" color="$ink" />
          </col>
        </row>
      </col>

      <!-- ratings breakdown -->
      <col role="card" w="fill" fill="$surface" border="1 $line" radius="$r-card" p="16" gap="14">
        <row w="fill" gap="14" align="middle-center">
          <col gap="2" align="top-left">
            <text text-style="Score" value="4.7" color="$ink" />
            <row gap="1" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23D9791A" w="15" h="15" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23D9791A" w="15" h="15" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23D9791A" w="15" h="15" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23D9791A" w="15" h="15" />
              <img src="https://api.iconify.design/material-symbols/star-half-rounded.svg?color=%23D9791A" w="15" h="15" />
            </row>
          </col>
          <col w="fill" gap="2" align="top-left">
            <text text-style="Label" value="326 reviews" color="$ink" />
            <text text-style="Caption" value="93% would recommend" color="$muted" />
          </col>
        </row>

        <col w="fill" gap="8">
          <row w="fill" gap="12" align="middle-center">
            <row w="30" gap="2" align="middle-center"><text text-style="Value" value="5" color="$muted" /><img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236E5D48" w="12" h="12" /></row>
            <frame w="180" h="8" radius="$r-full" clip="true" fill="$track">
              <rect x="0" y="0" w="145" h="8" radius="$r-full" fill="$amber" />
            </frame>
            <text w="fill" text-style="Value" value="262" color="$muted" align="right" />
          </row>
          <row w="fill" gap="12" align="middle-center">
            <row w="30" gap="2" align="middle-center"><text text-style="Value" value="4" color="$muted" /><img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236E5D48" w="12" h="12" /></row>
            <frame w="180" h="8" radius="$r-full" clip="true" fill="$track">
              <rect x="0" y="0" w="23" h="8" radius="$r-full" fill="$amber" />
            </frame>
            <text w="fill" text-style="Value" value="42" color="$muted" align="right" />
          </row>
          <row w="fill" gap="12" align="middle-center">
            <row w="30" gap="2" align="middle-center"><text text-style="Value" value="3" color="$muted" /><img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236E5D48" w="12" h="12" /></row>
            <frame w="180" h="8" radius="$r-full" clip="true" fill="$track">
              <rect x="0" y="0" w="7" h="8" radius="$r-full" fill="$amber" />
            </frame>
            <text w="fill" text-style="Value" value="12" color="$muted" align="right" />
          </row>
          <row w="fill" gap="12" align="middle-center">
            <row w="30" gap="2" align="middle-center"><text text-style="Value" value="2" color="$muted" /><img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236E5D48" w="12" h="12" /></row>
            <frame w="180" h="8" radius="$r-full" clip="true" fill="$track">
              <rect x="0" y="0" w="3" h="8" radius="$r-full" fill="$amber" />
            </frame>
            <text w="fill" text-style="Value" value="6" color="$muted" align="right" />
          </row>
          <row w="fill" gap="12" align="middle-center">
            <row w="30" gap="2" align="middle-center"><text text-style="Value" value="1" color="$muted" /><img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236E5D48" w="12" h="12" /></row>
            <frame w="180" h="8" radius="$r-full" clip="true" fill="$track">
              <rect x="0" y="0" w="2" h="8" radius="$r-full" fill="$amber" />
            </frame>
            <text w="fill" text-style="Value" value="4" color="$muted" align="right" />
          </row>
        </col>

        <line role="divider" w="fill" fill="$line" />

        <!-- featured review -->
        <col w="fill" gap="8">
          <row w="fill" gap="10" align="middle-center">
            <row role="avatar" w="40" h="40" radius="$r-full" fill="$amber-tint" align="middle-center">
              <text text-style="Label" value="MT" color="$amber-ink" />
            </row>
            <col w="fill" gap="2" align="top-left">
              <text text-style="Label" value="Maraki T." color="$ink" />
              <text text-style="Caption" value="Verified purchase · Aug 2, 2026" color="$muted" />
            </col>
            <row gap="1" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23D9791A" w="15" h="15" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23D9791A" w="15" h="15" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23D9791A" w="15" h="15" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23D9791A" w="15" h="15" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23D9791A" w="15" h="15" />
            </row>
          </row>
          <text w="fill" text-style="Body" value="Brewed it as a slow V60 and the jasmine lift is unreal. Cools into candied bergamot, easily the cleanest cup I've pulled all year." color="$body" />
        </col>
      </col>

    </col>

    <!-- fixed action bar -->
    <line w="fill" fill="$line" />
    <row w="fill" p="12 16 20" fill="$surface" gap="14" align="middle-center">
      <row role="stepper" h="52" radius="$r-tile" border="1 $line" p="0 6" gap="8" align="middle-center">
        <row w="36" h="36" radius="$r-full" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%236E5D48" w="22" h="22" />
        </row>
        <text text-style="Label" value="1" color="$ink" />
        <row w="36" h="36" radius="$r-full" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23241C13" w="22" h="22" />
        </row>
      </row>
      <row role="button" w="fill" h="52" radius="$r-tile" fill="$amber" gap="8" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/shopping-bag-rounded.svg?color=%232A1B08" w="20" h="20" />
        <text text-style="Label" value="Add to bag" color="$on-amber" />
        <text text-style="Label" value="· $22.00" color="$on-amber" />
      </row>
    </row>

  </col>
</gui>

```