---
title: "Vellum — Studio Asset Library"
platform: web
slug: vellum-studio-asset-library-mobile-ios
screens: ["gallery"]
domains: ["productivity"]
style: "minimal"
fonts: ["Georgia", "Inter"]
roles: ["top-navigation-bar", "badge", "search-bar", "button", "avatar", "sidebar", "tree", "file-uploader", "breadcrumb", "chip", "toolbar", "checkbox", "table", "pagination", "context-menu"]
score: {clean: 100, consistent: 83, accessible: 68, comprehensible: 81}
url: https://gui.farm/web/vellum-studio-asset-library-mobile-ios
raw: https://gui.farm/web/vellum-studio-asset-library-mobile-ios/design.guix
download: https://gui.farm/web/vellum-studio-asset-library-mobile-ios.gui
---

# Vellum — Studio Asset Library

A studio digital asset library for browsing, uploading and organizing creative files.

- **Live preview:** https://gui.farm/web/vellum-studio-asset-library-mobile-ios
- **Raw source:** https://gui.farm/web/vellum-studio-asset-library-mobile-ios/design.guix
- **Download (.gui):** https://gui.farm/web/vellum-studio-asset-library-mobile-ios.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Vellum — Studio Asset Library">
  <tokens>
    <color name="paper" value="#FAF9F6" />
    <color name="overlay" value="#FFFFFF" />
    <color name="ink" value="#16181D" />
    <color name="body" value="#4A5057" />
    <color name="muted" value="#6B7178" />
    <color name="rule" value="#CDC9BF" />
    <color name="line" value="#DCD8CE" />
    <color name="line-soft" value="#E2E0D9" />
    <color name="oxblood" value="#8E2F3C" />
    <color name="oxblood-tint" value="#F7EDEE" />
    <color name="sage" value="#3F7D5A" />
    <color name="sage-tint" value="#E6F0EA" />
    <color name="amber" value="#9A6A18" />
    <number name="r-card" value="10" />
    <number name="r-control" value="7" />
    <number name="r-pill" value="999" />
  </tokens>

  <styles>
    <text-style name="Wordmark" font-family="Georgia" font-size="19" font-weight="700" line-height="24" />
    <text-style name="Title" font-family="Georgia" font-size="26" font-weight="700" line-height="32" />
    <text-style name="Section" font-family="Inter" font-size="13" font-weight="600" line-height="19" />
    <text-style name="Body" font-family="Inter" font-size="13" font-weight="400" line-height="19" />
    <text-style name="Label" font-family="Inter" font-size="12" font-weight="500" line-height="17" />
    <text-style name="Tiny" font-family="Inter" font-size="11" font-weight="400" line-height="15" />
    <text-style name="Micro" font-family="Inter" font-size="10" font-weight="700" line-height="13" letter-spacing="0.8" />
  </styles>

  <fonts>
    <font family="Inter" source="google" weights="400 500 600 700" styles="normal" />
    <font family="Georgia" source="system" weights="400 700" styles="normal" />
  </fonts>

  <col w="1440" h="1024" fill="$paper">

    <!-- ================= TOP BAR ================= -->
    <row role="top-navigation-bar" w="1440" h="56" border="0 0 1 0 $rule" p="0 20" gap="18" align="middle-left">
      <row w="222" gap="9" align="middle-left">
        <row w="26" h="26" radius="6" fill="$oxblood" align="middle-center">
          <img src="https://api.iconify.design/lucide/library.svg?color=%23FFFFFF" w="15" h="15" />
        </row>
        <text text-style="Wordmark" value="Vellum" fill="$ink" />
        <row role="badge" h="18" radius="4" fill="none" border="1 $line" p="0 6" align="middle-center">
          <text text-style="Micro" value="STUDIO" fill="$muted" />
        </row>
      </row>

      <row role="search-bar" w="430" h="34" fill="none" radius="$r-control" border="1 $line" p="0 12" gap="9" align="middle-left">
        <img src="https://api.iconify.design/lucide/search.svg?color=%236B7178" w="16" h="16" />
        <text w="fill" text-style="Body" value="Search 12,480 assets" fill="$muted" />
        <text text-style="Tiny" value="⌘K" fill="$muted" />
      </row>

      <row w="fill" gap="10" align="middle-right">
        <row role="button" h="32" radius="$r-control" fill="none" border="1 $line" p="0 12" gap="7" align="middle-center">
          <img src="https://api.iconify.design/lucide/share-2.svg?color=%234A5057" w="15" h="15" />
          <text text-style="Label" value="Share" fill="$body" />
        </row>
        <row role="button" h="32" radius="$r-control" fill="$ink" p="0 13" gap="7" align="middle-center">
          <img src="https://api.iconify.design/lucide/upload.svg?color=%23FFFFFF" w="15" h="15" />
          <text text-style="Label" font-weight="600" value="Upload" fill="$overlay" />
        </row>
        <line h="22" direction="vertical" fill="$line" />
        <row role="avatar" w="30" h="30" radius="15" fill="$oxblood-tint" border="1 $line" align="middle-center">
          <text font-family="Inter" font-size="11" font-weight="600" line-height="15" value="JJ" fill="$oxblood" />
        </row>
      </row>
    </row>

    <!-- ================= BODY (frame so the context menu can float) ================= -->
    <frame w="1440" h="968" clip>
      <row x="0" y="0" w="1440" h="968">

        <!-- SIDEBAR + TREE -->
        <col role="sidebar" w="252" h="968" border="0 1 0 0 $rule" p="16 12" gap="18">

          <col w="228" gap="2">
            <row w="228" h="32" p="0 10" gap="9" radius="$r-control" align="middle-left">
              <img src="https://api.iconify.design/lucide/clock.svg?color=%236B7178" w="16" h="16" />
              <text text-style="Body" value="Recent" fill="$body" />
            </row>
            <row w="228" h="32" p="0 10" gap="9" radius="$r-control" align="middle-left">
              <img src="https://api.iconify.design/lucide/star.svg?color=%236B7178" w="16" h="16" />
              <text text-style="Body" value="Starred" fill="$body" />
            </row>
            <row w="228" h="32" p="0 10" gap="9" radius="$r-control" align="middle-left">
              <img src="https://api.iconify.design/lucide/trash-2.svg?color=%236B7178" w="16" h="16" />
              <text text-style="Body" value="Trash" fill="$body" />
            </row>
          </col>

          <line w="228" fill="$line-soft" />

          <!-- tree: reach 2 — container tagged, the row/child grammar is implied -->
          <col w="228" gap="3">
            <row w="228" p="0 10 6 10" gap="auto" align="middle-left">
              <text text-style="Micro" value="LIBRARY" fill="$muted" />
              <img src="https://api.iconify.design/lucide/plus.svg?color=%236B7178" w="13" h="13" />
            </row>

            <col role="tree" w="228" gap="1">
              <row w="228" h="30" p="0 10" gap="7" radius="$r-control" align="middle-left">
                <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%236B7178" w="14" h="14" />
                <img src="https://api.iconify.design/lucide/folder-open.svg?color=%239A6A18" w="16" h="16" />
                <text w="fill" text-style="Body" value="Campaigns" fill="$ink" />
                <text text-style="Tiny" value="248" fill="$muted" />
              </row>

              <row w="228" h="30" p="0 10 0 31" gap="7" radius="$r-control" align="middle-left">
                <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%236B7178" w="14" h="14" />
                <img src="https://api.iconify.design/lucide/folder-open.svg?color=%239A6A18" w="16" h="16" />
                <text w="fill" text-style="Body" value="Spring 2026" fill="$ink" />
              </row>

              <row w="228" h="30" p="0 10 0 59" gap="7" radius="$r-control" fill="$oxblood-tint" align="middle-left">
                <img src="https://api.iconify.design/lucide/folder.svg?color=%238E2F3C" w="16" h="16" />
                <text w="fill" text-style="Body" font-weight="600" value="Photography" fill="$oxblood" />
                <text text-style="Tiny" value="64" fill="$oxblood" />
              </row>

              <row w="228" h="30" p="0 10 0 59" gap="7" radius="$r-control" align="middle-left">
                <img src="https://api.iconify.design/lucide/folder.svg?color=%236B7178" w="16" h="16" />
                <text w="fill" text-style="Body" value="Motion" fill="$body" />
              </row>

              <row w="228" h="30" p="0 10 0 59" gap="7" radius="$r-control" align="middle-left">
                <img src="https://api.iconify.design/lucide/folder.svg?color=%236B7178" w="16" h="16" />
                <text w="fill" text-style="Body" value="Copy decks" fill="$body" />
              </row>

              <row w="228" h="30" p="0 10 0 31" gap="7" radius="$r-control" align="middle-left">
                <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%236B7178" w="14" h="14" />
                <img src="https://api.iconify.design/lucide/folder.svg?color=%236B7178" w="16" h="16" />
                <text w="fill" text-style="Body" value="Winter 2025" fill="$body" />
              </row>

              <row w="228" h="30" p="0 10" gap="7" radius="$r-control" align="middle-left">
                <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%236B7178" w="14" h="14" />
                <img src="https://api.iconify.design/lucide/folder.svg?color=%236B7178" w="16" h="16" />
                <text w="fill" text-style="Body" value="Brand system" fill="$body" />
                <text text-style="Tiny" value="91" fill="$muted" />
              </row>

              <row w="228" h="30" p="0 10" gap="7" radius="$r-control" align="middle-left">
                <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%236B7178" w="14" h="14" />
                <img src="https://api.iconify.design/lucide/folder.svg?color=%236B7178" w="16" h="16" />
                <text w="fill" text-style="Body" value="Client deliverables" fill="$body" />
                <text text-style="Tiny" value="412" fill="$muted" />
              </row>
            </col>
          </col>

          <!-- FILE UPLOADER -->
          <col w="228" h="fill" gap="auto">
            <col role="file-uploader" w="228" radius="$r-card" fill="none" border="1 $line dashed" p="16" gap="7" align="middle-center">
              <row w="34" h="34" radius="17" fill="none" border="1 $line" align="middle-center">
                <img src="https://api.iconify.design/lucide/cloud-upload.svg?color=%238E2F3C" w="18" h="18" />
              </row>
              <text text-style="Label" font-weight="600" value="Drop files here" fill="$ink" align="center" />
              <text w="196" text-style="Tiny" value="or browse, up to 2 GB per file" fill="$muted" align="center" />
            </col>
          </col>
        </col>

        <!-- MAIN COLUMN -->
        <col w="906" h="968" border="0 1 0 0 $rule" p="20 24" gap="16">

          <row role="breadcrumb" w="858" gap="7" align="middle-left">
            <text text-style="Label" value="Library" fill="$muted" />
            <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%236B7178" w="13" h="13" />
            <text text-style="Label" value="Campaigns" fill="$muted" />
            <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%236B7178" w="13" h="13" />
            <text text-style="Label" value="Spring 2026" fill="$muted" />
            <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%236B7178" w="13" h="13" />
            <text text-style="Label" font-weight="600" value="Photography" fill="$ink" />
          </row>

          <row w="858" gap="14" align="middle-left">
            <col w="fill" gap="3">
              <text text-style="Title" value="Photography" fill="$ink" />
              <text text-style="Tiny" value="64 assets · 3.2 GB · edited by Priya 14 minutes ago" fill="$muted" />
            </col>
            <row role="chip" h="28" radius="$r-pill" fill="$sage-tint" p="0 10" gap="6" align="middle-center">
              <ellipse w="7" h="7" fill="$sage" />
              <text text-style="Tiny" value="Synced" fill="$sage" />
            </row>
          </row>

          <!-- toolbar: reach 1 — interior controls carry their own roles -->
          <row role="toolbar" w="858" h="42" fill="none" radius="$r-control" border="1 $line" p="0 10" gap="9" align="middle-left">
            <row role="checkbox" w="17" h="17" radius="4" fill="$ink" align="middle-center">
              <img src="https://api.iconify.design/lucide/minus.svg?color=%23FFFFFF" w="12" h="12" />
            </row>
            <text text-style="Label" font-weight="600" value="3 selected" fill="$ink" />
            <line h="20" direction="vertical" fill="$line" />
            <row role="button" h="28" radius="$r-control" p="0 9" gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/download.svg?color=%234A5057" w="14" h="14" />
              <text text-style="Label" value="Download" fill="$body" />
            </row>
            <row role="button" h="28" radius="$r-control" p="0 9" gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/folder-input.svg?color=%234A5057" w="14" h="14" />
              <text text-style="Label" value="Move" fill="$body" />
            </row>
            <row role="button" h="28" radius="$r-control" p="0 9" gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/tag.svg?color=%234A5057" w="14" h="14" />
              <text text-style="Label" value="Tag" fill="$body" />
            </row>
            <row role="button" w="fill" h="28" gap="6" align="middle-right">
              <img src="https://api.iconify.design/lucide/trash-2.svg?color=%238E2F3C" w="14" h="14" />
              <text text-style="Label" value="Delete" fill="$oxblood" />
            </row>
          </row>

          <!-- table: reach 2 -->
          <col role="table" w="858" gap="0">
            <row w="858" h="30" border="0 0 1 0 $line" p="0 10" gap="12" align="middle-left">
              <rect w="17" h="17" radius="4" fill="none" border="1 $line" />
              <text w="fill" text-style="Micro" value="NAME" fill="$muted" />
              <text w="82" text-style="Micro" value="KIND" fill="$muted" />
              <text w="74" text-style="Micro" value="SIZE" fill="$muted" align="right" />
              <text w="104" text-style="Micro" value="MODIFIED" fill="$muted" align="right" />
              <text w="86" text-style="Micro" value="BY" fill="$muted" align="right" />
            </row>

            <row w="858" h="46" border="0 0 1 0 $line-soft" fill="$oxblood-tint" p="0 10" gap="12" align="middle-left">
              <row role="checkbox" w="17" h="17" radius="4" fill="$ink" align="middle-center">
                <img src="https://api.iconify.design/lucide/check.svg?color=%23FFFFFF" w="12" h="12" />
              </row>
              <img src="https://api.iconify.design/lucide/file-image.svg?color=%239A6A18" w="17" h="17" />
              <text w="fill" text-style="Body" font-weight="500" value="hero-campaign-01.tiff" fill="$ink" />
              <text w="82" text-style="Tiny" value="TIFF" fill="$body" />
              <text w="74" text-style="Tiny" value="248 MB" fill="$body" align="right" />
              <text w="104" text-style="Tiny" value="14 min ago" fill="$body" align="right" />
              <text w="86" text-style="Tiny" value="Priya N." fill="$body" align="right" />
            </row>

            <row w="858" h="46" border="0 0 1 0 $line-soft" fill="$oxblood-tint" p="0 10" gap="12" align="middle-left">
              <row role="checkbox" w="17" h="17" radius="4" fill="$ink" align="middle-center">
                <img src="https://api.iconify.design/lucide/check.svg?color=%23FFFFFF" w="12" h="12" />
              </row>
              <img src="https://api.iconify.design/lucide/file-image.svg?color=%239A6A18" w="17" h="17" />
              <text w="fill" text-style="Body" font-weight="500" value="hero-campaign-02.tiff" fill="$ink" />
              <text w="82" text-style="Tiny" value="TIFF" fill="$body" />
              <text w="74" text-style="Tiny" value="241 MB" fill="$body" align="right" />
              <text w="104" text-style="Tiny" value="14 min ago" fill="$body" align="right" />
              <text w="86" text-style="Tiny" value="Priya N." fill="$body" align="right" />
            </row>

            <row w="858" h="46" border="0 0 1 0 $line-soft" fill="$oxblood-tint" p="0 10" gap="12" align="middle-left">
              <row role="checkbox" w="17" h="17" radius="4" fill="$ink" align="middle-center">
                <img src="https://api.iconify.design/lucide/check.svg?color=%23FFFFFF" w="12" h="12" />
              </row>
              <img src="https://api.iconify.design/lucide/folder.svg?color=%236B7178" w="17" h="17" />
              <text w="fill" text-style="Body" font-weight="500" value="Retouched selects" fill="$ink" />
              <text w="82" text-style="Tiny" value="18 items" fill="$body" />
              <text w="74" text-style="Tiny" value="1.1 GB" fill="$body" align="right" />
              <text w="104" text-style="Tiny" value="Yesterday" fill="$body" align="right" />
              <text w="86" text-style="Tiny" value="Marc L." fill="$body" align="right" />
            </row>

            <row w="858" h="46" border="0 0 1 0 $line-soft" p="0 10" gap="12" align="middle-left">
              <rect w="17" h="17" radius="4" fill="none" border="1 $line" />
              <img src="https://api.iconify.design/lucide/file-video.svg?color=%238E2F3C" w="17" h="17" />
              <text w="fill" text-style="Body" value="behind-the-scenes.mov" fill="$ink" />
              <text w="82" text-style="Tiny" value="MOV" fill="$body" />
              <text w="74" text-style="Tiny" value="892 MB" fill="$body" align="right" />
              <text w="104" text-style="Tiny" value="2 days ago" fill="$body" align="right" />
              <text w="86" text-style="Tiny" value="Marc L." fill="$body" align="right" />
            </row>

            <row w="858" h="46" border="0 0 1 0 $line-soft" p="0 10" gap="12" align="middle-left">
              <rect w="17" h="17" radius="4" fill="none" border="1 $line" />
              <img src="https://api.iconify.design/lucide/file-image.svg?color=%239A6A18" w="17" h="17" />
              <text w="fill" text-style="Body" value="lookbook-spread-04.psd" fill="$ink" />
              <text w="82" text-style="Tiny" value="PSD" fill="$body" />
              <text w="74" text-style="Tiny" value="410 MB" fill="$body" align="right" />
              <text w="104" text-style="Tiny" value="3 days ago" fill="$body" align="right" />
              <text w="86" text-style="Tiny" value="Priya N." fill="$body" align="right" />
            </row>

            <row w="858" h="46" border="0 0 1 0 $line-soft" p="0 10" gap="12" align="middle-left">
              <rect w="17" h="17" radius="4" fill="none" border="1 $line" />
              <img src="https://api.iconify.design/lucide/file-text.svg?color=%236B7178" w="17" h="17" />
              <text w="fill" text-style="Body" value="shot-list-final.pdf" fill="$ink" />
              <text w="82" text-style="Tiny" value="PDF" fill="$body" />
              <text w="74" text-style="Tiny" value="2.4 MB" fill="$body" align="right" />
              <text w="104" text-style="Tiny" value="5 days ago" fill="$body" align="right" />
              <text w="86" text-style="Tiny" value="Dana R." fill="$body" align="right" />
            </row>

            <row w="858" h="46" p="0 10" gap="12" align="middle-left">
              <rect w="17" h="17" radius="4" fill="none" border="1 $line" />
              <img src="https://api.iconify.design/lucide/file-image.svg?color=%239A6A18" w="17" h="17" />
              <text w="fill" text-style="Body" value="location-scout-raw.zip" fill="$ink" />
              <text w="82" text-style="Tiny" value="ZIP" fill="$body" />
              <text w="74" text-style="Tiny" value="1.8 GB" fill="$body" align="right" />
              <text w="104" text-style="Tiny" value="1 week ago" fill="$body" align="right" />
              <text w="86" text-style="Tiny" value="Dana R." fill="$body" align="right" />
            </row>
          </col>

          <!-- pagination -->
          <row w="858" gap="auto" align="middle-left">
            <text text-style="Tiny" value="Showing 1–7 of 64 assets" fill="$muted" />
            <row role="pagination" gap="4" align="middle-center">
              <row w="30" h="30" radius="$r-control" border="1 $line" align="middle-center">
                <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%236B7178" w="14" h="14" />
              </row>
              <row w="30" h="30" radius="$r-control" fill="$ink" align="middle-center">
                <text text-style="Label" font-weight="600" value="1" fill="$overlay" />
              </row>
              <row w="30" h="30" radius="$r-control" align="middle-center">
                <text text-style="Label" value="2" fill="$body" />
              </row>
              <row w="30" h="30" radius="$r-control" align="middle-center">
                <text text-style="Label" value="3" fill="$body" />
              </row>
              <row w="30" h="30" align="middle-center">
                <text text-style="Label" value="…" fill="$muted" />
              </row>
              <row w="30" h="30" radius="$r-control" align="middle-center">
                <text text-style="Label" value="9" fill="$body" />
              </row>
              <row w="30" h="30" radius="$r-control" border="1 $line" align="middle-center">
                <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%234A5057" w="14" h="14" />
              </row>
            </row>
          </row>
        </col>

        <!-- INSPECTOR -->
        <col w="282" h="968" p="20 16" gap="14">
          <text text-style="Micro" value="SELECTION" fill="$muted" />

          <frame w="250" h="164" radius="$r-card" clip>
            <img x="0" y="0" w="250" h="164" fit="cover"
                 src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&amp;fit=crop&amp;w=500&amp;h=328&amp;q=85" />
            <row role="badge" x="10" y="10" h="20" radius="4" fill="#16181DCC" p="0 7" align="middle-center">
              <text text-style="Micro" value="TIFF · 6000×4000" fill="$overlay" />
            </row>
          </frame>

          <col w="250" gap="3">
            <text text-style="Section" value="hero-campaign-01.tiff" fill="$ink" />
            <text text-style="Tiny" value="Selected with 2 other assets" fill="$muted" />
          </col>

          <line w="250" fill="$line-soft" />

          <col w="250" gap="9">
            <row w="250" gap="auto" align="middle-left">
              <text text-style="Tiny" value="Total size" fill="$muted" />
              <text text-style="Label" value="1.59 GB" fill="$ink" />
            </row>
            <row w="250" gap="auto" align="middle-left">
              <text text-style="Tiny" value="Color profile" fill="$muted" />
              <text text-style="Label" value="Adobe RGB" fill="$ink" />
            </row>
            <row w="250" gap="auto" align="middle-left">
              <text text-style="Tiny" value="Licence" fill="$muted" />
              <text text-style="Label" value="Commercial" fill="$ink" />
            </row>
            <row w="250" gap="auto" align="middle-left">
              <text text-style="Tiny" value="Expires" fill="$muted" />
              <text text-style="Label" value="Mar 2027" fill="$amber" />
            </row>
          </col>

          <line w="250" fill="$line-soft" />

          <col w="250" gap="8">
            <text text-style="Micro" value="TAGS" fill="$muted" />
            <row w="250" gap="6" wrap>
              <row role="chip" h="24" radius="$r-pill" fill="none" border="1 $line" p="0 9" align="middle-center">
                <text text-style="Tiny" value="editorial" fill="$body" />
              </row>
              <row role="chip" h="24" radius="$r-pill" fill="none" border="1 $line" p="0 9" align="middle-center">
                <text text-style="Tiny" value="outdoor" fill="$body" />
              </row>
              <row role="chip" h="24" radius="$r-pill" fill="none" border="1 $line" p="0 9" align="middle-center">
                <text text-style="Tiny" value="golden-hour" fill="$body" />
              </row>
              <row role="chip" h="24" radius="$r-pill" fill="none" border="1 $line" p="0 9" align="middle-center">
                <text text-style="Tiny" value="approved" fill="$body" />
              </row>
            </row>
          </col>

          <col w="250" h="fill" gap="auto">
            <col w="250" gap="8">
              <row role="button" w="250" h="36" radius="$r-control" fill="$ink" gap="7" align="middle-center">
                <img src="https://api.iconify.design/lucide/download.svg?color=%23FFFFFF" w="15" h="15" />
                <text text-style="Label" font-weight="600" value="Download selection" fill="$overlay" />
              </row>
              <row role="button" w="250" h="36" radius="$r-control" fill="none" border="1 $line" gap="7" align="middle-center">
                <img src="https://api.iconify.design/lucide/link.svg?color=%234A5057" w="15" h="15" />
                <text text-style="Label" value="Copy share link" fill="$body" />
              </row>
            </col>
          </col>
        </col>
      </row>

      <!-- CONTEXT MENU, floating over the table -->
      <col role="context-menu" x="612" y="352" w="212" radius="$r-card" fill="$overlay" border="1 $line" p="6" gap="1">
        <row w="200" h="32" p="0 10" gap="9" radius="6" align="middle-left">
          <img src="https://api.iconify.design/lucide/eye.svg?color=%234A5057" w="15" h="15" />
          <text text-style="Label" value="Preview" fill="$ink" />
        </row>
        <row w="200" h="32" p="0 10" gap="9" radius="6" fill="$paper" align="middle-left">
          <img src="https://api.iconify.design/lucide/pencil.svg?color=%234A5057" w="15" h="15" />
          <text w="fill" text-style="Label" value="Rename" fill="$ink" />
          <text text-style="Tiny" value="F2" fill="$muted" />
        </row>
        <row w="200" h="32" p="0 10" gap="9" radius="6" align="middle-left">
          <img src="https://api.iconify.design/lucide/copy.svg?color=%234A5057" w="15" h="15" />
          <text w="fill" text-style="Label" value="Duplicate" fill="$ink" />
          <text text-style="Tiny" value="⌘D" fill="$muted" />
        </row>
        <row w="200" h="32" p="0 10" gap="9" radius="6" align="middle-left">
          <img src="https://api.iconify.design/lucide/history.svg?color=%234A5057" w="15" h="15" />
          <text w="fill" text-style="Label" value="Version history" fill="$ink" />
          <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%236B7178" w="13" h="13" />
        </row>
        <line w="200" fill="$line-soft" />
        <row w="200" h="32" p="0 10" gap="9" radius="6" align="middle-left">
          <img src="https://api.iconify.design/lucide/trash-2.svg?color=%238E2F3C" w="15" h="15" />
          <text text-style="Label" value="Move to trash" fill="$oxblood" />
        </row>
      </col>

    </frame>
  </col>
</gui>

```