---
title: "NutriPulse Daily Nutrition Dashboard"
platform: ios
slug: nutripulse-daily-nutrition
screens: ["dashboard"]
domains: ["fitness"]
style: "flat"
fonts: ["SF Pro"]
roles: ["top-navigation-bar", "card", "badge", "segmented-control", "item-indicator", "search-bar", "tab-bar"]
score: {clean: 100, consistent: 63, accessible: 86, comprehensible: 55}
url: https://gui.farm/ios/nutripulse-daily-nutrition
raw: https://gui.farm/ios/nutripulse-daily-nutrition/design.guix
download: https://gui.farm/ios/nutripulse-daily-nutrition.gui
---

# NutriPulse Daily Nutrition Dashboard

iOS daily-nutrition tracker showing calorie and macronutrient progress, meal logging, and weekly trends on a dark theme with vivid coral, mint, and lime accents.

- **Live preview:** https://gui.farm/ios/nutripulse-daily-nutrition
- **Raw source:** https://gui.farm/ios/nutripulse-daily-nutrition/design.guix
- **Download (.gui):** https://gui.farm/ios/nutripulse-daily-nutrition.gui

## Source (design.guix)

```xml
<gui version="0.2" name="NutriPulse Daily Nutrition Dashboard">
  <tokens>
    <color name="bg" value="#141B1F" />
    <color name="lower" value="#0D1215" />
    <color name="surface" value="#1C272C" />
    <color name="surface-2" value="#29373D" />
    <color name="border" value="#35464D" />
    <color name="ink" value="#FFFFFF" />
    <color name="body" value="#A3A3A3" />
    <color name="muted" value="#6B6B6B" />
    <color name="blue" value="#39C6B1" />
    <color name="yellow" value="#C7E85B" />
    <color name="orange" value="#FF826C" />
    <color name="purple" value="#A98BFF" />
    <number name="card-r" value="16" />
    <number name="pill-r" value="999" />
  </tokens>
  <styles>
    <text-style
      name="LargeTitle"
      font-family="SF Pro"
      font-size="34"
      font-weight="700"
      line-height="41"
      letter-spacing="-0.6"
    />
    <text-style name="Title2" font-family="SF Pro" font-size="22" font-weight="600" line-height="28" />
    <text-style name="Title3" font-family="SF Pro" font-size="20" font-weight="600" line-height="25" />
    <text-style name="Headline" font-family="SF Pro" font-size="17" font-weight="600" line-height="22" />
    <text-style name="Body" font-family="SF Pro" font-size="17" font-weight="400" line-height="22" />
    <text-style name="Footnote" font-family="SF Pro" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Caption" font-family="SF Pro" font-size="12" font-weight="400" line-height="16" />
  </styles>
  <fonts>
    <font family="SF Pro" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Inter" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="390" fill="$surface">
    <row w="390" h="54" p="14 20 0 20" align="middle-left">
      <text
        w="fill"
        value="9:41"
        font-family="SF Pro"
        font-size="14"
        font-weight="600"
        line-height="18"
        color="$ink"
      />
      <row gap="7" align="middle-left">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23FFFFFF" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23FFFFFF" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23FFFFFF" w="20" h="20" />
      </row>
    </row>
    <col role="top-navigation-bar" w="390" p="22 20 12 20" gap="5">
      <text
        value="TUESDAY, 27 AUGUST"
        font-family="SF Pro"
        font-size="13"
        font-weight="500"
        line-height="18"
        color="$body"
      />
      <text value="Dashboard" text-style="LargeTitle" color="$ink" />
    </col>
    <col w="390" p="18 20 28 20" gap="20">
      <text value="Calorie Balance" text-style="Title2" color="$ink" />
      <col role="card" w="350" fill="$surface" radius="$card-r" p="0" gap="14">
        <row w="fill" align="middle-left">
          <col w="fill" gap="2">
            <text
              value="LAST 30 DAYS"
              font-family="SF Pro"
              font-size="11"
              font-weight="600"
              line-height="14"
              letter-spacing="0.7"
              color="$body"
            />
            <text value="Nutrition vs target" text-style="Headline" color="$ink" />
          </col>
          <row role="badge" h="28" radius="14" fill="#2B3025" p="0 9" align="middle-center">
            <text value="162 kcal under" text-style="Caption" color="$yellow" />
          </row>
        </row>
        <frame w="fill" h="156" clip="true">
          <img
            src="https://gui.farm/tools/charts/bar-chart.svg?data=1:46,2:52,3:42,4:59,5:48,6:50,7:54,8:43,9:49,10:50,11:92,12:31,13:61,14:43,15:47,16:64,17:54,18:42,19:39,20:62,21:45,22:60,23:30,24:75,25:66,26:70,27:38,28:69,29:50,30:33&amp;bar=%2339C6B1&amp;surface=dark&amp;radius=2&amp;grid=hide&amp;values=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=690&amp;height=312"
            w="fill"
            h="156"
            x="0"
            y="0"
          />
          <img
            src="https://gui.farm/tools/charts/line-chart.svg?data=1:44,2:44,3:44,4:44,5:44,6:44,7:44,8:44,9:44,10:44,11:44,12:44,13:44,14:44,15:44,16:44,17:44,18:44,19:44,20:44,21:44,22:42,23:48,24:72,25:63,26:74,27:57,28:41,29:46,30:44&amp;line=%23C7E85B&amp;surface=dark&amp;curve=smooth&amp;area=off&amp;points=show&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=690&amp;height=312"
            w="fill"
            h="156"
            x="0"
            y="0"
          />
        </frame>
        <row w="318" gap="8" align="middle-left">
          <row gap="6" align="middle-left">
            <ellipse w="8" h="8" fill="$blue" />
            <text value="Nutrition" text-style="Caption" color="$body" />
          </row>
          <row gap="6" align="middle-left">
            <ellipse w="8" h="8" fill="$yellow" />
            <text value="Target" text-style="Caption" color="$body" />
          </row>
        </row>
        <row w="fill" h="65" gap="0" align="middle-left">
          <col w="fill" gap="3" align="middle-center">
            <text value="1,029" text-style="Title3" color="$ink" />
            <text value="Nutrition" text-style="Caption" color="$body" />
          </col>
          <text value="−" text-style="Title3" color="$body" />
          <col w="fill" gap="3" align="middle-center">
            <text value="866" text-style="Title3" color="$ink" />
            <text value="Target" text-style="Caption" color="$body" />
          </col>
          <text value="=" text-style="Title3" color="$body" />
          <col w="fill" gap="3" align="middle-center">
            <text value="162" text-style="Title3" color="$ink" />
            <text value="Difference" text-style="Caption" color="$body" />
          </col>
        </row>
        <row role="segmented-control" w="fill" h="44" fill="$surface-2" radius="22" p="3" gap="3">
          <row w="154" h="38" radius="19" fill="$ink" align="middle-center">
            <text
              value="Targets"
              font-family="SF Pro"
              font-size="15"
              font-weight="500"
              line-height="20"
              color="#111111"
            />
          </row>
          <row w="154" h="38" radius="19" align="middle-center">
            <text
              value="Expenditure"
              font-family="SF Pro"
              font-size="15"
              font-weight="400"
              line-height="20"
              color="$ink"
            />
          </row>
        </row>
      </col>
    </col>
    <col w="390" fill="$lower" p="18 20 24 20" gap="18">
      <row role="item-indicator" w="350" h="12" gap="8" align="middle-center">
        <ellipse w="7" h="7" fill="#454545" />
        <ellipse w="7" h="7" fill="$ink" />
        <ellipse w="7" h="7" fill="#454545" />
      </row>
      <text value="Insights &amp; Analytics" text-style="Title2" color="$ink" />
      <row w="350" gap="10">
        <col role="card" w="170" fill="$surface" radius="$card-r" p="14" gap="8">
          <text value="Expenditure" text-style="Headline" color="$ink" />
          <text value="21 Aug to now" text-style="Footnote" color="$body" />
          <img
            src="https://gui.farm/tools/charts/line-chart.svg?data=1:72,2:65,3:58,4:50,5:44,6:42&amp;line=%23FF826C&amp;surface=dark&amp;curve=smooth&amp;area=off&amp;points=show&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=284&amp;height=120"
            w="142"
            h="60"
          />
          <row w="142" align="baseline">
            <text value="2,184" text-style="Title3" color="$ink" w="fill" />
            <text value="kcal" text-style="Caption" color="$body" />
          </row>
        </col>
        <col role="card" w="170" fill="$surface" radius="$card-r" p="14" gap="8">
          <text value="Weight Trend" text-style="Headline" color="$ink" />
          <text value="21 Aug to now" text-style="Footnote" color="$body" />
          <img
            src="https://gui.farm/tools/charts/line-chart.svg?data=1:74,2:73,3:69,4:64,5:59,6:56&amp;line=%23A98BFF&amp;surface=dark&amp;curve=smooth&amp;area=off&amp;points=show&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=284&amp;height=120"
            w="142"
            h="60"
          />
          <row w="142" align="baseline">
            <text value="74.2" text-style="Title3" color="$ink" w="fill" />
            <text value="kg" text-style="Caption" color="$body" />
          </row>
        </col>
      </row>
      <row role="search-bar" w="350" h="54" fill="$surface-2" radius="27" p="0 16" gap="13" align="middle-left">
        <img src="https://api.iconify.design/lucide/search.svg?color=%23FFFFFF" w="22" h="22" />
        <text
          value="Search for a food"
          font-family="SF Pro"
          font-size="16"
          font-weight="400"
          line-height="21"
          color="$muted"
          w="fill"
        />
        <img src="https://api.iconify.design/lucide/scan-barcode.svg?color=%23FFFFFF" w="22" h="22" />
      </row>
    </col>
    <col w="390" fill="$bg" border="1 0 0 0 $border">
      <row role="tab-bar" w="390" h="54" align="middle-left">
        <col w="78" h="52" gap="3" align="middle-center">
          <img src="https://api.iconify.design/lucide/layout-grid.svg?color=%23FFFFFF" w="22" h="22" />
          <text
            value="Dashboard"
            font-family="SF Pro"
            font-size="10"
            font-weight="600"
            line-height="13"
            color="$ink"
          />
        </col>
        <col w="78" h="52" gap="3" align="middle-center">
          <img src="https://api.iconify.design/lucide/apple.svg?color=%23A3A3A3" w="22" h="22" />
          <text
            value="Food Log"
            font-family="SF Pro"
            font-size="10"
            font-weight="500"
            line-height="13"
            color="$body"
          />
        </col>
        <col w="78" h="52" gap="3" align="middle-center">
          <row w="44" h="44" radius="22" fill="$ink" align="middle-center">
            <img src="https://api.iconify.design/lucide/plus.svg?color=%23111111" w="25" h="25" />
          </row>
        </col>
        <col w="78" h="52" gap="3" align="middle-center">
          <img src="https://api.iconify.design/lucide/network.svg?color=%23A3A3A3" w="22" h="22" />
          <text
            value="Plan"
            font-family="SF Pro"
            font-size="10"
            font-weight="500"
            line-height="13"
            color="$body"
          />
        </col>
        <col w="78" h="52" gap="3" align="middle-center">
          <img src="https://api.iconify.design/lucide/circle-ellipsis.svg?color=%23A3A3A3" w="22" h="22" />
          <text
            value="More"
            font-family="SF Pro"
            font-size="10"
            font-weight="500"
            line-height="13"
            color="$body"
          />
        </col>
      </row>
      <frame w="390" h="34" clip="true">
        <rect fill="$ink" w="140" h="5" radius="3" x="125" y="15" />
      </frame>
    </col>
  </col>
</gui>
```