---
title: "Cairn & Cedar — Fjell GTX Reviews"
platform: android
slug: cairn-cedar-fjell-reviews
screens: ["reviews"]
domains: ["ecommerce"]
style: "minimal"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "card", "chip", "avatar", "badge", "button"]
score: {clean: 100, consistent: 86, accessible: 95, comprehensible: 33}
url: https://gui.farm/android/cairn-cedar-fjell-reviews
raw: https://gui.farm/android/cairn-cedar-fjell-reviews/design.guix
download: https://gui.farm/android/cairn-cedar-fjell-reviews.gui
---

# Cairn & Cedar — Fjell GTX Reviews

Product reviews screen for a hiking boot — star distribution, recommend rate, and rated attributes (fit, comfort, durability, value).

- **Live preview:** https://gui.farm/android/cairn-cedar-fjell-reviews
- **Raw source:** https://gui.farm/android/cairn-cedar-fjell-reviews/design.guix
- **Download (.gui):** https://gui.farm/android/cairn-cedar-fjell-reviews.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Cairn &amp; Cedar — Fjell GTX Reviews">
  <tokens>
    <!-- Material 3 warm light ground; amber carries stars, distribution bars and the CTA -->
    <color name="surface" value="#FCF8F1" />
    <color name="surface-container" value="#F5EFE2" />
    <color name="surface-container-high" value="#ECE4D2" />
    <color name="on-surface" value="#211A0E" />
    <color name="on-surface-variant" value="#574D3B" />
    <color name="outline" value="#7C7259" />
    <color name="outline-variant" value="#D6CCB6" />
    <color name="amber" value="#C9760C" />
    <color name="amber-deep" value="#B36700" />
    <color name="amber-strong" value="#8A5200" />
    <color name="on-amber" value="#2A1900" />
    <color name="track" value="#E7DEC9" />
    <color name="star-empty" value="#D6CCB6" />
    <number name="r-xs" value="4" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="16" />
    <number name="r-full" value="999" />
  </tokens>

  <styles>
    <text-style name="Display" font-family="Roboto" font-size="40" font-weight="500" line-height="44" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="20" font-weight="500" line-height="26" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="22" />
    <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" />
  </fonts>

  <!-- No scroll: root col hugs its children; the "Write a review" bar is the last
       flow child, not an overlay. Star rows and distribution bars carry no role —
       the confirmed vocabulary has no rating term, so they stay untagged. -->
  <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=%23211A0E" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23211A0E" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23211A0E" w="15" h="15" />
      </row>
    </row>

    <!-- M3 top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 4 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=%23211A0E" w="24" h="24" />
      </row>
      <text w="fill" text-style="TitleLarge" value="Reviews" fill="$on-surface" />
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/ios-share-rounded.svg?color=%23574D3B" w="22" h="22" />
      </row>
    </row>

    <col w="fill" p="8 16 20 16" gap="16">

      <!-- product identity -->
      <row w="fill" gap="12" align="middle-left">
        <img src="https://images.unsplash.com/photo-1575987116913-e96e7d490b8a?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80" w="56" h="56" radius="$r-md" fit="cover" />
        <col w="fill" gap="2">
          <text text-style="TitleMedium" value="Fjell GTX Trail Boot" fill="$on-surface" />
          <text text-style="BodyMedium" value="Cairn &amp; Cedar · Waterproof" fill="$on-surface-variant" />
        </col>
      </row>

      <!-- summary card : headline average + star-level distribution -->
      <col role="card" w="fill" radius="$r-lg" fill="$surface-container" p="16" gap="14">

        <row w="fill" gap="16" align="middle-left">
          <col gap="2" align="middle-left">
            <text text-style="Display" value="4.6" fill="$on-surface" />
            <row gap="1" align="middle-left">
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
              <img src="https://api.iconify.design/material-symbols/star-half-rounded.svg?color=%23B36700" w="16" h="16" />
            </row>
          </col>
          <col w="fill" gap="3" align="middle-left">
            <text text-style="BodyMedium" value="1,284 verified reviews" fill="$on-surface-variant" />
            <row gap="6" align="middle-left">
              <img src="https://api.iconify.design/material-symbols/thumb-up-rounded.svg?color=%23B36700" w="15" h="15" />
              <text text-style="LabelLarge" value="91% would recommend" fill="$amber-strong" />
            </row>
          </col>
        </row>

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

        <!-- distribution : bar width scales to count, 5-star (960) fills the 160px track -->
        <col w="fill" gap="8">
          <row w="fill" gap="10" align="middle-center">
            <text w="10" text-style="LabelMedium" value="5" fill="$on-surface-variant" align="right" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="13" h="13" />
            <row w="160" h="8" radius="$r-full" fill="$track" align="middle-left">
              <rect w="160" h="8" radius="$r-full" fill="$amber-deep" />
            </row>
            <text w="fill" text-style="LabelMedium" value="960" fill="$on-surface-variant" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <text w="10" text-style="LabelMedium" value="4" fill="$on-surface-variant" align="right" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="13" h="13" />
            <row w="160" h="8" radius="$r-full" fill="$track" align="middle-left">
              <rect w="35" h="8" radius="$r-full" fill="$amber-deep" />
            </row>
            <text w="fill" text-style="LabelMedium" value="210" fill="$on-surface-variant" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <text w="10" text-style="LabelMedium" value="3" fill="$on-surface-variant" align="right" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="13" h="13" />
            <row w="160" h="8" radius="$r-full" fill="$track" align="middle-left">
              <rect w="10" h="8" radius="$r-full" fill="$amber-deep" />
            </row>
            <text w="fill" text-style="LabelMedium" value="60" fill="$on-surface-variant" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <text w="10" text-style="LabelMedium" value="2" fill="$on-surface-variant" align="right" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="13" h="13" />
            <row w="160" h="8" radius="$r-full" fill="$track" align="middle-left">
              <rect w="5" h="8" radius="$r-full" fill="$amber-deep" />
            </row>
            <text w="fill" text-style="LabelMedium" value="30" fill="$on-surface-variant" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <text w="10" text-style="LabelMedium" value="1" fill="$on-surface-variant" align="right" />
            <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="13" h="13" />
            <row w="160" h="8" radius="$r-full" fill="$track" align="middle-left">
              <rect w="4" h="8" radius="$r-full" fill="$amber-deep" />
            </row>
            <text w="fill" text-style="LabelMedium" value="24" fill="$on-surface-variant" align="right" />
          </row>
        </col>
      </col>

      <!-- attribute breakdown : value on a 0-5 scale, bar = value/5 of the 150px track -->
      <col role="card" w="fill" radius="$r-lg" fill="$surface-container" p="16" gap="12">
        <text text-style="LabelLarge" value="How buyers rated it" fill="$on-surface" />

        <row w="fill" gap="8" align="middle-center">
          <text w="76" text-style="BodyMedium" value="Fit" fill="$on-surface-variant" />
          <row w="150" h="6" radius="$r-full" fill="$track" align="middle-left">
            <rect w="141" h="6" radius="$r-full" fill="$amber-deep" />
          </row>
          <text w="fill" text-style="LabelLarge" value="4.7" fill="$on-surface" align="right" />
        </row>
        <row w="fill" gap="8" align="middle-center">
          <text w="76" text-style="BodyMedium" value="Comfort" fill="$on-surface-variant" />
          <row w="150" h="6" radius="$r-full" fill="$track" align="middle-left">
            <rect w="144" h="6" radius="$r-full" fill="$amber-deep" />
          </row>
          <text w="fill" text-style="LabelLarge" value="4.8" fill="$on-surface" align="right" />
        </row>
        <row w="fill" gap="8" align="middle-center">
          <text w="76" text-style="BodyMedium" value="Durability" fill="$on-surface-variant" />
          <row w="150" h="6" radius="$r-full" fill="$track" align="middle-left">
            <rect w="132" h="6" radius="$r-full" fill="$amber-deep" />
          </row>
          <text w="fill" text-style="LabelLarge" value="4.4" fill="$on-surface" align="right" />
        </row>
        <row w="fill" gap="8" align="middle-center">
          <text w="76" text-style="BodyMedium" value="Value" fill="$on-surface-variant" />
          <row w="150" h="6" radius="$r-full" fill="$track" align="middle-left">
            <rect w="126" h="6" radius="$r-full" fill="$amber-deep" />
          </row>
          <text w="fill" text-style="LabelLarge" value="4.2" fill="$on-surface" align="right" />
        </row>
      </col>

      <!-- filter row + chips -->
      <col w="fill" gap="10">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="1,284 reviews" fill="$on-surface" />
          <row gap="5" align="middle-right">
            <text text-style="LabelLarge" value="Most helpful" fill="$on-surface-variant" />
            <img src="https://api.iconify.design/material-symbols/swap-vert-rounded.svg?color=%23574D3B" w="18" h="18" />
          </row>
        </row>
        <row w="fill" gap="8" align="middle-left">
          <row role="chip" h="34" radius="$r-sm" fill="$amber" p="0 12" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%232A1900" w="17" h="17" />
            <text text-style="LabelLarge" value="Verified" fill="$on-amber" />
          </row>
          <row role="chip" h="34" radius="$r-sm" fill="none" border="1 $outline-variant" p="0 12" align="middle-center">
            <text text-style="LabelLarge" value="With photos" fill="$on-surface-variant" />
          </row>
          <row role="chip" h="34" radius="$r-sm" fill="none" border="1 $outline-variant" p="0 12" align="middle-center">
            <text text-style="LabelLarge" value="5 star" fill="$on-surface-variant" />
          </row>
        </row>
      </col>

      <!-- review : hero, with a customer photo -->
      <col role="card" w="fill" radius="$r-lg" fill="$surface-container" p="16" gap="10">
        <row w="fill" gap="10" align="middle-left">
          <row role="avatar" w="40" h="40" radius="20" fill="$surface-container-high" align="middle-center">
            <text text-style="TitleMedium" value="AB" fill="$on-surface-variant" />
          </row>
          <col w="fill" gap="2">
            <row gap="6" align="middle-left">
              <text text-style="LabelLarge" value="Amara B." fill="$on-surface" />
              <row role="badge" h="18" radius="$r-xs" fill="$surface-container-high" p="0 6" gap="3" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/verified-rounded.svg?color=%23574D3B" w="12" h="12" />
                <text text-style="LabelSmall" value="Verified" fill="$on-surface-variant" />
              </row>
            </row>
            <text text-style="LabelSmall" value="2 weeks ago · Size 9, ordered true" fill="$on-surface-variant" />
          </col>
        </row>

        <row gap="1" align="middle-left">
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
        </row>

        <text text-style="TitleMedium" value="Kept my feet dry through three river crossings" fill="$on-surface" />
        <text w="fill" text-style="BodyMedium" value="Took these on a five-day traverse in the Cascades. Zero seepage even standing ankle-deep, and the ankle collar broke in by day two, with no hot spots. Grip on wet granite is the real surprise." fill="$on-surface-variant" />

        <row gap="8" align="middle-left">
          <img src="https://images.unsplash.com/photo-1575987116913-e96e7d490b8a?auto=format&amp;fit=crop&amp;w=180&amp;h=180&amp;q=80" w="64" h="64" radius="$r-sm" fit="cover" />
          <img src="https://images.unsplash.com/photo-1606036525923-525fa3b35465?auto=format&amp;fit=crop&amp;w=180&amp;h=180&amp;q=80" w="64" h="64" radius="$r-sm" fit="cover" />
        </row>

        <row w="fill" gap="auto" align="middle-center" p="2 0 0 0">
          <row role="button" h="36" radius="$r-full" fill="none" border="1 $outline-variant" p="0 14" gap="7" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/thumb-up-outline-rounded.svg?color=%23574D3B" w="17" h="17" />
            <text text-style="LabelLarge" value="Helpful · 48" fill="$on-surface-variant" />
          </row>
          <img src="https://api.iconify.design/material-symbols/flag-outline-rounded.svg?color=%237C7259" w="18" h="18" />
        </row>
      </col>

      <!-- review : four-star, sizing note -->
      <col role="card" w="fill" radius="$r-lg" fill="$surface-container" p="16" gap="10">
        <row w="fill" gap="10" align="middle-left">
          <row role="avatar" w="40" h="40" radius="20" fill="$surface-container-high" align="middle-center">
            <text text-style="TitleMedium" value="TR" fill="$on-surface-variant" />
          </row>
          <col w="fill" gap="2">
            <row gap="6" align="middle-left">
              <text text-style="LabelLarge" value="Tomas R." fill="$on-surface" />
              <row role="badge" h="18" radius="$r-xs" fill="$surface-container-high" p="0 6" gap="3" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/verified-rounded.svg?color=%23574D3B" w="12" h="12" />
                <text text-style="LabelSmall" value="Verified" fill="$on-surface-variant" />
              </row>
            </row>
            <text text-style="LabelSmall" value="1 month ago · Size 10, sized up half" fill="$on-surface-variant" />
          </col>
        </row>

        <row gap="1" align="middle-left">
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B36700" w="16" h="16" />
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23D6CCB6" w="16" h="16" />
        </row>

        <text text-style="TitleMedium" value="Superb grip, but the toe box runs narrow" fill="$on-surface" />
        <text w="fill" text-style="BodyMedium" value="Traction on loose scree is the best I have owned. Docking a star because the fit is snug across the forefoot, and going half a size up fixed it, so order with that in mind." fill="$on-surface-variant" />

        <row w="fill" gap="auto" align="middle-center" p="2 0 0 0">
          <row role="button" h="36" radius="$r-full" fill="none" border="1 $outline-variant" p="0 14" gap="7" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/thumb-up-outline-rounded.svg?color=%23574D3B" w="17" h="17" />
            <text text-style="LabelLarge" value="Helpful · 31" fill="$on-surface-variant" />
          </row>
          <img src="https://api.iconify.design/material-symbols/flag-outline-rounded.svg?color=%237C7259" w="18" h="18" />
        </row>
      </col>

    </col>

    <!-- ===== bottom action bar : last flow child, the only fixed element ===== -->
    <col w="fill" fill="$surface" border-top="1 $outline-variant">
      <row w="fill" h="72" p="0 16" align="middle-center">
        <row role="button" w="fill" h="52" radius="$r-full" fill="$amber" gap="8" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/rate-review-outline-rounded.svg?color=%232A1900" w="20" h="20" />
          <text text-style="LabelLarge" value="Write a review" fill="$on-amber" />
        </row>
      </row>
      <row w="fill" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$outline-variant" />
      </row>
    </col>

  </col>
</gui>

```