---
title: "Cedar & Oat Co. — Maple Pecan Granola Nutrition"
platform: ios
slug: cedar-oat-co-maple-pecan-granola-nutrition
screens: []
domains: ["food-delivery"]
style: "retro"
fonts: ["Bricolage Grotesque", "Space Mono", "SF Pro Display"]
roles: ["top-navigation-bar", "button", "card", "segmented-control", "toolbar"]
score: {clean: 100, consistent: 64, accessible: 91, comprehensible: 33}
url: https://gui.farm/ios/cedar-oat-co-maple-pecan-granola-nutrition
raw: https://gui.farm/ios/cedar-oat-co-maple-pecan-granola-nutrition/design.guix
download: https://gui.farm/ios/cedar-oat-co-maple-pecan-granola-nutrition.gui
---

# Cedar & Oat Co. — Maple Pecan Granola Nutrition

A vintage-packaging-style nutrition facts panel for a grocery-delivery granola product, with an FDA-style label, macronutrient energy split, and key %-daily-value bars.

- **Live preview:** https://gui.farm/ios/cedar-oat-co-maple-pecan-granola-nutrition
- **Raw source:** https://gui.farm/ios/cedar-oat-co-maple-pecan-granola-nutrition/design.guix
- **Download (.gui):** https://gui.farm/ios/cedar-oat-co-maple-pecan-granola-nutrition.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Cedar &amp; Oat Co. — Maple Pecan Granola Nutrition">
  <tokens>
    <color name="paper" value="#F5ECD6" />
    <color name="surface" value="#FCF7EA" />
    <color name="surface-2" value="#EBDDBE" />
    <color name="ink" value="#241B0E" />
    <color name="ink-2" value="#54401F" />
    <color name="marigold" value="#E08A0B" />
    <color name="marigold-ink" value="#8A4A05" />
    <color name="fat" value="#6B4A22" />
    <color name="protein" value="#B98A2E" />
    <color name="hair" value="#DFCEA4" />
    <number name="r-card" value="16" />
    <number name="r-md" value="10" />
    <number name="r-pill" value="999" />
  </tokens>
  <styles>
    <text-style
      name="Display/Cal"
      font-family="Bricolage Grotesque"
      font-size="56"
      font-weight="800"
      line-height="56"
      letter-spacing="-1.5"
    />
    <text-style
      name="Display/Title"
      font-family="Bricolage Grotesque"
      font-size="27"
      font-weight="800"
      line-height="30"
      letter-spacing="-0.6"
    />
    <text-style
      name="Display/Panel"
      font-family="Bricolage Grotesque"
      font-size="30"
      font-weight="800"
      line-height="32"
      letter-spacing="-0.5"
    />
    <text-style
      name="Card/Title"
      font-family="Bricolage Grotesque"
      font-size="17"
      font-weight="700"
      line-height="22"
    />
    <text-style
      name="Num/Lg"
      font-family="Bricolage Grotesque"
      font-size="19"
      font-weight="700"
      line-height="22"
    />
    <text-style
      name="Mono/Nav"
      font-family="Space Mono"
      font-size="13"
      font-weight="700"
      line-height="16"
      letter-spacing="1.4"
    />
    <text-style
      name="Mono/Eyebrow"
      font-family="Space Mono"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="1.6"
    />
    <text-style
      name="Mono/Label"
      font-family="Space Mono"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="0.6"
    />
    <text-style name="Mono/Value" font-family="Space Mono" font-size="15" font-weight="700" line-height="19" />
    <text-style name="Mono/Name" font-family="Space Mono" font-size="15" font-weight="700" line-height="20" />
    <text-style name="Mono/Sub" font-family="Space Mono" font-size="14" font-weight="400" line-height="19" />
    <text-style name="Mono/Body" font-family="Space Mono" font-size="13" font-weight="400" line-height="19" />
    <text-style
      name="Mono/Meta"
      font-family="Space Mono"
      font-size="12"
      font-weight="400"
      line-height="16"
      letter-spacing="0.2"
    />
    <text-style name="Status" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="18" />
  </styles>
  <fonts>
    <font family="Bricolage Grotesque" source="google" weights="700 800" styles="normal" />
    <font family="Space Mono" source="google" weights="400 700" styles="normal" />
    <font family="SF Pro Display" source="system" weights="400 600 700" styles="normal" />
  </fonts>
  <col w="393" fill="$paper" pb="0" gap="0">
    <!-- Status bar (device chrome, untagged) -->
    <row w="393" h="47" p="14 20 0 20" align="middle-left">
      <text w="fill" value="9:41" text-style="Status" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23241B0E" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23241B0E" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23241B0E" w="24" h="17" />
      </row>
    </row>
    <!-- Top navigation -->
    <row role="top-navigation-bar" w="fill" h="52" p="0 10" gap="auto" align="middle-center">
      <row role="button" w="44" h="44" align="middle-center">
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%23241B0E" w="24" h="24" />
      </row>
      <text value="NUTRITION FACTS" text-style="Mono/Nav" color="$ink" />
      <row role="button" w="44" h="44" align="middle-center">
        <img src="https://api.iconify.design/lucide/share.svg?color=%23241B0E" w="20" h="20" />
      </row>
    </row>
    <col w="fill" p="6 16 22 16" gap="14">
      <!-- HERO: product card with real photo -->
      <col role="card" w="fill" fill="$surface" radius="$r-card" border="1 $hair" clip="true" gap="0">
        <appearance>
          <effect type="drop-shadow" x="0" y="8" radius="22" spread="0" color="#4A320814" />
        </appearance>
        <frame w="fill" h="150" clip="true">
          <img
            src="https://images.unsplash.com/photo-1641536885341-301aeb52f1c0?w=786&amp;h=300&amp;fit=crop&amp;q=70"
            w="fill"
            h="150"
            fit="cover"
          />
          <row p="10 12" radius="$r-pill" fill="$marigold" align="middle-center" x="14" y="14">
            <text text-style="Mono/Label" value="GRANOLA" color="$ink" />
          </row>
        </frame>
        <col w="fill" p="14 16 16 16" gap="9">
          <text text-style="Mono/Eyebrow" value="CEDAR &amp; OAT CO." color="$marigold-ink" />
          <text text-style="Display/Title" value="Maple Pecan Granola" color="$ink" />
          <row w="fill" gap="10" align="middle-left">
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/wheat.svg?color=%2354401F" w="15" h="15" />
              <text text-style="Mono/Meta" value="440 g bag" color="$ink-2" />
            </row>
            <text text-style="Mono/Meta" value="/" color="$hair" />
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/layers.svg?color=%2354401F" w="15" h="15" />
              <text text-style="Mono/Meta" value="8 servings" color="$ink-2" />
            </row>
            <text w="fill" text-style="Num/Lg" value="$6.49" color="$ink" align="right" />
          </row>
        </col>
      </col>
      <!-- Serving basis toggle -->
      <row
        role="segmented-control"
        w="fill"
        h="46"
        fill="$surface-2"
        radius="$r-md"
        p="4"
        gap="4"
        border="1 $hair"
      >
        <row w="fill" h="38" radius="7" fill="$marigold" align="middle-center">
          <text text-style="Mono/Label" value="PER SERVING · 55 g" color="$ink" />
        </row>
        <row w="fill" h="38" radius="7" align="middle-center">
          <text text-style="Mono/Label" value="PER 100 g" color="$ink-2" />
        </row>
      </row>
      <!-- Calories + macro split card -->
      <col role="card" w="fill" fill="$surface" radius="$r-card" border="1 $hair" p="16" gap="16">
        <row w="fill" fill="$marigold" radius="$r-md" p="14 18" gap="auto" align="bottom-left">
          <row gap="10" align="bottom-left">
            <text text-style="Display/Cal" value="261" color="$ink" />
            <col gap="2" pb="8">
              <text text-style="Mono/Label" value="CALORIES" color="$ink" />
              <text text-style="Mono/Meta" value="per 2/3 cup" color="$ink" />
            </col>
          </row>
          <text text-style="Mono/Value" value="13% DV" color="$ink" pb="8" />
        </row>
        <col w="fill" gap="9">
          <text text-style="Mono/Eyebrow" value="ENERGY FROM MACRONUTRIENTS" color="$ink-2" />
          <frame w="fill" h="18" radius="9" fill="$surface-2" clip="true">
            <rect x="0" y="0" w="176" h="18" fill="$marigold" />
            <rect x="176" y="0" w="136" h="18" fill="$fat" />
            <rect x="311" y="0" w="34" h="18" fill="$protein" />
          </frame>
          <row w="fill" gap="auto" align="middle-left" pt="2">
            <row gap="7" align="middle-center">
              <rect w="10" h="10" radius="3" fill="$marigold" />
              <text text-style="Mono/Name" value="Carbs" color="$ink" />
              <text text-style="Mono/Sub" value="33.6 g" color="$ink-2" />
              <text text-style="Mono/Value" value="51%" color="$ink" />
            </row>
          </row>
          <row w="fill" gap="auto" align="middle-left">
            <row gap="7" align="middle-center">
              <rect w="10" h="10" radius="3" fill="$fat" />
              <text text-style="Mono/Name" value="Fat" color="$ink" />
              <text text-style="Mono/Sub" value="11.2 g" color="$ink-2" />
              <text text-style="Mono/Value" value="39%" color="$ink" />
            </row>
          </row>
          <row w="fill" gap="auto" align="middle-left">
            <row gap="7" align="middle-center">
              <rect w="10" h="10" radius="3" fill="$protein" />
              <text text-style="Mono/Name" value="Protein" color="$ink" />
              <text text-style="Mono/Sub" value="6.5 g" color="$ink-2" />
              <text text-style="Mono/Value" value="10%" color="$ink" />
            </row>
          </row>
        </col>
      </col>
      <!-- Key nutrients: % Daily Value bars -->
      <col role="card" w="fill" fill="$surface" radius="$r-card" border="1 $hair" p="16" gap="13">
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="Card/Title" value="Key nutrients" color="$ink" />
          <text text-style="Mono/Eyebrow" value="% DAILY VALUE" color="$ink-2" />
        </row>
        <row w="fill" gap="12" align="middle-center">
          <col w="96" gap="1">
            <text text-style="Mono/Name" value="Fiber" color="$ink" />
            <text text-style="Mono/Meta" value="4.8 g" color="$ink-2" />
          </col>
          <frame w="180" h="10" radius="5" fill="$surface-2" clip="true">
            <rect x="0" y="0" w="31" h="10" radius="5" fill="$marigold" />
          </frame>
          <text w="fill" text-style="Mono/Value" value="17%" color="$ink" align="right" />
        </row>
        <row w="fill" gap="12" align="middle-center">
          <col w="96" gap="1">
            <text text-style="Mono/Name" value="Protein" color="$ink" />
            <text text-style="Mono/Meta" value="6.5 g" color="$ink-2" />
          </col>
          <frame w="180" h="10" radius="5" fill="$surface-2" clip="true">
            <rect x="0" y="0" w="23" h="10" radius="5" fill="$marigold" />
          </frame>
          <text w="fill" text-style="Mono/Value" value="13%" color="$ink" align="right" />
        </row>
        <row w="fill" gap="12" align="middle-center">
          <col w="96" gap="1">
            <text text-style="Mono/Name" value="Total Fat" color="$ink" />
            <text text-style="Mono/Meta" value="11.2 g" color="$ink-2" />
          </col>
          <frame w="180" h="10" radius="5" fill="$surface-2" clip="true">
            <rect x="0" y="0" w="25" h="10" radius="5" fill="$marigold" />
          </frame>
          <text w="fill" text-style="Mono/Value" value="14%" color="$ink" align="right" />
        </row>
        <row w="fill" gap="12" align="middle-center">
          <col w="96" gap="1">
            <text text-style="Mono/Name" value="Added Sugars" color="$ink" />
            <text text-style="Mono/Meta" value="7 g" color="$ink-2" />
          </col>
          <frame w="180" h="10" radius="5" fill="$surface-2" clip="true">
            <rect x="0" y="0" w="25" h="10" radius="5" fill="$marigold" />
          </frame>
          <text w="fill" text-style="Mono/Value" value="14%" color="$ink" align="right" />
        </row>
      </col>
      <!-- Full FDA-style Nutrition Facts panel -->
      <col role="card" w="fill" fill="$surface" radius="$r-card" border="2 $ink" p="14 16 16 16" gap="0">
        <text text-style="Display/Panel" value="Nutrition Facts" color="$ink" pb="6" />
        <rect w="fill" h="1" fill="$hair" />
        <row w="fill" gap="auto" align="baseline" pt="8">
          <text text-style="Mono/Body" value="8 servings per container" color="$ink-2" />
        </row>
        <row w="fill" gap="auto" align="baseline" p="3 0 8 0">
          <text text-style="Mono/Name" value="Serving size" color="$ink" />
          <text text-style="Mono/Name" value="2/3 cup (55 g)" color="$ink" />
        </row>
        <rect w="fill" h="8" fill="$ink" />
        <row w="fill" gap="auto" align="bottom-left" p="6 0 6 0">
          <col gap="0">
            <text text-style="Mono/Label" value="AMOUNT PER SERVING" color="$ink-2" />
            <text text-style="Display/Panel" value="Calories" color="$ink" />
          </col>
          <text text-style="Display/Panel" value="261" color="$ink" pb="1" />
        </row>
        <rect w="fill" h="4" fill="$ink" />
        <row w="fill" p="4 0">
          <text w="fill" text-style="Mono/Label" value="% DAILY VALUE*" color="$ink" align="right" />
        </row>
        <!-- Total Fat -->
        <row w="fill" gap="auto" align="baseline" p="7 0" border="1 0 0 0 $hair">
          <row gap="6" align="baseline">
            <text text-style="Mono/Name" value="Total Fat" color="$ink" />
            <text text-style="Mono/Sub" value="11.2 g" color="$ink" />
          </row>
          <text text-style="Mono/Value" value="14%" color="$ink" />
        </row>
        <row w="fill" gap="auto" align="baseline" p="7 0 7 18" border="1 0 0 0 $hair">
          <text text-style="Mono/Sub" value="Saturated Fat 1.6 g" color="$ink-2" />
          <text text-style="Mono/Value" value="8%" color="$ink" />
        </row>
        <row w="fill" gap="auto" align="baseline" p="7 0 7 18" border="1 0 0 0 $hair">
          <text text-style="Mono/Sub" value="Trans Fat 0 g" color="$ink-2" />
        </row>
        <!-- Cholesterol -->
        <row w="fill" gap="auto" align="baseline" p="7 0" border="1 0 0 0 $hair">
          <row gap="6" align="baseline">
            <text text-style="Mono/Name" value="Cholesterol" color="$ink" />
            <text text-style="Mono/Sub" value="0 mg" color="$ink" />
          </row>
          <text text-style="Mono/Value" value="0%" color="$ink" />
        </row>
        <!-- Sodium -->
        <row w="fill" gap="auto" align="baseline" p="7 0" border="1 0 0 0 $hair">
          <row gap="6" align="baseline">
            <text text-style="Mono/Name" value="Sodium" color="$ink" />
            <text text-style="Mono/Sub" value="96 mg" color="$ink" />
          </row>
          <text text-style="Mono/Value" value="4%" color="$ink" />
        </row>
        <!-- Total Carbohydrate -->
        <row w="fill" gap="auto" align="baseline" p="7 0" border="1 0 0 0 $hair">
          <row gap="6" align="baseline">
            <text text-style="Mono/Name" value="Total Carbohydrate" color="$ink" />
            <text text-style="Mono/Sub" value="33.6 g" color="$ink" />
          </row>
          <text text-style="Mono/Value" value="12%" color="$ink" />
        </row>
        <row w="fill" gap="auto" align="baseline" p="7 0 7 18" border="1 0 0 0 $hair">
          <text text-style="Mono/Sub" value="Dietary Fiber 4.8 g" color="$ink-2" />
          <text text-style="Mono/Value" value="17%" color="$ink" />
        </row>
        <row w="fill" gap="auto" align="baseline" p="7 0 7 18" border="1 0 0 0 $hair">
          <text text-style="Mono/Sub" value="Total Sugars 12.1 g" color="$ink-2" />
        </row>
        <row w="fill" gap="auto" align="baseline" p="7 0 7 34" border="1 0 0 0 $hair">
          <text text-style="Mono/Sub" value="Includes 7 g Added Sugars" color="$ink-2" />
          <text text-style="Mono/Value" value="14%" color="$ink" />
        </row>
        <!-- Protein -->
        <row w="fill" gap="auto" align="baseline" p="7 0" border="1 0 0 0 $hair">
          <row gap="6" align="baseline">
            <text text-style="Mono/Name" value="Protein" color="$ink" />
            <text text-style="Mono/Sub" value="6.5 g" color="$ink" />
          </row>
          <text text-style="Mono/Value" value="13%" color="$ink" />
        </row>
        <rect w="fill" h="8" fill="$ink" />
        <text
          text-style="Mono/Meta"
          value="* The % Daily Value tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice."
          color="$ink-2"
          pt="8"
        />
      </col>
      <!-- Ingredients + allergen -->
      <col role="card" w="fill" fill="$surface" radius="$r-card" border="1 $hair" p="16" gap="9">
        <text text-style="Card/Title" value="Ingredients" color="$ink" />
        <text
          text-style="Mono/Body"
          value="Whole rolled oats, pecans, maple syrup, sunflower oil, cane sugar, ground cinnamon, sea salt."
          color="$ink-2"
        />
        <row w="fill" gap="8" align="middle-center" fill="$surface-2" radius="$r-md" p="10 12">
          <img src="https://api.iconify.design/lucide/triangle-alert.svg?color=%238A4A05" w="17" h="17" />
          <text w="fill" text-style="Mono/Label" value="CONTAINS: TREE NUTS (PECANS)" color="$marigold-ink" />
        </row>
      </col>
    </col>
    <!-- Bottom action bar (last flow child) -->
    <row
      role="toolbar"
      w="fill"
      p="12 16 12 16"
      fill="$surface"
      border="1 0 0 0 $hair"
      gap="12"
      align="middle-center"
    >
      <row w="122" h="50" radius="$r-md" fill="$paper" border="1 $hair" gap="0" align="middle-center" p="0 6">
        <row role="button" w="38" h="38" radius="8" align="middle-center">
          <img src="https://api.iconify.design/lucide/minus.svg?color=%23241B0E" w="20" h="20" />
        </row>
        <text w="fill" text-style="Num/Lg" value="1" color="$ink" align="center" />
        <row role="button" w="38" h="38" radius="8" align="middle-center">
          <img src="https://api.iconify.design/lucide/plus.svg?color=%23241B0E" w="20" h="20" />
        </row>
      </row>
      <row role="button" w="fill" h="50" radius="$r-md" fill="$marigold" gap="9" align="middle-center">
        <appearance>
          <effect type="drop-shadow" x="0" y="3" radius="0" spread="0" color="#8A4A0533" />
        </appearance>
        <img src="https://api.iconify.design/lucide/shopping-cart.svg?color=%23241B0E" w="19" h="19" />
        <text text-style="Card/Title" value="Add to cart · $6.49" color="$ink" />
      </row>
    </row>
    <!-- Home indicator (device chrome, untagged) -->
    <frame w="393" h="26" clip="true">
      <rect fill="$ink" w="140" h="5" radius="3" x="127" y="10" />
    </frame>
  </col>
</gui>
```