---
title: "Lantern & Loam — Meadowmoon Season Pass"
platform: android
slug: lantern-loam-meadowmoon-season-pass
screens: ["pricing"]
domains: ["gaming"]
style: null
fonts: ["Nunito", "Fredoka"]
roles: ["top-navigation-bar", "button", "badge", "card", "divider"]
score: {clean: 100, consistent: 77, accessible: 94, comprehensible: 32}
url: https://gui.farm/android/lantern-loam-meadowmoon-season-pass
raw: https://gui.farm/android/lantern-loam-meadowmoon-season-pass/design.guix
download: https://gui.farm/android/lantern-loam-meadowmoon-season-pass.gui
---

# Lantern & Loam — Meadowmoon Season Pass

A claymorphism Android season-pass purchase screen for a cozy farming game, letting players compare a featured Season Pass and a discounted bundle, preview seasonal rewards, and unlock the premium track.

- **Live preview:** https://gui.farm/android/lantern-loam-meadowmoon-season-pass
- **Raw source:** https://gui.farm/android/lantern-loam-meadowmoon-season-pass/design.guix
- **Download (.gui):** https://gui.farm/android/lantern-loam-meadowmoon-season-pass.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Lantern &amp; Loam — Meadowmoon Season Pass">
  <tokens>
    <color name="bg" value="#F1E6D6" />
    <color name="surface" value="#FFFBF4" />
    <color name="surface-2" value="#FBF2E6" />
    <color name="track" value="#E7D7C1" />
    <color name="coral-deep" value="#BE3E1C" />
    <color name="coral-deeper" value="#A63417" />
    <color name="coral-tint" value="#FBE0D4" />
    <color name="gold" value="#8A5A0A" />
    <color name="gold-tint" value="#F7E6C4" />
    <color name="ink" value="#2B2018" />
    <color name="body" value="#6A5A4C" />
    <color name="muted" value="#746353" />
    <color name="line" value="#EAD9C4" />
    <color name="on-coral" value="#FFFBF4" />
    <color name="white" value="#FFFFFF" />
    <number name="r-hero" value="24" />
    <number name="r-card" value="22" />
    <number name="r-tile" value="18" />
    <number name="r-pill" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Nunito" font-size="12" font-weight="700" line-height="16" />
    <text-style
      name="Kicker"
      font-family="Nunito"
      font-size="11"
      font-weight="800"
      line-height="14"
      letter-spacing="1.2"
    />
    <text-style
      name="HeroTitle"
      font-family="Fredoka"
      font-size="30"
      font-weight="600"
      line-height="34"
      letter-spacing="-0.3"
    />
    <text-style name="HeroSub" font-family="Nunito" font-size="13" font-weight="700" line-height="18" />
    <text-style name="NavTitle" font-family="Fredoka" font-size="18" font-weight="600" line-height="24" />
    <text-style
      name="Section"
      font-family="Fredoka"
      font-size="20"
      font-weight="600"
      line-height="26"
      letter-spacing="-0.2"
    />
    <text-style name="PlanName" font-family="Fredoka" font-size="22" font-weight="600" line-height="28" />
    <text-style
      name="Price"
      font-family="Fredoka"
      font-size="26"
      font-weight="600"
      line-height="30"
      letter-spacing="-0.4"
    />
    <text-style name="PriceSm" font-family="Fredoka" font-size="20" font-weight="600" line-height="24" />
    <text-style
      name="Big"
      font-family="Fredoka"
      font-size="34"
      font-weight="600"
      line-height="36"
      letter-spacing="-0.5"
    />
    <text-style name="TileVal" font-family="Fredoka" font-size="16" font-weight="600" line-height="20" />
    <text-style name="Body" font-family="Nunito" font-size="14" font-weight="600" line-height="20" />
    <text-style name="BodyR" font-family="Nunito" font-size="14" font-weight="400" line-height="20" />
    <text-style name="Label" font-family="Nunito" font-size="13" font-weight="700" line-height="18" />
    <text-style name="Small" font-family="Nunito" font-size="12" font-weight="700" line-height="16" />
    <text-style
      name="Micro"
      font-family="Nunito"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="0.4"
    />
    <text-style
      name="Badge"
      font-family="Nunito"
      font-size="11"
      font-weight="800"
      line-height="14"
      letter-spacing="0.6"
    />
    <text-style name="CTA" font-family="Fredoka" font-size="18" font-weight="600" line-height="22" />
  </styles>
  <fonts>
    <font family="Fredoka" source="google" weights="400 500 600 700" styles="normal" />
    <font family="Nunito" source="google" weights="400 600 700 800" styles="normal" />
  </fonts>
  <components>
    <!-- perk row: coral clay check + label -->
    <component name="PerkRow" id="comp-perk">
      <props>
        <prop name="lbl" type="text" target="pk-lbl" />
      </props>
      <row w="fill" gap="12" align="middle-left">
        <frame w="24" h="24" radius="$r-pill">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #FF8A64 0%, #E85A34 100%)" />
            <effect type="drop-shadow" x="0" y="2" radius="5" spread="0" color="#C8431F40" />
            <effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#FFFFFF66" />
          </appearance>
          <img
            x="4"
            y="4"
            src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFBF4"
            w="16"
            h="16"
          />
        </frame>
        <text
          id="pk-lbl"
          w="fill"
          text-style="Body"
          value="Unlock all 50 tiers of premium rewards"
          fill="$ink"
        />
      </row>
    </component>
    <!-- reward tile: clay square, icon disc + value + label -->
    <component name="RewardTile" id="comp-reward">
      <props>
        <prop name="val" type="text" target="rw-val" />
        <prop name="lbl" type="text" target="rw-lbl" />
        <prop name="ig" type="visible" target="rw-ig" />
        <prop name="is" type="visible" target="rw-is" />
        <prop name="ip" type="visible" target="rw-ip" />
        <prop name="ie" type="visible" target="rw-ie" />
      </props>
      <col w="fill" h="112" radius="$r-tile" fill="$surface" p="12 6" gap="7" align="top-center">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #FFF4E8 100%)" />
          <effect type="drop-shadow" x="0" y="6" radius="14" spread="0" color="#C79A6E3D" />
          <effect type="inner-shadow" x="0" y="2" radius="2" spread="0" color="#FFFFFFB3" />
        </appearance>
        <frame w="44" h="44" radius="$r-pill">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #FCE3D8 0%, #F7CDBD 100%)" />
            <effect type="inner-shadow" x="0" y="2" radius="2" spread="0" color="#FFFFFFAA" />
          </appearance>
          <img
            id="rw-ig"
            x="10"
            y="10"
            src="https://api.iconify.design/material-symbols/diamond-rounded.svg?color=%23C67C12"
            w="24"
            h="24"
          />
          <img
            id="rw-is"
            x="10"
            y="10"
            src="https://api.iconify.design/material-symbols/checkroom-rounded.svg?color=%23BE3E1C"
            w="24"
            h="24"
          />
          <img
            id="rw-ip"
            x="10"
            y="10"
            src="https://api.iconify.design/material-symbols/pets-rounded.svg?color=%23BE3E1C"
            w="24"
            h="24"
          />
          <img
            id="rw-ie"
            x="10"
            y="10"
            src="https://api.iconify.design/material-symbols/mood-rounded.svg?color=%23BE3E1C"
            w="24"
            h="24"
          />
        </frame>
        <text id="rw-val" text-style="TileVal" value="2,400" fill="$ink" />
        <text id="rw-lbl" text-style="Micro" value="GEMS" fill="$muted" />
      </col>
    </component>
  </components>
  <col w="360" fill="$bg">
    <!-- status bar (device chrome, untagged) -->
    <row w="fill" h="24" p="0 16" gap="auto" align="middle-center">
      <text text-style="Status" value="9:41" fill="$ink" />
      <row gap="6" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%232B2018"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%232B2018" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%232B2018"
          w="15"
          h="15"
        />
      </row>
    </row>
    <!-- top navigation bar -->
    <row role="top-navigation-bar" w="fill" h="56" p="0 8 0 12" gap="auto" align="middle-center">
      <col w="40" h="40" radius="$r-pill" fill="$surface" align="middle-center">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #FBF1E5 100%)" />
          <effect type="drop-shadow" x="0" y="3" radius="7" spread="0" color="#C79A6E45" />
          <effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#FFFFFFCC" />
        </appearance>
        <img
          src="https://api.iconify.design/material-symbols/close-rounded.svg?color=%232B2018"
          w="22"
          h="22"
        />
      </col>
      <text text-style="NavTitle" value="Season Pass" fill="$ink" />
      <row role="button" h="40" radius="$r-pill" p="0 14" align="middle-center">
        <text text-style="Label" value="Restore" fill="$coral-deep" />
      </row>
    </row>
    <!-- season hero card -->
    <col w="fill" p="4 16 0 16">
      <frame w="328" h="196" radius="$r-hero" clip="true">
        <appearance>
          <effect type="drop-shadow" x="0" y="10" radius="22" spread="0" color="#B78A5A4D" />
        </appearance>
        <img
          x="0"
          y="0"
          src="https://images.unsplash.com/photo-1768476054484-025070f96991?w=720&amp;h=430&amp;fit=crop&amp;q=80&amp;auto=format"
          w="328"
          h="196"
          fit="cover"
        />
        <rect
          x="0"
          y="80"
          w="328"
          h="116"
          fill="linear-gradient(180deg, #2B201800 0%, #2B2018B8 62%, #241A12F2 100%)"
        />
        <!-- season pill -->
        <row
          abs="true"
          x="16"
          y="16"
          role="badge"
          h="26"
          radius="$r-pill"
          p="0 12"
          gap="6"
          align="middle-center"
        >
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #C8451F 0%, #A63417 100%)" />
            <effect type="drop-shadow" x="0" y="2" radius="6" spread="0" color="#8A2E1259" />
            <effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#FFFFFF66" />
          </appearance>
          <img
            src="https://api.iconify.design/material-symbols/nightlight-rounded.svg?color=%23FFFBF4"
            w="14"
            h="14"
          />
          <text text-style="Badge" value="SEASON 4" fill="$on-coral" />
        </row>
        <!-- countdown pill -->
        <row
          abs="true"
          x="200"
          y="16"
          w="112"
          h="26"
          radius="$r-pill"
          fill="#241A12CC"
          p="0 10"
          gap="5"
          align="middle-center"
          border="1 #FFFFFF2E"
        >
          <img
            src="https://api.iconify.design/material-symbols/timer-outline-rounded.svg?color=%23F7CDBD"
            w="14"
            h="14"
          />
          <text text-style="Small" value="12 days left" fill="$coral-tint" />
        </row>
        <!-- title block -->
        <text abs="true" x="18" y="120" text-style="HeroTitle" value="Meadowmoon" fill="$white" />
        <row abs="true" x="18" y="160" gap="6" align="middle-left">
          <img
            src="https://api.iconify.design/material-symbols/eco-rounded.svg?color=%23F7CDBD"
            w="15"
            h="15"
          />
          <text text-style="HeroSub" value="A cozy harvest season on the smallholding" fill="$coral-tint" />
        </row>
      </frame>
    </col>
    <!-- rank / tier progress card -->
    <col w="fill" p="16 16 0 16">
      <col role="card" w="328" radius="$r-card" fill="$surface" p="16" gap="14">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #FDF5EA 100%)" />
          <effect type="drop-shadow" x="0" y="8" radius="18" spread="0" color="#C79A6E40" />
          <effect type="inner-shadow" x="0" y="2" radius="2" spread="0" color="#FFFFFFCC" />
        </appearance>
        <row w="fill" gap="12" align="middle-left">
          <frame w="46" h="46" radius="$r-pill">
            <appearance>
              <fill type="linear-gradient" value="linear-gradient(180deg, #C8451F 0%, #A63417 100%)" />
              <effect type="drop-shadow" x="0" y="3" radius="8" spread="0" color="#B23A1A4D" />
              <effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#FFFFFF66" />
            </appearance>
            <text x="0" y="0" w="46" h="46" text-style="PlanName" value="8" fill="$on-coral" align="center" />
          </frame>
          <col w="fill" gap="2" align="middle-left">
            <text text-style="PlanName" value="Tier 8" fill="$ink" />
            <text text-style="Small" value="Farmhand · Meadowmoon track" fill="$muted" />
          </col>
          <col gap="2" align="top-right">
            <text text-style="Micro" value="NEXT" fill="$muted" />
            <text text-style="PriceSm" value="Tier 9" fill="$body" />
          </col>
        </row>
        <!-- xp track: 296 wide, 675/900 = 0.75 -> fill 222 -->
        <frame w="296" h="16" radius="$r-pill">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #E4D3BD 0%, #EFE0CC 100%)" />
            <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#B78A5A73" />
          </appearance>
          <frame x="0" y="0" w="222" h="16" radius="$r-pill">
            <appearance>
              <fill type="linear-gradient" value="linear-gradient(180deg, #FF8A64 0%, #E85A34 100%)" />
              <effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#FFFFFF80" />
            </appearance>
          </frame>
        </frame>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Body" value="675 / 900 XP" fill="$ink" />
          <text text-style="Body" value="225 XP to Tier 9" fill="$muted" />
        </row>
      </col>
    </col>
    <!-- choose your pass -->
    <col w="fill" p="20 16 0 16" gap="12">
      <text text-style="Section" value="Choose your pass" fill="$ink" />
      <!-- featured plan: Season Pass -->
      <col role="card" w="328" radius="$r-card" fill="$surface" p="18" gap="16" border="2 $coral-deep">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #FFF3E9 100%)" />
          <effect type="drop-shadow" x="0" y="12" radius="26" spread="0" color="#C86A3A4D" />
          <effect type="inner-shadow" x="0" y="2" radius="2" spread="0" color="#FFFFFFCC" />
        </appearance>
        <row w="fill" gap="auto" align="top-left">
          <col gap="4" align="top-left">
            <row gap="8" align="middle-left">
              <text text-style="PlanName" value="Season Pass" fill="$ink" />
              <row
                role="badge"
                h="22"
                radius="$r-pill"
                p="0 9"
                gap="4"
                align="middle-center"
                fill="$coral-tint"
              >
                <img
                  src="https://api.iconify.design/material-symbols/local-fire-department-rounded.svg?color=%23A63417"
                  w="13"
                  h="13"
                />
                <text text-style="Badge" value="MOST POPULAR" fill="$coral-deeper" />
              </row>
            </row>
            <text text-style="Small" value="One-time · unlocks the full season" fill="$muted" />
          </col>
        </row>
        <row w="fill" gap="6" align="bottom-left">
          <text text-style="Price" value="$9.99" fill="$coral-deep" />
          <col h="28" align="bottom-left">
            <text text-style="Small" value="this season" fill="$muted" />
          </col>
        </row>
        <line role="divider" w="fill" fill="$line" />
        <col w="fill" gap="13">
          <instance component="comp-perk" lbl="Unlock all 50 tiers of premium rewards" />
          <instance component="comp-perk" lbl="+20% Harvest XP for the whole season" />
          <instance component="comp-perk" lbl="Exclusive Lantern Fox companion, yours at Tier 1" />
          <instance component="comp-perk" lbl="Skip straight ahead with 2 tier boosts" />
        </col>
      </col>
      <!-- secondary plan: Bundle -->
      <row
        role="card"
        w="328"
        radius="$r-card"
        fill="$surface-2"
        p="16"
        gap="12"
        align="middle-left"
        border="1 $line"
      >
        <frame w="44" h="44" radius="$r-tile">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #F7E6C4 0%, #EFD6A6 100%)" />
            <effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#FFFFFF99" />
          </appearance>
          <img
            x="10"
            y="10"
            src="https://api.iconify.design/material-symbols/rocket-launch-rounded.svg?color=%23C67C12"
            w="24"
            h="24"
          />
        </frame>
        <col w="fill" gap="3" align="middle-left">
          <row gap="8" align="middle-left" w="fill">
            <text text-style="PriceSm" value="Pass Bundle" fill="$ink" />
            <row role="badge" h="20" radius="$r-pill" p="0 8" align="middle-center" fill="$gold-tint">
              <text text-style="Badge" value="SAVE $1.99" fill="$gold" />
            </row>
          </row>
          <text
            w="fill"
            text-style="BodyR"
            value="Season Pass + 25 tier skips + a jump to Tier 20"
            fill="$body"
          />
        </col>
        <col gap="0" align="middle-right">
          <text text-style="PriceSm" value="$16.99" fill="$ink" />
          <text text-style="Small" value="$18.98" fill="$muted" />
        </col>
      </row>
    </col>
    <!-- rewards preview -->
    <col w="fill" p="22 16 0 16" gap="12">
      <row w="fill" gap="auto" align="middle-left">
        <text text-style="Section" value="Inside this season" fill="$ink" />
        <text text-style="Label" value="50 tiers" fill="$muted" />
      </row>
      <row w="fill" gap="10" align="top-center">
        <instance component="comp-reward" val="2,400" lbl="GEMS" ig="true" is="false" ip="false" ie="false" />
        <instance
          component="comp-reward"
          val="Harvest"
          lbl="CLOAK"
          ig="false"
          is="true"
          ip="false"
          ie="false"
        />
        <instance
          component="comp-reward"
          val="Lantern"
          lbl="FOX PET"
          ig="false"
          is="false"
          ip="true"
          ie="false"
        />
        <instance
          component="comp-reward"
          val="Cozy"
          lbl="WAVE"
          ig="false"
          is="false"
          ip="false"
          ie="true"
        />
      </row>
    </col>
    <!-- value callout -->
    <col w="fill" p="16">
      <row role="card" w="328" radius="$r-card" p="16 18" gap="16" align="middle-center">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FCE3D8 0%, #F8CCBB 100%)" />
          <effect type="drop-shadow" x="0" y="8" radius="18" spread="0" color="#D68A6640" />
          <effect type="inner-shadow" x="0" y="2" radius="2" spread="0" color="#FFFFFF80" />
        </appearance>
        <text text-style="Big" value="42" fill="$coral-deeper" />
        <col w="fill" gap="3" align="middle-left">
          <text text-style="Body" value="premium rewards still to unlock" fill="$ink" />
          <text
            w="fill"
            text-style="BodyR"
            value="Worth 2,400 gems and 6 cosmetics before Season 4 closes."
            fill="$body"
          />
        </col>
      </row>
    </col>
    <!-- bottom action bar (last flow child) -->
    <col w="fill" fill="$surface" border="1 0 0 0 $line">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #FFFBF4 0%, #FBF2E6 100%)" />
        <effect type="drop-shadow" x="0" y="-6" radius="16" spread="0" color="#C79A6E33" />
      </appearance>
      <row w="fill" p="14 16 10 16" gap="14" align="middle-center">
        <col gap="1" align="middle-left">
          <text text-style="Small" value="SEASON PASS" fill="$muted" />
          <text text-style="PriceSm" value="$9.99" fill="$ink" />
        </col>
        <row role="button" w="fill" h="56" radius="$r-pill" gap="8" align="middle-center">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #C8451F 0%, #A63417 100%)" />
            <effect type="drop-shadow" x="0" y="8" radius="16" spread="0" color="#8A2E1259" />
            <effect type="inner-shadow" x="0" y="2" radius="2" spread="0" color="#FFFFFF4D" />
          </appearance>
          <img
            src="https://api.iconify.design/material-symbols/lock-open-rounded.svg?color=%23FFFBF4"
            w="20"
            h="20"
          />
          <text text-style="CTA" value="Unlock Season Pass" fill="$on-coral" />
        </row>
      </row>
      <text
        w="fill"
        text-style="Small"
        value="One-time purchase. Unlocks instantly and lasts until Season 4 ends."
        fill="$muted"
        align="center"
        p="0 16 10 16"
      />
      <row w="fill" h="20" align="middle-center">
        <rect w="108" h="4" radius="$r-pill" fill="$track" />
      </row>
    </col>
  </col>
</gui>
```