---
title: "Fern & Flour — Raspberry-Rhubarb Galette"
platform: web
slug: fern-flour-raspberry-rhubarb-galette
screens: []
domains: ["food-delivery"]
style: "retro"
fonts: ["Bricolage Grotesque", "Hanken Grotesk", "Space Mono"]
roles: ["top-navigation-bar", "search-bar", "avatar", "chip", "card", "stepper", "button"]
score: {clean: 100, consistent: 64, accessible: 99, comprehensible: 20}
url: https://gui.farm/web/fern-flour-raspberry-rhubarb-galette
raw: https://gui.farm/web/fern-flour-raspberry-rhubarb-galette/design.guix
download: https://gui.farm/web/fern-flour-raspberry-rhubarb-galette.gui
---

# Fern & Flour — Raspberry-Rhubarb Galette

A retro editorial web recipe page for a raspberry-rhubarb galette, with a photographic hero, tagged step-by-step method, a grouped ingredient list, a servings and prep/chill/bake time breakdown, and per-serving nutrition.

- **Live preview:** https://gui.farm/web/fern-flour-raspberry-rhubarb-galette
- **Raw source:** https://gui.farm/web/fern-flour-raspberry-rhubarb-galette/design.guix
- **Download (.gui):** https://gui.farm/web/fern-flour-raspberry-rhubarb-galette.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Fern &amp; Flour — Raspberry-Rhubarb Galette">
  <tokens>
    <color name="paper" value="#FAF4EA" />
    <color name="paper-2" value="#F3E9D7" />
    <color name="surface" value="#FFFDF8" />
    <color name="ink" value="#26201C" />
    <color name="ink-soft" value="#574E47" />
    <color name="muted" value="#6E645C" />
    <color name="faint" value="#746A61" />
    <color name="line" value="#E6DAC8" />
    <color name="line-2" value="#D8C8B2" />
    <color name="accent" value="#C51F4C" />
    <color name="accent-ink" value="#A2113E" />
    <color name="accent-deep" value="#7A0B2E" />
    <color name="accent-mid" value="#E07A93" />
    <color name="accent-blush" value="#F4CBD6" />
    <color name="accent-wash" value="#FBEAEF" />
    <color name="oncta" value="#FFF5F7" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="18" />
    <number name="r-pill" value="999" />
  </tokens>
  <fonts>
    <font family="Bricolage Grotesque" source="google" weights="400 600 700 800" 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="Wordmark"
      font-family="Bricolage Grotesque"
      font-size="22"
      font-weight="800"
      line-height="24"
      letter-spacing="-0.3"
    />
    <text-style name="NavLink" font-family="Hanken Grotesk" font-size="15" font-weight="500" line-height="18" />
    <text-style
      name="Eyebrow"
      font-family="Hanken Grotesk"
      font-size="12"
      font-weight="700"
      line-height="14"
      letter-spacing="1.6"
    />
    <text-style
      name="Title"
      font-family="Bricolage Grotesque"
      font-size="54"
      font-weight="700"
      line-height="56"
      letter-spacing="-1.2"
    />
    <text-style name="Lead" font-family="Hanken Grotesk" font-size="18" font-weight="400" line-height="30" />
    <text-style name="Byline" font-family="Hanken Grotesk" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Meta" font-family="Hanken Grotesk" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Chip" font-family="Hanken Grotesk" font-size="13" font-weight="600" line-height="16" />
    <text-style
      name="SectionKicker"
      font-family="Hanken Grotesk"
      font-size="12"
      font-weight="700"
      line-height="14"
      letter-spacing="1.6"
    />
    <text-style
      name="SectionTitle"
      font-family="Bricolage Grotesque"
      font-size="28"
      font-weight="700"
      line-height="32"
      letter-spacing="-0.6"
    />
    <text-style
      name="StepNum"
      font-family="Bricolage Grotesque"
      font-size="46"
      font-weight="800"
      line-height="46"
      letter-spacing="-1"
    />
    <text-style
      name="StepTitle"
      font-family="Bricolage Grotesque"
      font-size="19"
      font-weight="700"
      line-height="24"
    />
    <text-style
      name="StepBody"
      font-family="Hanken Grotesk"
      font-size="15"
      font-weight="400"
      line-height="24"
    />
    <text-style
      name="TimeChip"
      font-family="Space Mono"
      font-size="12"
      font-weight="700"
      line-height="14"
      letter-spacing="0.2"
    />
    <text-style
      name="CardLabel"
      font-family="Hanken Grotesk"
      font-size="12"
      font-weight="700"
      line-height="14"
      letter-spacing="1.4"
    />
    <text-style
      name="GroupLabel"
      font-family="Hanken Grotesk"
      font-size="12"
      font-weight="700"
      line-height="14"
      letter-spacing="1.2"
    />
    <text-style name="StepBig" font-family="Space Mono" font-size="20" font-weight="700" line-height="22" />
    <text-style name="TimeVal" font-family="Space Mono" font-size="15" font-weight="700" line-height="18" />
    <text-style
      name="TimeUnit"
      font-family="Hanken Grotesk"
      font-size="11"
      font-weight="600"
      line-height="13"
      letter-spacing="0.6"
    />
    <text-style name="IngQty" font-family="Space Mono" font-size="13" font-weight="700" line-height="18" />
    <text-style name="IngName" font-family="Hanken Grotesk" font-size="14" font-weight="500" line-height="19" />
    <text-style
      name="Cal"
      font-family="Space Mono"
      font-size="40"
      font-weight="700"
      line-height="42"
      letter-spacing="-1"
    />
    <text-style name="CalUnit" font-family="Hanken Grotesk" font-size="14" font-weight="600" line-height="18" />
    <text-style
      name="LegendName"
      font-family="Hanken Grotesk"
      font-size="14"
      font-weight="500"
      line-height="18"
    />
    <text-style name="LegendVal" font-family="Space Mono" font-size="13" font-weight="700" line-height="18" />
    <text-style
      name="BtnLabel"
      font-family="Hanken Grotesk"
      font-size="16"
      font-weight="700"
      line-height="20"
    />
    <text-style
      name="Btn2Label"
      font-family="Hanken Grotesk"
      font-size="15"
      font-weight="600"
      line-height="20"
    />
    <text-style name="Rating" font-family="Space Mono" font-size="14" font-weight="700" line-height="18" />
  </styles>
  <!-- No scroll: content-hugging col root, no fixed height. -->
  <col w="1440" fill="$paper" align="top-center">
    <!-- ===================== TOP NAV ===================== -->
    <row
      w="fill"
      h="66"
      p="0 40"
      gap="16"
      align="middle-left"
      fill="$paper"
      border="0 0 2 0 $line-2"
      role="top-navigation-bar"
    >
      <row w="200" gap="11" align="middle-left">
        <row w="34" h="34" radius="$r-sm" fill="$accent" align="middle-center">
          <img src="https://api.iconify.design/lucide/wheat.svg?color=%23FFF5F7" w="20" h="20" />
        </row>
        <text text-style="Wordmark" value="Fern &amp; Flour" color="$ink" />
      </row>
      <row w="fill" gap="26" align="middle-left">
        <text text-style="NavLink" value="Recipes" color="$ink" />
        <text text-style="NavLink" value="Collections" color="$muted" />
        <text text-style="NavLink" value="Meal Plan" color="$muted" />
        <text text-style="NavLink" value="Pantry" color="$muted" />
      </row>
      <row
        w="290"
        p="9 13"
        gap="9"
        radius="$r-pill"
        fill="$surface"
        border="2 $line-2"
        align="middle-left"
        role="search-bar"
      >
        <img src="https://api.iconify.design/lucide/search.svg?color=%236E645C" w="16" h="16" />
        <text w="fill" text-style="NavLink" value="Search 2,400 recipes" color="$faint" />
        <row p="2 7" radius="6" fill="$paper-2">
          <text text-style="TimeChip" value="/" color="$muted" />
        </row>
      </row>
      <row
        w="42"
        h="42"
        radius="$r-pill"
        fill="$accent-wash"
        border="2 $accent-blush"
        align="middle-center"
        role="avatar"
      >
        <text text-style="Byline" value="DF" color="$accent-ink" />
      </row>
    </row>
    <!-- ===================== BODY ===================== -->
    <row w="fill" p="34 40 56" gap="40" align="top-left">
      <!-- ============ MAIN COLUMN (840) ============ -->
      <col w="840" gap="0" align="top-left">
        <!-- Eyebrow -->
        <row gap="8" align="middle-left">
          <text text-style="Eyebrow" value="DESSERTS" color="$accent-ink" text-case="uppercase" />
          <ellipse w="4" h="4" fill="$accent-blush" />
          <text text-style="Eyebrow" value="SEASONAL BAKING" color="$muted" text-case="uppercase" />
        </row>
        <!-- Title -->
        <text w="fill" pt="12" text-style="Title" value="Raspberry-Rhubarb Galette" color="$ink" />
        <!-- Byline + rating -->
        <row w="fill" pt="16" gap="auto" align="middle-left">
          <row gap="12" align="middle-left">
            <row w="40" h="40" radius="$r-pill" fill="$accent-deep" align="middle-center">
              <text text-style="Byline" value="DF" color="$oncta" />
            </row>
            <col gap="2">
              <text text-style="Byline" value="Della Fenwick" color="$ink" />
              <text text-style="Meta" value="Test kitchen · Updated May 14, 2026" color="$muted" />
            </col>
          </row>
          <row gap="16" align="middle-right">
            <row gap="7" align="middle-center">
              <img src="https://api.iconify.design/lucide/star.svg?color=%23C51F4C" w="17" h="17" />
              <text text-style="Rating" value="4.8" color="$ink" />
              <text text-style="Meta" value="(137)" color="$muted" />
            </row>
            <rect w="1" h="20" fill="$line-2" />
            <row gap="7" align="middle-center">
              <img src="https://api.iconify.design/lucide/bookmark.svg?color=%236E645C" w="16" h="16" />
              <text text-style="Byline" value="Save" color="$ink-soft" />
            </row>
            <row gap="7" align="middle-center">
              <img src="https://api.iconify.design/lucide/printer.svg?color=%236E645C" w="16" h="16" />
              <text text-style="Byline" value="Print" color="$ink-soft" />
            </row>
          </row>
        </row>
        <!-- Tags -->
        <row w="fill" pt="18" gap="9" align="middle-left">
          <row
            p="7 13"
            radius="$r-pill"
            fill="$accent-wash"
            border="1 $accent-blush"
            align="middle-center"
            role="chip"
          >
            <text text-style="Chip" value="Vegetarian" color="$accent-ink" />
          </row>
          <row p="7 13" radius="$r-pill" fill="$surface" border="1 $line-2" align="middle-center" role="chip">
            <text text-style="Chip" value="Make-ahead" color="$ink-soft" />
          </row>
          <row p="7 13" radius="$r-pill" fill="$surface" border="1 $line-2" align="middle-center" role="chip">
            <text text-style="Chip" value="Uses seasonal produce" color="$ink-soft" />
          </row>
          <row p="7 13" radius="$r-pill" fill="$surface" border="1 $line-2" align="middle-center" role="chip">
            <text text-style="Chip" value="Beginner-friendly" color="$ink-soft" />
          </row>
        </row>
        <!-- Hero photograph -->
        <col w="fill" pt="22">
          <frame w="840" h="470" radius="$r-lg" clip="true" fill="$paper-2">
            <img
              abs="true"
              x="0"
              y="0"
              w="840"
              h="470"
              src="https://images.unsplash.com/photo-1757449946157-e51d1166c3d4?auto=format&amp;fit=crop&amp;w=1680&amp;h=940&amp;q=80"
              fit="cover"
            />
            <row
              abs="true"
              x="20"
              y="20"
              fill="$accent"
              radius="$r-pill"
              p="8 13"
              gap="7"
              align="middle-center"
            >
              <img src="https://api.iconify.design/lucide/sprout.svg?color=%23FFF5F7" w="14" h="14" />
              <text text-style="Chip" value="IN SEASON · RHUBARB" color="$oncta" letter-spacing="0.6" />
            </row>
            <row
              abs="true"
              x="686"
              y="428"
              fill="#26201CB3"
              radius="$r-pill"
              p="6 11"
              gap="6"
              align="middle-center"
            >
              <img src="https://api.iconify.design/lucide/camera.svg?color=%23FAF4EA" w="13" h="13" />
              <text text-style="Meta" value="Photo · Unsplash" color="#FAF4EA" />
            </row>
          </frame>
        </col>
        <!-- Editorial lead -->
        <text
          w="fill"
          pt="24"
          text-style="Lead"
          value="Rhubarb's tartness and late-summer raspberries fold into a single free-form crust that never has to be perfect. The dough comes together in one bowl, rests while the fruit macerates, then bakes on a sheet pan until the juices bubble at the pleated edge. It is the rustic bake you make when the fruit is good and the oven is already on."
          color="$ink-soft"
        />
        <!-- Ornament divider -->
        <row w="fill" pt="30" pb="6" gap="12" align="middle-center">
          <rect w="fill" h="2" fill="$line" />
          <img src="https://api.iconify.design/lucide/asterisk.svg?color=%23C51F4C" w="18" h="18" />
          <rect w="fill" h="2" fill="$line" />
        </row>
        <!-- Method header -->
        <row w="fill" pt="22" gap="auto" align="bottom-left">
          <col gap="6">
            <text
              text-style="SectionKicker"
              value="HOW IT COMES TOGETHER"
              color="$accent-ink"
              text-case="uppercase"
            />
            <text text-style="SectionTitle" value="Method" color="$ink" />
          </col>
          <row gap="8" align="middle-right">
            <img src="https://api.iconify.design/lucide/timer.svg?color=%236E645C" w="16" h="16" />
            <text text-style="Meta" value="6 steps · 40 min hands-on" color="$muted" />
          </row>
        </row>
        <!-- Steps -->
        <col w="fill" pt="20" gap="0">
          <!-- Step 01 -->
          <row w="fill" p="20 0" gap="22" align="top-left" border="0 0 1 0 $line">
            <text w="64" text-style="StepNum" value="01" color="$accent-blush" />
            <col w="fill" gap="8">
              <row gap="12" align="middle-left">
                <text text-style="StepTitle" value="Make the dough" color="$ink" />
                <row p="4 9" radius="6" fill="$paper-2" align="middle-center">
                  <text text-style="TimeChip" value="10 MIN" color="$muted" />
                </row>
              </row>
              <text
                w="fill"
                text-style="StepBody"
                value="Whisk the flour, sugar and salt. Cut in the cold butter with your fingertips until the largest pieces are the size of peas, then drizzle in the ice water and press the shaggy mass into a single disc."
                color="$ink-soft"
              />
            </col>
          </row>
          <!-- Step 02 -->
          <row w="fill" p="20 0" gap="22" align="top-left" border="0 0 1 0 $line">
            <text w="64" text-style="StepNum" value="02" color="$accent-blush" />
            <col w="fill" gap="8">
              <row gap="12" align="middle-left">
                <text text-style="StepTitle" value="Chill until firm" color="$ink" />
                <row p="4 9" radius="6" fill="$accent-wash" align="middle-center">
                  <text text-style="TimeChip" value="45 MIN · HANDS-OFF" color="$accent-ink" />
                </row>
              </row>
              <text
                w="fill"
                text-style="StepBody"
                value="Wrap the disc and rest it in the fridge. This relaxes the gluten so the crust rolls out without snapping back and keeps the butter cold enough to steam into flaky layers."
                color="$ink-soft"
              />
            </col>
          </row>
          <!-- Step 03 -->
          <row w="fill" p="20 0" gap="22" align="top-left" border="0 0 1 0 $line">
            <text w="64" text-style="StepNum" value="03" color="$accent-blush" />
            <col w="fill" gap="8">
              <row gap="12" align="middle-left">
                <text text-style="StepTitle" value="Macerate the fruit" color="$ink" />
                <row p="4 9" radius="6" fill="$paper-2" align="middle-center">
                  <text text-style="TimeChip" value="15 MIN" color="$muted" />
                </row>
              </row>
              <text
                w="fill"
                text-style="StepBody"
                value="Toss the sliced rhubarb and raspberries with sugar, cornstarch and lemon zest. Let them sit so the fruit weeps a little, then drain off the excess syrup so the base stays crisp."
                color="$ink-soft"
              />
            </col>
          </row>
          <!-- Step 04 -->
          <row w="fill" p="20 0" gap="22" align="top-left" border="0 0 1 0 $line">
            <text w="64" text-style="StepNum" value="04" color="$accent-blush" />
            <col w="fill" gap="8">
              <row gap="12" align="middle-left">
                <text text-style="StepTitle" value="Roll, fill and pleat" color="$ink" />
                <row p="4 9" radius="6" fill="$paper-2" align="middle-center">
                  <text text-style="TimeChip" value="12 MIN" color="$muted" />
                </row>
              </row>
              <text
                w="fill"
                text-style="StepBody"
                value="Roll the dough to a rough 13-inch round on parchment. Mound the fruit in the centre, leaving a 2-inch border, then fold and pleat the edge up over the filling, pressing each fold to seal."
                color="$ink-soft"
              />
            </col>
          </row>
          <!-- Step 05 -->
          <row w="fill" p="20 0" gap="22" align="top-left" border="0 0 1 0 $line">
            <text w="64" text-style="StepNum" value="05" color="$accent-blush" />
            <col w="fill" gap="8">
              <row gap="12" align="middle-left">
                <text text-style="StepTitle" value="Egg wash and sugar" color="$ink" />
                <row p="4 9" radius="6" fill="$paper-2" align="middle-center">
                  <text text-style="TimeChip" value="3 MIN" color="$muted" />
                </row>
              </row>
              <text
                w="fill"
                text-style="StepBody"
                value="Brush the pleated crust with beaten egg and scatter turbinado sugar over the folds. The wash sets to a deep amber and the coarse sugar gives the edge its bakery-window crackle."
                color="$ink-soft"
              />
            </col>
          </row>
          <!-- Step 06 -->
          <row w="fill" p="20 0" gap="22" align="top-left">
            <text w="64" text-style="StepNum" value="06" color="$accent-blush" />
            <col w="fill" gap="8">
              <row gap="12" align="middle-left">
                <text text-style="StepTitle" value="Bake until bubbling" color="$ink" />
                <row p="4 9" radius="6" fill="$accent-wash" align="middle-center">
                  <text text-style="TimeChip" value="40 MIN · 400°F" color="$accent-ink" />
                </row>
              </row>
              <text
                w="fill"
                text-style="StepBody"
                value="Bake at 400°F until the crust is bronzed and the fruit bubbles thickly at the centre. Cool on the sheet for 20 minutes so the juices set before you cut the first slice."
                color="$ink-soft"
              />
            </col>
          </row>
        </col>
      </col>
      <!-- ============ RIGHT RAIL (480) ============ -->
      <col w="480" gap="20" align="top-left">
        <!-- Recipe card -->
        <col w="fill" fill="$surface" border="2 $line-2" radius="$r-lg" p="28 32" gap="0" role="card">
          <!-- Servings stepper -->
          <row w="fill" gap="auto" align="middle-left">
            <col gap="3">
              <text text-style="CardLabel" value="SERVES" color="$muted" text-case="uppercase" />
              <text text-style="StepBig" value="8 slices" color="$ink" />
            </col>
            <row gap="0" radius="$r-pill" border="2 $line-2" fill="$paper" align="middle-center" role="stepper">
              <row w="42" h="40" align="middle-center" role="button">
                <img src="https://api.iconify.design/lucide/minus.svg?color=%2326201C" w="18" h="18" />
              </row>
              <text w="44" text-style="TimeVal" value="8" color="$ink" align="center" />
              <row w="42" h="40" radius="$r-pill" fill="$accent" align="middle-center" role="button">
                <img src="https://api.iconify.design/lucide/plus.svg?color=%23FFF5F7" w="18" h="18" />
              </row>
            </row>
          </row>
          <!-- Time breakdown -->
          <row w="fill" pt="22" gap="10" align="top-left">
            <col w="fill" fill="$paper" border="1 $line" radius="$r-md" p="14 12" gap="9" align="top-center">
              <img src="https://api.iconify.design/lucide/utensils.svg?color=%236E645C" w="18" h="18" />
              <text text-style="TimeVal" value="40m" color="$ink" />
              <text text-style="TimeUnit" value="PREP" color="$muted" text-case="uppercase" />
            </col>
            <col w="fill" fill="$paper" border="1 $line" radius="$r-md" p="14 12" gap="9" align="top-center">
              <img src="https://api.iconify.design/lucide/snowflake.svg?color=%236E645C" w="18" h="18" />
              <text text-style="TimeVal" value="45m" color="$ink" />
              <text text-style="TimeUnit" value="CHILL" color="$muted" text-case="uppercase" />
            </col>
            <col w="fill" fill="$paper" border="1 $line" radius="$r-md" p="14 12" gap="9" align="top-center">
              <img src="https://api.iconify.design/lucide/flame.svg?color=%236E645C" w="18" h="18" />
              <text text-style="TimeVal" value="40m" color="$ink" />
              <text text-style="TimeUnit" value="BAKE" color="$muted" text-case="uppercase" />
            </col>
          </row>
          <row w="fill" pt="12" gap="auto" align="middle-left">
            <text text-style="CardLabel" value="TOTAL TIME" color="$muted" text-case="uppercase" />
            <text text-style="TimeVal" value="2 hr 5 min" color="$accent-ink" />
          </row>
          <!-- Divider -->
          <row w="fill" pt="22">
            <rect w="fill" h="1" fill="$line" />
          </row>
          <!-- Ingredients -->
          <row w="fill" pt="22" gap="auto" align="middle-left">
            <text text-style="SectionKicker" value="INGREDIENTS" color="$ink" text-case="uppercase" />
            <text text-style="Meta" value="12 items" color="$muted" />
          </row>
          <text
            pt="18"
            text-style="GroupLabel"
            value="FOR THE DOUGH"
            color="$accent-ink"
            text-case="uppercase"
          />
          <col w="fill" pt="10" gap="0">
            <row w="fill" p="9 0" gap="14" align="middle-left" border="0 0 1 0 $line">
              <text w="86" text-style="IngQty" value="1¼ cups" color="$accent-deep" />
              <text w="fill" text-style="IngName" value="all-purpose flour" color="$ink" />
            </row>
            <row w="fill" p="9 0" gap="14" align="middle-left" border="0 0 1 0 $line">
              <text w="86" text-style="IngQty" value="2 tbsp" color="$accent-deep" />
              <text w="fill" text-style="IngName" value="granulated sugar" color="$ink" />
            </row>
            <row w="fill" p="9 0" gap="14" align="middle-left" border="0 0 1 0 $line">
              <text w="86" text-style="IngQty" value="½ tsp" color="$accent-deep" />
              <text w="fill" text-style="IngName" value="fine sea salt" color="$ink" />
            </row>
            <row w="fill" p="9 0" gap="14" align="middle-left" border="0 0 1 0 $line">
              <text w="86" text-style="IngQty" value="9 tbsp" color="$accent-deep" />
              <text w="fill" text-style="IngName" value="cold unsalted butter, cubed" color="$ink" />
            </row>
            <row w="fill" p="9 0" gap="14" align="middle-left">
              <text w="86" text-style="IngQty" value="5 tbsp" color="$accent-deep" />
              <text w="fill" text-style="IngName" value="ice water" color="$ink" />
            </row>
          </col>
          <text
            pt="20"
            text-style="GroupLabel"
            value="FOR THE FILLING"
            color="$accent-ink"
            text-case="uppercase"
          />
          <col w="fill" pt="10" gap="0">
            <row w="fill" p="9 0" gap="14" align="middle-left" border="0 0 1 0 $line">
              <text w="86" text-style="IngQty" value="2 cups" color="$accent-deep" />
              <text w="fill" text-style="IngName" value="rhubarb, sliced ½ in" color="$ink" />
            </row>
            <row w="fill" p="9 0" gap="14" align="middle-left" border="0 0 1 0 $line">
              <text w="86" text-style="IngQty" value="1½ cups" color="$accent-deep" />
              <text w="fill" text-style="IngName" value="fresh raspberries" color="$ink" />
            </row>
            <row w="fill" p="9 0" gap="14" align="middle-left" border="0 0 1 0 $line">
              <text w="86" text-style="IngQty" value="⅓ cup" color="$accent-deep" />
              <text w="fill" text-style="IngName" value="granulated sugar" color="$ink" />
            </row>
            <row w="fill" p="9 0" gap="14" align="middle-left" border="0 0 1 0 $line">
              <text w="86" text-style="IngQty" value="2 tbsp" color="$accent-deep" />
              <text w="fill" text-style="IngName" value="cornstarch" color="$ink" />
            </row>
            <row w="fill" p="9 0" gap="14" align="middle-left">
              <text w="86" text-style="IngQty" value="1 tsp" color="$accent-deep" />
              <text w="fill" text-style="IngName" value="lemon zest" color="$ink" />
            </row>
          </col>
          <text pt="20" text-style="GroupLabel" value="TO FINISH" color="$accent-ink" text-case="uppercase" />
          <col w="fill" pt="10" gap="0">
            <row w="fill" p="9 0" gap="14" align="middle-left" border="0 0 1 0 $line">
              <text w="86" text-style="IngQty" value="1 large" color="$accent-deep" />
              <text w="fill" text-style="IngName" value="egg, beaten (for wash)" color="$ink" />
            </row>
            <row w="fill" p="9 0" gap="14" align="middle-left">
              <text w="86" text-style="IngQty" value="1 tbsp" color="$accent-deep" />
              <text w="fill" text-style="IngName" value="turbinado sugar" color="$ink" />
            </row>
          </col>
        </col>
        <!-- Nutrition card -->
        <col w="fill" fill="$accent-deep" radius="$r-lg" p="26 32" gap="0" role="card">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="SectionKicker" value="NUTRITION" color="$accent-blush" text-case="uppercase" />
            <text text-style="Meta" value="per slice · makes 8" color="#E6B9C6" />
          </row>
          <row w="fill" pt="12" gap="8" align="bottom-left">
            <text text-style="Cal" value="339" color="$oncta" />
            <text text-style="CalUnit" value="kcal" color="#E6B9C6" pb="6" />
          </row>
          <!-- Stacked macro bar: carbs(fill=226) + fat(166) + protein(24) = 416 -->
          <col w="fill" pt="16">
            <row w="fill" h="14" radius="$r-pill" clip="true" align="middle-left">
              <rect w="fill" h="14" fill="$accent" />
              <rect w="166" h="14" fill="$accent-mid" />
              <rect w="24" h="14" fill="$accent-blush" />
            </row>
          </col>
          <!-- Legend -->
          <col w="fill" pt="18" gap="12">
            <row w="fill" gap="auto" align="middle-left">
              <row gap="9" align="middle-center">
                <ellipse w="10" h="10" fill="$accent" />
                <text text-style="LegendName" value="Carbohydrate" color="$oncta" />
              </row>
              <row gap="10" align="middle-right">
                <text text-style="LegendVal" value="46 g" color="$oncta" />
                <text w="42" text-style="LegendVal" value="54%" color="#E6B9C6" align="right" />
              </row>
            </row>
            <row w="fill" gap="auto" align="middle-left">
              <row gap="9" align="middle-center">
                <ellipse w="10" h="10" fill="$accent-mid" />
                <text text-style="LegendName" value="Fat" color="$oncta" />
              </row>
              <row gap="10" align="middle-right">
                <text text-style="LegendVal" value="15 g" color="$oncta" />
                <text w="42" text-style="LegendVal" value="40%" color="#E6B9C6" align="right" />
              </row>
            </row>
            <row w="fill" gap="auto" align="middle-left">
              <row gap="9" align="middle-center">
                <ellipse w="10" h="10" fill="$accent-blush" />
                <text text-style="LegendName" value="Protein" color="$oncta" />
              </row>
              <row gap="10" align="middle-right">
                <text text-style="LegendVal" value="5 g" color="$oncta" />
                <text w="42" text-style="LegendVal" value="6%" color="#E6B9C6" align="right" />
              </row>
            </row>
          </col>
        </col>
        <!-- Actions -->
        <col w="fill" gap="12">
          <row w="fill" h="54" radius="$r-md" fill="$accent" gap="10" align="middle-center" role="button">
            <img src="https://api.iconify.design/lucide/chef-hat.svg?color=%23FFF5F7" w="19" h="19" />
            <text text-style="BtnLabel" value="Start Cooking" color="$oncta" />
          </row>
          <row
            w="fill"
            h="50"
            radius="$r-md"
            fill="$surface"
            border="2 $line-2"
            gap="10"
            align="middle-center"
            role="button"
          >
            <img src="https://api.iconify.design/lucide/list-plus.svg?color=%23A2113E" w="18" h="18" />
            <text text-style="Btn2Label" value="Add 12 items to shopping list" color="$accent-ink" />
          </row>
        </col>
      </col>
    </row>
  </col>
</gui>
```