---
title: "Bloom - V60 Brew, Ethiopia Guji"
platform: ios
slug: bloom-v60-brew-ethiopia-guji
screens: []
domains: ["smart-home"]
style: "neumorphic"
fonts: ["SF Pro Display", "JetBrains Mono"]
roles: ["top-navigation-bar", "card", "button"]
score: {clean: 91, consistent: 71, accessible: 86, comprehensible: 16}
url: https://gui.farm/ios/bloom-v60-brew-ethiopia-guji
raw: https://gui.farm/ios/bloom-v60-brew-ethiopia-guji/design.guix
download: https://gui.farm/ios/bloom-v60-brew-ethiopia-guji.gui
---

# Bloom - V60 Brew, Ethiopia Guji

A dark neumorphic iOS live brew session for a connected pour-over coffee scale, where a home barista mid-pour tracks elapsed time, current-versus-target water weight on a segmented ring, flow rate, and a five-step pour schedule for an Ethiopia Guji V60.

- **Live preview:** https://gui.farm/ios/bloom-v60-brew-ethiopia-guji
- **Raw source:** https://gui.farm/ios/bloom-v60-brew-ethiopia-guji/design.guix
- **Download (.gui):** https://gui.farm/ios/bloom-v60-brew-ethiopia-guji.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Bloom - V60 Brew, Ethiopia Guji">
  <mode name="theme" values="light dark" default="dark" />
  <tokens>
    <color name="bg" value="#17181C" />
    <color name="surf" value="#1E2024" />
    <color name="well" value="#141518" />
    <color name="sh-dark" value="#0E0F12" />
    <color name="sh-light" value="#2A2D33" />
    <color name="track" value="#2C3037" />
    <color name="ink" value="#F3F1EC" />
    <color name="sub" value="#B7B4AD" />
    <color name="faint" value="#8F8C84" />
    <color name="line" value="#2A2D33" />
    <color name="accent" value="#F0A93C" />
    <color name="accent-text" value="#F6BE63" />
    <color name="accent-ink" value="#241802" />
    <color name="accent-tint" value="#F0A93C22" />
    <number name="r-pill" value="999" />
    <number name="r-card" value="24" />
    <number name="r-tile" value="14" />
  </tokens>
  <styles>
    <text-style name="Eyebrow" font-family="SF Pro Display" font-size="11" font-weight="700" line-height="14" letter-spacing="1.6" />
    <text-style name="NavTitle" font-family="SF Pro Display" font-size="17" font-weight="600" line-height="20" />
    <text-style name="Bean" font-family="SF Pro Display" font-size="20" font-weight="700" line-height="24" letter-spacing="-0.3" />
    <text-style name="H2" font-family="SF Pro Display" font-size="15" font-weight="700" line-height="19" />
    <text-style name="Cap" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style name="StepName" font-family="SF Pro Display" font-size="14" font-weight="700" line-height="18" />
    <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="Timer" font-family="JetBrains Mono" font-size="46" font-weight="600" line-height="48" letter-spacing="-1.5" />
    <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="16" font-weight="600" line-height="20" />
    <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=%23F3F1EC" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F3F1EC" 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="$sh-dark" />
          <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="$sh-light" />
        </appearance>
        <img abs="true" x="9" y="9" src="https://api.iconify.design/lucide/chevron-left.svg?color=%23F3F1EC" w="22" h="22" />
      </frame>
      <col gap="2" align="middle-center">
        <text text-style="Eyebrow" text-case="uppercase" value="Bloom Scale" color="$accent-text" align="center" />
        <text text-style="NavTitle" value="V60 Brew" 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="$sh-dark" />
          <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="$sh-light" />
        </appearance>
        <img abs="true" x="10" y="10" src="https://api.iconify.design/lucide/sliders-horizontal.svg?color=%23B7B4AD" w="20" h="20" />
      </frame>
    </row>
    <!-- Header: bean + roaster + thumbnail -->
    <row w="353" align="middle-left" gap="14">
      <frame w="56" h="56" radius="16">
        <appearance>
          <fill type="color" value="$surf" />
          <effect type="drop-shadow" x="4" y="4" radius="9" spread="0" color="$sh-dark" />
          <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="$sh-light" />
        </appearance>
        <img abs="true" x="4" y="4" src="https://images.unsplash.com/photo-1495862433577-132cf20d7902?auto=format&amp;fit=crop&amp;w=200&amp;h=200&amp;q=80" w="48" h="48" radius="12" fit="cover" clip="true" />
      </frame>
      <col gap="3" align="middle-left">
        <text text-style="Eyebrow" text-case="uppercase" value="Brewing" color="$accent-text" />
        <text text-style="Bean" value="Ethiopia Guji, Shakiso" color="$ink" />
        <text text-style="Cap" value="Prologue Coffee Roasters, washed" color="$sub" />
      </col>
    </row>
    <!-- Hero: brew ring -->
    <col role="card" w="353" radius="$r-card" p="20 16 18" gap="14" align="top-center">
      <appearance>
        <fill type="color" value="$surf" />
        <effect type="drop-shadow" x="9" y="9" radius="18" spread="0" color="$sh-dark" />
        <effect type="drop-shadow" x="-7" y="-7" radius="15" spread="0" color="$sh-light" />
      </appearance>
      <frame w="220" h="220" align="top-center">
        <frame abs="true" x="0" y="0" w="220" h="220" radius="110">
          <appearance>
            <fill type="color" value="$surf" />
            <effect type="drop-shadow" x="12" y="12" radius="24" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-9" y="-9" radius="20" spread="0" color="$sh-light" />
          </appearance>
        </frame>
        <rect abs="true" x="106.0" y="8.0" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="118.3" y="8.8" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="130.4" y="11.1" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="142.1" y="14.9" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="153.2" y="20.1" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="163.6" y="26.7" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="173.1" y="34.6" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="181.5" y="43.5" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="188.7" y="53.5" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="194.7" y="64.3" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="199.2" y="75.7" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="202.3" y="87.6" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="203.8" y="99.8" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="203.8" y="112.2" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="202.3" y="124.4" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="199.2" y="136.3" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="194.7" y="147.7" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="188.7" y="158.5" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="181.5" y="168.5" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="173.1" y="177.4" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="163.6" y="185.3" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="153.2" y="191.9" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="142.1" y="197.1" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="130.4" y="200.9" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="118.3" y="203.2" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="106.0" y="204.0" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="93.7" y="203.2" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="81.6" y="200.9" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="69.9" y="197.1" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="58.8" y="191.9" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="48.4" y="185.3" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="38.9" y="177.4" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="30.5" y="168.5" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="23.3" y="158.5" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="17.3" y="147.7" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="12.8" y="136.3" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="9.7" y="124.4" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="8.2" y="112.2" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="8.2" y="99.8" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="9.7" y="87.6" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="12.8" y="75.7" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="17.3" y="64.3" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="23.3" y="53.5" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="30.5" y="43.5" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="38.9" y="34.6" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="48.4" y="26.7" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="58.8" y="20.1" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="69.9" y="14.9" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="81.6" y="11.1" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="93.7" y="8.8" w="8" h="8" radius="4" fill="$track" />
        <frame abs="true" x="35" y="35" w="150" h="150" radius="75">
          <appearance>
            <fill type="color" value="$well" />
            <effect type="inner-shadow" x="6" y="6" radius="12" spread="0" color="$sh-dark" />
            <effect type="inner-shadow" x="-5" y="-5" radius="10" spread="0" color="$sh-light" />
          </appearance>
        </frame>
        <col abs="true" x="35" y="66" w="150" gap="4" align="top-center">
          <text text-style="Tiny" text-case="uppercase" value="Pour 3, to 250 g" color="$accent-text" align="center" />
          <text text-style="Timer" value="214g" color="$ink" align="center" />
          <text text-style="Cap" value="of 368 g target" color="$sub" align="center" />
        </col>
      </frame>
      <row w="321" align="middle-center" gap="0">
        <col w="fill" gap="3" align="middle-center">
          <row gap="5" align="middle-center">
            <img src="https://api.iconify.design/lucide/clock.svg?color=%23B7B4AD" w="13" h="13" />
            <text text-style="MonoBig" value="2:04" color="$ink" align="center" />
          </row>
          <text text-style="MonoSm" text-case="uppercase" value="Elapsed" color="$faint" align="center" />
        </col>
        <rect w="1" h="30" fill="$line" />
        <col w="fill" gap="3" align="middle-center">
          <text text-style="MonoBig" value="4.2 g/s" color="$accent-text" align="center" />
          <text text-style="MonoSm" text-case="uppercase" value="Flow rate" color="$faint" align="center" />
        </col>
        <rect w="1" h="30" fill="$line" />
        <col w="fill" gap="3" align="middle-center">
          <text text-style="MonoBig" value="3:15" color="$ink" align="center" />
          <text text-style="MonoSm" text-case="uppercase" value="Target" color="$faint" align="center" />
        </col>
      </row>
    </col>
    <!-- Recipe spec strip -->
    <row w="353" gap="11" align="top-center">
      <col w="fill" radius="$r-tile" p="12 10" gap="5" align="middle-center">
        <appearance>
          <fill type="color" value="$surf" />
          <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
          <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
        </appearance>
        <img src="https://api.iconify.design/lucide/coffee.svg?color=%23F6BE63" w="17" h="17" />
        <text text-style="Mono" value="22 g" color="$ink" align="center" />
        <text text-style="MonoSm" text-case="uppercase" value="Dose" color="$faint" align="center" />
      </col>
      <col w="fill" radius="$r-tile" p="12 10" gap="5" align="middle-center">
        <appearance>
          <fill type="color" value="$surf" />
          <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
          <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
        </appearance>
        <img src="https://api.iconify.design/lucide/scale.svg?color=%23F6BE63" w="17" h="17" />
        <text text-style="Mono" value="1:16.7" color="$ink" align="center" />
        <text text-style="MonoSm" text-case="uppercase" value="Ratio" color="$faint" align="center" />
      </col>
      <col w="fill" radius="$r-tile" p="12 10" gap="5" align="middle-center">
        <appearance>
          <fill type="color" value="$surf" />
          <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
          <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
        </appearance>
        <img src="https://api.iconify.design/lucide/settings-2.svg?color=%23F6BE63" w="17" h="17" />
        <text text-style="Mono" value="24 clk" color="$ink" align="center" />
        <text text-style="MonoSm" text-case="uppercase" value="Grind" color="$faint" align="center" />
      </col>
      <col w="fill" radius="$r-tile" p="12 10" gap="5" align="middle-center">
        <appearance>
          <fill type="color" value="$surf" />
          <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
          <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
        </appearance>
        <img src="https://api.iconify.design/lucide/thermometer.svg?color=%23F6BE63" w="17" h="17" />
        <text text-style="Mono" value="94°C" color="$ink" align="center" />
        <text text-style="MonoSm" text-case="uppercase" value="Water" color="$faint" align="center" />
      </col>
    </row>
    <!-- Extraction curve -->
    <col role="card" w="353" radius="$r-card" p="16" gap="12">
      <appearance>
        <fill type="color" value="$surf" />
        <effect type="drop-shadow" x="9" y="9" radius="18" spread="0" color="$sh-dark" />
        <effect type="drop-shadow" x="-7" y="-7" radius="15" spread="0" color="$sh-light" />
      </appearance>
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="H2" value="Extraction" color="$ink" />
        <row gap="7" align="middle-center">
          <rect w="7" h="7" radius="$r-pill" fill="$accent" />
          <text text-style="Cap" value="weight vs time" color="$sub" />
        </row>
      </row>
      <frame w="321" h="96" radius="$r-tile">
        <appearance>
          <fill type="color" value="$well" />
          <effect type="inner-shadow" x="0" y="2" radius="5" spread="0" color="$sh-dark" />
        </appearance>
        <img abs="true" x="4" y="4" src="https://gui.farm/tools/charts/line-chart.svg?data=0:0,1:20,2:45,3:45,4:45,5:110,6:150,7:150,8:185,9:214&amp;line=%23F0A93C&amp;surface=dark&amp;curve=smooth&amp;area=on&amp;points=hide&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=650&amp;height=176" w="313" h="88" fit="cover" radius="12" clip="true" />
      </frame>
    </col>
    <!-- Pour schedule -->
    <col role="card" w="353" radius="$r-card" p="16 16 8" gap="4">
      <appearance>
        <fill type="color" value="$surf" />
        <effect type="drop-shadow" x="9" y="9" radius="18" spread="0" color="$sh-dark" />
        <effect type="drop-shadow" x="-7" y="-7" radius="15" spread="0" color="$sh-light" />
      </appearance>
      <row w="fill" align="middle-left" gap="auto" pb="6">
        <text text-style="H2" value="Pour schedule" color="$ink" />
        <text text-style="Cap" value="5 pours, 368 g" color="$sub" />
      </row>
      <!-- Bloom (done) -->
      <row w="fill" align="middle-left" gap="12" p="8 0">
        <frame w="30" h="30" radius="15" align="middle-center">
          <appearance>
            <fill type="color" value="$accent" />
          </appearance>
          <img abs="true" x="7" y="7" src="https://api.iconify.design/lucide/check.svg?color=%23241802" w="16" h="16" />
        </frame>
        <col w="fill" gap="1" align="middle-left">
          <text text-style="StepName" value="Bloom" color="$sub" />
          <text text-style="Cap" value="0:00, 45 g, 2x dose" color="$faint" />
        </col>
        <text text-style="Mono" value="45 g" color="$sub" align="right" />
      </row>
      <rect w="fill" h="1" fill="$line" />
      <!-- Pour 2 (done) -->
      <row w="fill" align="middle-left" gap="12" p="8 0">
        <frame w="30" h="30" radius="15" align="middle-center">
          <appearance>
            <fill type="color" value="$accent" />
          </appearance>
          <img abs="true" x="7" y="7" src="https://api.iconify.design/lucide/check.svg?color=%23241802" w="16" h="16" />
        </frame>
        <col w="fill" gap="1" align="middle-left">
          <text text-style="StepName" value="Pour 2" color="$sub" />
          <text text-style="Cap" value="0:45, to 150 g" color="$faint" />
        </col>
        <text text-style="Mono" value="150 g" color="$sub" align="right" />
      </row>
      <rect w="fill" h="1" fill="$line" />
      <!-- Pour 3 (active) -->
      <col w="fill" radius="$r-tile" p="10 10" gap="8">
        <appearance>
          <fill type="color" value="$accent-tint" />
        </appearance>
        <row w="fill" align="middle-left" gap="12">
          <frame w="30" h="30" radius="15" align="middle-center">
            <appearance>
              <fill type="color" value="$well" />
              <effect type="inner-shadow" x="2" y="2" radius="4" spread="0" color="$sh-dark" />
              <effect type="inner-shadow" x="-1" y="-1" radius="3" spread="0" color="$sh-light" />
            </appearance>
            <img abs="true" x="7" y="7" src="https://api.iconify.design/lucide/droplets.svg?color=%23F6BE63" w="16" h="16" />
          </frame>
          <col w="fill" gap="1" align="middle-left">
            <text text-style="StepName" value="Pour 3, pouring now" color="$ink" />
            <text text-style="Cap" value="1:20, to 250 g" color="$sub" />
          </col>
          <text text-style="MonoBig" value="214 / 250 g" color="$accent-text" align="right" />
        </row>
        <frame w="301" h="6" radius="3">
          <appearance>
            <fill type="color" value="$well" />
            <effect type="inner-shadow" x="0" y="1" radius="2" spread="0" color="$sh-dark" />
          </appearance>
          <rect abs="true" x="0" y="0" w="193" h="6" radius="3" fill="$accent" />
        </frame>
      </col>
      <!-- Pour 4 (upcoming) -->
      <row w="fill" align="middle-left" gap="12" p="8 0">
        <frame w="30" h="30" radius="15" align="middle-center">
          <appearance>
            <fill type="color" value="$surf" />
            <effect type="inner-shadow" x="2" y="2" radius="4" spread="0" color="$sh-dark" />
            <effect type="inner-shadow" x="-1" y="-1" radius="3" spread="0" color="$sh-light" />
          </appearance>
          <text abs="true" x="0" y="8" w="30" text-style="Mono" value="4" color="$faint" align="center" />
        </frame>
        <col w="fill" gap="1" align="middle-left">
          <text text-style="StepName" value="Pour 4" color="$ink" />
          <text text-style="Cap" value="2:10, to 310 g" color="$faint" />
        </col>
        <text text-style="Mono" value="310 g" color="$sub" align="right" />
      </row>
      <rect w="fill" h="1" fill="$line" />
      <!-- Pour 5 (upcoming) -->
      <row w="fill" align="middle-left" gap="12" p="8 0">
        <frame w="30" h="30" radius="15" align="middle-center">
          <appearance>
            <fill type="color" value="$surf" />
            <effect type="inner-shadow" x="2" y="2" radius="4" spread="0" color="$sh-dark" />
            <effect type="inner-shadow" x="-1" y="-1" radius="3" spread="0" color="$sh-light" />
          </appearance>
          <text abs="true" x="0" y="8" w="30" text-style="Mono" value="5" color="$faint" align="center" />
        </frame>
        <col w="fill" gap="1" align="middle-left">
          <text text-style="StepName" value="Pour 5" color="$ink" />
          <text text-style="Cap" value="2:45, to 368 g, drawdown" color="$faint" />
        </col>
        <text text-style="Mono" value="368 g" color="$sub" align="right" />
      </row>
    </col>
    <!-- Bottom action bar (last flow child, viewport-fixed) -->
    <row w="fill" p="12 20 26" gap="12" align="middle-center" fill="$bg">
      <frame role="button" w="128" h="54" radius="$r-pill" align="middle-center">
        <appearance>
          <fill type="color" value="$surf" />
          <effect type="drop-shadow" x="4" y="4" radius="9" spread="0" color="$sh-dark" />
          <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="$sh-light" />
        </appearance>
        <row w="fill" h="fill" gap="8" align="middle-center">
          <img src="https://api.iconify.design/lucide/skip-forward.svg?color=%23B7B4AD" w="18" h="18" />
          <text text-style="H2" value="Skip" color="$sub" />
        </row>
      </frame>
      <frame role="button" w="fill" h="54" radius="$r-pill" align="middle-center">
        <appearance>
          <fill type="color" value="$accent" />
          <effect type="drop-shadow" x="0" y="4" radius="12" spread="0" color="#F0A93C33" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFD98A66" />
        </appearance>
        <row w="fill" h="fill" gap="9" align="middle-center">
          <img src="https://api.iconify.design/lucide/pause.svg?color=%23241802" w="19" h="19" />
          <text text-style="H2" value="Pause brew" color="$accent-ink" />
        </row>
      </frame>
    </row>
  </col>
</gui>

```