---
title: "Emberfell — Single-Origin Coffee"
platform: android
slug: emberfell-coffee
screens: ["product-detail"]
domains: ["ecommerce"]
style: "minimal"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "carousel", "badge", "item-indicator", "card", "segmented-control", "chip", "accordion", "divider", "banner", "stepper", "button"]
score: {clean: 100, consistent: 85, accessible: 91, comprehensible: 41}
url: https://gui.farm/android/emberfell-coffee
raw: https://gui.farm/android/emberfell-coffee/design.guix
download: https://gui.farm/android/emberfell-coffee.gui
---

# Emberfell — Single-Origin Coffee

Single-origin coffee product detail with roast/process/altitude specs, grind and size selectors, and ratings.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Emberfell — Single-Origin Coffee">
  <tokens>
    <color name="bg" value="#121316" />
    <color name="surface-container" value="#1B1D22" />
    <color name="surface-container-highest" value="#2C3037" />
    <color name="on-surface" value="#F2F4F7" />
    <color name="on-surface-variant" value="#A9B0BA" />
    <color name="outline-variant" value="#383C43" />
    <color name="primary" value="#F5A623" />
    <color name="on-primary" value="#241700" />
    <color name="primary-container" value="#3E3112" />
    <color name="on-primary-container" value="#FBD98C" />
    <color name="scrim" value="#00000066" />
    <number name="r-lg" value="16" />
    <number name="r-xl" value="20" />
    <number name="r-full" value="999" />
  </tokens>

  <styles>
    <text-style name="Display" font-family="Roboto" font-size="40" font-weight="700" line-height="44" />
    <text-style name="Headline" font-family="Roboto" font-size="24" font-weight="600" line-height="30" />
    <text-style name="Price" font-family="Roboto" font-size="22" font-weight="700" line-height="28" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="600" 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" letter-spacing="0.6" />
    <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 600 700" styles="normal" />
  </fonts>

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

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

    <!-- top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 6" gap="auto" align="middle-center">
      <row w="48" h="48" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23F2F4F7" w="24" h="24" />
      </row>
      <row gap="0" align="middle-right">
        <row w="48" h="48" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/ios-share-rounded.svg?color=%23F2F4F7" w="22" h="22" />
        </row>
        <row w="48" h="48" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/shopping-bag-outline-rounded.svg?color=%23F2F4F7" w="24" h="24" />
          <ellipse abs x="26" y="8" w="16" h="16" fill="$primary" align="middle-center">
            <text text-style="LabelSmall" value="2" fill="$on-primary" />
          </ellipse>
        </row>
      </row>
    </row>

    <!-- content -->
    <col w="360" p="8 16 20 16" gap="20">

      <!-- hero carousel -->
      <frame role="carousel" w="328" h="300" radius="$r-xl" clip="true" fill="$surface-container">
        <img x="0" y="0" w="328" h="300" fit="cover" src="https://images.unsplash.com/photo-1672042382060-8a08025310ef?auto=format&amp;fit=crop&amp;w=800&amp;h=760&amp;q=80" />
        <row role="badge" abs x="12" y="12" h="28" radius="$r-full" fill="$primary" p="0 12" align="middle-center">
          <text text-style="LabelMedium" value="BESTSELLER" fill="$on-primary" />
        </row>
        <row abs x="276" y="12" w="40" h="40" radius="$r-full" fill="$scrim" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/favorite-outline-rounded.svg?color=%23FFFFFF" w="22" h="22" />
        </row>
        <row role="item-indicator" abs x="137" y="278" gap="6" align="middle-center">
          <rect w="18" h="6" radius="3" fill="$primary" />
          <rect w="6" h="6" radius="3" fill="#FFFFFF80" />
          <rect w="6" h="6" radius="3" fill="#FFFFFF80" />
          <rect w="6" h="6" radius="3" fill="#FFFFFF80" />
        </row>
      </frame>

      <!-- title + price -->
      <col w="fill" gap="10">
        <row w="fill" gap="auto" align="top-left">
          <col gap="3">
            <text text-style="Headline" value="Ethiopia Guji" fill="$on-surface" />
            <text text-style="BodyMedium" value="Natural · Single Origin" fill="$on-surface-variant" />
          </col>
          <text text-style="Price" value="$22" fill="$on-surface" align="right" />
        </row>
        <row gap="8" align="middle-left">
          <row gap="1" align="middle-left">
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A623" w="16" h="16" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A623" w="16" h="16" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A623" w="16" h="16" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A623" w="16" h="16" />
            <img src="https://api.iconify.design/material-symbols/star-half-rounded.svg?color=%23F5A623" w="16" h="16" />
          </row>
          <text text-style="LabelLarge" value="4.8" fill="$on-surface" />
          <text text-style="BodyMedium" value="· 200 reviews" fill="$on-surface-variant" />
        </row>
        <text text-style="BodyMedium" value="Bright and syrupy with notes of blueberry, dark chocolate, and jasmine. Grown at 2,050m and sun-dried on raised beds for 18 days." fill="$on-surface-variant" />
      </col>

      <!-- attribute spec card -->
      <row role="card" w="fill" radius="$r-lg" fill="$surface-container" p="16" gap="0" align="middle-center">
        <col w="fill" gap="4" align="top-left">
          <text text-style="LabelMedium" value="ROAST" fill="$on-surface-variant" />
          <text text-style="BodyLarge" value="Medium" fill="$on-surface" />
        </col>
        <rect w="1" h="36" fill="$outline-variant" />
        <col w="fill" gap="4" align="top-center">
          <text text-style="LabelMedium" value="PROCESS" fill="$on-surface-variant" />
          <text text-style="BodyLarge" value="Natural" fill="$on-surface" />
        </col>
        <rect w="1" h="36" fill="$outline-variant" />
        <col w="fill" gap="4" align="top-right">
          <text text-style="LabelMedium" value="ALTITUDE" fill="$on-surface-variant" />
          <text text-style="BodyLarge" value="2,050m" fill="$on-surface" />
        </col>
      </row>

      <!-- grind selector -->
      <col w="fill" gap="10">
        <text text-style="LabelMedium" value="GRIND" fill="$on-surface-variant" />
        <row role="segmented-control" w="fill" h="48" radius="$r-full" fill="$surface-container" p="4" gap="4" align="middle-center">
          <row w="fill" h="40" radius="$r-full" fill="$primary-container" align="middle-center">
            <text text-style="LabelLarge" value="Whole bean" fill="$on-primary-container" />
          </row>
          <row w="fill" h="40" radius="$r-full" align="middle-center">
            <text text-style="LabelLarge" value="Filter" fill="$on-surface-variant" />
          </row>
          <row w="fill" h="40" radius="$r-full" align="middle-center">
            <text text-style="LabelLarge" value="Espresso" fill="$on-surface-variant" />
          </row>
        </row>
      </col>

      <!-- size chips -->
      <col w="fill" gap="10">
        <text text-style="LabelMedium" value="SIZE" fill="$on-surface-variant" />
        <row w="fill" gap="8" align="middle-left">
          <row role="chip" h="40" radius="$r-full" border="1 $outline-variant" p="0 18" align="middle-center">
            <text text-style="LabelLarge" value="250 g" fill="$on-surface" />
          </row>
          <row role="chip" h="40" radius="$r-full" fill="$primary-container" p="0 18" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FBD98C" w="18" h="18" />
            <text text-style="LabelLarge" value="340 g" fill="$on-primary-container" />
          </row>
          <row role="chip" h="40" radius="$r-full" border="1 $outline-variant" p="0 18" align="middle-center">
            <text text-style="LabelLarge" value="1 kg" fill="$on-surface" />
          </row>
        </row>
      </col>

      <!-- ratings breakdown -->
      <col role="card" w="fill" radius="$r-lg" fill="$surface-container" p="16" gap="14">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="Ratings" fill="$on-surface" />
          <text text-style="LabelLarge" value="See all" fill="$primary" align="right" />
        </row>
        <row w="fill" gap="16" align="middle-left">
          <text text-style="Display" value="4.8" fill="$on-surface" />
          <col gap="4">
            <row gap="1" align="middle-left">
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A623" w="18" h="18" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A623" w="18" h="18" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A623" w="18" h="18" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F5A623" w="18" h="18" />
              <img src="https://api.iconify.design/material-symbols/star-half-rounded.svg?color=%23F5A623" w="18" h="18" />
            </row>
            <text text-style="BodyMedium" value="Based on 200 verified reviews" fill="$on-surface-variant" />
          </col>
        </row>

        <col w="fill" gap="8">
          <row w="fill" gap="10" align="middle-center">
            <text w="12" text-style="LabelMedium" value="5" fill="$on-surface-variant" align="right" />
            <frame w="224" h="8" radius="4" fill="$surface-container-highest">
              <rect x="0" y="0" w="188" h="8" radius="4" fill="$primary" />
            </frame>
            <text w="40" text-style="LabelSmall" value="84%" fill="$on-surface-variant" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <text w="12" text-style="LabelMedium" value="4" fill="$on-surface-variant" align="right" />
            <frame w="224" h="8" radius="4" fill="$surface-container-highest">
              <rect x="0" y="0" w="27" h="8" radius="4" fill="$primary" />
            </frame>
            <text w="40" text-style="LabelSmall" value="12%" fill="$on-surface-variant" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <text w="12" text-style="LabelMedium" value="3" fill="$on-surface-variant" align="right" />
            <frame w="224" h="8" radius="4" fill="$surface-container-highest">
              <rect x="0" y="0" w="4" h="8" radius="4" fill="$primary" />
            </frame>
            <text w="40" text-style="LabelSmall" value="2%" fill="$on-surface-variant" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <text w="12" text-style="LabelMedium" value="2" fill="$on-surface-variant" align="right" />
            <frame w="224" h="8" radius="4" fill="$surface-container-highest">
              <rect x="0" y="0" w="2" h="8" radius="4" fill="$primary" />
            </frame>
            <text w="40" text-style="LabelSmall" value="1%" fill="$on-surface-variant" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <text w="12" text-style="LabelMedium" value="1" fill="$on-surface-variant" align="right" />
            <frame w="224" h="8" radius="4" fill="$surface-container-highest">
              <rect x="0" y="0" w="2" h="8" radius="4" fill="$primary" />
            </frame>
            <text w="40" text-style="LabelSmall" value="1%" fill="$on-surface-variant" align="right" />
          </row>
        </col>
      </col>

      <!-- detail accordion -->
      <col role="accordion" w="fill" radius="$r-lg" fill="$surface-container" p="4 16">
        <col w="fill" p="12 0" gap="10">
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="TitleMedium" value="Tasting &amp; origin" fill="$on-surface" />
            <img src="https://api.iconify.design/material-symbols/keyboard-arrow-up-rounded.svg?color=%23A9B0BA" w="24" h="24" />
          </row>
          <text text-style="BodyMedium" value="Producer Tariku Elias · Guji Zone, Ethiopia. Heirloom varietals hand-picked at peak ripeness, dried whole in the fruit for a heavy, fruit-forward cup." fill="$on-surface-variant" />
        </col>
        <line role="divider" w="fill" fill="$outline-variant" />
        <row w="fill" p="14 0" gap="auto" align="middle-center">
          <text text-style="TitleMedium" value="Brewing guide" fill="$on-surface" />
          <img src="https://api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg?color=%23A9B0BA" w="24" h="24" />
        </row>
        <line role="divider" w="fill" fill="$outline-variant" />
        <row w="fill" p="14 0" gap="auto" align="middle-center">
          <text text-style="TitleMedium" value="Shipping &amp; returns" fill="$on-surface" />
          <img src="https://api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg?color=%23A9B0BA" w="24" h="24" />
        </row>
      </col>

      <!-- subscribe banner -->
      <row role="banner" w="fill" radius="$r-lg" fill="$primary-container" p="14 16" gap="12" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/autorenew-rounded.svg?color=%23FBD98C" w="24" h="24" />
        <col w="fill" gap="2">
          <text text-style="LabelLarge" value="Subscribe &amp; save 15%" fill="$on-primary-container" />
          <text text-style="LabelSmall" value="Ships every 2 weeks · skip or cancel anytime" fill="$on-primary-container" />
        </col>
        <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23FBD98C" w="22" h="22" />
      </row>

    </col>

    <!-- viewport-fixed action bar: last flow child -->
    <row w="fill" h="96" fill="$surface-container" p="12 16 24 16" gap="12" align="middle-center">
      <row role="stepper" h="52" radius="$r-full" border="1 $outline-variant" align="middle-center">
        <row w="48" h="52" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%23A9B0BA" w="20" h="20" />
        </row>
        <text w="28" text-style="TitleMedium" value="1" fill="$on-surface" align="center" />
        <row w="48" h="52" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23F2F4F7" w="20" h="20" />
        </row>
      </row>
      <row role="button" w="fill" h="52" radius="$r-full" fill="$primary" gap="8" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/shopping-bag-rounded.svg?color=%23241700" w="20" h="20" />
        <text text-style="LabelLarge" value="Add to bag · $22" fill="$on-primary" />
      </row>
    </row>

  </col>
</gui>

```