---
title: "Somna — Last Night"
platform: android
slug: somna-last-night
screens: []
domains: ["healthcare"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "card", "banner", "divider", "tab-bar"]
score: {clean: 100, consistent: 77, accessible: 59, comprehensible: 37}
url: https://gui.farm/android/somna-last-night
raw: https://gui.farm/android/somna-last-night/design.guix
download: https://gui.farm/android/somna-last-night.gui
---

# Somna — Last Night

A light Material Android sleep-recap screen where a wearable user reviews last night: time asleep, a sleep score, a per-stage hypnogram across the night, and Deep/REM/Light/Awake durations with percentages and typical-range bars.

- **Live preview:** https://gui.farm/android/somna-last-night
- **Raw source:** https://gui.farm/android/somna-last-night/design.guix
- **Download (.gui):** https://gui.farm/android/somna-last-night.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Somna — Last Night">
  <tokens>
    <color name="bg" value="#F7F4EE" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-var" value="#EFEAE0" />
    <color name="amber-container" value="#FBEFD8" />
    <color name="ink" value="#1A1712" />
    <color name="muted" value="#6B6154" />
    <color name="line" value="#E3DCCF" />
    <color name="track" value="#E8E0D2" />
    <color name="accent" value="#E08A00" />
    <color name="accent-ink" value="#8A5200" />
    <color name="accent-deep" value="#7A4700" />
    <color name="white" value="#FFFFFF" />
    <color name="hy-deep" value="#7A3E0A" />
    <color name="hy-rem" value="#C56A12" />
    <color name="hy-light" value="#E7A24A" />
    <color name="hy-awake" value="#EBD3A6" />
    <number name="r-xs" value="4" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="14" />
    <number name="r-lg" value="20" />
    <number name="r-full" value="999" />
  </tokens>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="NavTitle" font-family="Roboto" font-size="17" font-weight="600" line-height="22" />
    <text-style
      name="NavSub"
      font-family="Roboto"
      font-size="12"
      font-weight="500"
      line-height="16"
      letter-spacing="0.2"
    />
    <text-style
      name="Overline"
      font-family="Roboto"
      font-size="10"
      font-weight="700"
      line-height="14"
      letter-spacing="0.8"
    />
    <text-style
      name="HeroBig"
      font-family="Roboto"
      font-size="30"
      font-weight="700"
      line-height="34"
      letter-spacing="-0.8"
    />
    <text-style
      name="Caption"
      font-family="Roboto"
      font-size="11"
      font-weight="500"
      line-height="15"
      letter-spacing="0.2"
    />
    <text-style name="Insight" font-family="Roboto" font-size="13" font-weight="500" line-height="18" />
    <text-style
      name="Section"
      font-family="Roboto"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="1"
    />
    <text-style
      name="ClockTick"
      font-family="Roboto"
      font-size="10"
      font-weight="600"
      line-height="12"
      letter-spacing="0.3"
    />
    <text-style name="StageName" font-family="Roboto" font-size="13" font-weight="600" line-height="16" />
    <text-style name="StageDur" font-family="Roboto" font-size="13" font-weight="700" line-height="16" />
    <text-style name="StagePct" font-family="Roboto" font-size="11" font-weight="500" line-height="14" />
    <text-style
      name="Legend"
      font-family="Roboto"
      font-size="11"
      font-weight="600"
      line-height="14"
      letter-spacing="0.2"
    />
    <text-style
      name="StatNum"
      font-family="Roboto"
      font-size="16"
      font-weight="700"
      line-height="20"
      letter-spacing="-0.2"
    />
    <text-style
      name="StatLabel"
      font-family="Roboto"
      font-size="10"
      font-weight="600"
      line-height="13"
      letter-spacing="0.4"
    />
    <text-style
      name="Btn"
      font-family="Roboto"
      font-size="14"
      font-weight="700"
      line-height="18"
      letter-spacing="0.4"
    />
    <text-style
      name="Tab"
      font-family="Roboto"
      font-size="10"
      font-weight="500"
      line-height="12"
      letter-spacing="0.3"
    />
  </styles>
  <col w="360" fill="$bg">
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" fill="$ink" />
      <row gap="6" align="middle-right">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%231A1712"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%231A1712" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%231A1712"
          w="15"
          h="15"
        />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="56" p="0 8 0 4" gap="4" align="middle-left">
      <row role="button" w="44" h="44" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%231A1712"
          w="24"
          h="24"
        />
      </row>
      <col w="fill" gap="1" align="middle-center">
        <text text-style="NavTitle" value="Last Night" fill="$ink" align="center" />
        <text text-style="NavSub" value="Wed, Aug 19 · 11:12 PM to 6:48 AM" fill="$muted" align="center" />
      </col>
      <row role="button" w="44" h="44" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/ios-share-rounded.svg?color=%236B6154"
          w="22"
          h="22"
        />
      </row>
    </row>
    <col w="fill" p="14 16 24 16" gap="16">
      <row w="fill" gap="12" align="top-left">
        <col role="card" w="158" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="10">
          <text text-style="Overline" value="TIME ASLEEP" fill="$muted" />
          <text text-style="HeroBig" value="7h 12m" fill="$ink" />
          <row gap="6" align="middle-left">
            <img
              src="https://api.iconify.design/material-symbols/bed-rounded.svg?color=%236B6154"
              w="15"
              h="15"
            />
            <text text-style="Caption" value="7h 36m in bed" fill="$muted" />
          </row>
        </col>
        <col role="card" w="158" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="10">
          <text text-style="Overline" value="SLEEP SCORE" fill="$muted" />
          <row gap="6" align="bottom-left">
            <text text-style="HeroBig" value="84" fill="$accent-ink" />
            <col gap="0" p="0 0 5 0" align="bottom-left">
              <text text-style="Caption" value="Good" fill="$accent-ink" />
            </col>
          </row>
          <row gap="6" align="middle-left">
            <img
              src="https://api.iconify.design/material-symbols/trending-up-rounded.svg?color=%236B6154"
              w="15"
              h="15"
            />
            <text text-style="Caption" value="+6 vs 30-day avg" fill="$muted" />
          </row>
        </col>
      </row>
      <row role="banner" w="fill" radius="$r-md" fill="$amber-container" p="14" gap="12" align="top-left">
        <row w="34" h="34" radius="$r-full" fill="$surface" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/dark-mode-rounded.svg?color=%238A5200"
            w="19"
            h="19"
          />
        </row>
        <col w="fill" gap="2" align="top-left">
          <text text-style="StageName" value="Restorative night" fill="$accent-ink" />
          <text
            text-style="Insight"
            value="Deep and REM covered 3h 20m, a strong restorative share. You woke 4 times, briefly, and fell asleep in 5 minutes."
            fill="$ink"
          />
        </col>
      </row>
      <col role="card" w="fill" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="14">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Section" value="SLEEP STAGES" fill="$ink" />
          <text text-style="Caption" value="7h 36m in bed" fill="$muted" />
        </row>
        <frame w="296" h="80">
          <rect x="0.0" y="0" w="3.25" h="14" radius="2" fill="$hy-awake" />
          <rect x="3.25" y="44" w="15.58" h="14" radius="2" fill="$hy-light" />
          <rect x="18.82" y="66" w="23.37" h="14" radius="2" fill="$hy-deep" />
          <rect x="42.19" y="44" w="9.09" h="14" radius="2" fill="$hy-light" />
          <rect x="51.28" y="22" w="6.49" h="14" radius="2" fill="$hy-rem" />
          <rect x="57.77" y="44" w="11.68" h="14" radius="2" fill="$hy-light" />
          <rect x="69.46" y="66" w="24.67" h="14" radius="2" fill="$hy-deep" />
          <rect x="94.12" y="44" w="14.28" h="14" radius="2" fill="$hy-light" />
          <rect x="108.4" y="22" w="12.98" h="14" radius="2" fill="$hy-rem" />
          <rect x="121.39" y="0" w="2.6" h="14" radius="2" fill="$hy-awake" />
          <rect x="123.98" y="44" w="18.18" h="14" radius="2" fill="$hy-light" />
          <rect x="142.16" y="66" w="19.47" h="14" radius="2" fill="$hy-deep" />
          <rect x="161.63" y="44" w="12.98" h="14" radius="2" fill="$hy-light" />
          <rect x="174.61" y="22" w="14.28" h="14" radius="2" fill="$hy-rem" />
          <rect x="188.89" y="44" w="16.88" h="14" radius="2" fill="$hy-light" />
          <rect x="205.77" y="0" w="1.95" h="14" radius="2" fill="$hy-awake" />
          <rect x="207.72" y="44" w="10.39" h="14" radius="2" fill="$hy-light" />
          <rect x="218.11" y="22" w="22.07" h="14" radius="2" fill="$hy-rem" />
          <rect x="240.18" y="44" w="19.47" h="14" radius="2" fill="$hy-light" />
          <rect x="259.65" y="0" w="5.19" h="14" radius="2" fill="$hy-awake" />
          <rect x="264.84" y="44" w="7.79" h="14" radius="2" fill="$hy-light" />
          <rect x="272.63" y="22" w="6.49" h="14" radius="2" fill="$hy-rem" />
          <rect x="279.12" y="44" w="6.49" h="14" radius="2" fill="$hy-light" />
          <rect x="285.61" y="0" w="2.6" h="14" radius="2" fill="$hy-awake" />
          <rect x="288.21" y="44" w="7.79" h="14" radius="2" fill="$hy-light" />
        </frame>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="ClockTick" value="11:12 PM" fill="$muted" />
          <text text-style="ClockTick" value="3:00 AM" fill="$muted" />
          <text text-style="ClockTick" value="6:48 AM" fill="$muted" />
        </row>
        <rect role="divider" w="296" h="1" fill="$line" />
        <col w="296" gap="12">
          <row w="fill" h="16" gap="10" align="middle-left">
            <row w="74" gap="8" align="middle-left">
              <rect w="10" h="10" radius="2" fill="$hy-deep" />
              <text text-style="StageName" value="Deep" fill="$ink" />
            </row>
            <row w="fill" h="8" radius="$r-full" fill="$track" align="middle-left">
              <rect w="23.72" h="8" radius="$r-full" fill="$hy-deep" />
            </row>
            <row w="40" align="middle-right">
              <text text-style="StagePct" value="22.8%" fill="$muted" />
            </row>
            <row w="48" align="middle-right">
              <text text-style="StageDur" value="1h 44m" fill="$ink" />
            </row>
          </row>
          <row w="fill" h="16" gap="10" align="middle-left">
            <row w="74" gap="8" align="middle-left">
              <rect w="10" h="10" radius="2" fill="$hy-rem" />
              <text text-style="StageName" value="REM" fill="$ink" />
            </row>
            <row w="fill" h="8" radius="$r-full" fill="$track" align="middle-left">
              <rect w="21.89" h="8" radius="$r-full" fill="$hy-rem" />
            </row>
            <row w="40" align="middle-right">
              <text text-style="StagePct" value="21.1%" fill="$muted" />
            </row>
            <row w="48" align="middle-right">
              <text text-style="StageDur" value="1h 36m" fill="$ink" />
            </row>
          </row>
          <row w="fill" h="16" gap="10" align="middle-left">
            <row w="74" gap="8" align="middle-left">
              <rect w="10" h="10" radius="2" fill="$hy-light" />
              <text text-style="StageName" value="Light" fill="$ink" />
            </row>
            <row w="fill" h="8" radius="$r-full" fill="$track" align="middle-left">
              <rect w="52.91" h="8" radius="$r-full" fill="$hy-light" />
            </row>
            <row w="40" align="middle-right">
              <text text-style="StagePct" value="50.9%" fill="$muted" />
            </row>
            <row w="48" align="middle-right">
              <text text-style="StageDur" value="3h 52m" fill="$ink" />
            </row>
          </row>
          <row w="fill" h="16" gap="10" align="middle-left">
            <row w="74" gap="8" align="middle-left">
              <rect w="10" h="10" radius="2" fill="$hy-awake" />
              <text text-style="StageName" value="Awake" fill="$ink" />
            </row>
            <row w="fill" h="8" radius="$r-full" fill="$track" align="middle-left">
              <rect w="5.47" h="8" radius="$r-full" fill="$accent" />
            </row>
            <row w="40" align="middle-right">
              <text text-style="StagePct" value="5.3%" fill="$muted" />
            </row>
            <row w="48" align="middle-right">
              <text text-style="StageDur" value="0h 24m" fill="$ink" />
            </row>
          </row>
        </col>
      </col>
      <row w="fill" gap="12" align="top-left">
        <col
          role="card"
          w="fill"
          radius="$r-md"
          fill="$surface"
          border="1 $line"
          p="14"
          gap="6"
          align="top-left"
        >
          <img
            src="https://api.iconify.design/material-symbols/percent-rounded.svg?color=%238A5200"
            w="18"
            h="18"
          />
          <text text-style="StatNum" value="94.7%" fill="$ink" />
          <text text-style="StatLabel" value="EFFICIENCY" fill="$muted" />
        </col>
        <col
          role="card"
          w="fill"
          radius="$r-md"
          fill="$surface"
          border="1 $line"
          p="14"
          gap="6"
          align="top-left"
        >
          <img
            src="https://api.iconify.design/material-symbols/timer-rounded.svg?color=%238A5200"
            w="18"
            h="18"
          />
          <text text-style="StatNum" value="5m" fill="$ink" />
          <text text-style="StatLabel" value="TO FALL ASLE.." fill="$muted" white-space="nowrap" />
        </col>
        <col
          role="card"
          w="fill"
          radius="$r-md"
          fill="$surface"
          border="1 $line"
          p="14"
          gap="6"
          align="top-left"
        >
          <img
            src="https://api.iconify.design/material-symbols/ecg-heart-rounded.svg?color=%238A5200"
            w="18"
            h="18"
          />
          <text text-style="StatNum" value="52" fill="$ink" />
          <text text-style="StatLabel" value="RESTING BPM" fill="$muted" />
        </col>
      </row>
      <row role="button" w="fill" h="52" radius="$r-full" fill="$accent-deep" gap="8" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/bar-chart-rounded.svg?color=%23FFFFFF"
          w="20"
          h="20"
        />
        <text text-style="Btn" value="See full report" fill="$white" />
      </row>
    </col>
    <col w="fill" fill="$surface" border="1 0 0 0 $line">
      <row role="tab-bar" w="fill" h="58" p="0 8" align="middle-center">
        <col w="fill" gap="4" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/dark-mode-rounded.svg?color=%238A5200"
            w="24"
            h="24"
          />
          <text text-style="Tab" value="Last Night" fill="$accent-ink" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/trending-up-outline.svg?color=%236B6154"
            w="24"
            h="24"
          />
          <text text-style="Tab" value="Trends" fill="$muted" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/self-improvement-rounded.svg?color=%236B6154"
            w="24"
            h="24"
          />
          <text text-style="Tab" value="Wind Down" fill="$muted" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/person-rounded.svg?color=%236B6154"
            w="24"
            h="24"
          />
          <text text-style="Tab" value="You" fill="$muted" />
        </col>
      </row>
      <row w="fill" h="22" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$ink" />
      </row>
    </col>
  </col>
</gui>
```