---
title: "Ironhold — Bramble"
platform: web
slug: ironhold-bramble
screens: []
domains: ["gaming"]
style: "skeuomorphic"
fonts: ["Cinzel", "Hanken Grotesk", "Space Mono"]
roles: ["top-navigation-bar", "card", "button", "segmented-control", "toolbar"]
score: {clean: 100, consistent: 60, accessible: 44, comprehensible: 19}
url: https://gui.farm/web/ironhold-bramble
raw: https://gui.farm/web/ironhold-bramble/design.guix
download: https://gui.farm/web/ironhold-bramble.gui
---

# Ironhold — Bramble

A skeuomorphic web RPG inventory and equipment screen where a level 27 ranger manages a 30-slot loot grid, equipped gear, character attributes, and a selected legendary greatsword's stats.

- **Live preview:** https://gui.farm/web/ironhold-bramble
- **Raw source:** https://gui.farm/web/ironhold-bramble/design.guix
- **Download (.gui):** https://gui.farm/web/ironhold-bramble.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Ironhold — Bramble's Satchel">
  <tokens>
    <color name="bg" value="#14110B" />
    <color name="panel" value="#201B14" />
    <color name="panel2" value="#191510" />
    <color name="well" value="#0E0C08" />
    <color name="line" value="#2E2820" />
    <color name="line2" value="#3C3428" />
    <color name="ink" value="#F1E9D8" />
    <color name="muted" value="#B2A890" />
    <color name="faint" value="#9A907B" />
    <color name="ember" value="#E8622A" />
    <color name="ember-hi" value="#F5915A" />
    <color name="ember-deep" value="#C24E1F" />
    <color name="ember-tint" value="#2A170D" />
    <color name="gold" value="#D8B25A" />
    <color name="rar-common" value="#8A8172" />
    <color name="rar-uncommon" value="#7E9E63" />
    <color name="rar-rare" value="#6E8FB8" />
  </tokens>
  <fonts>
    <font family="Cinzel" source="google" weights="500 600 700" styles="normal" />
    <font family="Hanken Grotesk" source="google" weights="400 500 600 700" styles="normal" />
    <font family="Space Mono" source="google" weights="400 700" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Crest" font-family="Cinzel" font-size="19" font-weight="700" line-height="22" letter-spacing="3" />
    <text-style name="H1" font-family="Cinzel" font-size="22" font-weight="600" line-height="26" letter-spacing="0.5" />
    <text-style name="ItemLg" font-family="Cinzel" font-size="20" font-weight="600" line-height="24" letter-spacing="0.3" />
    <text-style name="Section" font-family="Cinzel" font-size="13" font-weight="600" line-height="16" letter-spacing="2.5" />
    <text-style name="ItemName" font-family="Hanken Grotesk" font-size="14" font-weight="600" line-height="17" />
    <text-style name="Label" font-family="Hanken Grotesk" font-size="10" font-weight="600" line-height="13" letter-spacing="1.4" />
    <text-style name="Body" font-family="Hanken Grotesk" font-size="13" font-weight="400" line-height="19" />
    <text-style name="Small" font-family="Hanken Grotesk" font-size="11" font-weight="500" line-height="15" />
    <text-style name="Tag" font-family="Hanken Grotesk" font-size="10" font-weight="700" line-height="12" letter-spacing="1.5" />
    <text-style name="Num" font-family="Space Mono" font-size="13" font-weight="700" line-height="17" />
    <text-style name="NumLg" font-family="Space Mono" font-size="22" font-weight="700" line-height="24" />
    <text-style name="NumSm" font-family="Space Mono" font-size="10" font-weight="700" line-height="12" />
    <text-style name="Stat" font-family="Space Mono" font-size="15" font-weight="700" line-height="18" />
  </styles>

  <col w="1440" fill="$bg" align="top-center">

    <row w="fill" h="76" p="0 40" gap="auto" align="middle-left" fill="linear-gradient(180deg, #241E16 0%, #1B160F 100%)" border="0 0 2 0 $ember-deep" role="top-navigation-bar">
      <row gap="14" align="middle-left">
        <frame w="46" h="46" radius="11" fill="linear-gradient(180deg, #2E2116 0%, #1A1109 100%)" border="1 $line2" clip="true">
          <img abs="true" x="11" y="11" w="24" h="24" src="https://api.iconify.design/lucide/crown.svg?color=%23E8622A" />
        </frame>
        <col gap="3" align="middle-left">
          <text text-style="Crest" value="IRONHOLD" color="$ink" />
          <text text-style="Label" value="ADVENTURER'S SATCHEL" color="$ember-hi" />
        </col>
      </row>
      <row gap="20" align="middle-right">
        <row gap="10" align="middle-left">
          <img src="https://api.iconify.design/lucide/coins.svg?color=%23D8B25A" w="22" h="22" />
          <col gap="1" align="middle-left">
            <text text-style="NumLg" value="3,472" color="$gold" />
            <text text-style="Label" value="GOLD" color="$muted" />
          </col>
        </row>
        <rect w="1" h="40" fill="$line" />
        <row gap="10" align="middle-left">
          <img src="https://api.iconify.design/lucide/weight.svg?color=%23B2A890" w="20" h="20" />
          <col gap="3" align="middle-left">
            <text text-style="Num" value="18.4 / 25.0 kg" color="$ink" />
            <frame w="150" h="7" radius="4" fill="$well" border="1 $line">
              <rect abs="true" x="1" y="1" w="109" h="5" radius="3" fill="linear-gradient(90deg, #C24E1F 0%, #F5915A 100%)" />
            </frame>
          </col>
        </row>
        <rect w="1" h="40" fill="$line" />
        <frame w="40" h="40" radius="10" fill="$panel" border="1 $line" clip="true">
          <img abs="true" x="10" y="10" w="20" h="20" src="https://api.iconify.design/lucide/settings.svg?color=%23B2A890" />
        </frame>
      </row>
    </row>

    <row w="1360" p="28 0 26 0" gap="20" align="top-left">

      <col w="360" fill="linear-gradient(180deg, #221C15 0%, #1A150E 100%)" radius="16" border="1 $line" p="20" gap="16" align="top-left" role="card">
        <row w="fill" gap="14" align="middle-left">
          <frame w="64" h="64" radius="14" fill="linear-gradient(180deg, #2C2016 0%, #17100A 100%)" border="1 $line2" clip="true">
            <img abs="true" x="16" y="16" w="32" h="32" src="https://api.iconify.design/lucide/venetian-mask.svg?color=%23F5915A" />
          </frame>
          <col gap="4" w="fill" align="middle-left">
            <text text-style="H1" value="Bramble Thornwyck" color="$ink" />
            <row gap="8" align="middle-left">
              <row p="3 8" radius="6" fill="$ember-tint" border="1 $ember-deep" align="middle-center">
                <text text-style="Tag" value="LVL 27" color="$ember-hi" />
              </row>
              <text text-style="Small" value="Warden Ranger" color="$muted" />
            </row>
          </col>
        </row>

        <col w="fill" gap="6" align="top-left">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="Label" value="EXPERIENCE" color="$muted" />
            <text text-style="NumSm" value="8,420 / 12,000" color="$faint" />
          </row>
          <frame w="320" h="9" radius="5" fill="$well" border="1 $line">
            <rect abs="true" x="1" y="1" w="223" h="7" radius="4" fill="linear-gradient(90deg, #C24E1F 0%, #F5915A 100%)" />
          </frame>
        </col>

        <rect w="fill" h="1" fill="$line" />

        <text text-style="Section" value="EQUIPPED" color="$ink" />
        <col w="fill" gap="10" align="top-left">
          <row w="fill" gap="10" align="middle-left">
            <row w="150" h="56" radius="9" fill="$panel2" border="1 $line" p="0 10" gap="10" align="middle-left">
              <frame w="34" h="34" radius="8" fill="$well" border="1 $rar-rare" clip="true"><img abs="true" x="7" y="7" w="20" h="20" src="https://api.iconify.design/lucide/hard-hat.svg?color=%236E8FB8" /></frame>
              <col gap="2" w="fill" align="middle-left"><text text-style="Label" value="HEAD" color="$faint" /><text text-style="ItemName" value="Verdant Hood" color="$ink" /></col>
            </row>
            <row w="150" h="56" radius="9" fill="$panel2" border="1 $line" p="0 10" gap="10" align="middle-left">
              <frame w="34" h="34" radius="8" fill="$well" border="1 $rar-rare" clip="true"><img abs="true" x="7" y="7" w="20" h="20" src="https://api.iconify.design/lucide/shirt.svg?color=%236E8FB8" /></frame>
              <col gap="2" w="fill" align="middle-left"><text text-style="Label" value="CHEST" color="$faint" /><text text-style="ItemName" value="Ranger Brigandine" color="$ink" /></col>
            </row>
          </row>
          <row w="fill" gap="10" align="middle-left">
            <row w="150" h="56" radius="9" fill="$panel2" border="1 $line" p="0 10" gap="10" align="middle-left">
              <frame w="34" h="34" radius="8" fill="$well" border="1 $rar-uncommon" clip="true"><img abs="true" x="7" y="7" w="20" h="20" src="https://api.iconify.design/lucide/hand.svg?color=%237E9E63" /></frame>
              <col gap="2" w="fill" align="middle-left"><text text-style="Label" value="HANDS" color="$faint" /><text text-style="ItemName" value="Trailworn Gloves" color="$ink" /></col>
            </row>
            <row w="150" h="56" radius="9" fill="$panel2" border="1 $line" p="0 10" gap="10" align="middle-left">
              <frame w="34" h="34" radius="8" fill="$well" border="1 $rar-rare" clip="true"><img abs="true" x="7" y="7" w="20" h="20" src="https://api.iconify.design/lucide/footprints.svg?color=%236E8FB8" /></frame>
              <col gap="2" w="fill" align="middle-left"><text text-style="Label" value="FEET" color="$faint" /><text text-style="ItemName" value="Silentstep Boots" color="$ink" /></col>
            </row>
          </row>
          <row w="fill" gap="10" align="middle-left">
            <row w="150" h="56" radius="9" fill="linear-gradient(180deg, #2C170C 0%, #1E1109 100%)" border="1 $ember" p="0 10" gap="10" align="middle-left">
              <frame w="34" h="34" radius="8" fill="$well" border="1 $ember" clip="true"><img abs="true" x="7" y="7" w="20" h="20" src="https://api.iconify.design/lucide/sword.svg?color=%23F5915A" /></frame>
              <col gap="2" w="fill" align="middle-left"><text text-style="Label" value="MAIN HAND" color="$ember-hi" /><text text-style="ItemName" value="Emberfang" color="$ink" /></col>
            </row>
            <row w="150" h="56" radius="9" fill="$panel2" border="1 $line" p="0 10" gap="10" align="middle-left">
              <frame w="34" h="34" radius="8" fill="$well" border="1 $line2" clip="true"><img abs="true" x="8" y="8" w="18" h="18" src="https://api.iconify.design/lucide/plus.svg?color=%239A907B" /></frame>
              <col gap="2" w="fill" align="middle-left"><text text-style="Label" value="OFF HAND" color="$faint" /><text text-style="ItemName" value="Empty" color="$faint" /></col>
            </row>
          </row>
          <row w="fill" gap="10" align="middle-left">
            <row w="150" h="56" radius="9" fill="$panel2" border="1 $line" p="0 10" gap="10" align="middle-left">
              <frame w="34" h="34" radius="8" fill="$well" border="1 $rar-uncommon" clip="true"><img abs="true" x="7" y="7" w="20" h="20" src="https://api.iconify.design/lucide/gem.svg?color=%237E9E63" /></frame>
              <col gap="2" w="fill" align="middle-left"><text text-style="Label" value="AMULET" color="$faint" /><text text-style="ItemName" value="Fox-Bone Charm" color="$ink" /></col>
            </row>
            <row w="150" h="56" radius="9" fill="$panel2" border="1 $line" p="0 10" gap="10" align="middle-left">
              <frame w="34" h="34" radius="8" fill="$well" border="1 $rar-rare" clip="true"><img abs="true" x="7" y="7" w="20" h="20" src="https://api.iconify.design/lucide/circle-dot.svg?color=%236E8FB8" /></frame>
              <col gap="2" w="fill" align="middle-left"><text text-style="Label" value="RING" color="$faint" /><text text-style="ItemName" value="Second Wind" color="$ink" /></col>
            </row>
          </row>
        </col>

        <rect w="fill" h="1" fill="$line" />

        <text text-style="Section" value="ATTRIBUTES" color="$ink" />
        <col w="fill" gap="12" align="top-left">
          <col w="fill" gap="6" align="top-left">
            <row w="fill" gap="auto" align="middle-left"><row gap="8" align="middle-left"><img src="https://api.iconify.design/lucide/shield-half.svg?color=%23B2A890" w="15" h="15" /><text text-style="Small" value="Armor" color="$muted" /></row><text text-style="Num" value="342" color="$ink" /></row>
            <frame w="320" h="8" radius="4" fill="$well" border="1 $line"><rect abs="true" x="1" y="1" w="218" h="6" radius="3" fill="$ember" /></frame>
          </col>
          <col w="fill" gap="6" align="top-left">
            <row w="fill" gap="auto" align="middle-left"><row gap="8" align="middle-left"><img src="https://api.iconify.design/lucide/sword.svg?color=%23B2A890" w="15" h="15" /><text text-style="Small" value="Might" color="$muted" /></row><text text-style="Num" value="84" color="$ink" /></row>
            <frame w="320" h="8" radius="4" fill="$well" border="1 $line"><rect abs="true" x="1" y="1" w="223" h="6" radius="3" fill="$ember" /></frame>
          </col>
          <col w="fill" gap="6" align="top-left">
            <row w="fill" gap="auto" align="middle-left"><row gap="8" align="middle-left"><img src="https://api.iconify.design/lucide/heart.svg?color=%23B2A890" w="15" h="15" /><text text-style="Small" value="Vitality" color="$muted" /></row><text text-style="Num" value="1,240" color="$ink" /></row>
            <frame w="320" h="8" radius="4" fill="$well" border="1 $line"><rect abs="true" x="1" y="1" w="246" h="6" radius="3" fill="$ember" /></frame>
          </col>
        </col>
      </col>

      <col w="620" gap="16" align="top-left">
        <row w="fill" gap="auto" align="middle-left">
          <row gap="10" align="middle-left">
            <img src="https://api.iconify.design/lucide/backpack.svg?color=%23F5915A" w="20" h="20" />
            <text text-style="Section" value="SATCHEL" color="$ink" />
          </row>
          <row gap="12" align="middle-right">
            <text text-style="Num" value="22 / 30 SLOTS" color="$muted" />
            <row p="7 12" radius="8" fill="$panel" border="1 $line" gap="7" align="middle-center" role="button">
              <img src="https://api.iconify.design/lucide/arrow-up-down.svg?color=%23B2A890" w="14" h="14" />
              <text text-style="Small" value="By Rarity" color="$ink" />
            </row>
          </row>
        </row>

        <row w="fill" gap="8" align="middle-left" role="segmented-control">
          <row p="7 12" radius="8" fill="linear-gradient(180deg, #F0783A 0%, #D6541F 100%)" border="1 $ember-deep" align="middle-center"><text text-style="Small" value="All 22" color="$bg" /></row>
          <row p="7 12" radius="8" fill="$panel2" border="1 $line" align="middle-center"><text text-style="Small" value="Weapons 3" color="$muted" /></row>
          <row p="7 12" radius="8" fill="$panel2" border="1 $line" align="middle-center"><text text-style="Small" value="Armor 2" color="$muted" /></row>
          <row p="7 12" radius="8" fill="$panel2" border="1 $line" align="middle-center"><text text-style="Small" value="Consumables 6" color="$muted" /></row>
          <row p="7 12" radius="8" fill="$panel2" border="1 $line" align="middle-center"><text text-style="Small" value="Materials 9" color="$muted" /></row>
          <row p="7 12" radius="8" fill="$panel2" border="1 $line" align="middle-center"><text text-style="Small" value="Quest 2" color="$muted" /></row>
        </row>

        <col w="620" fill="linear-gradient(180deg, #1C170F 0%, #16120C 100%)" radius="16" border="1 $line" p="22" gap="12" align="top-left" role="card">

          <row w="fill" gap="12" align="middle-left">
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/axe.svg?color=%23B2A890" /></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/pickaxe.svg?color=%23B2A890" /></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/sword.svg?color=%23B2A890" /></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/hard-hat.svg?color=%23B2A890" /></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/shirt.svg?color=%23B2A890" /></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-uncommon" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/flask-conical.svg?color=%237E9E63" /><row abs="true" x="47" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x12" color="$ink" /></row></frame>
          </row>

          <row w="fill" gap="12" align="middle-left">
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-rare" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/flask-conical.svg?color=%236E8FB8" /><row abs="true" x="53" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x3" color="$ink" /></row></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-uncommon" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/beaker.svg?color=%237E9E63" /><row abs="true" x="53" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x7" color="$ink" /></row></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-uncommon" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/droplet.svg?color=%237E9E63" /><row abs="true" x="53" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x4" color="$ink" /></row></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/ham.svg?color=%23B2A890" /><row abs="true" x="53" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x9" color="$ink" /></row></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/flame.svg?color=%23B2A890" /><row abs="true" x="53" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x5" color="$ink" /></row></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/layers.svg?color=%23B2A890" /><row abs="true" x="49" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x23" color="$ink" /></row></frame>
          </row>

          <row w="fill" gap="12" align="middle-left">
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/package.svg?color=%23B2A890" /><row abs="true" x="49" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x14" color="$ink" /></row></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/gem.svg?color=%23B2A890" /><row abs="true" x="49" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x31" color="$ink" /></row></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #2C170C 0%, #1A1009 100%)" border="1 $ember" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/sparkles.svg?color=%23F5915A" /><row abs="true" x="53" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $ember-deep" align="middle-center"><text text-style="NumSm" value="x2" color="$ember-hi" /></row></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-uncommon" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/bone.svg?color=%237E9E63" /><row abs="true" x="53" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x8" color="$ink" /></row></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-uncommon" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/feather.svg?color=%237E9E63" /><row abs="true" x="53" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x6" color="$ink" /></row></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/wheat.svg?color=%23B2A890" /><row abs="true" x="49" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x11" color="$ink" /></row></frame>
          </row>

          <row w="fill" gap="12" align="middle-left">
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/coins.svg?color=%23B2A890" /><row abs="true" x="49" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x18" color="$ink" /></row></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #221B0E 0%, #171208 100%)" border="1 $gold" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/scroll-text.svg?color=%23D8B25A" /></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #221B0E 0%, #171208 100%)" border="1 $gold" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/key.svg?color=%23D8B25A" /></frame>
            <frame w="86" h="86" radius="9" fill="linear-gradient(180deg, #17130D 0%, #100D08 100%)" border="1 $rar-common" clip="true"><img abs="true" x="27" y="20" w="32" h="32" src="https://api.iconify.design/lucide/hammer.svg?color=%23B2A890" /><row abs="true" x="53" y="61" h="18" radius="6" p="0 6" fill="#0B0906" border="1 $line" align="middle-center"><text text-style="NumSm" value="x2" color="$ink" /></row></frame>
            <frame w="86" h="86" radius="9" fill="$well" border="1 $line" clip="true"><img abs="true" x="34" y="34" w="18" h="18" src="https://api.iconify.design/lucide/plus.svg?color=%239A907B" /></frame>
            <frame w="86" h="86" radius="9" fill="$well" border="1 $line" clip="true"><img abs="true" x="34" y="34" w="18" h="18" src="https://api.iconify.design/lucide/plus.svg?color=%239A907B" /></frame>
          </row>

          <row w="fill" gap="12" align="middle-left">
            <frame w="86" h="86" radius="9" fill="$well" border="1 $line" clip="true"><img abs="true" x="34" y="34" w="18" h="18" src="https://api.iconify.design/lucide/plus.svg?color=%239A907B" /></frame>
            <frame w="86" h="86" radius="9" fill="$well" border="1 $line" clip="true"><img abs="true" x="34" y="34" w="18" h="18" src="https://api.iconify.design/lucide/plus.svg?color=%239A907B" /></frame>
            <frame w="86" h="86" radius="9" fill="$well" border="1 $line" clip="true"><img abs="true" x="34" y="34" w="18" h="18" src="https://api.iconify.design/lucide/plus.svg?color=%239A907B" /></frame>
            <frame w="86" h="86" radius="9" fill="$well" border="1 $line" clip="true"><img abs="true" x="34" y="34" w="18" h="18" src="https://api.iconify.design/lucide/plus.svg?color=%239A907B" /></frame>
            <frame w="86" h="86" radius="9" fill="$well" border="1 $line" clip="true"><img abs="true" x="34" y="34" w="18" h="18" src="https://api.iconify.design/lucide/plus.svg?color=%239A907B" /></frame>
            <frame w="86" h="86" radius="9" fill="$well" border="1 $line" clip="true"><img abs="true" x="34" y="34" w="18" h="18" src="https://api.iconify.design/lucide/plus.svg?color=%239A907B" /></frame>
          </row>

        </col>
      </col>

      <col w="340" fill="linear-gradient(180deg, #221C15 0%, #1A150E 100%)" radius="16" border="1 $line" p="20" gap="14" align="top-left" role="card">
        <row w="fill" gap="14" align="middle-left">
          <frame w="72" h="72" radius="13" fill="linear-gradient(180deg, #3A1D0F 0%, #1C1009 100%)" border="1 $ember" clip="true">
            <img abs="true" x="18" y="18" w="36" h="36" src="https://api.iconify.design/lucide/sword.svg?color=%23F5915A" />
          </frame>
          <col gap="6" w="fill" align="middle-left">
            <row gap="8" align="middle-left">
              <row p="3 8" radius="6" fill="$ember-tint" border="1 $ember-deep" align="middle-center"><text text-style="Tag" value="LEGENDARY" color="$ember-hi" /></row>
            </row>
            <text text-style="ItemLg" value="Emberfang Greatsword" color="$ink" />
            <row gap="7" align="middle-left">
              <text text-style="Small" value="Two-Handed Sword" color="$muted" />
              <row gap="4" align="middle-center"><img src="https://api.iconify.design/lucide/shield-check.svg?color=%237E9E63" w="13" h="13" /><text text-style="Small" value="Equipped" color="$rar-uncommon" /></row>
            </row>
          </col>
        </row>

        <text text-style="Body" value="Forged in the calderas below Ironhold, its edge stays warm to the touch and hungers for kindling." color="$muted" />

        <col w="fill" gap="6" align="top-left">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="Label" value="DURABILITY" color="$muted" />
            <text text-style="NumSm" value="142 / 180" color="$ink" />
          </row>
          <frame w="300" h="8" radius="4" fill="$well" border="1 $line"><rect abs="true" x="1" y="1" w="235" h="6" radius="3" fill="linear-gradient(90deg, #C24E1F 0%, #F5915A 100%)" /></frame>
        </col>

        <row w="fill" gap="10" align="top-left">
          <col w="145" fill="$panel2" radius="10" border="1 $line" p="11 12" gap="3" align="top-left"><text text-style="Label" value="DAMAGE" color="$muted" /><text text-style="Stat" value="84-97" color="$ember-hi" /></col>
          <col w="145" fill="$panel2" radius="10" border="1 $line" p="11 12" gap="3" align="top-left"><text text-style="Label" value="ATK SPEED" color="$muted" /><text text-style="Stat" value="0.9 /s" color="$ink" /></col>
        </row>
        <row w="fill" gap="10" align="top-left">
          <col w="145" fill="$panel2" radius="10" border="1 $line" p="11 12" gap="3" align="top-left"><text text-style="Label" value="CRIT CHANCE" color="$muted" /><text text-style="Stat" value="12%" color="$ink" /></col>
          <col w="145" fill="$panel2" radius="10" border="1 $line" p="11 12" gap="3" align="top-left"><text text-style="Label" value="REACH" color="$muted" /><text text-style="Stat" value="2.4 m" color="$ink" /></col>
        </row>
        <row w="fill" gap="10" align="top-left">
          <col w="145" fill="$panel2" radius="10" border="1 $line" p="11 12" gap="3" align="top-left"><text text-style="Label" value="WEIGHT" color="$muted" /><text text-style="Stat" value="6.5 kg" color="$ink" /></col>
          <col w="145" fill="$panel2" radius="10" border="1 $line" p="11 12" gap="3" align="top-left"><text text-style="Label" value="REQ LEVEL" color="$muted" /><text text-style="Stat" value="25" color="$ink" /></col>
        </row>

        <row w="fill" p="12 14" radius="10" fill="$well" border="1 $line" gap="auto" align="middle-left">
          <row gap="8" align="middle-left"><img src="https://api.iconify.design/lucide/coins.svg?color=%23D8B25A" w="18" h="18" /><text text-style="Label" value="VENDOR VALUE" color="$muted" /></row>
          <text text-style="Num" value="1,850 g" color="$gold" />
        </row>

        <row w="fill" p="13 0" radius="10" fill="linear-gradient(180deg, #F0783A 0%, #D6541F 100%)" border="1 $ember-deep" gap="8" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/swords.svg?color=%2314110B" w="17" h="17" />
          <text text-style="Small" value="Compare Loadout" color="$bg" />
        </row>
        <row w="fill" gap="10" align="middle-left">
          <row w="145" p="11 0" radius="10" fill="$panel2" border="1 $line" gap="7" align="middle-center" role="button"><img src="https://api.iconify.design/lucide/hammer.svg?color=%23B2A890" w="15" h="15" /><text text-style="Small" value="Repair" color="$ink" /></row>
          <row w="145" p="11 0" radius="10" fill="$panel2" border="1 $line" gap="7" align="middle-center" role="button"><img src="https://api.iconify.design/lucide/trash-2.svg?color=%23B2A890" w="15" h="15" /><text text-style="Small" value="Drop" color="$ink" /></row>
        </row>
      </col>

    </row>

    <row w="fill" h="60" p="0 40" gap="auto" align="middle-left" fill="linear-gradient(180deg, #201B14 0%, #17130D 100%)" border="1 0 0 0 $line" role="toolbar">
      <row gap="18" align="middle-left">
        <row gap="7" align="middle-left"><rect w="11" h="11" radius="3" fill="$rar-common" /><text text-style="Small" value="Common" color="$muted" /></row>
        <row gap="7" align="middle-left"><rect w="11" h="11" radius="3" fill="$rar-uncommon" /><text text-style="Small" value="Uncommon" color="$muted" /></row>
        <row gap="7" align="middle-left"><rect w="11" h="11" radius="3" fill="$rar-rare" /><text text-style="Small" value="Rare" color="$muted" /></row>
        <row gap="7" align="middle-left"><rect w="11" h="11" radius="3" fill="$ember" /><text text-style="Small" value="Legendary" color="$muted" /></row>
        <row gap="7" align="middle-left"><rect w="11" h="11" radius="3" fill="$gold" /><text text-style="Small" value="Quest" color="$muted" /></row>
      </row>
      <row gap="12" align="middle-right">
        <text text-style="Small" value="Autosaved 2m ago" color="$faint" />
        <row p="8 13" radius="8" fill="$panel2" border="1 $line" gap="7" align="middle-center" role="button"><img src="https://api.iconify.design/lucide/layers.svg?color=%23B2A890" w="15" h="15" /><text text-style="Small" value="Auto-Stack" color="$ink" /></row>
        <row p="8 13" radius="8" fill="$ember-tint" border="1 $ember-deep" gap="7" align="middle-center" role="button"><img src="https://api.iconify.design/lucide/coins.svg?color=%23F5915A" w="15" h="15" /><text text-style="Small" value="Sell Junk" color="$ember-hi" /></row>
      </row>
    </row>

  </col>
</gui>

```