---
title: "Lunora Sleep Report, Thu Aug 13"
platform: ios
slug: lunora-sleep-report-thu-aug-13
screens: []
domains: ["healthcare"]
style: "skeuomorphic"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "button", "card", "badge", "divider", "tab-bar"]
score: {clean: 100, consistent: 76, accessible: 53, comprehensible: 34}
url: https://gui.farm/ios/lunora-sleep-report-thu-aug-13
raw: https://gui.farm/ios/lunora-sleep-report-thu-aug-13/design.guix
download: https://gui.farm/ios/lunora-sleep-report-thu-aug-13.gui
---

# Lunora Sleep Report, Thu Aug 13

A skeuomorphic light-theme iOS nightly sleep report where someone reviews last night's sleep score, a stage hypnogram, stage breakdown, and overnight vitals.

- **Live preview:** https://gui.farm/ios/lunora-sleep-report-thu-aug-13
- **Raw source:** https://gui.farm/ios/lunora-sleep-report-thu-aug-13/design.guix
- **Download (.gui):** https://gui.farm/ios/lunora-sleep-report-thu-aug-13.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Lunora Sleep Report, Thu Aug 13">
  <mode name="theme" values="light dark" default="light" />
  <tokens>
    <color name="paper" value="#F1EEF9" />
    <color name="card" value="#FBFAFE" />
    <color name="well" value="#ECE7F7" />
    <color name="badge" value="#E7E0FA" />
    <color name="ink" value="#1A1726" />
    <color name="ink-2" value="#5C5570" />
    <color name="ink-3" value="#6E6683" />
    <color name="hair" value="#E5DFF2" />
    <color name="accent" value="#6A4CE4" />
    <color name="accent-d" value="#4A32A8" />
    <color name="st-awake" value="#B9B2CC" />
    <color name="st-rem" value="#9C86EC" />
    <color name="st-light" value="#6E58D0" />
    <color name="st-deep" value="#3C2C82" />
    <number name="r-pill" value="999" />
    <number name="r-card" value="22" />
    <number name="r-tile" value="16" />
  </tokens>
  <fonts>
    <font family="SF Pro Display" source="system" weights="300 400 500 600 700" styles="normal" />
  </fonts>
  <styles>
    <text-style
      name="Eyebrow"
      font-family="SF Pro Display"
      font-size="11"
      font-weight="600"
      line-height="14"
      letter-spacing="1.6"
    />
    <text-style
      name="NavTitle"
      font-family="SF Pro Display"
      font-size="16"
      font-weight="600"
      line-height="20"
    />
    <text-style
      name="HeroNum"
      font-family="SF Pro Display"
      font-size="64"
      font-weight="700"
      line-height="66"
      letter-spacing="-2"
    />
    <text-style
      name="HeroUnit"
      font-family="SF Pro Display"
      font-size="17"
      font-weight="600"
      line-height="21"
    />
    <text-style name="H2" font-family="SF Pro Display" font-size="16" font-weight="700" line-height="20" />
    <text-style name="StatVal" font-family="SF Pro Display" font-size="20" font-weight="700" line-height="24" />
    <text-style
      name="TileVal"
      font-family="SF Pro Display"
      font-size="22"
      font-weight="700"
      line-height="26"
      letter-spacing="-0.5"
    />
    <text-style name="RowVal" font-family="SF Pro Display" font-size="15" font-weight="700" line-height="19" />
    <text-style
      name="ItemName"
      font-family="SF Pro Display"
      font-size="15"
      font-weight="600"
      line-height="19"
    />
    <text-style name="Pct" font-family="SF Pro Display" font-size="15" font-weight="700" line-height="19" />
    <text-style name="Caption" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Label"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="1"
    />
    <text-style
      name="Tiny"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="600"
      line-height="13"
      letter-spacing="0.5"
    />
  </styles>
  <col w="393" fill="$paper" gap="14" align="top-center" clip="true">
    <!-- Status bar (untagged device chrome) -->
    <row w="fill" p="15 22 0" align="middle-center" gap="auto">
      <text value="9:41" font-family="SF Pro Display" font-size="15" font-weight="600" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%231A1726" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%231A1726" w="17" h="17" />
        <row w="24" h="12" radius="3" border="1 $ink-2" p="2" align="middle-left">
          <rect w="16" h="6" radius="1" fill="$ink" />
        </row>
      </row>
    </row>
    <!-- Top navigation -->
    <row role="top-navigation-bar" w="fill" p="4 18 0" align="middle-center" gap="auto">
      <col role="button" w="40" h="40" radius="$r-pill" align="middle-center" fill="$card">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #EDE8F8 100%)" />
          <effect type="drop-shadow" x="0" y="3" radius="7" spread="0" color="#2A1F5024" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFB3" />
        </appearance>
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%231A1726" w="22" h="22" />
      </col>
      <col gap="2" align="middle-center">
        <text
          text-style="Eyebrow"
          text-case="uppercase"
          value="Sleep Report"
          color="$accent-d"
          align="center"
        />
        <text text-style="NavTitle" value="Thursday, Aug 13" color="$ink" align="center" />
      </col>
      <col role="button" w="40" h="40" radius="$r-pill" align="middle-center" fill="$card">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #EDE8F8 100%)" />
          <effect type="drop-shadow" x="0" y="3" radius="7" spread="0" color="#2A1F5024" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFB3" />
        </appearance>
        <img src="https://api.iconify.design/lucide/share.svg?color=%231A1726" w="19" h="19" />
      </col>
    </row>
    <!-- Hero: sleep score -->
    <col role="card" w="353" radius="$r-card" p="16" gap="14" fill="$card" border="1 $hair">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F4F0FC 100%)" />
        <effect type="drop-shadow" x="0" y="8" radius="20" spread="-6" color="#2A1F5021" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
      </appearance>
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="Eyebrow" text-case="uppercase" value="Sleep Score" color="$ink-2" />
        <row role="badge" h="26" radius="$r-pill" fill="$badge" p="0 11" gap="6" align="middle-center">
          <img src="https://api.iconify.design/lucide/moon-star.svg?color=%234A32A8" w="14" h="14" />
          <text text-style="Tiny" text-case="uppercase" value="Sound sleep" color="$accent-d" />
        </row>
      </row>
      <row w="fill" align="bottom-left" gap="6">
        <text text-style="HeroNum" value="82" color="$accent" />
        <text text-style="HeroUnit" value="/ 100" color="$ink-3" pb="9" />
      </row>
      <!-- Score track: 0-100, fill at 82% of 321 = 263.2px -->
      <frame w="321" h="12" radius="$r-pill" clip="true">
        <rect x="0" y="0" w="321" h="12" radius="$r-pill" fill="$well" />
        <col x="0" y="0" w="263.2" h="12" radius="$r-pill" fill="$accent">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(90deg, #7C5BF0 0%, #5A38D8 100%)" />
            <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF59" />
          </appearance>
        </col>
      </frame>
      <line w="fill" fill="$hair" role="divider" />
      <row w="fill" align="middle-left" gap="auto">
        <col gap="3" align="middle-left">
          <text text-style="Label" text-case="uppercase" value="Asleep" color="$ink-3" />
          <text text-style="StatVal" value="6h 51m" color="$ink" />
        </col>
        <col gap="3" align="middle-left">
          <text text-style="Label" text-case="uppercase" value="In bed" color="$ink-3" />
          <text text-style="StatVal" value="7h 24m" color="$ink" />
        </col>
        <col gap="3" align="middle-left">
          <text text-style="Label" text-case="uppercase" value="Efficiency" color="$ink-3" />
          <text text-style="StatVal" value="93%" color="$ink" />
        </col>
      </row>
    </col>
    <!-- Hypnogram -->
    <col role="card" w="353" radius="$r-card" p="16" gap="14" fill="$card" border="1 $hair">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F4F0FC 100%)" />
        <effect type="drop-shadow" x="0" y="8" radius="20" spread="-6" color="#2A1F5021" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
      </appearance>
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="H2" value="Sleep stages" color="$ink" />
        <text text-style="Caption" value="6h 51m asleep · woke 4x" color="$ink-2" />
      </row>
      <!-- Hypnogram: 11:18 PM to 6:42 AM (444 min) across 321px. Lanes: Awake/REM/Light/Deep -->
      <frame w="321" h="104">
        <rect x="0" y="0" w="321" h="20" radius="3" fill="$hair" />
        <rect x="0" y="28" w="321" h="20" radius="3" fill="$hair" />
        <rect x="0" y="56" w="321" h="20" radius="3" fill="$hair" />
        <rect x="0" y="84" w="321" h="20" radius="3" fill="$hair" />
        <rect x="0.0" y="0" w="5.8" h="20" radius="3" fill="$st-awake" />
        <rect x="5.8" y="56" w="15.9" h="20" radius="3" fill="$st-light" />
        <rect x="21.7" y="84" w="23.1" h="20" radius="3" fill="$st-deep" />
        <rect x="44.8" y="56" w="11.6" h="20" radius="3" fill="$st-light" />
        <rect x="56.4" y="28" w="10.1" h="20" radius="3" fill="$st-rem" />
        <rect x="66.5" y="56" w="18.8" h="20" radius="3" fill="$st-light" />
        <rect x="85.3" y="84" w="15.9" h="20" radius="3" fill="$st-deep" />
        <rect x="101.2" y="56" w="7.2" h="20" radius="3" fill="$st-light" />
        <rect x="108.4" y="0" w="4.3" h="20" radius="3" fill="$st-awake" />
        <rect x="112.8" y="56" w="15.9" h="20" radius="3" fill="$st-light" />
        <rect x="128.7" y="28" w="15.9" h="20" radius="3" fill="$st-rem" />
        <rect x="144.6" y="56" w="18.8" h="20" radius="3" fill="$st-light" />
        <rect x="163.4" y="84" w="14.5" h="20" radius="3" fill="$st-deep" />
        <rect x="177.9" y="56" w="11.6" h="20" radius="3" fill="$st-light" />
        <rect x="189.4" y="28" w="15.9" h="20" radius="3" fill="$st-rem" />
        <rect x="205.3" y="56" w="11.6" h="20" radius="3" fill="$st-light" />
        <rect x="216.9" y="0" w="4.3" h="20" radius="3" fill="$st-awake" />
        <rect x="221.2" y="56" w="10.1" h="20" radius="3" fill="$st-light" />
        <rect x="231.4" y="28" w="14.5" h="20" radius="3" fill="$st-rem" />
        <rect x="245.8" y="56" w="8.7" h="20" radius="3" fill="$st-light" />
        <rect x="254.5" y="0" w="5.8" h="20" radius="3" fill="$st-awake" />
        <rect x="260.3" y="56" w="13.0" h="20" radius="3" fill="$st-light" />
        <rect x="273.3" y="28" w="8.7" h="20" radius="3" fill="$st-rem" />
        <rect x="282.0" y="56" w="13.0" h="20" radius="3" fill="$st-light" />
        <rect x="295.0" y="0" w="3.6" h="20" radius="3" fill="$st-awake" />
        <rect x="298.6" y="56" w="22.4" h="20" radius="3" fill="$st-light" />
      </frame>
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="Tiny" value="11 PM" color="$ink-3" />
        <text text-style="Tiny" value="1 AM" color="$ink-3" />
        <text text-style="Tiny" value="3 AM" color="$ink-3" />
        <text text-style="Tiny" value="5 AM" color="$ink-3" />
        <text text-style="Tiny" value="6:42 AM" color="$ink-3" />
      </row>
      <line w="fill" fill="$hair" role="divider" />
      <row w="fill" align="middle-left" gap="auto">
        <row gap="6" align="middle-center">
          <rect w="9" h="9" radius="3" fill="$st-awake" />
          <text text-style="Tiny" value="Awake" color="$ink-2" />
        </row>
        <row gap="6" align="middle-center">
          <rect w="9" h="9" radius="3" fill="$st-rem" />
          <text text-style="Tiny" value="REM" color="$ink-2" />
        </row>
        <row gap="6" align="middle-center">
          <rect w="9" h="9" radius="3" fill="$st-light" />
          <text text-style="Tiny" value="Light" color="$ink-2" />
        </row>
        <row gap="6" align="middle-center">
          <rect w="9" h="9" radius="3" fill="$st-deep" />
          <text text-style="Tiny" value="Deep" color="$ink-2" />
        </row>
      </row>
    </col>
    <!-- Stage breakdown -->
    <col role="card" w="353" radius="$r-card" p="16" gap="15" fill="$card" border="1 $hair">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F4F0FC 100%)" />
        <effect type="drop-shadow" x="0" y="8" radius="20" spread="-6" color="#2A1F5021" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
      </appearance>
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="H2" value="Stage breakdown" color="$ink" />
        <text text-style="Label" text-case="uppercase" value="% of night" color="$ink-3" />
      </row>
      <!-- Composition bar over time in bed (444 min) across 321px -->
      <frame w="321" h="22" radius="7" clip="true">
        <rect x="0.0" y="0" w="23.9" h="22" fill="$st-awake" />
        <rect x="23.9" y="0" w="65.1" h="22" fill="$st-rem" />
        <rect x="89.0" y="0" w="178.6" h="22" fill="$st-light" />
        <rect x="267.6" y="0" w="53.4" h="22" fill="$st-deep" />
      </frame>
      <col w="fill" gap="13">
        <row w="fill" align="middle-left" gap="12">
          <rect w="14" h="14" radius="4" fill="$st-light" />
          <text w="fill" text-style="ItemName" value="Light sleep" color="$ink" />
          <text text-style="RowVal" value="4h 07m" color="$ink-2" />
          <text w="46" text-style="Pct" value="56%" color="$ink" align="right" />
        </row>
        <row w="fill" align="middle-left" gap="12">
          <rect w="14" h="14" radius="4" fill="$st-rem" />
          <text w="fill" text-style="ItemName" value="REM" color="$ink" />
          <text text-style="RowVal" value="1h 30m" color="$ink-2" />
          <text w="46" text-style="Pct" value="20%" color="$ink" align="right" />
        </row>
        <row w="fill" align="middle-left" gap="12">
          <rect w="14" h="14" radius="4" fill="$st-deep" />
          <text w="fill" text-style="ItemName" value="Deep sleep" color="$ink" />
          <text text-style="RowVal" value="1h 14m" color="$ink-2" />
          <text w="46" text-style="Pct" value="17%" color="$ink" align="right" />
        </row>
        <row w="fill" align="middle-left" gap="12">
          <rect w="14" h="14" radius="4" fill="$st-awake" />
          <text w="fill" text-style="ItemName" value="Awake" color="$ink" />
          <text text-style="RowVal" value="0h 33m" color="$ink-2" />
          <text w="46" text-style="Pct" value="7%" color="$ink" align="right" />
        </row>
      </col>
    </col>
    <!-- Overnight vitals -->
    <row w="353" gap="11" align="top-left">
      <col role="card" w="110" radius="$r-tile" p="13" gap="9" fill="$card" border="1 $hair" align="top-left">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F4F0FC 100%)" />
          <effect type="drop-shadow" x="0" y="5" radius="12" spread="-4" color="#2A1F501C" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
        </appearance>
        <img src="https://api.iconify.design/lucide/heart-pulse.svg?color=%234A32A8" w="19" h="19" />
        <row gap="3" align="bottom-left">
          <text text-style="TileVal" value="52" color="$ink" />
          <text text-style="Caption" value="bpm" color="$ink-2" pb="3" />
        </row>
        <text text-style="Tiny" text-case="uppercase" value="Resting HR" color="$ink-3" />
      </col>
      <col role="card" w="110" radius="$r-tile" p="13" gap="9" fill="$card" border="1 $hair" align="top-left">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F4F0FC 100%)" />
          <effect type="drop-shadow" x="0" y="5" radius="12" spread="-4" color="#2A1F501C" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
        </appearance>
        <img src="https://api.iconify.design/lucide/wind.svg?color=%234A32A8" w="19" h="19" />
        <row gap="3" align="bottom-left">
          <text text-style="TileVal" value="14.2" color="$ink" />
          <text text-style="Caption" value="br/m" color="$ink-2" pb="3" />
        </row>
        <text text-style="Tiny" text-case="uppercase" value="Respiratory" color="$ink-3" />
      </col>
      <col role="card" w="111" radius="$r-tile" p="13" gap="9" fill="$card" border="1 $hair" align="top-left">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F4F0FC 100%)" />
          <effect type="drop-shadow" x="0" y="5" radius="12" spread="-4" color="#2A1F501C" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
        </appearance>
        <img src="https://api.iconify.design/lucide/activity.svg?color=%234A32A8" w="19" h="19" />
        <row gap="3" align="bottom-left">
          <text text-style="TileVal" value="62" color="$ink" />
          <text text-style="Caption" value="ms" color="$ink-2" pb="3" />
        </row>
        <text text-style="Tiny" text-case="uppercase" value="Avg HRV" color="$ink-3" />
      </col>
    </row>
    <!-- Overnight heart rate -->
    <col role="card" w="353" radius="$r-card" p="16" gap="12" fill="$card" border="1 $hair">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F4F0FC 100%)" />
        <effect type="drop-shadow" x="0" y="8" radius="20" spread="-6" color="#2A1F5021" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
      </appearance>
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="H2" value="Overnight heart rate" color="$ink" />
        <text text-style="Caption" value="Low 48 bpm at 3:40 AM" color="$ink-2" />
      </row>
      <img
        src="https://gui.farm/tools/charts/line-chart.svg?data=0:58,0.5:57,1:55,1.5:53,2:52,2.5:50,3:49,3.5:48,4:49,4.5:51,5:52,5.5:54,6:57,6.5:59,7:61,7.4:63&amp;line=%234A32A8&amp;surface=light&amp;curve=smooth&amp;area=on&amp;points=hide&amp;grid=show&amp;xlabels=hide&amp;ylabels=show&amp;width=321&amp;height=110"
        w="321"
        h="110"
        fit="fill"
      />
      <row w="fill" align="middle-left" gap="auto">
        <text text-style="Tiny" value="11 PM" color="$ink-3" />
        <text text-style="Tiny" value="2 AM" color="$ink-3" />
        <text text-style="Tiny" value="4 AM" color="$ink-3" />
        <text text-style="Tiny" value="6 AM" color="$ink-3" />
      </row>
    </col>
    <!-- Tab bar (viewport-fixed, last flow child) -->
    <row role="tab-bar" w="fill" h="hug" fill="$card" border="1 $hair" p="16 24" align="top-center" gap="auto">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F1ECFA 100%)" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
      </appearance>
      <col w="60" align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/sun.svg?color=%236E6683" w="22" h="22" />
        <text text-style="Tiny" value="Today" color="$ink-3" align="center" />
      </col>
      <col w="60" align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/trending-up.svg?color=%236E6683" w="22" h="22" />
        <text text-style="Tiny" value="Trends" color="$ink-3" align="center" />
      </col>
      <col w="60" align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/moon.svg?color=%236A4CE4" w="22" h="22" />
        <text text-style="Tiny" value="Sleep" color="$accent" align="center" />
      </col>
      <col w="60" align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/message-circle.svg?color=%236E6683" w="22" h="22" />
        <text text-style="Tiny" value="Coach" color="$ink-3" align="center" />
      </col>
      <col w="60" align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/user.svg?color=%236E6683" w="22" h="22" />
        <text text-style="Tiny" value="Me" color="$ink-3" align="center" />
      </col>
    </row>
  </col>
</gui>
```