---
title: "Skillet — Harissa Butter Chicken Traybake"
platform: android
slug: harissa-butter-chicken-traybake
screens: []
domains: ["food-delivery"]
style: "skeuomorphic"
fonts: ["Roboto"]
roles: ["checkbox", "card", "badge", "chip", "top-navigation-bar", "avatar", "divider", "segmented-control", "stepper", "button", "tab-bar"]
score: {clean: 100, consistent: 79, accessible: 94, comprehensible: 55}
url: https://gui.farm/android/harissa-butter-chicken-traybake
raw: https://gui.farm/android/harissa-butter-chicken-traybake/design.guix
download: https://gui.farm/android/harissa-butter-chicken-traybake.gui
---

# Skillet — Harissa Butter Chicken Traybake

A dark, tactile Android recipe screen for a weeknight meal-kit box: hero dish photo, a checkable ingredient list, a servings stepper, and numbered harissa butter chicken traybake method steps.

- **Live preview:** https://gui.farm/android/harissa-butter-chicken-traybake
- **Raw source:** https://gui.farm/android/harissa-butter-chicken-traybake/design.guix
- **Download (.gui):** https://gui.farm/android/harissa-butter-chicken-traybake.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Skillet — Harissa Butter Chicken Traybake">
  <tokens>
    <color name="bg" value="#14110E" />
    <color name="surface" value="#1F1B16" />
    <color name="surface-2" value="#2A241D" />
    <color name="surface-hi" value="#332B22" />
    <color name="ember" value="#C25A1C" />
    <color name="ember-bright" value="#E8752E" />
    <color name="ember-tint" value="#3A2418" />
    <color name="ember-text" value="#F0A15A" />
    <color name="on-ember" value="#FFF7F0" />
    <color name="text-primary" value="#F5EDE2" />
    <color name="text-secondary" value="#B9AE9E" />
    <color name="text-tertiary" value="#8F8677" />
    <color name="hair" value="#3A3229" />
    <color name="hair-hi" value="#4A4136" />
    <color name="ember-line" value="#4A2A18" />
    <number name="r-card" value="20" />
    <number name="r-chip" value="12" />
    <number name="r-field" value="14" />
    <number name="r-pill" value="999" />
    <number name="r-sm" value="10" />
    <number name="r-btn" value="16" />
  </tokens>

  <styles>
    <text-style name="StatusBar" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Kicker" font-family="Roboto" font-size="11" font-weight="700" line-height="16" letter-spacing="1.4" />
    <text-style name="Title" font-family="Roboto" font-size="26" font-weight="700" line-height="32" letter-spacing="-0.3" />
    <text-style name="Byline" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="Rating" font-family="Roboto" font-size="13" font-weight="700" line-height="16" />
    <text-style name="Sub" font-family="Roboto" font-size="13" font-weight="400" line-height="18" />
    <text-style name="SecHead" font-family="Roboto" font-size="18" font-weight="700" line-height="24" />
    <text-style name="Seg" font-family="Roboto" font-size="14" font-weight="600" line-height="20" />
    <text-style name="Body" font-family="Roboto" font-size="15" font-weight="400" line-height="22" />
    <text-style name="Amt" font-family="Roboto" font-size="14" font-weight="600" line-height="20" />
    <text-style name="Step" font-family="Roboto" font-size="15" font-weight="400" line-height="22" />
    <text-style name="StepNum" font-family="Roboto" font-size="16" font-weight="700" line-height="20" />
    <text-style name="Micro" font-family="Roboto" font-size="12" font-weight="600" line-height="16" />
    <text-style name="StatVal" font-family="Roboto" font-size="15" font-weight="700" line-height="20" />
    <text-style name="StatLbl" font-family="Roboto" font-size="11" font-weight="500" line-height="14" letter-spacing="0.4" />
    <text-style name="Chip" font-family="Roboto" font-size="13" font-weight="600" line-height="16" />
    <text-style name="Nav" font-family="Roboto" font-size="11" font-weight="500" line-height="14" />
    <text-style name="BtnLabel" font-family="Roboto" font-size="15" font-weight="700" line-height="20" />
    <text-style name="Stepper" font-family="Roboto" font-size="14" font-weight="700" line-height="18" />
  </styles>

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

  <components>
    <!-- Ingredient row: tactile checkbox + name (fills) + amount right -->
    <component name="IngredientRow" id="comp-ing">
      <props>
        <prop name="nm"  type="text"    target="ing-name" />
        <prop name="amt" type="text"    target="ing-amt" />
        <prop name="chk" type="visible" target="ing-chk" />
      </props>
      <row w="fill" p="12 2" gap="14" align="middle-center">
        <frame role="checkbox" w="24" h="24" radius="7">
          <rect x="0" y="0" w="24" h="24" radius="7" fill="$surface-2" border="1.5 $hair-hi" />
          <frame id="ing-chk" x="0" y="0" w="24" h="24" radius="7">
            <appearance>
              <fill type="linear-gradient" value="linear-gradient(180deg, #B5541E 0%, #9B4413 100%)" />
              <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF40" />
            </appearance>
            <img x="4" y="4" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFF7F0" w="16" h="16" />
          </frame>
        </frame>
        <text id="ing-name" w="fill" text-style="Body" value="Bone-in chicken thighs" color="$text-primary" />
        <text id="ing-amt" text-style="Amt" value="8 pieces" color="$ember-text" align="right" />
      </row>
    </component>

    <!-- Numbered method step: ember number badge + instruction + optional timer chip -->
    <component name="StepCard" id="comp-step">
      <props>
        <prop name="num"   type="text"    target="st-num" />
        <prop name="body"  type="text"    target="st-body" />
        <prop name="tm"    type="text"    target="st-time" />
        <prop name="timer" type="visible" target="st-timer" />
      </props>
      <row role="card" w="fill" radius="$r-card" fill="$surface" p="16" gap="14" align="top-left" border="1 $hair">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #241F19 0%, #1B1712 100%)" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF12" />
          <effect type="drop-shadow" x="0" y="6" radius="16" spread="0" color="#00000059" />
        </appearance>
        <col role="badge" w="34" h="34" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #B5541E 0%, #9B4413 100%)" />
            <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF40" />
            <effect type="drop-shadow" x="0" y="3" radius="8" spread="0" color="#7A2E0A66" />
          </appearance>
          <text id="st-num" text-style="StepNum" value="1" color="$on-ember" />
        </col>
        <col w="fill" gap="10" align="top-left">
          <text id="st-body" w="fill" text-style="Step" value="Heat the oven and season the chicken." color="$text-primary" />
          <row id="st-timer" role="chip" h="26" radius="$r-chip" fill="$ember-tint" p="0 10" gap="6" align="middle-center" border="1 $ember-line">
            <img src="https://api.iconify.design/material-symbols/timer-outline-rounded.svg?color=%23F0A15A" w="14" h="14" />
            <text id="st-time" text-style="Micro" value="35 min" color="$ember-text" />
          </row>
        </col>
      </row>
    </component>

    <!-- Meta stat tile: one of four glyphs + value + label -->
    <component name="MetaStat" id="comp-meta">
      <props>
        <prop name="val" type="text"    target="m-val" />
        <prop name="lbl" type="text"    target="m-lbl" />
        <prop name="i1"  type="visible" target="m-i1" />
        <prop name="i2"  type="visible" target="m-i2" />
        <prop name="i3"  type="visible" target="m-i3" />
        <prop name="i4"  type="visible" target="m-i4" />
      </props>
      <col w="fill" h="80" radius="$r-chip" fill="$surface" align="middle-center" gap="5" border="1 $hair">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #241F19 0%, #1B1712 100%)" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF10" />
          <effect type="drop-shadow" x="0" y="4" radius="10" spread="0" color="#00000040" />
        </appearance>
        <frame w="20" h="20">
          <img id="m-i1" x="0" y="0" src="https://api.iconify.design/material-symbols/schedule-outline-rounded.svg?color=%23F0A15A" w="20" h="20" />
          <img id="m-i2" x="0" y="0" src="https://api.iconify.design/material-symbols/local-fire-department-outline-rounded.svg?color=%23F0A15A" w="20" h="20" />
          <img id="m-i3" x="0" y="0" src="https://api.iconify.design/material-symbols/group-outline-rounded.svg?color=%23F0A15A" w="20" h="20" />
          <img id="m-i4" x="0" y="0" src="https://api.iconify.design/material-symbols/bolt-rounded.svg?color=%23F0A15A" w="20" h="20" />
        </frame>
        <text id="m-val" text-style="StatVal" value="15 min" color="$text-primary" />
        <text id="m-lbl" text-style="StatLbl" value="Prep" color="$text-tertiary" text-case="uppercase" />
      </col>
    </component>

    <!-- Diet tag chip -->
    <component name="DietChip" id="comp-diet">
      <props>
        <prop name="lbl" type="text" target="d-lbl" />
      </props>
      <row role="chip" h="30" radius="$r-pill" fill="$ember-tint" p="0 12" gap="7" align="middle-center" border="1 $ember-line">
        <ellipse w="6" h="6" fill="$ember-bright" />
        <text id="d-lbl" text-style="Chip" value="Gluten-free" color="$ember-text" />
      </row>
    </component>

    <!-- Bottom-nav inactive item (one of three glyphs) -->
    <component name="NavItem" id="comp-nav">
      <props>
        <prop name="lbl" type="text"    target="n-lbl" />
        <prop name="ib"  type="visible" target="n-ib" />
        <prop name="it"  type="visible" target="n-it" />
        <prop name="ip"  type="visible" target="n-ip" />
      </props>
      <col w="fill" gap="5" align="top-center">
        <frame w="24" h="24">
          <img id="n-ib" x="0" y="0" src="https://api.iconify.design/material-symbols/menu-book-outline-rounded.svg?color=%238F8677" w="24" h="24" />
          <img id="n-it" x="0" y="0" src="https://api.iconify.design/material-symbols/timer-outline-rounded.svg?color=%238F8677" w="24" h="24" />
          <img id="n-ip" x="0" y="0" src="https://api.iconify.design/material-symbols/person-outline-rounded.svg?color=%238F8677" w="24" h="24" />
        </frame>
        <text id="n-lbl" text-style="Nav" value="Recipes" color="$text-tertiary" />
      </col>
    </component>
  </components>

  <col w="360" fill="$bg">

    <!-- status bar (device chrome, untagged) -->
    <row w="fill" h="24" p="0 16" gap="auto" align="middle-center" fill="$bg">
      <text text-style="StatusBar" value="9:41" color="$text-primary" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%23F5EDE2" w="16" h="16" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%23F5EDE2" w="16" h="16" />
        <img src="https://api.iconify.design/material-symbols/battery-full.svg?color=%23F5EDE2" w="16" h="16" />
      </row>
    </row>

    <!-- hero photo with overlaid nav + floating difficulty badge -->
    <frame w="360" h="284">
      <img x="0" y="0" src="https://images.unsplash.com/photo-1630564510846-09d14907db47?w=720&amp;h=568&amp;fit=crop&amp;q=80&amp;auto=format" w="360" h="284" fit="cover" />
      <rect x="0" y="188" w="360" h="96" fill="linear-gradient(180deg, #14110E00 0%, #14110ECC 78%, #14110E 100%)" />

      <!-- top navigation bar over hero -->
      <row role="top-navigation-bar" abs="true" x="0" y="0" w="fill" h="56" p="0 12" gap="auto" align="middle-center">
        <col w="40" h="40" radius="$r-pill" fill="#1F1B16D9" align="middle-center" border="1 #FFFFFF1A">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #2C2620E6 0%, #17130FE6 100%)" />
            <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF1F" />
            <effect type="drop-shadow" x="0" y="2" radius="6" spread="0" color="#00000066" />
          </appearance>
          <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23F5EDE2" w="24" h="24" />
        </col>
        <row gap="8" align="middle-center">
          <col w="40" h="40" radius="$r-pill" fill="#1F1B16D9" align="middle-center" border="1 #FFFFFF1A">
            <appearance>
              <fill type="linear-gradient" value="linear-gradient(180deg, #2C2620E6 0%, #17130FE6 100%)" />
              <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF1F" />
              <effect type="drop-shadow" x="0" y="2" radius="6" spread="0" color="#00000066" />
            </appearance>
            <img src="https://api.iconify.design/material-symbols/ios-share-rounded.svg?color=%23F5EDE2" w="22" h="22" />
          </col>
          <col w="40" h="40" radius="$r-pill" align="middle-center" border="1 #FFFFFF1A">
            <appearance>
              <fill type="linear-gradient" value="linear-gradient(180deg, #2C2620E6 0%, #17130FE6 100%)" />
              <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF1F" />
              <effect type="drop-shadow" x="0" y="2" radius="6" spread="0" color="#00000066" />
            </appearance>
            <img src="https://api.iconify.design/material-symbols/bookmark-rounded.svg?color=%23F0A15A" w="22" h="22" />
          </col>
        </row>
      </row>

      <!-- floating difficulty badge -->
      <row role="badge" abs="true" x="16" y="238" h="30" radius="$r-pill" fill="$ember-tint" p="0 12" gap="6" align="middle-center" border="1 $ember-line">
        <img src="https://api.iconify.design/material-symbols/local-fire-department-rounded.svg?color=%23F0A15A" w="16" h="16" />
        <text text-style="Chip" value="Medium · 45 min total" color="$ember-text" />
      </row>
    </frame>

    <!-- content sheet -->
    <col w="fill" p="20 20 0 20" gap="18">

      <!-- title block -->
      <col w="fill" gap="7" align="top-left">
        <text text-style="Kicker" value="WEEKNIGHT MEAL KIT" color="$ember-text" text-case="uppercase" />
        <text w="fill" text-style="Title" value="Harissa Butter Chicken Traybake" color="$text-primary" />
      </col>

      <!-- byline + rating -->
      <row w="fill" gap="auto" align="middle-center">
        <row gap="10" align="middle-center">
          <row role="avatar" w="34" h="34" radius="$r-pill" fill="$ember-tint" align="middle-center" border="1 $ember-line">
            <text text-style="Rating" value="NK" color="$ember-text" />
          </row>
          <text text-style="Byline" value="by Nadia Karim" color="$text-secondary" />
        </row>
        <row gap="5" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%23F0A15A" w="16" h="16" />
          <text text-style="Rating" value="4.8" color="$text-primary" />
          <text text-style="Sub" value="(326)" color="$text-tertiary" />
        </row>
      </row>

      <!-- diet chips -->
      <row w="fill" gap="8" align="middle-left">
        <instance component="comp-diet" lbl="Gluten-free" />
        <instance component="comp-diet" lbl="High-protein" />
        <instance component="comp-diet" lbl="One-pan" />
      </row>

      <!-- meta stats -->
      <row w="fill" gap="10" align="top-center">
        <instance component="comp-meta" val="15 min" lbl="Prep"     i1="true"  i2="false" i3="false" i4="false" />
        <instance component="comp-meta" val="35 min" lbl="Cook"     i1="false" i2="true"  i3="false" i4="false" />
        <instance component="comp-meta" val="4"      lbl="Serves"   i1="false" i2="false" i3="true"  i4="false" />
        <instance component="comp-meta" val="520"    lbl="Kcal"     i1="false" i2="false" i3="false" i4="true"  />
      </row>

      <line role="divider" fill="$hair" />

      <!-- section switch -->
      <row role="segmented-control" w="fill" h="46" radius="$r-pill" fill="$surface-2" p="4" gap="4" align="middle-center" border="1 $hair">
        <col w="fill" h="fill" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #B5541E 0%, #9B4413 100%)" />
            <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF40" />
            <effect type="drop-shadow" x="0" y="2" radius="6" spread="0" color="#7A2E0A59" />
          </appearance>
          <text text-style="Seg" value="Ingredients" color="$on-ember" />
        </col>
        <col w="fill" h="fill" radius="$r-pill" align="middle-center">
          <text text-style="Seg" value="Method" color="$text-secondary" />
        </col>
      </row>

      <!-- ingredients header + servings stepper -->
      <row w="fill" gap="auto" align="middle-center">
        <text text-style="SecHead" value="Ingredients" color="$text-primary" />
        <row role="stepper" h="36" radius="$r-pill" fill="$surface-2" p="0 4" gap="4" align="middle-center" border="1 $hair">
          <col w="28" h="28" radius="$r-pill" fill="$surface-hi" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%23F0A15A" w="18" h="18" />
          </col>
          <text w="64" text-style="Stepper" value="Serves 4" color="$text-primary" align="center" />
          <col w="28" h="28" radius="$r-pill" align="middle-center">
            <appearance>
              <fill type="linear-gradient" value="linear-gradient(180deg, #B5541E 0%, #9B4413 100%)" />
              <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF40" />
            </appearance>
            <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23FFF7F0" w="18" h="18" />
          </col>
        </row>
      </row>

      <!-- ingredient card -->
      <col role="card" w="fill" radius="$r-card" fill="$surface" p="6 16" border="1 $hair">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #221D17 0%, #1A1611 100%)" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF10" />
          <effect type="drop-shadow" x="0" y="6" radius="16" spread="0" color="#00000059" />
        </appearance>
        <instance component="comp-ing" nm="Bone-in chicken thighs"     amt="8 thighs"       chk="true"  />
        <line role="divider" fill="$hair" />
        <instance component="comp-ing" nm="Rose harissa paste"          amt="3 tbsp"         chk="true"  />
        <line role="divider" fill="$hair" />
        <instance component="comp-ing" nm="Unsalted butter, softened"   amt="50 g"           chk="false" />
        <line role="divider" fill="$hair" />
        <instance component="comp-ing" nm="Chickpeas, drained"          amt="1 x 400 g can"  chk="true"  />
        <line role="divider" fill="$hair" />
        <instance component="comp-ing" nm="Red onions, in wedges"       amt="2 medium"       chk="false" />
        <line role="divider" fill="$hair" />
        <instance component="comp-ing" nm="Cherry tomatoes on the vine" amt="250 g"          chk="false" />
        <line role="divider" fill="$hair" />
        <instance component="comp-ing" nm="Garlic, crushed"             amt="4 cloves"       chk="true"  />
        <line role="divider" fill="$hair" />
        <instance component="comp-ing" nm="Lemon, halved"               amt="1"              chk="false" />
      </col>

      <!-- method header -->
      <text text-style="SecHead" value="Method" color="$text-primary" />

      <col w="fill" gap="12">
        <instance component="comp-step" num="1" body="Heat the oven to 220°C fan. Pat the chicken thighs dry, then season all over with flaky salt." tm="" timer="false" />
        <instance component="comp-step" num="2" body="Mash the harissa into the softened butter. Loosen the skin on each thigh and push the spiced butter underneath." tm="" timer="false" />
        <instance component="comp-step" num="3" body="Tumble the chickpeas, onion wedges, tomatoes and garlic into a roasting tin. Nestle the chicken on top, skin-side up." tm="" timer="false" />
        <instance component="comp-step" num="4" body="Roast on the top shelf until the skin is deep amber and crisp and the juices run clear." tm="35 min" timer="true" />
        <instance component="comp-step" num="5" body="Squeeze the softened lemon over the tin, then rest before serving with the pan juices spooned over." tm="5 min" timer="true" />
      </col>

      <!-- action bar -->
      <row w="fill" gap="12" p="4 0 20 0" align="middle-center">
        <row role="button" w="fill" h="52" radius="$r-btn" fill="$surface-2" gap="8" align="middle-center" border="1 $hair-hi">
          <img src="https://api.iconify.design/material-symbols/add-shopping-cart-rounded.svg?color=%23F0A15A" w="20" h="20" />
          <text text-style="BtnLabel" value="Add to list" color="$ember-text" />
        </row>
        <row role="button" w="fill" h="52" radius="$r-btn" gap="8" align="middle-center" fill="$ember">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #B5541E 0%, #9B4413 100%)" />
            <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF4D" />
            <effect type="drop-shadow" x="0" y="5" radius="14" spread="0" color="#7A2E0A66" />
          </appearance>
          <img src="https://api.iconify.design/material-symbols/play-arrow-rounded.svg?color=%23FFF7F0" w="22" h="22" />
          <text text-style="BtnLabel" value="Start cooking" color="$on-ember" />
        </row>
      </row>

    </col>

    <!-- bottom navigation (last flow child) -->
    <col role="tab-bar" w="fill" fill="$surface" align="top-center" border="1 $hair">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #221D17 0%, #17130F 100%)" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF10" />
      </appearance>
      <row w="fill" h="62" p="8 8 0 8" gap="auto" align="top-center">
        <col w="fill" gap="5" align="top-center">
          <col w="44" h="26" radius="$r-pill" fill="$ember-tint" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/home-rounded.svg?color=%23F0A15A" w="24" h="24" />
          </col>
          <text text-style="Nav" value="Home" color="$ember-text" />
        </col>
        <instance component="comp-nav" lbl="Recipes"  ib="true"  it="false" ip="false" />
        <instance component="comp-nav" lbl="Timers"   ib="false" it="true"  ip="false" />
        <instance component="comp-nav" lbl="Profile"  ib="false" it="false" ip="true"  />
      </row>
      <row w="fill" h="16" align="middle-center">
        <rect w="108" h="4" radius="$r-pill" fill="$hair-hi" />
      </row>
    </col>

  </col>
</gui>

```