---
title: "Roan Supply — The Halden Weekender Reviews"
platform: android
slug: roan-supply-the-halden-weekender-reviews
screens: ["reviews"]
domains: ["ecommerce"]
style: "glassmorphism"
fonts: ["Roboto", "Roboto Mono"]
roles: ["top-navigation-bar", "button", "card", "divider", "chip", "toolbar"]
score: {clean: 100, consistent: 76, accessible: 44, comprehensible: 34}
url: https://gui.farm/android/roan-supply-the-halden-weekender-reviews
raw: https://gui.farm/android/roan-supply-the-halden-weekender-reviews/design.guix
download: https://gui.farm/android/roan-supply-the-halden-weekender-reviews.gui
---

# Roan Supply — The Halden Weekender Reviews

A dark glassmorphism Android product-reviews screen for a full-grain leather weekender bag, showing the overall 4.7 rating, a star distribution, quality/value/durability breakdown, and verified customer reviews.

- **Live preview:** https://gui.farm/android/roan-supply-the-halden-weekender-reviews
- **Raw source:** https://gui.farm/android/roan-supply-the-halden-weekender-reviews/design.guix
- **Download (.gui):** https://gui.farm/android/roan-supply-the-halden-weekender-reviews.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Roan Supply — The Halden Weekender Reviews">
  <tokens>
    <color name="text" value="#FAF6F4" />
    <color name="text-70" value="#FAF6F4B8" />
    <color name="text-50" value="#FAF6F485" />
    <color name="text-40" value="#FAF6F47E" />
    <color name="glass" value="#FFFFFF0F" />
    <color name="glass-2" value="#FFFFFF17" />
    <color name="glass-line" value="#FFFFFF2B" />
    <color name="glass-line-soft" value="#FFFFFF14" />
    <color name="track" value="#FFFFFF1C" />
    <color name="ox" value="#A8324A" />
    <color name="ox-text" value="#F2A0AD" />
    <color name="ox-dim" value="#A8324A33" />
    <color name="white" value="#FFFFFF" />
    <number name="r-pill" value="999" />
    <number name="r-lg" value="22" />
    <number name="r-md" value="18" />
    <number name="r-sm" value="12" />
  </tokens>

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

  <styles>
    <text-style name="StatusTime" font-family="Roboto" font-size="12" font-weight="600" line-height="16" />
    <text-style name="Eyebrow" font-family="Roboto" font-size="10" font-weight="700" line-height="13" letter-spacing="1.2" />
    <text-style name="NavTitle" font-family="Roboto" font-size="17" font-weight="700" line-height="22" />
    <text-style name="BigScore" font-family="Roboto Mono" font-size="44" font-weight="700" line-height="46" />
    <text-style name="OutOf" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Caption" font-family="Roboto" font-size="12" font-weight="400" line-height="16" />
    <text-style name="CaptionStrong" font-family="Roboto" font-size="12" font-weight="600" line-height="16" />
    <text-style name="Stat" font-family="Roboto" font-size="22" font-weight="700" line-height="24" />
    <text-style name="StatCap" font-family="Roboto" font-size="11" font-weight="600" line-height="14" />
    <text-style name="Micro" font-family="Roboto" font-size="11" font-weight="700" line-height="14" letter-spacing="0.8" />
    <text-style name="DistDigit" font-family="Roboto" font-size="12" font-weight="700" line-height="16" />
    <text-style name="Count" font-family="Roboto Mono" font-size="12" font-weight="600" line-height="16" />
    <text-style name="AttrLabel" font-family="Roboto" font-size="13" font-weight="500" line-height="17" />
    <text-style name="AttrNum" font-family="Roboto Mono" font-size="13" font-weight="700" line-height="17" />
    <text-style name="ChipTxt" font-family="Roboto" font-size="12" font-weight="600" line-height="16" />
    <text-style name="Name" font-family="Roboto" font-size="14" font-weight="700" line-height="18" />
    <text-style name="Date" font-family="Roboto" font-size="12" font-weight="400" line-height="16" />
    <text-style name="Badge" font-family="Roboto" font-size="10" font-weight="700" line-height="13" letter-spacing="0.3" />
    <text-style name="RevTitle" font-family="Roboto" font-size="14" font-weight="700" line-height="19" />
    <text-style name="Body" font-family="Roboto" font-size="13" font-weight="400" line-height="19" />
    <text-style name="Helpful" font-family="Roboto" font-size="12" font-weight="600" line-height="16" />
    <text-style name="SectionLbl" font-family="Roboto" font-size="11" font-weight="700" line-height="14" letter-spacing="0.8" />
    <text-style name="LinkTxt" font-family="Roboto" font-size="13" font-weight="700" line-height="18" />
    <text-style name="BtnTxt" font-family="Roboto" font-size="15" font-weight="700" line-height="20" />
    <text-style name="Avatar" font-family="Roboto" font-size="14" font-weight="700" line-height="18" />
  </styles>

  <col w="360" fill="linear-gradient(180deg, #1B0E11 0%, #150C0F 50%, #0E0A0B 100%)">

    <row w="fill" h="24" p="0 16" gap="auto" align="middle-center">
      <text text-style="StatusTime" value="9:41" color="$text" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%23FAF6F4" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%23FAF6F4" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full.svg?color=%23FAF6F4" w="15" h="15" />
      </row>
    </row>

    <row role="top-navigation-bar" w="fill" h="58" p="0 12 0 12" gap="auto" align="middle-center">
      <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23FAF6F4" w="22" h="22" />
      </row>
      <col gap="2" align="middle-center">
        <text text-style="Eyebrow" value="ROAN SUPPLY" color="$ox-text" align="center" />
        <text text-style="NavTitle" value="Reviews" color="$text" align="center" />
      </col>
      <row role="button" w="40" h="40" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/ios-share.svg?color=%23FAF6F4" w="21" h="21" />
      </row>
    </row>

    <col w="fill" p="4 16 20 16" gap="14">

      <row w="fill" gap="12" align="middle-center">
        <img src="https://images.unsplash.com/photo-1525103504173-8dc1582c7430?auto=format&amp;fit=crop&amp;w=200&amp;h=200&amp;q=80" w="60" h="60" radius="$r-sm" fit="cover" border="1 $glass-line-soft" />
        <col w="fill" gap="3">
          <text text-style="Eyebrow" value="FULL-GRAIN LEATHER" color="$text-50" />
          <text text-style="NavTitle" value="The Halden Weekender" color="$text" />
          <text text-style="Caption" value="Oxblood · 42L carry-on duffle" color="$text-70" />
        </col>
      </row>

      <col role="card" w="fill" radius="$r-lg" p="16" gap="14" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="32" />
        </appearance>

        <row w="fill" gap="auto" align="top-left">
          <col gap="6">
            <text text-style="BigScore" value="4.7" color="$text" />
            <row gap="3" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="18" h="18" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="18" h="18" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="18" h="18" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="18" h="18" />
              <frame w="18" h="18">
                <img x="0" y="0" src="https://api.iconify.design/material-symbols/star-outline-rounded.svg?color=%236B4C52" w="18" h="18" />
                <row w="13" h="18" clip="true" align="middle-left">
                  <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="18" h="18" />
                </row>
              </frame>
            </row>
            <text text-style="Caption" value="214 verified reviews" color="$text-50" />
          </col>
          <col w="112" radius="$r-md" fill="$ox-dim" border="1 $ox" p="12 10" gap="2" align="middle-center">
            <text text-style="Stat" value="94%" color="$ox-text" align="center" />
            <text text-style="StatCap" value="would recommend" color="$text-70" align="center" />
          </col>
        </row>

        <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />

        <col w="fill" gap="9">
          <row w="fill" gap="10" align="middle-center">
            <row w="32" gap="3" align="middle-center">
              <text text-style="DistDigit" value="5" color="$text-70" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="12" h="12" />
            </row>
            <frame w="204" h="8">
              <rect x="0" y="0" w="204" h="8" radius="4" fill="$track" />
              <rect x="0" y="0" w="204" h="8" radius="4" fill="$ox" />
            </frame>
            <text text-style="Count" w="40" value="168" color="$text-70" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <row w="32" gap="3" align="middle-center">
              <text text-style="DistDigit" value="4" color="$text-70" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="12" h="12" />
            </row>
            <frame w="204" h="8">
              <rect x="0" y="0" w="204" h="8" radius="4" fill="$track" />
              <rect x="0" y="0" w="40" h="8" radius="4" fill="$ox" />
            </frame>
            <text text-style="Count" w="40" value="33" color="$text-70" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <row w="32" gap="3" align="middle-center">
              <text text-style="DistDigit" value="3" color="$text-70" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="12" h="12" />
            </row>
            <frame w="204" h="8">
              <rect x="0" y="0" w="204" h="8" radius="4" fill="$track" />
              <rect x="0" y="0" w="10" h="8" radius="4" fill="$ox" />
            </frame>
            <text text-style="Count" w="40" value="8" color="$text-70" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <row w="32" gap="3" align="middle-center">
              <text text-style="DistDigit" value="2" color="$text-70" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="12" h="12" />
            </row>
            <frame w="204" h="8">
              <rect x="0" y="0" w="204" h="8" radius="4" fill="$track" />
              <rect x="0" y="0" w="4" h="8" radius="4" fill="$ox" />
            </frame>
            <text text-style="Count" w="40" value="3" color="$text-70" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-center">
            <row w="32" gap="3" align="middle-center">
              <text text-style="DistDigit" value="1" color="$text-70" />
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="12" h="12" />
            </row>
            <frame w="204" h="8">
              <rect x="0" y="0" w="204" h="8" radius="4" fill="$track" />
              <rect x="0" y="0" w="2" h="8" radius="4" fill="$ox" />
            </frame>
            <text text-style="Count" w="40" value="2" color="$text-70" align="right" />
          </row>
        </col>
      </col>

      <col role="card" w="fill" radius="$r-md" p="16" gap="12" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="24" />
        </appearance>
        <text text-style="Micro" value="RATING BREAKDOWN" color="$text-50" />
        <row w="fill" gap="10" align="middle-center">
          <text text-style="AttrLabel" w="90" value="Quality" color="$text-70" />
          <frame w="154" h="8">
            <rect x="0" y="0" w="154" h="8" radius="4" fill="$track" />
            <rect x="0" y="0" w="148" h="8" radius="4" fill="$ox" />
          </frame>
          <text text-style="AttrNum" w="32" value="4.8" color="$text" align="right" />
        </row>
        <row w="fill" gap="10" align="middle-center">
          <text text-style="AttrLabel" w="90" value="Value" color="$text-70" />
          <frame w="154" h="8">
            <rect x="0" y="0" w="154" h="8" radius="4" fill="$track" />
            <rect x="0" y="0" w="132" h="8" radius="4" fill="$ox" />
          </frame>
          <text text-style="AttrNum" w="32" value="4.3" color="$text" align="right" />
        </row>
        <row w="fill" gap="10" align="middle-center">
          <text text-style="AttrLabel" w="90" value="Durability" color="$text-70" />
          <frame w="154" h="8">
            <rect x="0" y="0" w="154" h="8" radius="4" fill="$track" />
            <rect x="0" y="0" w="145" h="8" radius="4" fill="$ox" />
          </frame>
          <text text-style="AttrNum" w="32" value="4.7" color="$text" align="right" />
        </row>
      </col>

      <row w="fill" gap="auto" align="middle-center">
        <row gap="8" align="middle-center">
          <row role="chip" h="34" radius="$r-pill" fill="$ox" p="0 14" gap="6" align="middle-center">
            <text text-style="ChipTxt" value="All" color="$white" />
          </row>
          <row role="chip" h="34" radius="$r-pill" fill="$glass" border="1 $glass-line" p="0 12" gap="5" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/image-outline.svg?color=%23FAF6F4B8" w="15" h="15" />
            <text text-style="ChipTxt" value="Photos" color="$text-70" />
          </row>
        </row>
        <row role="chip" h="34" radius="$r-pill" fill="$glass" border="1 $glass-line" p="0 12" gap="5" align="middle-center">
          <text text-style="ChipTxt" value="Most helpful" color="$text-70" />
          <img src="https://api.iconify.design/material-symbols/expand-more-rounded.svg?color=%23FAF6F4B8" w="16" h="16" />
        </row>
      </row>

      <row w="fill" gap="auto" align="middle-center">
        <text text-style="SectionLbl" value="214 REVIEWS" color="$text-50" />
        <text text-style="Caption" value="Showing 3 of 214" color="$text-40" />
      </row>

      <col role="card" w="fill" radius="$r-md" p="14" gap="11" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="24" />
        </appearance>
        <row w="fill" gap="11" align="top-left">
          <col w="40" h="40" radius="$r-pill" fill="$ox-dim" border="1 $ox" align="middle-center">
            <text text-style="Avatar" value="MO" color="$ox-text" align="center" />
          </col>
          <col w="fill" gap="4">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Name" value="Marisa Okafor" color="$text" />
              <text text-style="Date" value="6 days ago" color="$text-50" align="right" />
            </row>
            <row gap="7" align="middle-center">
              <row gap="1" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
              </row>
              <row role="chip" h="18" radius="$r-pill" fill="$ox-dim" p="0 7" gap="3" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/verified-rounded.svg?color=%23F2A0AD" w="11" h="11" />
                <text text-style="Badge" value="VERIFIED" color="$ox-text" />
              </row>
            </row>
          </col>
        </row>
        <text text-style="RevTitle" value="Worth every penny for weekend trips" color="$text" />
        <text text-style="Body" value="Took it to Lisbon for four days and lived out of it the whole time. The leather already has a gorgeous patina and the interior held a week of clothes plus my camera kit with room to spare." color="$text-70" />
        <row gap="8" align="middle-center">
          <img src="https://images.unsplash.com/photo-1611955043602-2adfaeab5fb1?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80" w="60" h="60" radius="$r-sm" fit="cover" border="1 $glass-line-soft" />
          <img src="https://images.unsplash.com/photo-1525103504173-8dc1582c7430?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80" w="60" h="60" radius="$r-sm" fit="cover" border="1 $glass-line-soft" />
        </row>
        <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />
        <row w="fill" gap="auto" align="middle-center">
          <row role="button" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/thumb-up-outline-rounded.svg?color=%23FAF6F4B8" w="16" h="16" />
            <text text-style="Helpful" value="Helpful (47)" color="$text-70" />
          </row>
          <text text-style="Helpful" value="Report" color="$text-40" align="right" />
        </row>
      </col>

      <col role="card" w="fill" radius="$r-md" p="14" gap="11" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="24" />
        </appearance>
        <row w="fill" gap="11" align="top-left">
          <col w="40" h="40" radius="$r-pill" fill="$ox-dim" border="1 $ox" align="middle-center">
            <text text-style="Avatar" value="DR" color="$ox-text" align="center" />
          </col>
          <col w="fill" gap="4">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Name" value="Devin Ruiz" color="$text" />
              <text text-style="Date" value="2 weeks ago" color="$text-50" align="right" />
            </row>
            <row gap="7" align="middle-center">
              <row gap="1" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-outline-rounded.svg?color=%236B4C52" w="14" h="14" />
              </row>
              <row role="chip" h="18" radius="$r-pill" fill="$ox-dim" p="0 7" gap="3" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/verified-rounded.svg?color=%23F2A0AD" w="11" h="11" />
                <text text-style="Badge" value="VERIFIED" color="$ox-text" />
              </row>
            </row>
          </col>
        </row>
        <text text-style="RevTitle" value="Beautiful, but heavier than I expected" color="$text" />
        <text text-style="Body" value="No complaints on the craftsmanship, and the brass zippers are excellent. Just know it is a solid 4.2 lbs empty, so it adds up on a long walk through the terminal." color="$text-70" />
        <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />
        <row w="fill" gap="auto" align="middle-center">
          <row role="button" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/thumb-up-outline-rounded.svg?color=%23FAF6F4B8" w="16" h="16" />
            <text text-style="Helpful" value="Helpful (31)" color="$text-70" />
          </row>
          <text text-style="Helpful" value="Report" color="$text-40" align="right" />
        </row>
      </col>

      <col role="card" w="fill" radius="$r-md" p="14" gap="11" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="24" />
        </appearance>
        <row w="fill" gap="11" align="top-left">
          <col w="40" h="40" radius="$r-pill" fill="$ox-dim" border="1 $ox" align="middle-center">
            <text text-style="Avatar" value="PC" color="$ox-text" align="center" />
          </col>
          <col w="fill" gap="4">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Name" value="Priya Chandran" color="$text" />
              <text text-style="Date" value="3 weeks ago" color="$text-50" align="right" />
            </row>
            <row gap="7" align="middle-center">
              <row gap="1" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23A8324A" w="14" h="14" />
              </row>
              <row role="chip" h="18" radius="$r-pill" fill="$ox-dim" p="0 7" gap="3" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/verified-rounded.svg?color=%23F2A0AD" w="11" h="11" />
                <text text-style="Badge" value="VERIFIED" color="$ox-text" />
              </row>
            </row>
          </col>
        </row>
        <text text-style="RevTitle" value="The oxblood is even richer in person" color="$text" />
        <text text-style="Body" value="Photos do not do the colour justice. After three months of daily use the strap has softened perfectly and there is zero loose stitching anywhere. This will outlast me." color="$text-70" />
        <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />
        <row w="fill" gap="auto" align="middle-center">
          <row role="button" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/thumb-up-outline-rounded.svg?color=%23FAF6F4B8" w="16" h="16" />
            <text text-style="Helpful" value="Helpful (22)" color="$text-70" />
          </row>
          <text text-style="Helpful" value="Report" color="$text-40" align="right" />
        </row>
      </col>

      <row role="button" w="fill" h="46" radius="$r-pill" fill="$glass" border="1 $glass-line" gap="6" align="middle-center">
        <text text-style="LinkTxt" value="See all 214 reviews" color="$text" />
        <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23FAF6F4" w="18" h="18" />
      </row>

    </col>

    <row role="toolbar" w="360" h="76" p="12 16 16 16" gap="10" fill="$glass-2" border="1 0 0 0 $glass-line" align="top-center">
      <row role="button" w="48" h="48" radius="$r-pill" fill="$glass" border="1 $glass-line" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/bookmark-outline-rounded.svg?color=%23FAF6F4" w="22" h="22" />
      </row>
      <row role="button" w="fill" h="48" radius="$r-pill" fill="$ox" gap="8" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/rate-review-outline-rounded.svg?color=%23FFFFFF" w="20" h="20" />
        <text text-style="BtnTxt" value="Write a review" color="$white" />
      </row>
    </row>

  </col>
</gui>
```