---
title: "Vitameter Glucose Day, Thu Aug 13"
platform: ios
slug: vitameter-glucose-day-thu-aug-13
screens: []
domains: ["healthcare"]
style: "brutalist"
fonts: ["Space Mono", "SF Pro Display"]
roles: ["top-navigation-bar", "button", "card", "badge", "divider", "toolbar"]
score: {clean: 100, consistent: 80, accessible: 94, comprehensible: 34}
url: https://gui.farm/ios/vitameter-glucose-day-thu-aug-13
raw: https://gui.farm/ios/vitameter-glucose-day-thu-aug-13/design.guix
download: https://gui.farm/ios/vitameter-glucose-day-thu-aug-13.gui
---

# Vitameter Glucose Day, Thu Aug 13

A brutalist light-theme iOS continuous-glucose daily report showing the latest reading, a 24-hour trend chart, a time-in-range breakdown, key day stats, and a logged-events timeline for a person with type 1 diabetes reviewing their day.

- **Live preview:** https://gui.farm/ios/vitameter-glucose-day-thu-aug-13
- **Raw source:** https://gui.farm/ios/vitameter-glucose-day-thu-aug-13/design.guix
- **Download (.gui):** https://gui.farm/ios/vitameter-glucose-day-thu-aug-13.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Vitameter Glucose Day, Thu Aug 13">
  <tokens>
    <color name="paper" value="#F0ECE1" />
    <color name="card" value="#FBFAF5" />
    <color name="ink" value="#16150F" />
    <color name="muted" value="#59574D" />
    <color name="line" value="#CBC6B8" />
    <color name="cyan" value="#10C2D2" />
    <color name="cyan-deep" value="#067383" />
    <color name="cyan-soft" value="#D3F1F5" />
    <color name="amber" value="#E2911F" />
    <color name="amber-deep" value="#8A5300" />
    <color name="red" value="#D2472A" />
    <color name="red-deep" value="#B23A1C" />
  </tokens>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Space Mono" source="google" weights="400 700" styles="normal" />
  </fonts>
  <styles>
    <text-style
      name="NavTitle"
      font-family="Space Mono"
      font-size="13"
      font-weight="700"
      line-height="16"
      letter-spacing="0.5"
    />
    <text-style
      name="NavSub"
      font-family="Space Mono"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="1"
    />
    <text-style
      name="Label"
      font-family="Space Mono"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="0.7"
    />
    <text-style
      name="LabelSm"
      font-family="Space Mono"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="1"
    />
    <text-style
      name="HeroNum"
      font-family="Space Mono"
      font-size="56"
      font-weight="700"
      line-height="58"
      letter-spacing="-2"
    />
    <text-style name="HeroUnit" font-family="Space Mono" font-size="15" font-weight="700" line-height="19" />
    <text-style name="H2" font-family="SF Pro Display" font-size="17" font-weight="700" line-height="22" />
    <text-style
      name="ItemName"
      font-family="SF Pro Display"
      font-size="15"
      font-weight="600"
      line-height="20"
    />
    <text-style name="Body" font-family="SF Pro Display" font-size="14" font-weight="400" line-height="20" />
    <text-style name="Sub" font-family="SF Pro Display" font-size="13" font-weight="500" line-height="18" />
    <text-style
      name="StatNum"
      font-family="Space Mono"
      font-size="22"
      font-weight="700"
      line-height="26"
      letter-spacing="-0.5"
    />
    <text-style
      name="BigPct"
      font-family="Space Mono"
      font-size="18"
      font-weight="700"
      line-height="22"
      letter-spacing="-0.5"
    />
    <text-style name="Mono" font-family="Space Mono" font-size="12" font-weight="400" line-height="16" />
    <text-style name="MonoB" font-family="Space Mono" font-size="12" font-weight="700" line-height="16" />
    <text-style name="EventTime" font-family="Space Mono" font-size="13" font-weight="700" line-height="17" />
    <text-style
      name="BtnLabel"
      font-family="Space Mono"
      font-size="14"
      font-weight="700"
      line-height="18"
      letter-spacing="0.5"
    />
  </styles>
  <col w="393" fill="$paper" clip="true">
    <!-- status bar (device chrome, untagged) -->
    <row w="393" h="54" p="16 20 0 20" align="middle-left">
      <text
        w="fill"
        value="9:41"
        font-family="SF Pro Display"
        font-size="15"
        font-weight="600"
        line-height="18"
        color="$ink"
      />
     <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg" w="20" h="16" />
      </row>
    </row>
    <!-- top navigation -->
    <row
      w="393"
      h="58"
      p="0 16"
      gap="10"
      align="middle-left"
      fill="$paper"
      border-bottom="2 $ink"
      role="top-navigation-bar"
    >
      <col w="40" h="40" fill="$card" border="2 $ink" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/arrow-left.svg?color=%2316150F" w="18" h="18" />
      </col>
      <col w="fill" gap="2" align="middle-left">
        <text value="GLUCOSE DAY" text-style="NavTitle" color="$ink" />
        <text value="THU AUG 13 · VITAMETER" text-style="NavSub" color="$muted" />
      </col>
      <col w="40" h="40" fill="$card" border="2 $ink" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/sliders-horizontal.svg?color=%2316150F" w="17" h="17" />
      </col>
    </row>
    <!-- body -->
    <col w="393" p="20" gap="14">
      <!-- latest reading hero -->
      <col w="353" fill="$cyan" border="2 $ink" p="18" gap="14" role="card">
        <appearance>
          <fill type="color" value="#10C2D2" />
          <effect type="drop-shadow" x="6" y="6" radius="0" spread="0" color="#16150F" />
        </appearance>
        <row w="317" gap="10" align="middle-left">
          <text w="fill" value="LATEST READING" text-style="Label" color="$ink" />
          <row p="6 10" gap="6" fill="$card" border="2 $ink" align="middle-center" role="badge">
            <img src="https://api.iconify.design/lucide/move-right.svg?color=%2316150F" w="14" h="14" />
            <text value="STEADY" text-style="Label" color="$ink" />
          </row>
        </row>
        <row w="317" gap="10" align="bottom-left">
          <text value="112" text-style="HeroNum" color="$ink" />
          <col w="fill" gap="3" align="bottom-left">
            <text value="mg/dL" text-style="HeroUnit" color="$ink" />
            <text value="TARGET 70-180" text-style="MonoB" color="$ink" />
          </col>
        </row>
        <line w="317" fill="$ink" thickness="2" role="divider" />
        <row w="317" align="middle-left">
          <text w="fill" value="2 MIN AGO" text-style="MonoB" color="$ink" />
          <text value="SENSOR DAY 6 OF 10" text-style="Mono" color="$ink" align="right" />
        </row>
      </col>
      <!-- 24-hour trend -->
      <col w="353" fill="$card" border="2 $ink" p="16" gap="12" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="24-HOUR TREND" text-style="H2" color="$ink" />
          <text value="MG/DL" text-style="LabelSm" color="$muted" align="right" />
        </row>
        <img
          src="https://gui.farm/tools/charts/line-chart.svg?data=0:104,2:96,4:92,6:98,8:172,10:120,12:110,13:186,15:150,17:120,19:178,21:150,23:124&amp;line=%23067383&amp;surface=light&amp;curve=smooth&amp;area=on&amp;points=hide&amp;grid=show&amp;xlabels=hide&amp;ylabels=show&amp;width=650&amp;height=340"
          w="321"
          h="168"
        />
        <row w="321" gap="16" align="middle-left">
          <row gap="6" align="middle-center">
            <rect w="12" h="12" fill="$cyan-soft" border="2 $ink" />
            <text value="IN 70-180" text-style="Mono" color="$muted" />
          </row>
          <row gap="6" align="middle-center">
            <rect w="12" h="12" fill="$amber" />
            <text value="HIGH &gt;180" text-style="Mono" color="$muted" />
          </row>
          <row gap="6" align="middle-center">
            <rect w="12" h="12" fill="$red" />
            <text value="LOW &lt;70" text-style="Mono" color="$muted" />
          </row>
        </row>
      </col>
      <!-- time in range -->
      <col w="353" fill="$card" border="2 $ink" p="16" gap="14" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="TIME IN RANGE" text-style="H2" color="$ink" />
          <text value="LAST 24H" text-style="LabelSm" color="$muted" align="right" />
        </row>
        <!-- segmented bar: 78% + 18% + 4% across 321px -> 250 + 58 + 13 -->
        <frame w="321" h="20" clip="true">
          <rect x="0" y="0" w="250" h="20" fill="$cyan" />
          <rect x="250" y="0" w="58" h="20" fill="$amber" />
          <rect x="308" y="0" w="13" h="20" fill="$red" />
        </frame>
        <col w="321" gap="11">
          <row w="321" gap="12" align="middle-left">
            <rect w="14" h="14" fill="$cyan" border="2 $ink" />
            <col w="fill" gap="2" align="middle-left">
              <text value="In Range" text-style="ItemName" color="$ink" />
              <text value="18h 43m today" text-style="Mono" color="$muted" />
            </col>
            <text value="78%" text-style="BigPct" color="$cyan-deep" align="right" />
          </row>
          <row w="321" gap="12" align="middle-left">
            <rect w="14" h="14" fill="$amber" border="2 $ink" />
            <col w="fill" gap="2" align="middle-left">
              <text value="High" text-style="ItemName" color="$ink" />
              <text value="4h 19m · above 180" text-style="Mono" color="$muted" />
            </col>
            <text value="18%" text-style="BigPct" color="$amber-deep" align="right" />
          </row>
          <row w="321" gap="12" align="middle-left">
            <rect w="14" h="14" fill="$red" border="2 $ink" />
            <col w="fill" gap="2" align="middle-left">
              <text value="Low" text-style="ItemName" color="$ink" />
              <text value="0h 58m · below 70" text-style="Mono" color="$muted" />
            </col>
            <text value="4%" text-style="BigPct" color="$red-deep" align="right" />
          </row>
        </col>
      </col>
      <!-- stat trio -->
      <row w="353" gap="9" align="top-left">
        <col w="112" fill="$card" border="2 $ink" p="12" gap="6" role="card">
          <text value="AVG" text-style="LabelSm" color="$muted" />
          <text value="118" text-style="StatNum" color="$ink" />
          <text value="mg/dL" text-style="Mono" color="$muted" />
        </col>
        <col w="111" fill="$card" border="2 $ink" p="12" gap="6" role="card">
          <text value="GMI" text-style="LabelSm" color="$muted" />
          <text value="6.1%" text-style="StatNum" color="$ink" />
          <text value="est. A1C" text-style="Mono" color="$muted" />
        </col>
        <col w="112" fill="$card" border="2 $ink" p="12" gap="6" role="card">
          <text value="CV" text-style="LabelSm" color="$muted" />
          <text value="22.9%" text-style="StatNum" color="$ink" />
          <text value="variability" text-style="Mono" color="$muted" />
        </col>
      </row>
      <!-- today's events -->
      <col w="353" fill="$card" border="2 $ink" p="16" gap="14" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="TODAY'S EVENTS" text-style="H2" color="$ink" />
          <text value="5 LOGGED" text-style="LabelSm" color="$muted" align="right" />
        </row>
        <!-- event ribbon: 24h across 321px. marks centered at t/24*321 -->
        <col w="321" gap="7">
          <frame w="321" h="26" clip="true">
            <rect x="0" y="20" w="321" h="2" fill="$line" />
            <rect x="101" y="4" w="4" h="18" fill="$ink" />
            <rect x="161" y="4" w="4" h="18" fill="$ink" />
            <rect x="173" y="2" w="4" h="20" fill="$cyan-deep" />
            <rect x="250" y="4" w="4" h="18" fill="$ink" />
            <rect x="286" y="4" w="4" h="18" fill="$amber-deep" />
          </frame>
          <row w="321" align="middle-left">
            <text w="fill" value="12A" text-style="Mono" color="$muted" />
            <text w="fill" value="6A" text-style="Mono" color="$muted" align="center" />
            <text w="fill" value="12P" text-style="Mono" color="$muted" align="center" />
            <text w="fill" value="6P" text-style="Mono" color="$muted" align="center" />
            <text value="12A" text-style="Mono" color="$muted" align="right" />
          </row>
        </col>
        <line w="321" fill="$line" thickness="2" role="divider" />
        <col w="321" gap="13">
          <row w="321" gap="12" align="top-left">
            <text value="07:42" text-style="EventTime" color="$ink" />
            <col w="fill" gap="2" align="top-left">
              <text value="Breakfast" text-style="ItemName" color="$ink" />
              <text value="Steel-cut oats, blueberries · 42g carbs" text-style="Sub" color="$muted" />
            </col>
            <text value="+64" text-style="MonoB" color="$amber-deep" align="right" />
          </row>
          <row w="321" gap="12" align="top-left">
            <text value="12:10" text-style="EventTime" color="$ink" />
            <col w="fill" gap="2" align="top-left">
              <text value="Lunch" text-style="ItemName" color="$ink" />
              <text value="Chicken burrito bowl · 61g carbs" text-style="Sub" color="$muted" />
            </col>
            <text value="+78" text-style="MonoB" color="$red-deep" align="right" />
          </row>
          <row w="321" gap="12" align="top-left">
            <text value="13:05" text-style="EventTime" color="$cyan-deep" />
            <col w="fill" gap="2" align="top-left">
              <text value="Bolus insulin" text-style="ItemName" color="$ink" />
              <text value="4.0 u rapid-acting · corrected 186" text-style="Sub" color="$muted" />
            </col>
            <text value="4.0u" text-style="MonoB" color="$cyan-deep" align="right" />
          </row>
          <row w="321" gap="12" align="top-left">
            <text value="18:50" text-style="EventTime" color="$ink" />
            <col w="fill" gap="2" align="top-left">
              <text value="Dinner" text-style="ItemName" color="$ink" />
              <text value="Seared salmon, jasmine rice · 48g carbs" text-style="Sub" color="$muted" />
            </col>
            <text value="+70" text-style="MonoB" color="$red-deep" align="right" />
          </row>
          <row w="321" gap="12" align="top-left">
            <text value="21:30" text-style="EventTime" color="$ink" />
            <col w="fill" gap="2" align="top-left">
              <text value="Evening walk" text-style="ItemName" color="$ink" />
              <text value="22 min · 1.4 mi · nudged glucose down" text-style="Sub" color="$muted" />
            </col>
            <text value="-28" text-style="MonoB" color="$cyan-deep" align="right" />
          </row>
        </col>
      </col>
    </col>
    <!-- sticky action bar (last flow child) -->
    <col w="393" fill="$card" border-top="2 $ink" p="14 20 10 20" gap="11" role="toolbar">
      <row w="353" gap="8" align="middle-left">
        <row w="fill" h="52" fill="$paper" border="2 $ink" p="0 14" gap="8" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/plus.svg?color=%2316150F" w="17" h="17" />
          <text value="LOG EVENT" text-style="MonoB" color="$ink" />
        </row>
        <row w="fill" h="52" fill="$cyan" border="2 $ink" p="0 14" gap="8" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/share.svg?color=%2316150F" w="17" h="17" />
          <text value="SHARE REPORT" text-style="BtnLabel" color="$ink" />
        </row>
      </row>
      <text
        w="353"
        value="Vitameter G7 sensor · synced 2 min ago · expires in 4 days"
        text-style="Mono"
        color="$muted"
        align="center"
      />
      <row w="353" h="14" align="bottom-center">
        <rect w="134" h="5" fill="$ink" />
      </row>
    </col>
  </col>
</gui>
```