---
title: "Coppertine · Smoky Paprika Chicken Traybake"
platform: web
slug: coppertine-smoky-paprika-chicken-traybake
screens: []
domains: ["food-delivery"]
style: "flat"
fonts: ["Bricolage Grotesque", "Hanken Grotesk", "Space Mono"]
roles: ["top-navigation-bar", "navigation-menu", "search-bar", "badge", "avatar", "breadcrumb", "toolbar", "card", "stepper", "button"]
score: {clean: 100, consistent: 80, accessible: 90, comprehensible: 25}
url: https://gui.farm/web/coppertine-smoky-paprika-chicken-traybake
raw: https://gui.farm/web/coppertine-smoky-paprika-chicken-traybake/design.guix
download: https://gui.farm/web/coppertine-smoky-paprika-chicken-traybake.gui
---

# Coppertine · Smoky Paprika Chicken Traybake

A flat, light web recipe card for a meal-kit service where a home cook follows this week's delivered kit: a paprika chicken and chickpea traybake, with a photo hero, prep/cook/total meta, six numbered method steps, an in-your-box ingredient list, and per-serving nutrition.

- **Live preview:** https://gui.farm/web/coppertine-smoky-paprika-chicken-traybake
- **Raw source:** https://gui.farm/web/coppertine-smoky-paprika-chicken-traybake/design.guix
- **Download (.gui):** https://gui.farm/web/coppertine-smoky-paprika-chicken-traybake.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Coppertine · Smoky Paprika Chicken Traybake">
  <tokens>
    <color name="paper" value="#F5F3F0" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-2" value="#EEEAE5" />
    <color name="ink" value="#1A1613" />
    <color name="body" value="#453F38" />
    <color name="muted" value="#5A544C" />
    <color name="faint" value="#6E6860" />
    <color name="line" value="#E6E1DB" />
    <color name="line-strong" value="#D7D1C8" />
    <color name="paprika" value="#C43A22" />
    <color name="paprika-strong" value="#A32B16" />
    <color name="paprika-ink" value="#8A2413" />
    <color name="paprika-tint" value="#FBE6DF" />
    <color name="on-accent" value="#FFFFFF" />
    <color name="hero-ink" value="#FDF8F3" />
    <color name="hero-sub" value="#EBDACB" />
    <number name="r-sm" value="6" />
    <number name="r-md" value="10" />
    <number name="r-lg" value="16" />
    <number name="r-pill" value="999" />
  </tokens>

  <fonts>
    <font family="Bricolage Grotesque" source="google" weights="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="20" font-weight="800" line-height="24" letter-spacing="-0.3" />
    <text-style name="Nav" font-family="Hanken Grotesk" font-size="14" font-weight="500" line-height="18" />
    <text-style name="NavOn" font-family="Hanken Grotesk" font-size="14" font-weight="700" line-height="18" />
    <text-style name="Tag" font-family="Space Mono" font-size="10" font-weight="700" line-height="12" letter-spacing="0.5" />
    <text-style name="Crumb" font-family="Hanken Grotesk" font-size="13" font-weight="500" line-height="16" />
    <text-style name="Eyebrow" font-family="Hanken Grotesk" font-size="12" font-weight="700" line-height="15" letter-spacing="1.4" />
    <text-style name="H1" font-family="Bricolage Grotesque" font-size="40" font-weight="800" line-height="44" letter-spacing="-0.6" />
    <text-style name="HeroSub" font-family="Hanken Grotesk" font-size="16" font-weight="500" line-height="23" />
    <text-style name="Byline" font-family="Hanken Grotesk" font-size="13" font-weight="600" line-height="17" />
    <text-style name="AvaInit" font-family="Hanken Grotesk" font-size="12" font-weight="700" line-height="15" />
    <text-style name="Rating" font-family="Space Mono" font-size="13" font-weight="700" line-height="16" />
    <text-style name="MetaLabel" font-family="Hanken Grotesk" font-size="11" font-weight="600" line-height="14" letter-spacing="0.6" />
    <text-style name="MetaVal" font-family="Bricolage Grotesque" font-size="18" font-weight="700" line-height="22" />
    <text-style name="Sect" font-family="Bricolage Grotesque" font-size="24" font-weight="800" line-height="28" letter-spacing="-0.3" />
    <text-style name="SectNote" font-family="Hanken Grotesk" font-size="13" font-weight="500" line-height="17" />
    <text-style name="Chip" font-family="Hanken Grotesk" font-size="12" font-weight="600" line-height="15" />
    <text-style name="StepNum" font-family="Bricolage Grotesque" font-size="19" font-weight="800" line-height="22" />
    <text-style name="StepTitle" font-family="Hanken Grotesk" font-size="16" font-weight="700" line-height="20" />
    <text-style name="StepBody" font-family="Hanken Grotesk" font-size="14" font-weight="400" line-height="21" />
    <text-style name="TimeChip" font-family="Space Mono" font-size="11" font-weight="700" line-height="13" letter-spacing="0.3" />
    <text-style name="TipLabel" font-family="Hanken Grotesk" font-size="12" font-weight="700" line-height="15" letter-spacing="0.8" />
    <text-style name="TipBody" font-family="Hanken Grotesk" font-size="14" font-weight="500" line-height="20" />
    <text-style name="CardTitle" font-family="Bricolage Grotesque" font-size="17" font-weight="700" line-height="21" />
    <text-style name="Amount" font-family="Space Mono" font-size="13" font-weight="700" line-height="16" />
    <text-style name="IngName" font-family="Hanken Grotesk" font-size="14" font-weight="500" line-height="18" />
    <text-style name="IngSub" font-family="Hanken Grotesk" font-size="11" font-weight="500" line-height="14" />
    <text-style name="Small" font-family="Hanken Grotesk" font-size="12" font-weight="500" line-height="15" />
    <text-style name="Tiny" font-family="Hanken Grotesk" font-size="11" font-weight="600" line-height="14" />
    <text-style name="Stepper" font-family="Bricolage Grotesque" font-size="15" font-weight="700" line-height="18" />
    <text-style name="KcalBig" font-family="Bricolage Grotesque" font-size="30" font-weight="800" line-height="32" letter-spacing="-0.5" />
    <text-style name="MacroLabel" font-family="Hanken Grotesk" font-size="13" font-weight="600" line-height="16" />
    <text-style name="MacroVal" font-family="Space Mono" font-size="12" font-weight="700" line-height="15" />
    <text-style name="BtnLabel" font-family="Hanken Grotesk" font-size="15" font-weight="700" line-height="18" />
    <text-style name="BtnLabelSm" font-family="Hanken Grotesk" font-size="13" font-weight="600" line-height="16" />
    <text-style name="Foot" font-family="Hanken Grotesk" font-size="12" font-weight="500" line-height="16" />
  </styles>

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

    <!-- ===================== TOP NAV ===================== -->
    <row w="1440" h="64" p="0 120" gap="24" align="middle-left" fill="$surface" border="0 0 1 0 $line" role="top-navigation-bar">
      <row gap="11" align="middle-center">
        <row w="30" h="30" radius="$r-sm" fill="$paprika" align="middle-center">
          <img src="https://api.iconify.design/lucide/utensils-crossed.svg?color=%23FFFFFF" w="17" h="17" />
        </row>
        <text text-style="Wordmark" value="Coppertine" color="$ink" />
        <row p="3 7" radius="$r-sm" fill="$surface-2" align="middle-center">
          <text text-style="Tag" value="MEAL KITS" color="$muted" />
        </row>
      </row>
      <row gap="22" align="middle-left" role="navigation-menu">
        <text text-style="NavOn" value="This Week" color="$ink" />
        <text text-style="Nav" value="Recipes" color="$muted" />
        <text text-style="Nav" value="Your Box" color="$muted" />
        <text text-style="Nav" value="Gifts" color="$muted" />
      </row>
      <row w="fill" gap="12" align="middle-right">
        <row w="230" p="8 12" gap="9" radius="$r-md" fill="$paper" border="1 $line" align="middle-left" role="search-bar">
          <img src="https://api.iconify.design/lucide/search.svg?color=%238A847B" w="15" h="15" />
          <text w="fill" text-style="Small" value="Search this week's menu" color="$faint" />
        </row>
        <row p="8 12" gap="7" radius="$r-md" fill="$paprika-tint" align="middle-center" role="badge">
          <img src="https://api.iconify.design/lucide/calendar.svg?color=%238A2413" w="14" h="14" />
          <text text-style="BtnLabelSm" value="Week of Aug 17" color="$paprika-ink" />
        </row>
        <row w="34" h="34" radius="$r-pill" fill="$ink" align="middle-center" role="avatar">
          <text text-style="AvaInit" value="JC" color="$hero-ink" />
        </row>
      </row>
    </row>

    <!-- ===================== CONTENT ===================== -->
    <col w="1200" p="26 0 60 0" gap="26" align="top-left">

      <!-- breadcrumb -->
      <row w="1200" align="middle-left" gap="8" role="breadcrumb">
        <text text-style="Crumb" value="This Week's Kit" color="$faint" />
        <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%23A69E93" w="14" h="14" />
        <text text-style="Crumb" value="Mains" color="$faint" />
        <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%23A69E93" w="14" h="14" />
        <text text-style="Crumb" value="Smoky Paprika Chicken Traybake" color="$muted" />
        <text w="fill" text-style="Crumb" value="Recipe 14 of 22" color="$faint" align="right" />
      </row>

      <!-- HERO -->
      <frame w="1200" h="440" radius="$r-lg" clip="true">
        <img x="0" y="0" w="1200" h="440" fit="cover" src="https://images.unsplash.com/photo-1775039983787-3fe9b416c545?auto=format&amp;fit=crop&amp;w=1600&amp;q=80" />
        <rect x="0" y="0" w="1200" h="440" fill="linear-gradient(102deg, #14100Cf7 0%, #14100Cdb 38%, #14100C70 66%, #14100C1a 100%)" />
        <rect x="0" y="0" w="1200" h="440" fill="linear-gradient(180deg, #14100C00 40%, #14100C33 72%, #14100Ccc 100%)" />
        <col x="48" y="46" w="150" gap="0" align="top-left">
          <row p="6 11" radius="$r-pill" fill="$paprika" align="middle-center" gap="7">
            <img src="https://api.iconify.design/lucide/flame.svg?color=%23FFFFFF" w="14" h="14" />
            <text text-style="Tiny" value="45-MINUTE MEAL" color="$on-accent" />
          </row>
        </col>
        <col x="48" y="238" w="720" gap="16" align="top-left">
          <text text-style="Eyebrow" value="SERVES 4 · ONE SHEET PAN" color="$hero-sub" text-case="uppercase" />
          <text w="720" text-style="H1" value="Smoky Paprika Chicken &amp; Chickpea Traybake" color="$hero-ink" />
          <text w="620" text-style="HeroSub" value="Bone-in thighs roasted over smoked paprika and chickpeas with charred red peppers, finished with a bright lemon-garlic yogurt." color="$hero-sub" />
          <row gap="14" align="middle-left" p="4 0 0 0">
            <row gap="9" align="middle-center">
              <row w="30" h="30" radius="$r-pill" fill="$paprika" align="middle-center" role="avatar">
                <text text-style="AvaInit" value="NO" color="$on-accent" />
              </row>
              <text text-style="Byline" value="Recipe by Nadia Okonkwo" color="$hero-ink" />
            </row>
            <rect w="1" h="16" fill="#FFFFFF3d" />
            <row gap="4" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F0A83C" w="17" h="17" />
              <text text-style="Rating" value="4.8" color="$hero-ink" />
              <text text-style="Small" value="(1,240 cooks)" color="$hero-sub" />
            </row>
          </row>
        </col>
      </frame>

      <!-- META STRIP -->
      <row w="1200" h="76" fill="$surface" border="1 $line" radius="$r-md" align="middle-left" role="toolbar">
        <col w="fill" h="76" p="0 24" gap="5" align="middle-left">
          <text text-style="MetaLabel" value="PREP" color="$faint" />
          <text text-style="MetaVal" value="15 min" color="$ink" />
        </col>
        <rect w="1" h="44" fill="$line" />
        <col w="fill" h="76" p="0 24" gap="5" align="middle-left">
          <text text-style="MetaLabel" value="COOK" color="$faint" />
          <text text-style="MetaVal" value="30 min" color="$ink" />
        </col>
        <rect w="1" h="44" fill="$line" />
        <col w="fill" h="76" p="0 24" gap="5" align="middle-left">
          <text text-style="MetaLabel" value="TOTAL" color="$faint" />
          <text text-style="MetaVal" value="45 min" color="$paprika-strong" />
        </col>
        <rect w="1" h="44" fill="$line" />
        <col w="fill" h="76" p="0 24" gap="5" align="middle-left">
          <text text-style="MetaLabel" value="PER SERVING" color="$faint" />
          <text text-style="MetaVal" value="620 kcal" color="$ink" />
        </col>
        <rect w="1" h="44" fill="$line" />
        <col w="fill" h="76" p="0 24" gap="5" align="middle-left">
          <text text-style="MetaLabel" value="DIFFICULTY" color="$faint" />
          <text text-style="MetaVal" value="Easy" color="$ink" />
        </col>
        <rect w="1" h="44" fill="$line" />
        <col w="fill" h="76" p="0 24" gap="6" align="middle-left">
          <text text-style="MetaLabel" value="SPICE" color="$faint" />
          <row gap="4" align="middle-left">
            <rect w="16" h="7" radius="3" fill="$paprika" />
            <rect w="16" h="7" radius="3" fill="$paprika" />
            <rect w="16" h="7" radius="3" fill="$paprika" />
            <rect w="16" h="7" radius="3" fill="$surface-2" />
            <rect w="16" h="7" radius="3" fill="$surface-2" />
          </row>
        </col>
      </row>

      <!-- BODY SPLIT -->
      <row w="1200" gap="40" align="top-left">

        <!-- MAIN COLUMN -->
        <col w="720" gap="22" align="top-left">

          <col w="720" gap="4" align="top-left">
            <text text-style="Sect" value="Method" color="$ink" />
            <text text-style="SectNote" value="Six steps, mostly hands-off while the oven does the work." color="$muted" />
          </col>

          <!-- utensils -->
          <row w="720" gap="10" align="middle-left">
            <text text-style="Tiny" value="YOU'LL NEED" color="$faint" />
            <row p="6 11" radius="$r-pill" fill="$surface" border="1 $line-strong" align="middle-center"><text text-style="Chip" value="Sheet pan" color="$body" /></row>
            <row p="6 11" radius="$r-pill" fill="$surface" border="1 $line-strong" align="middle-center"><text text-style="Chip" value="Mixing bowl" color="$body" /></row>
            <row p="6 11" radius="$r-pill" fill="$surface" border="1 $line-strong" align="middle-center"><text text-style="Chip" value="Microplane" color="$body" /></row>
            <row p="6 11" radius="$r-pill" fill="$surface" border="1 $line-strong" align="middle-center"><text text-style="Chip" value="Tongs" color="$body" /></row>
          </row>

          <!-- STEP 1 -->
          <row w="720" gap="16" align="top-left">
            <col w="44" h="44" radius="$r-md" fill="$paprika" align="middle-center"><text text-style="StepNum" value="1" color="$on-accent" /></col>
            <col w="660" gap="6" align="top-left">
              <row w="660" align="middle-left" gap="10">
                <text w="fill" text-style="StepTitle" value="Heat the oven &amp; season" color="$ink" />
                <row p="4 8" radius="$r-sm" fill="$surface-2" align="middle-center" gap="5">
                  <img src="https://api.iconify.design/lucide/timer.svg?color=%236E6860" w="12" h="12" />
                  <text text-style="TimeChip" value="5 MIN" color="$muted" />
                </row>
              </row>
              <text w="660" text-style="StepBody" value="Heat the oven to 220°C (fan 200°C). Pat the 640 g of chicken thighs dry and season all over with salt and black pepper." color="$body" />
            </col>
          </row>
          <rect w="720" h="1" fill="$line" />

          <!-- STEP 2 -->
          <row w="720" gap="16" align="top-left">
            <col w="44" h="44" radius="$r-md" fill="$paprika" align="middle-center"><text text-style="StepNum" value="2" color="$on-accent" /></col>
            <col w="660" gap="6" align="top-left">
              <row w="660" align="middle-left" gap="10">
                <text w="fill" text-style="StepTitle" value="Mix the paprika oil" color="$ink" />
                <row p="4 8" radius="$r-sm" fill="$surface-2" align="middle-center" gap="5">
                  <img src="https://api.iconify.design/lucide/timer.svg?color=%236E6860" w="12" h="12" />
                  <text text-style="TimeChip" value="3 MIN" color="$muted" />
                </row>
              </row>
              <text w="660" text-style="StepBody" value="Stir the smoked paprika sachet, 3 crushed garlic cloves and 3 tbsp olive oil into a loose paste. Keep a spoonful back for the peppers." color="$body" />
            </col>
          </row>
          <rect w="720" h="1" fill="$line" />

          <!-- STEP 3 -->
          <row w="720" gap="16" align="top-left">
            <col w="44" h="44" radius="$r-md" fill="$paprika" align="middle-center"><text text-style="StepNum" value="3" color="$on-accent" /></col>
            <col w="660" gap="6" align="top-left">
              <row w="660" align="middle-left" gap="10">
                <text w="fill" text-style="StepTitle" value="Load the sheet pan" color="$ink" />
                <row p="4 8" radius="$r-sm" fill="$surface-2" align="middle-center" gap="5">
                  <img src="https://api.iconify.design/lucide/timer.svg?color=%236E6860" w="12" h="12" />
                  <text text-style="TimeChip" value="4 MIN" color="$muted" />
                </row>
              </row>
              <text w="660" text-style="StepBody" value="Tip the drained chickpeas and 2 sliced red peppers onto the pan, toss with the reserved oil, then nestle the thighs on top, skin side up, and brush with the paste." color="$body" />
            </col>
          </row>
          <rect w="720" h="1" fill="$line" />

          <!-- STEP 4 -->
          <row w="720" gap="16" align="top-left">
            <col w="44" h="44" radius="$r-md" fill="$paprika" align="middle-center"><text text-style="StepNum" value="4" color="$on-accent" /></col>
            <col w="660" gap="6" align="top-left">
              <row w="660" align="middle-left" gap="10">
                <text w="fill" text-style="StepTitle" value="Roast until crisp" color="$ink" />
                <row p="4 8" radius="$r-sm" fill="$paprika-tint" align="middle-center" gap="5">
                  <img src="https://api.iconify.design/lucide/timer.svg?color=%238A2413" w="12" h="12" />
                  <text text-style="TimeChip" value="30 MIN" color="$paprika-ink" />
                </row>
              </row>
              <text w="660" text-style="StepBody" value="Roast for 30 minutes, until the skin is deep golden and the thickest thigh reads 74°C. The chickpeas will crisp at the edges." color="$body" />
            </col>
          </row>
          <rect w="720" h="1" fill="$line" />

          <!-- STEP 5 -->
          <row w="720" gap="16" align="top-left">
            <col w="44" h="44" radius="$r-md" fill="$paprika" align="middle-center"><text text-style="StepNum" value="5" color="$on-accent" /></col>
            <col w="660" gap="6" align="top-left">
              <row w="660" align="middle-left" gap="10">
                <text w="fill" text-style="StepTitle" value="Whisk the yogurt drizzle" color="$ink" />
                <row p="4 8" radius="$r-sm" fill="$surface-2" align="middle-center" gap="5">
                  <img src="https://api.iconify.design/lucide/timer.svg?color=%236E6860" w="12" h="12" />
                  <text text-style="TimeChip" value="3 MIN" color="$muted" />
                </row>
              </row>
              <text w="660" text-style="StepBody" value="While it roasts, stir the 150 g Greek yogurt with the zest of the lemon, one grated garlic clove and a pinch of salt. Loosen with a splash of water." color="$body" />
            </col>
          </row>
          <rect w="720" h="1" fill="$line" />

          <!-- STEP 6 -->
          <row w="720" gap="16" align="top-left">
            <col w="44" h="44" radius="$r-md" fill="$paprika" align="middle-center"><text text-style="StepNum" value="6" color="$on-accent" /></col>
            <col w="660" gap="6" align="top-left">
              <row w="660" align="middle-left" gap="10">
                <text w="fill" text-style="StepTitle" value="Finish &amp; serve" color="$ink" />
                <row p="4 8" radius="$r-sm" fill="$surface-2" align="middle-center" gap="5">
                  <img src="https://api.iconify.design/lucide/timer.svg?color=%236E6860" w="12" h="12" />
                  <text text-style="TimeChip" value="2 MIN" color="$muted" />
                </row>
              </row>
              <text w="660" text-style="StepBody" value="Scatter with torn parsley, spoon the yogurt over the top, and serve straight from the pan with lemon wedges." color="$body" />
            </col>
          </row>

          <!-- CHEF TIP -->
          <col w="720" fill="$paprika-tint" radius="$r-md" p="16 20" gap="7" align="top-left">
            <row gap="8" align="middle-left">
              <img src="https://api.iconify.design/lucide/lightbulb.svg?color=%238A2413" w="16" h="16" />
              <text text-style="TipLabel" value="NADIA'S TIP" color="$paprika-ink" text-case="uppercase" />
            </row>
            <text w="680" text-style="TipBody" value="No thermometer? Pierce a thigh at the bone; the juices should run clear, not pink. Give it five more minutes if in doubt, the chickpeas only get better." color="$paprika-ink" />
          </col>

        </col>

        <!-- SIDEBAR -->
        <col w="440" gap="20" align="top-left">

          <!-- IN YOUR BOX -->
          <col w="440" fill="$surface" border="1 $line" radius="$r-lg" p="20 22 22 22" gap="14" align="top-left" role="card">
            <row w="396" align="middle-left" gap="10">
              <col w="fill" gap="3" align="top-left">
                <text text-style="CardTitle" value="In your box" color="$ink" />
                <text text-style="IngSub" value="6 chilled items · packed for 4" color="$faint" />
              </col>
              <row h="34" radius="$r-md" fill="$paper" border="1 $line-strong" p="3" gap="2" align="middle-center" role="stepper">
                <row w="28" h="28" radius="$r-sm" fill="$surface" border="1 $line" align="middle-center"><img src="https://api.iconify.design/lucide/minus.svg?color=%235A544C" w="15" h="15" /></row>
                <col w="34" align="middle-center"><text text-style="Stepper" value="4" color="$ink" align="center" /></col>
                <row w="28" h="28" radius="$r-sm" fill="$paprika" align="middle-center"><img src="https://api.iconify.design/lucide/plus.svg?color=%23FFFFFF" w="15" h="15" /></row>
              </row>
            </row>

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

            <col w="396" gap="0" align="top-left">
              <row w="396" p="0 0 11 0" gap="12" align="middle-left" border="0 0 1 0 $line">
                <text w="72" text-style="Amount" value="640 g" color="$paprika-strong" />
                <col w="fill" gap="1" align="top-left">
                  <text text-style="IngName" value="Bone-in chicken thighs" color="$ink" />
                  <text text-style="IngSub" value="160 g per serving" color="$faint" />
                </col>
                <row w="20" h="20" radius="$r-pill" fill="$paprika-tint" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%238A2413" w="12" h="12" /></row>
              </row>
              <row w="396" p="11 0" gap="12" align="middle-left" border="0 0 1 0 $line">
                <text w="72" text-style="Amount" value="400 g" color="$paprika-strong" />
                <text w="fill" text-style="IngName" value="Chickpeas, drained" color="$ink" />
                <row w="20" h="20" radius="$r-pill" fill="$paprika-tint" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%238A2413" w="12" h="12" /></row>
              </row>
              <row w="396" p="11 0" gap="12" align="middle-left" border="0 0 1 0 $line">
                <text w="72" text-style="Amount" value="2" color="$paprika-strong" />
                <text w="fill" text-style="IngName" value="Red peppers" color="$ink" />
                <row w="20" h="20" radius="$r-pill" fill="$paprika-tint" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%238A2413" w="12" h="12" /></row>
              </row>
              <row w="396" p="11 0" gap="12" align="middle-left" border="0 0 1 0 $line">
                <text w="72" text-style="Amount" value="150 g" color="$paprika-strong" />
                <text w="fill" text-style="IngName" value="Greek yogurt" color="$ink" />
                <row w="20" h="20" radius="$r-pill" fill="$paprika-tint" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%238A2413" w="12" h="12" /></row>
              </row>
              <row w="396" p="11 0" gap="12" align="middle-left" border="0 0 1 0 $line">
                <text w="72" text-style="Amount" value="3" color="$paprika-strong" />
                <text w="fill" text-style="IngName" value="Garlic cloves" color="$ink" />
                <row w="20" h="20" radius="$r-pill" fill="$paprika-tint" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%238A2413" w="12" h="12" /></row>
              </row>
              <row w="396" p="11 0 0 0" gap="12" align="middle-left">
                <text w="72" text-style="Amount" value="1" color="$paprika-strong" />
                <text w="fill" text-style="IngName" value="Lemon &amp; a bunch of parsley" color="$ink" />
                <row w="20" h="20" radius="$r-pill" fill="$paprika-tint" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%238A2413" w="12" h="12" /></row>
              </row>
            </col>

            <row w="396" p="12 14" fill="$paper" radius="$r-md" gap="8" align="middle-left">
              <img src="https://api.iconify.design/lucide/house.svg?color=%235A544C" w="15" h="15" />
              <text w="fill" text-style="Small" value="From your pantry: olive oil, salt &amp; pepper" color="$muted" />
            </row>
          </col>

          <!-- NUTRITION -->
          <col w="440" fill="$surface" border="1 $line" radius="$r-lg" p="20 22 22 22" gap="14" align="top-left" role="card">
            <row w="396" align="bottom-left" gap="10">
              <col w="fill" gap="2" align="top-left">
                <text text-style="CardTitle" value="Nutrition" color="$ink" />
                <text text-style="IngSub" value="Per serving · % of daily value" color="$faint" />
              </col>
              <col align="bottom-right" gap="0">
                <text text-style="KcalBig" value="620" color="$paprika-strong" align="right" />
                <text text-style="Tiny" value="KCAL" color="$faint" align="right" />
              </col>
            </row>

            <col w="356" gap="7" align="top-left">
              <row w="fill" align="middle-left" gap="auto">
                <text text-style="MacroLabel" value="Protein" color="$ink" />
                <text text-style="MacroVal" value="44 g · 88%" color="$muted" />
              </row>
              <row w="356" h="8" radius="$r-pill" fill="$surface-2" align="middle-left">
                <rect w="313" h="8" radius="$r-pill" fill="$paprika" />
              </row>
            </col>
            <col w="356" gap="7" align="top-left">
              <row w="fill" align="middle-left" gap="auto">
                <text text-style="MacroLabel" value="Carbs" color="$ink" />
                <text text-style="MacroVal" value="50 g · 18%" color="$muted" />
              </row>
              <row w="356" h="8" radius="$r-pill" fill="$surface-2" align="middle-left">
                <rect w="65" h="8" radius="$r-pill" fill="$paprika" />
              </row>
            </col>
            <col w="356" gap="7" align="top-left">
              <row w="fill" align="middle-left" gap="auto">
                <text text-style="MacroLabel" value="Fat" color="$ink" />
                <text text-style="MacroVal" value="27 g · 35%" color="$muted" />
              </row>
              <row w="356" h="8" radius="$r-pill" fill="$surface-2" align="middle-left">
                <rect w="123" h="8" radius="$r-pill" fill="$paprika" />
              </row>
            </col>
            <col w="356" gap="7" align="top-left">
              <row w="fill" align="middle-left" gap="auto">
                <text text-style="MacroLabel" value="Fibre" color="$ink" />
                <text text-style="MacroVal" value="11 g · 39%" color="$muted" />
              </row>
              <row w="356" h="8" radius="$r-pill" fill="$surface-2" align="middle-left">
                <rect w="140" h="8" radius="$r-pill" fill="$paprika" />
              </row>
            </col>
          </col>

          <!-- ACTIONS -->
          <col w="440" gap="10" align="top-left">
            <row w="440" h="52" radius="$r-md" fill="$paprika" align="middle-center" gap="9" role="button">
              <img src="https://api.iconify.design/lucide/chef-hat.svg?color=%23FFFFFF" w="18" h="18" />
              <text text-style="BtnLabel" value="Start cook mode" color="$on-accent" />
            </row>
            <row w="440" gap="10" align="middle-left">
              <row w="215" h="46" radius="$r-md" fill="$surface" border="1 $line-strong" align="middle-center" gap="8" role="button">
                <img src="https://api.iconify.design/lucide/bookmark.svg?color=%23453F38" w="16" h="16" />
                <text text-style="BtnLabelSm" value="Save recipe" color="$body" />
              </row>
              <row w="215" h="46" radius="$r-md" fill="$surface" border="1 $line-strong" align="middle-center" gap="8" role="button">
                <img src="https://api.iconify.design/lucide/printer.svg?color=%23453F38" w="16" h="16" />
                <text text-style="BtnLabelSm" value="Print card" color="$body" />
              </row>
            </row>
          </col>

          <!-- RATE -->
          <col w="440" fill="$surface" border="1 $line" radius="$r-lg" p="16 22" gap="10" align="top-left" role="card">
            <text text-style="Tiny" value="MADE IT THIS WEEK?" color="$faint" text-case="uppercase" />
            <row w="fill" align="middle-left" gap="auto">
              <row gap="5" align="middle-left">
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23C43A22" w="26" h="26" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23C43A22" w="26" h="26" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23C43A22" w="26" h="26" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23C43A22" w="26" h="26" />
                <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23D7D1C8" w="26" h="26" />
              </row>
              <text text-style="Small" value="Rate this cook" color="$muted" align="right" />
            </row>
          </col>

        </col>
      </row>

      <!-- FOOTER -->
      <row w="1200" p="20 2 0 2" gap="16" align="middle-left" border="1 0 0 0 $line">
        <text w="fill" text-style="Foot" value="Coppertine   ·   Weeknight meal kits, delivered chilled   ·   Recipes updated every Monday" color="$muted" />
        <text text-style="Foot" value="Skip a week · Nutrition · Allergens" color="$faint" align="right" />
      </row>

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

```