---
title: "Ferrite Studio EQ"
platform: ios
slug: ferrite-studio-eq
screens: []
domains: ["music"]
style: "neumorphic"
fonts: ["SF Pro Display", "JetBrains Mono"]
roles: ["top-navigation-bar", "badge", "card", "slider", "chip", "toolbar", "button"]
score: {clean: 92, consistent: 83, accessible: 80, comprehensible: 55}
url: https://gui.farm/ios/ferrite-studio-eq
raw: https://gui.farm/ios/ferrite-studio-eq/design.guix
download: https://gui.farm/ios/ferrite-studio-eq.gui
---

# Ferrite Studio EQ

A neumorphic iOS parametric equalizer with an 8-band vertical fader bank, frequency-response curve, and preamp control for a boutique hi-fi listening app.

- **Live preview:** https://gui.farm/ios/ferrite-studio-eq
- **Raw source:** https://gui.farm/ios/ferrite-studio-eq/design.guix
- **Download (.gui):** https://gui.farm/ios/ferrite-studio-eq.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Ferrite Studio EQ">
  <mode name="theme" values="light dark" default="dark" />
  <tokens>
    <color name="bg" value="#201B26" />
    <color name="surf" value="#29232E" />
    <color name="shd" value="#17121B" />
    <color name="well" value="#1E1823" />
    <color name="ink" value="#F4EFF6" />
    <color name="sub" value="#C3B8CC" />
    <color name="faint" value="#A79CB4" />
    <color name="line" value="#3A3242" />
    <color name="accent" value="#E8A79C" />
    <color name="accent2" value="#EFB9AF" />
    <color name="acc-ink" value="#2A1B1C" />
    <number name="r-pill" value="999" />
    <number name="r-card" value="22" />
    <number name="r-tile" value="14" />
  </tokens>
  <styles>
    <text-style
      name="Eyebrow"
      font-family="SF Pro Display"
      font-size="11"
      font-weight="600"
      line-height="14"
      letter-spacing="1.5"
    />
    <text-style
      name="NavTitle"
      font-family="SF Pro Display"
      font-size="17"
      font-weight="600"
      line-height="20"
    />
    <text-style
      name="H1"
      font-family="SF Pro Display"
      font-size="26"
      font-weight="700"
      line-height="30"
      letter-spacing="-0.5"
    />
    <text-style name="H2" font-family="SF Pro Display" font-size="15" font-weight="700" line-height="19" />
    <text-style name="Body" font-family="SF Pro Display" font-size="13" font-weight="500" line-height="18" />
    <text-style name="Cap" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Tiny"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="0.6"
    />
    <text-style name="Mono" font-family="JetBrains Mono" font-size="13" font-weight="600" line-height="16" />
    <text-style name="MonoBig" font-family="JetBrains Mono" font-size="15" font-weight="600" line-height="18" />
    <text-style
      name="MonoSm"
      font-family="JetBrains Mono"
      font-size="10"
      font-weight="600"
      line-height="13"
      letter-spacing="0.2"
    />
  </styles>
  <fonts>
    <font family="SF Pro Display" source="system" weights="300 400 500 600 700" styles="normal" />
    <font family="JetBrains Mono" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="393" fill="$bg" pb="0" gap="16" align="top-center">
    <!-- Status bar (untagged device chrome) -->
    <row w="fill" p="15 22 0" align="middle-center" gap="auto">
      <text value="9:41" font-family="SF Pro Display" font-size="15" font-weight="600" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23F4EFF6" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F4EFF6" w="17" h="17" />
        <row w="24" h="12" radius="3" border="1 $faint" p="2" align="middle-left">
          <rect w="15" h="6" radius="1" fill="$ink" />
        </row>
      </row>
    </row>
    <!-- Top navigation -->
    <row role="top-navigation-bar" w="fill" p="4 18 0" align="middle-center" gap="auto">
      <frame w="40" h="40" radius="$r-pill" align="middle-center">
        <appearance>
          <fill type="color" value="$surf" />
          <effect type="drop-shadow" x="4" y="4" radius="8" spread="0" color="$shd" />
          <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="#3A324259" />
        </appearance>
        <img
          abs="true"
          x="9"
          y="9"
          src="https://api.iconify.design/lucide/chevron-left.svg?color=%23F4EFF6"
          w="22"
          h="22"
        />
      </frame>
      <col gap="2" align="middle-center">
        <text
          text-style="Eyebrow"
          text-case="uppercase"
          value="Ferrite Audio"
          color="$accent2"
          align="center"
        />
        <text text-style="NavTitle" value="Studio EQ" color="$ink" align="center" />
      </col>
      <frame w="40" h="40" radius="$r-pill" align="middle-center">
        <appearance>
          <fill type="color" value="$surf" />
          <effect type="drop-shadow" x="4" y="4" radius="8" spread="0" color="$shd" />
          <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="#3A324259" />
        </appearance>
        <img
          abs="true"
          x="10"
          y="10"
          src="https://api.iconify.design/lucide/rotate-ccw.svg?color=%23C3B8CC"
          w="20"
          h="20"
        />
      </frame>
    </row>
    <!-- Header -->
    <col w="353">
      <row w="fill" align="middle-left" gap="auto">
        <col gap="3" align="middle-left">
          <text text-style="Eyebrow" text-case="uppercase" value="Active Preset" color="$faint" />
          <text text-style="H1" value="Bass Boost" color="$ink" />
        </col>
        <col role="badge" radius="$r-tile" p="9 12" gap="3" align="middle-right">
          <appearance>
            <fill type="color" value="$surf" />
            <effect type="inner-shadow" x="2" y="2" radius="4" spread="0" color="$shd" />
            <effect type="inner-shadow" x="-1" y="-1" radius="3" spread="0" color="#3A324555" />
          </appearance>
          <text text-style="MonoSm" value="48 kHz / 24-bit" color="$sub" align="right" />
          <text text-style="MonoSm" value="+3.2 dB HEADROOM" color="$accent2" align="right" />
        </col>
      </row>
    </col>
    <!-- Response curve card -->
    <col role="card" w="353" radius="$r-card" p="16" gap="13">
      <appearance>
        <fill type="color" value="$surf" />
        <effect type="drop-shadow" x="9" y="9" radius="18" spread="0" color="$shd" />
        <effect type="drop-shadow" x="-7" y="-7" radius="15" spread="0" color="#3A324540" />
      </appearance>
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="H2" value="Frequency Response" color="$ink" />
        <row gap="7" align="middle-center">
          <rect w="7" h="7" radius="$r-pill" fill="$accent" />
          <text text-style="Cap" value="20 Hz to 20 kHz" color="$sub" />
        </row>
      </row>
      <frame w="321" h="90" radius="$r-tile">
        <appearance>
          <fill type="color" value="$well" />
          <effect type="inner-shadow" x="0" y="2" radius="5" spread="0" color="$shd" />
        </appearance>
        <img
          abs="true"
          x="4"
          y="4"
          src="https://gui.farm/tools/charts/line-chart.svg?data=0:18,1:16.5,2:14,3:12,4:11,5:12.5,6:14.5,7:15.5&amp;line=%23E8A79C&amp;surface=dark&amp;curve=smooth&amp;area=on&amp;points=show&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=650&amp;height=180"
          w="313"
          h="82"
          fit="cover"
          radius="12"
          clip="true"
        />
      </frame>
    </col>
    <!-- Preamp card -->
    <col role="card" w="353" radius="$r-card" p="16 16 18" gap="12">
      <appearance>
        <fill type="color" value="$surf" />
        <effect type="drop-shadow" x="9" y="9" radius="18" spread="0" color="$shd" />
        <effect type="drop-shadow" x="-7" y="-7" radius="15" spread="0" color="#3A324540" />
      </appearance>
      <row w="fill" align="middle-left" gap="auto">
        <row gap="8" align="middle-center">
          <img src="https://api.iconify.design/lucide/audio-lines.svg?color=%23EFB9AF" w="17" h="17" />
          <text text-style="H2" value="Preamp" color="$ink" />
        </row>
        <text text-style="MonoBig" value="-3.0 dB" color="$accent2" />
      </row>
      <frame role="slider" w="321" h="24">
        <frame abs="true" x="0" y="9" w="321" h="6" radius="3">
          <appearance>
            <fill type="color" value="$well" />
            <effect type="inner-shadow" x="0" y="1" radius="2" spread="0" color="$shd" />
          </appearance>
        </frame>
        <rect abs="true" x="0" y="9" w="140" h="6" radius="3" fill="$accent" />
        <frame abs="true" x="129" y="0" w="22" h="24" radius="$r-pill">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #3A2F38 0%, #241E2B 100%)" />
            <effect type="drop-shadow" x="0" y="2" radius="5" spread="0" color="#0F0B14A6" />
            <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#4A4152" />
          </appearance>
          <ellipse abs="true" x="7" y="7" w="8" h="8" fill="$accent" />
        </frame>
      </frame>
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="MonoSm" value="-24" color="$faint" />
        <text text-style="MonoSm" value="0" color="$faint" />
        <text text-style="MonoSm" value="+6" color="$faint" />
      </row>
    </col>
    <!-- EQ faders card -->
    <col role="card" w="353" radius="$r-card" p="16 16 18" gap="15">
      <appearance>
        <fill type="color" value="$surf" />
        <effect type="drop-shadow" x="9" y="9" radius="18" spread="0" color="$shd" />
        <effect type="drop-shadow" x="-7" y="-7" radius="15" spread="0" color="#3A324540" />
      </appearance>
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="H2" value="8-Band Graphic EQ" color="$ink" />
        <text text-style="Cap" value="dB" color="$faint" />
      </row>
      <row w="321" align="top-left" gap="6">
        <!-- rail -->
        <col w="24" gap="9" align="middle-center">
          <text text-style="Mono" value=" " color="$faint" align="center" />
          <frame w="24" h="192">
            <text abs="true" x="0" y="-2" w="24" text-style="MonoSm" value="+12" color="$faint" align="right" />
            <text abs="true" x="0" y="90" w="24" text-style="MonoSm" value="0" color="$sub" align="right" />
            <text
              abs="true"
              x="0"
              y="181"
              w="24"
              text-style="MonoSm"
              value="-12"
              color="$faint"
              align="right"
            />
          </frame>
          <text text-style="MonoSm" value=" " color="$faint" align="center" />
        </col>
        <col w="30" gap="9" align="middle-center">
          <text text-style="Mono" value="+6.0" color="$accent2" align="center" />
          <frame role="slider" w="30" h="192">
            <frame abs="true" x="12" y="0" w="6" h="192" radius="3">
              <appearance>
                <fill type="color" value="$well" />
                <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="$shd" />
                <effect type="inner-shadow" x="0" y="-1" radius="1" spread="0" color="#3A324255" />
              </appearance>
            </frame>
            <rect abs="true" x="3" y="95" w="24" h="2" radius="1" fill="$line" />
            <rect abs="true" x="12" y="48" w="6" h="48" radius="3" fill="$accent" />
            <frame abs="true" x="1" y="39" w="28" h="18" radius="6">
              <appearance>
                <fill type="linear-gradient" value="linear-gradient(180deg, #342C3B 0%, #241E2B 100%)" />
                <effect type="drop-shadow" x="0" y="3" radius="6" spread="0" color="#0F0B14A6" />
                <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#4A4152" />
              </appearance>
              <rect abs="true" x="6" y="8" w="16" h="2" radius="1" fill="$accent" />
            </frame>
          </frame>
          <text text-style="MonoSm" value="32" color="$sub" align="center" />
        </col>
        <col w="30" gap="9" align="middle-center">
          <text text-style="Mono" value="+4.5" color="$accent2" align="center" />
          <frame role="slider" w="30" h="192">
            <frame abs="true" x="12" y="0" w="6" h="192" radius="3">
              <appearance>
                <fill type="color" value="$well" />
                <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="$shd" />
                <effect type="inner-shadow" x="0" y="-1" radius="1" spread="0" color="#3A324255" />
              </appearance>
            </frame>
            <rect abs="true" x="3" y="95" w="24" h="2" radius="1" fill="$line" />
            <rect abs="true" x="12" y="60" w="6" h="36" radius="3" fill="$accent" />
            <frame abs="true" x="1" y="51" w="28" h="18" radius="6">
              <appearance>
                <fill type="linear-gradient" value="linear-gradient(180deg, #342C3B 0%, #241E2B 100%)" />
                <effect type="drop-shadow" x="0" y="3" radius="6" spread="0" color="#0F0B14A6" />
                <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#4A4152" />
              </appearance>
              <rect abs="true" x="6" y="8" w="16" h="2" radius="1" fill="$accent" />
            </frame>
          </frame>
          <text text-style="MonoSm" value="80" color="$sub" align="center" />
        </col>
        <col w="30" gap="9" align="middle-center">
          <text text-style="Mono" value="+2.0" color="$accent2" align="center" />
          <frame role="slider" w="30" h="192">
            <frame abs="true" x="12" y="0" w="6" h="192" radius="3">
              <appearance>
                <fill type="color" value="$well" />
                <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="$shd" />
                <effect type="inner-shadow" x="0" y="-1" radius="1" spread="0" color="#3A324255" />
              </appearance>
            </frame>
            <rect abs="true" x="3" y="95" w="24" h="2" radius="1" fill="$line" />
            <rect abs="true" x="12" y="80" w="6" h="16" radius="3" fill="$accent" />
            <frame abs="true" x="1" y="71" w="28" h="18" radius="6">
              <appearance>
                <fill type="linear-gradient" value="linear-gradient(180deg, #342C3B 0%, #241E2B 100%)" />
                <effect type="drop-shadow" x="0" y="3" radius="6" spread="0" color="#0F0B14A6" />
                <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#4A4152" />
              </appearance>
              <rect abs="true" x="6" y="8" w="16" h="2" radius="1" fill="$accent" />
            </frame>
          </frame>
          <text text-style="MonoSm" value="200" color="$sub" align="center" />
        </col>
        <col w="30" gap="9" align="middle-center">
          <text text-style="Mono" value="0.0" color="$faint" align="center" />
          <frame role="slider" w="30" h="192">
            <frame abs="true" x="12" y="0" w="6" h="192" radius="3">
              <appearance>
                <fill type="color" value="$well" />
                <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="$shd" />
                <effect type="inner-shadow" x="0" y="-1" radius="1" spread="0" color="#3A324255" />
              </appearance>
            </frame>
            <rect abs="true" x="3" y="95" w="24" h="2" radius="1" fill="$line" />
            <frame abs="true" x="1" y="87" w="28" h="18" radius="6">
              <appearance>
                <fill type="linear-gradient" value="linear-gradient(180deg, #342C3B 0%, #241E2B 100%)" />
                <effect type="drop-shadow" x="0" y="3" radius="6" spread="0" color="#0F0B14A6" />
                <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#4A4152" />
              </appearance>
              <rect abs="true" x="6" y="8" w="16" h="2" radius="1" fill="$accent" />
            </frame>
          </frame>
          <text text-style="MonoSm" value="500" color="$sub" align="center" />
        </col>
        <col w="30" gap="9" align="middle-center">
          <text text-style="Mono" value="-1.0" color="$sub" align="center" />
          <frame role="slider" w="30" h="192">
            <frame abs="true" x="12" y="0" w="6" h="192" radius="3">
              <appearance>
                <fill type="color" value="$well" />
                <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="$shd" />
                <effect type="inner-shadow" x="0" y="-1" radius="1" spread="0" color="#3A324255" />
              </appearance>
            </frame>
            <rect abs="true" x="3" y="95" w="24" h="2" radius="1" fill="$line" />
            <rect abs="true" x="12" y="96" w="6" h="8" radius="3" fill="$accent" />
            <frame abs="true" x="1" y="95" w="28" h="18" radius="6">
              <appearance>
                <fill type="linear-gradient" value="linear-gradient(180deg, #342C3B 0%, #241E2B 100%)" />
                <effect type="drop-shadow" x="0" y="3" radius="6" spread="0" color="#0F0B14A6" />
                <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#4A4152" />
              </appearance>
              <rect abs="true" x="6" y="8" w="16" h="2" radius="1" fill="$accent" />
            </frame>
          </frame>
          <text text-style="MonoSm" value="1.2k" color="$sub" align="center" />
        </col>
        <col w="30" gap="9" align="middle-center">
          <text text-style="Mono" value="+0.5" color="$accent2" align="center" />
          <frame role="slider" w="30" h="192">
            <frame abs="true" x="12" y="0" w="6" h="192" radius="3">
              <appearance>
                <fill type="color" value="$well" />
                <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="$shd" />
                <effect type="inner-shadow" x="0" y="-1" radius="1" spread="0" color="#3A324255" />
              </appearance>
            </frame>
            <rect abs="true" x="3" y="95" w="24" h="2" radius="1" fill="$line" />
            <rect abs="true" x="12" y="92" w="6" h="4" radius="3" fill="$accent" />
            <frame abs="true" x="1" y="83" w="28" h="18" radius="6">
              <appearance>
                <fill type="linear-gradient" value="linear-gradient(180deg, #342C3B 0%, #241E2B 100%)" />
                <effect type="drop-shadow" x="0" y="3" radius="6" spread="0" color="#0F0B14A6" />
                <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#4A4152" />
              </appearance>
              <rect abs="true" x="6" y="8" w="16" h="2" radius="1" fill="$accent" />
            </frame>
          </frame>
          <text text-style="MonoSm" value="3k" color="$sub" align="center" />
        </col>
        <col w="30" gap="9" align="middle-center">
          <text text-style="Mono" value="+2.5" color="$accent2" align="center" />
          <frame role="slider" w="30" h="192">
            <frame abs="true" x="12" y="0" w="6" h="192" radius="3">
              <appearance>
                <fill type="color" value="$well" />
                <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="$shd" />
                <effect type="inner-shadow" x="0" y="-1" radius="1" spread="0" color="#3A324255" />
              </appearance>
            </frame>
            <rect abs="true" x="3" y="95" w="24" h="2" radius="1" fill="$line" />
            <rect abs="true" x="12" y="76" w="6" h="20" radius="3" fill="$accent" />
            <frame abs="true" x="1" y="67" w="28" h="18" radius="6">
              <appearance>
                <fill type="linear-gradient" value="linear-gradient(180deg, #342C3B 0%, #241E2B 100%)" />
                <effect type="drop-shadow" x="0" y="3" radius="6" spread="0" color="#0F0B14A6" />
                <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#4A4152" />
              </appearance>
              <rect abs="true" x="6" y="8" w="16" h="2" radius="1" fill="$accent" />
            </frame>
          </frame>
          <text text-style="MonoSm" value="8k" color="$sub" align="center" />
        </col>
        <col w="30" gap="9" align="middle-center">
          <text text-style="Mono" value="+3.5" color="$accent2" align="center" />
          <frame role="slider" w="30" h="192">
            <frame abs="true" x="12" y="0" w="6" h="192" radius="3">
              <appearance>
                <fill type="color" value="$well" />
                <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="$shd" />
                <effect type="inner-shadow" x="0" y="-1" radius="1" spread="0" color="#3A324255" />
              </appearance>
            </frame>
            <rect abs="true" x="3" y="95" w="24" h="2" radius="1" fill="$line" />
            <rect abs="true" x="12" y="68" w="6" h="28" radius="3" fill="$accent" />
            <frame abs="true" x="1" y="59" w="28" h="18" radius="6">
              <appearance>
                <fill type="linear-gradient" value="linear-gradient(180deg, #342C3B 0%, #241E2B 100%)" />
                <effect type="drop-shadow" x="0" y="3" radius="6" spread="0" color="#0F0B14A6" />
                <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#4A4152" />
              </appearance>
              <rect abs="true" x="6" y="8" w="16" h="2" radius="1" fill="$accent" />
            </frame>
          </frame>
          <text text-style="MonoSm" value="16k" color="$sub" align="center" />
        </col>
      </row>
    </col>
    <!-- Preset chips -->
    <row w="353" align="middle-left" gap="9">
      <row role="chip" radius="$r-pill" p="10 16" align="middle-center">
        <appearance>
          <fill type="color" value="$surf" />
          <effect type="inner-shadow" x="2" y="2" radius="4" spread="0" color="$shd" />
          <effect type="inner-shadow" x="-1" y="-1" radius="3" spread="0" color="#3A324555" />
        </appearance>
        <text text-style="Body" value="Flat" color="$sub" />
      </row>
      <row role="chip" radius="$r-pill" p="10 16" align="middle-center">
        <appearance>
          <fill type="color" value="$accent" />
          <effect type="drop-shadow" x="0" y="4" radius="10" spread="0" color="#E8A79C4D" />
        </appearance>
        <text text-style="H2" value="Bass Boost" color="$acc-ink" />
      </row>
      <row role="chip" radius="$r-pill" p="10 16" align="middle-center">
        <appearance>
          <fill type="color" value="$surf" />
          <effect type="inner-shadow" x="2" y="2" radius="4" spread="0" color="$shd" />
          <effect type="inner-shadow" x="-1" y="-1" radius="3" spread="0" color="#3A324555" />
        </appearance>
        <text text-style="Body" value="Vocal" color="$sub" />
      </row>
      <row role="chip" radius="$r-pill" p="10 16" align="middle-center">
        <appearance>
          <fill type="color" value="$surf" />
          <effect type="inner-shadow" x="2" y="2" radius="4" spread="0" color="$shd" />
          <effect type="inner-shadow" x="-1" y="-1" radius="3" spread="0" color="#3A324555" />
        </appearance>
        <text text-style="Body" value="Acoustic" color="$sub" />
      </row>
    </row>
    <!-- Bottom action bar (viewport-fixed, last flow child) -->
    <col role="toolbar" w="fill" fill="#1B1620" border="1 $line" p="16 22 12" gap="14" align="top-center">
      <row w="fill" align="middle-left" gap="auto">
        <row gap="12" align="middle-center">
          <frame w="48" h="28" radius="$r-pill">
            <appearance>
              <fill type="color" value="$accent" />
              <effect type="inner-shadow" x="0" y="1" radius="2" spread="0" color="#A85E54" />
            </appearance>
            <frame abs="true" x="23" y="3" w="22" h="22" radius="$r-pill">
              <appearance>
                <fill type="color" value="#FBF3F1" />
                <effect type="drop-shadow" x="1" y="1" radius="3" spread="0" color="#A85E5480" />
              </appearance>
            </frame>
          </frame>
          <col gap="1" align="middle-left">
            <text text-style="H2" value="EQ Active" color="$ink" />
            <text text-style="Cap" value="Applied to all output" color="$sub" />
          </col>
        </row>
        <row role="button" radius="$r-pill" p="12 20" gap="8" align="middle-center">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #EFB9AF 0%, #E39A8E 100%)" />
            <effect type="drop-shadow" x="0" y="4" radius="12" spread="0" color="#E8A79C59" />
          </appearance>
          <img src="https://api.iconify.design/lucide/save.svg?color=%232A1B1C" w="17" h="17" />
          <text text-style="H2" value="Save Preset" color="$acc-ink" />
        </row>
      </row>
      <rect w="140" h="5" radius="$r-pill" fill="$faint" />
    </col>
  </col>
</gui>
```