---
title: "Bloom — Sheer Lip Oil"
platform: android
slug: bloom-sheer-lip-oil
screens: ["product-detail"]
domains: ["ecommerce"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "item-indicator", "avatar", "badge", "chip", "segmented-control", "stepper", "card", "accordion", "button"]
score: {clean: 100, consistent: 79, accessible: 99, comprehensible: 30}
url: https://gui.farm/android/bloom-sheer-lip-oil
raw: https://gui.farm/android/bloom-sheer-lip-oil/design.guix
download: https://gui.farm/android/bloom-sheer-lip-oil.gui
---

# Bloom — Sheer Lip Oil

A beauty e-commerce product-detail screen for browsing a lip-oil's shades, size, ratings, and adding it to the bag.

- **Live preview:** https://gui.farm/android/bloom-sheer-lip-oil
- **Raw source:** https://gui.farm/android/bloom-sheer-lip-oil/design.guix
- **Download (.gui):** https://gui.farm/android/bloom-sheer-lip-oil.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Bloom — Sheer Lip Oil">
  <tokens>
    <color name="bg" value="#FFFFFF" />
    <color name="surface" value="#FCF5F7" />
    <color name="hero" value="#F7E9EE" />
    <color name="on-surface" value="#221A1D" />
    <color name="on-variant" value="#574E52" />
    <color name="outline" value="#EBDCE1" />
    <color name="primary" value="#B0234F" />
    <color name="primary-tint" value="#F6DCE5" />
    <color name="bar-track" value="#EFDCE4" />
    <color name="white" value="#FFFFFF" />
    <color name="sw-petal" value="#F2C9C0" />
    <color name="sw-rose" value="#D98CA6" />
    <color name="sw-cherry" value="#B23A48" />
    <color name="sw-plum" value="#7E4A63" />
    <color name="sw-coral" value="#E98A6B" />
    <color name="sw-toffee" value="#B98A6A" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="20" />
    <number name="r-xl" value="24" />
    <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="Title" font-family="Roboto" font-size="24" font-weight="500" line-height="30" />
    <text-style name="Price" font-family="Roboto" font-size="22" font-weight="700" line-height="28" />
    <text-style name="BigRating" font-family="Roboto" font-size="40" font-weight="700" line-height="44" />
    <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="15" font-weight="400" line-height="22" />
    <text-style name="Body" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="Label" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelSmall" 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="$bg">
    <!-- status bar -->
    <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=%23221A1D"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23221A1D" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23221A1D"
          w="15"
          h="15"
        />
      </row>
    </row>
    <!-- top navigation bar -->
    <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=%23221A1D"
          w="24"
          h="24"
        />
      </row>
      <row w="fill" />
      <row w="44" h="44" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/ios-share-rounded.svg?color=%23221A1D"
          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=%23221A1D"
          w="24"
          h="24"
        />
      </row>
    </row>
    <!-- hero image + carousel indicator -->
    <col w="360" p="4 16 0 16">
      <frame w="328" h="340" radius="$r-xl" fill="$hero" clip="true">
        <img
          x="0"
          y="0"
          w="328"
          h="340"
          fit="cover"
          src="https://images.unsplash.com/photo-1741896135490-4062a3b21abf?auto=format&amp;fit=crop&amp;w=800&amp;h=820&amp;q=80"
        />
        <frame role="item-indicator" x="0" y="316" w="328" h="8">
          <rect x="131" y="0" w="18" h="6" radius="3" fill="$primary" />
          <ellipse x="155" y="0" w="6" h="6" fill="$white" />
          <ellipse x="167" y="0" w="6" h="6" fill="$white" />
          <ellipse x="179" y="0" w="6" h="6" fill="$white" />
          <ellipse x="191" y="0" w="6" h="6" fill="$white" />
        </frame>
      </frame>
    </col>
    <!-- title block -->
    <col w="360" p="16 16 0 16" gap="6">
      <text text-style="Eyebrow" value="LIP CARE" fill="$primary" />
      <text text-style="Title" value="Sheer Lip Oil" fill="$on-surface" />
      <row w="296" gap="10" align="middle-left">
        <frame role="avatar" w="28" h="28" radius="14" clip="true">
          <ellipse x="0" y="0" w="28" h="28" fill="$primary-tint" />
          <text x="9" y="5" text-style="Label" value="B" fill="$primary" />
        </frame>
        <text text-style="Body" value="Bloom Beauty" fill="$on-variant" />
        <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B0234F" w="16" h="16" />
        <text text-style="Label" value="4.8" fill="$on-surface" />
        <text text-style="Body" value="(2,400)" fill="$on-variant" />
      </row>
    </col>
    <!-- price -->
    <col w="360" p="14 16 0 16">
      <row w="296" gap="10" align="middle-left">
        <text text-style="Price" value="$24" fill="$on-surface" />
        <row role="badge" h="22" radius="$r-sm" fill="$primary-tint" p="0 8" align="middle-center">
          <text text-style="LabelSmall" value="SAVE 20%" fill="$primary" />
        </row>
        <text text-style="Body" value="was $30" fill="$on-variant" />
      </row>
    </col>
    <!-- description -->
    <col w="360" p="12 16 0 16">
      <text
        w="328"
        text-style="BodyLarge"
        value="A weightless, non-sticky oil that melts into lips for a glassy sheen and a wash of buildable rose tint. Nourishing squalane and rosehip lock in moisture."
        fill="$on-variant"
      />
    </col>
    <!-- trust chips -->
    <col w="360" p="14 16 0 16">
      <row w="328" gap="8" align="middle-left">
        <row role="chip" h="32" radius="$r-full" fill="none" border="1 $outline" p="0 12" align="middle-center">
          <text text-style="LabelSmall" value="Cruelty-free" fill="$on-variant" />
        </row>
        <row role="chip" h="32" radius="$r-full" fill="none" border="1 $outline" p="0 12" align="middle-center">
          <text text-style="LabelSmall" value="Vegan" fill="$on-variant" />
        </row>
        <row role="chip" h="32" radius="$r-full" fill="none" border="1 $outline" p="0 12" align="middle-center">
          <text text-style="LabelSmall" value="30-day returns" fill="$on-variant" />
        </row>
      </row>
    </col>
    <!-- shade selector -->
    <col w="360" p="20 16 0 16" gap="12">
      <row w="328" gap="auto" align="middle-left">
        <row gap="6" align="middle-left">
          <text text-style="TitleMedium" value="Shade" fill="$on-surface" />
          <text text-style="Body" value="Rosewater" fill="$on-variant" />
        </row>
        <text text-style="Label" value="View all 6" fill="$primary" />
      </row>
      <row w="328" gap="12" align="middle-left">
        <frame w="44" h="44">
          <ellipse x="2" y="2" w="40" h="40" fill="$sw-petal" />
        </frame>
        <frame w="44" h="44">
          <ellipse x="0" y="0" w="44" h="44" fill="$primary" />
          <ellipse x="3" y="3" w="38" h="38" fill="$sw-rose" />
        </frame>
        <frame w="44" h="44">
          <ellipse x="2" y="2" w="40" h="40" fill="$sw-cherry" />
        </frame>
        <frame w="44" h="44">
          <ellipse x="2" y="2" w="40" h="40" fill="$sw-plum" />
        </frame>
        <frame w="44" h="44">
          <ellipse x="2" y="2" w="40" h="40" fill="$sw-coral" />
        </frame>
        <frame w="44" h="44">
          <ellipse x="2" y="2" w="40" h="40" fill="$sw-toffee" />
        </frame>
      </row>
    </col>
    <!-- size segmented control -->
    <col w="360" p="20 16 0 16" gap="10">
      <text text-style="TitleMedium" value="Size" fill="$on-surface" />
      <row
        role="segmented-control"
        w="328"
        h="44"
        radius="$r-md"
        fill="none"
        border="1 $outline"
        clip="true"
        align="middle-left"
      >
        <row w="164" h="44" fill="$primary-tint" gap="6" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23B0234F"
            w="18"
            h="18"
          />
          <text text-style="Label" value="5 ml" fill="$primary" />
        </row>
        <row w="164" h="44" align="middle-center">
          <text text-style="Label" value="10 ml" fill="$on-variant" />
        </row>
      </row>
    </col>
    <!-- quantity stepper -->
    <col w="360" p="20 16 0 16">
      <row w="328" gap="auto" align="middle-left">
        <text text-style="TitleMedium" value="Quantity" fill="$on-surface" />
        <row role="stepper" w="140" h="44" radius="$r-md" fill="none" border="1 $outline" align="middle-left">
          <row w="46" h="44" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%23574E52"
              w="20"
              h="20"
            />
          </row>
          <row w="48" h="44" align="middle-center">
            <text text-style="TitleMedium" value="1" fill="$on-surface" />
          </row>
          <row w="46" h="44" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23B0234F"
              w="20"
              h="20"
            />
          </row>
        </row>
      </row>
    </col>
    <!-- ratings breakdown -->
    <col w="360" p="24 16 0 16" gap="12">
      <text text-style="TitleMedium" value="Ratings &amp; reviews" fill="$on-surface" />
      <col role="card" w="328" radius="$r-lg" fill="$surface" p="16 14" gap="14">
        <row w="300" gap="16" align="middle-left">
          <col gap="2" align="middle-left">
            <text text-style="BigRating" value="4.8" fill="$on-surface" />
            <row gap="2" align="middle-left">
              <img
                src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B0234F"
                w="14"
                h="14"
              />
              <img
                src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B0234F"
                w="14"
                h="14"
              />
              <img
                src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B0234F"
                w="14"
                h="14"
              />
              <img
                src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B0234F"
                w="14"
                h="14"
              />
              <img
                src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23B0234F"
                w="14"
                h="14"
              />
            </row>
            <text text-style="LabelSmall" value="2,400 reviews" fill="$on-variant" />
          </col>
          <col w="fill" gap="7">
            <row w="fill" gap="10" align="middle-center">
              <text w="8" text-style="LabelSmall" value="5" fill="$on-variant" />
              <frame w="fill" h="8" radius="4" clip="true">
                <rect x="0" y="0" w="200" h="8" fill="$bar-track" />
                <rect x="0" y="0" w="172" h="8" radius="4" fill="$primary" />
              </frame>
              <text w="40" text-style="LabelSmall" value="2,064" fill="$on-variant" />
            </row>
            <row w="fill" gap="10" align="middle-center">
              <text w="8" text-style="LabelSmall" value="4" fill="$on-variant" />
              <frame w="fill" h="8" radius="4" clip="true">
                <rect x="0" y="0" w="200" h="8" fill="$bar-track" />
                <rect x="0" y="0" w="18" h="8" radius="4" fill="$primary" />
              </frame>
              <text w="40" text-style="LabelSmall" value="216" fill="$on-variant" />
            </row>
            <row w="fill" gap="10" align="middle-center">
              <text w="8" text-style="LabelSmall" value="3" fill="$on-variant" />
              <frame w="fill" h="8" radius="4" clip="true">
                <rect x="0" y="0" w="200" h="8" fill="$bar-track" />
                <rect x="0" y="0" w="4" h="8" radius="4" fill="$primary" />
              </frame>
              <text w="40" text-style="LabelSmall" value="48" fill="$on-variant" />
            </row>
            <row w="fill" gap="10" align="middle-center">
              <text w="8" text-style="LabelSmall" value="2" fill="$on-variant" />
              <frame w="fill" h="8" radius="4" clip="true">
                <rect x="0" y="0" w="200" h="8" fill="$bar-track" />
                <rect x="0" y="0" w="2" h="8" radius="4" fill="$primary" />
              </frame>
              <text w="40" text-style="LabelSmall" value="24" fill="$on-variant" />
            </row>
            <row w="fill" gap="10" align="middle-center">
              <text w="8" text-style="LabelSmall" value="1" fill="$on-variant" />
              <frame w="fill" h="8" radius="4" clip="true">
                <rect x="0" y="0" w="200" h="8" fill="$bar-track" />
                <rect x="0" y="0" w="4" h="8" radius="4" fill="$primary" />
              </frame>
              <text w="40" text-style="LabelSmall" value="48" fill="$on-variant" />
            </row>
          </col>
        </row>
      </col>
    </col>
    <!-- details accordion -->
    <col w="360" p="24 16 0 16" gap="10">
      <text text-style="TitleMedium" value="Details" fill="$on-surface" />
      <col role="accordion" w="328" radius="$r-lg" fill="$surface" p="4 14" gap="0">
        <row w="300" h="52" gap="auto" align="middle-left">
          <text text-style="Label" value="Ingredients" fill="$on-surface" />
          <img
            src="https://api.iconify.design/material-symbols/keyboard-arrow-up-rounded.svg?color=%23574E52"
            w="22"
            h="22"
          />
        </row>
        <text
          w="300"
          text-style="Body"
          value="Squalane, jojoba seed oil, rosehip extract, vitamin E, peppermint oil. Free from parabens and synthetic fragrance."
          fill="$on-variant"
          p="0 0 12 0"
        />
        <line w="300" fill="$outline" />
        <row w="300" h="52" gap="auto" align="middle-left">
          <text text-style="Label" value="How to use" fill="$on-surface" />
          <img
            src="https://api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg?color=%23574E52"
            w="22"
            h="22"
          />
        </row>
        <line w="300" fill="$outline" />
        <row w="300" h="52" gap="auto" align="middle-left">
          <text text-style="Label" value="Shipping &amp; returns" fill="$on-surface" />
          <img
            src="https://api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg?color=%23574E52"
            w="22"
            h="22"
          />
        </row>
      </col>
    </col>
    <col w="360" h="28" />
    <!-- fixed bottom action bar (last flow child) -->
    <col w="360" fill="$bg">
      <line w="360" fill="$outline" />
      <row w="360" p="12 16 10 16" gap="16" align="middle-left">
        <col gap="0" align="middle-left">
          <text text-style="Price" value="$24" fill="$on-surface" />
          <text text-style="LabelSmall" value="was $30" fill="$on-variant" />
        </col>
        <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-outline-rounded.svg?color=%23FFFFFF"
            w="20"
            h="20"
          />
          <text text-style="Label" value="Add to Bag" fill="$white" />
        </row>
      </row>
      <row w="360" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$outline" />
      </row>
    </col>
  </col>
</gui>
```