---
title: "Cinder Peak Observatory - Tonight"
platform: web
slug: cinder-peak-observatory-tonight
screens: ["dashboard"]
domains: []
style: "skeuomorphic"
fonts: ["Oswald", "IBM Plex Mono"]
roles: ["top-navigation-bar", "chip", "segmented-control", "table"]
score: {clean: 100, consistent: 68, accessible: 92, comprehensible: 27}
url: https://gui.farm/web/cinder-peak-observatory-tonight
raw: https://gui.farm/web/cinder-peak-observatory-tonight/design.guix
download: https://gui.farm/web/cinder-peak-observatory-tonight.gui
---

# Cinder Peak Observatory - Tonight

A skeuomorphic dark-theme web stargazing forecast where an amateur astronomer reads tonight's observing conditions at a dark-sky observatory, with an hourly cloud-and-darkness timeline, seeing/transparency/moon gauges, a ranked list of visible sky targets by peak altitude, and the full twilight cascade.

- **Live preview:** https://gui.farm/web/cinder-peak-observatory-tonight
- **Raw source:** https://gui.farm/web/cinder-peak-observatory-tonight/design.guix
- **Download (.gui):** https://gui.farm/web/cinder-peak-observatory-tonight.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Cinder Peak Observatory - Tonight's Sky">
  <tokens>
    <color name="ink" value="#0B0B0D" />
    <color name="panel" value="#15130E" />
    <color name="panel2" value="#1E1B13" />
    <color name="line" value="#2C281D" />
    <color name="line2" value="#3C3524" />
    <color name="amber" value="#F2A81C" />
    <color name="amber-soft" value="#C88A18" />
    <color name="band" value="#6E5312" />
    <color name="ember" value="#E5564A" />
    <color name="ember-br" value="#FF9E90" />
    <color name="ember-dim" value="#4A211B" />
    <color name="text" value="#F3EEE2" />
    <color name="muted" value="#B4A98F" />
    <color name="faint" value="#7C7360" />
  </tokens>
  <fonts>
    <font family="Oswald" source="google" weights="300 400 500 600 700" styles="normal" />
    <font family="IBM Plex Mono" source="google" weights="400 500 600" styles="normal" />
  </fonts>
  <styles>
    <text-style
      name="Eyebrow"
      font-family="Oswald"
      font-size="13"
      font-weight="600"
      line-height="16"
      letter-spacing="2.5"
    />
    <text-style
      name="Wordmark"
      font-family="Oswald"
      font-size="17"
      font-weight="600"
      line-height="20"
      letter-spacing="2"
    />
    <text-style
      name="Hero"
      font-family="Oswald"
      font-size="34"
      font-weight="600"
      line-height="38"
      letter-spacing="0.3"
    />
    <text-style
      name="Section"
      font-family="Oswald"
      font-size="15"
      font-weight="600"
      line-height="20"
      letter-spacing="1.5"
    />
    <text-style
      name="Label"
      font-family="Oswald"
      font-size="13"
      font-weight="600"
      line-height="16"
      letter-spacing="1.2"
    />
    <text-style name="Body" font-family="Oswald" font-size="15" font-weight="400" line-height="21" />
    <text-style
      name="Small"
      font-family="Oswald"
      font-size="12"
      font-weight="500"
      line-height="16"
      letter-spacing="0.4"
    />
    <text-style name="TargetName" font-family="Oswald" font-size="16" font-weight="600" line-height="20" />
    <text-style name="Metric" font-family="IBM Plex Mono" font-size="30" font-weight="600" line-height="34" />
    <text-style name="MetricLg" font-family="IBM Plex Mono" font-size="44" font-weight="600" line-height="48" />
    <text-style name="Mono" font-family="IBM Plex Mono" font-size="13" font-weight="500" line-height="18" />
    <text-style
      name="MonoSm"
      font-family="IBM Plex Mono"
      font-size="11"
      font-weight="500"
      line-height="14"
      letter-spacing="0.4"
    />
  </styles>
  <col w="1440" fill="$ink" align="top-center">
    <!-- ===== TOP NAV ===== -->
    <row
      w="fill"
      h="74"
      p="0 80"
      align="middle-left"
      fill="$panel"
      border="0 0 1 0 $line"
      gap="auto"
      role="top-navigation-bar"
    >
      <row gap="12" align="middle-left">
        <img src="https://api.iconify.design/lucide/telescope.svg?color=%23F2A81C" w="24" h="24" />
        <text text-style="Wordmark" value="CINDER PEAK OBSERVATORY" color="$text" />
        <text text-style="Small" value="est. 1998" color="$muted" />
      </row>
      <row gap="16" align="middle-right">
        <row p="7 13" radius="999" fill="$ember-dim" gap="7" align="middle-center" role="chip">
          <img src="https://api.iconify.design/lucide/moon.svg?color=%23FF9E90" w="14" h="14" />
          <text text-style="Small" value="RED-LIGHT MODE" color="$ember-br" />
        </row>
        <img src="https://api.iconify.design/lucide/settings.svg?color=%23B4A98F" w="20" h="20" />
      </row>
    </row>
    <!-- ===== CONTENT ===== -->
    <col w="1280" p="26 0 40 0" gap="20" align="top-center">
      <!-- ===== HERO ===== -->
      <frame w="1280" h="440" radius="16" clip="true" border="1 $line2">
        <img
          abs="true"
          x="0"
          y="0"
          w="1280"
          h="440"
          fit="cover"
          src="https://images.unsplash.com/photo-1765825365130-52e276bca060?w=1440&amp;h=520&amp;fit=crop&amp;crop=entropy&amp;q=72&amp;auto=format"
        />
        <col
          abs="true"
          x="40"
          y="248"
          w="700"
          fill="$panel"
          radius="14"
          border="1 $line2"
          p="22 26"
          gap="10"
          align="top-left"
        >
          <row gap="9" align="middle-left">
            <img src="https://api.iconify.design/lucide/sparkles.svg?color=%23F2A81C" w="15" h="15" />
            <text text-style="Eyebrow" value="TONIGHT'S SKY / FRIDAY, AUGUST 15" color="$amber" />
          </row>
          <text text-style="Hero" value="Clear, steady, moonless by midnight" color="$text" />
          <text
            text-style="Body"
            value="Astronomical night 21:36 to 03:48 / 8% crescent sets 23:12 / Bortle 2 sky"
            color="$muted"
          />
        </col>
        <col
          abs="true"
          x="998"
          y="248"
          w="242"
          fill="$panel2"
          radius="14"
          border="1 $line2"
          p="18 0"
          gap="2"
          align="middle-center"
        >
          <text text-style="Eyebrow" value="OBSERVING INDEX" color="$muted" />
          <text text-style="MetricLg" value="9.1" color="$amber" />
          <text text-style="Label" value="EXCEPTIONAL" color="$amber" />
        </col>
      </frame>
      <!-- ===== ROW C: TIMELINE + GAUGES ===== -->
      <row w="1280" gap="20" align="top-left">
        <!-- LEFT: night conditions timeline -->
        <col w="820" fill="$panel" radius="16" border="1 $line" p="22 24" gap="18" align="top-left">
          <row w="fill" gap="auto" align="middle-left">
            <row gap="10" align="middle-left">
              <img src="https://api.iconify.design/lucide/cloud-moon.svg?color=%23F2A81C" w="18" h="18" />
              <text text-style="Section" value="NIGHT CONDITIONS TIMELINE" color="$text" />
            </row>
            <text text-style="Mono" value="8:00 PM to 5:00 AM PDT" color="$muted" />
          </row>
          <row w="fill" align="middle-center">
            <frame w="720" h="180">
              <!-- twilight rail -->
              <rect abs="true" x="0" y="12" w="720" h="22" radius="6" fill="$panel2" />
              <rect abs="true" x="128" y="12" w="496" h="22" radius="6" fill="$band" />
              <text
                abs="true"
                x="138"
                y="17"
                text-style="MonoSm"
                value="ASTRONOMICAL DARK / 21:36 to 03:48"
                color="$text"
              />
              <!-- moonset divider -->
              <rect abs="true" x="256" y="6" w="2" h="146" fill="$faint" />
              <text abs="true" x="255" y="-14" text-style="MonoSm" value="MOONSET 23:12" color="$muted" />
              <!-- baseline -->
              <rect abs="true" x="0" y="150" w="720" h="1" fill="$line2" />
              <!-- cloud-cover hourly bars (px height = cloud %) -->
              <text abs="true" x="16" y="90" text-style="MonoSm" value="42%" color="$muted" />
              <rect abs="true" x="18" y="108" w="44" h="42" radius="3" fill="$amber" />
              <text abs="true" x="98" y="104" text-style="MonoSm" value="28%" color="$muted" />
              <rect abs="true" x="98" y="122" w="44" h="28" radius="3" fill="$amber" />
              <text abs="true" x="180" y="118" text-style="MonoSm" value="14%" color="$muted" />
              <rect abs="true" x="178" y="136" w="44" h="14" radius="3" fill="$amber-soft" />
              <text abs="true" x="260" y="126" text-style="MonoSm" value="6%" color="$muted" />
              <rect abs="true" x="258" y="144" w="44" h="6" radius="3" fill="$amber-soft" />
              <text abs="true" x="340" y="128" text-style="MonoSm" value="4%" color="$muted" />
              <rect abs="true" x="338" y="146" w="44" h="4" radius="3" fill="$amber-soft" />
              <text abs="true" x="420" y="123" text-style="MonoSm" value="9%" color="$muted" />
              <rect abs="true" x="418" y="141" w="44" h="9" radius="3" fill="$amber-soft" />
              <text abs="true" x="500" y="112" text-style="MonoSm" value="20%" color="$muted" />
              <rect abs="true" x="498" y="130" w="44" h="20" radius="3" fill="$amber" />
              <text abs="true" x="580" y="94" text-style="MonoSm" value="38%" color="$muted" />
              <rect abs="true" x="578" y="112" w="44" h="38" radius="3" fill="$amber" />
              <text abs="true" x="660" y="71" text-style="MonoSm" value="61%" color="$ember" />
              <rect abs="true" x="658" y="89" w="44" h="61" radius="3" fill="$ember" />
              <!-- hour labels -->
              <text abs="true" x="24" y="158" text-style="MonoSm" value="8p" color="$muted" />
              <text abs="true" x="104" y="158" text-style="MonoSm" value="9p" color="$muted" />
              <text abs="true" x="181" y="158" text-style="MonoSm" value="10p" color="$muted" />
              <text abs="true" x="261" y="158" text-style="MonoSm" value="11p" color="$muted" />
              <text abs="true" x="340" y="158" text-style="MonoSm" value="12a" color="$muted" />
              <text abs="true" x="422" y="158" text-style="MonoSm" value="1a" color="$muted" />
              <text abs="true" x="502" y="158" text-style="MonoSm" value="2a" color="$muted" />
              <text abs="true" x="582" y="158" text-style="MonoSm" value="3a" color="$muted" />
              <text abs="true" x="662" y="158" text-style="MonoSm" value="4a" color="$muted" />
            </frame>
          </row>
          <row w="fill" gap="16" align="middle-left">
            <row gap="7" align="middle-left">
              <rect w="12" h="12" radius="3" fill="$band" />
              <text text-style="Small" value="Astronomical dark" color="$muted" />
            </row>
            <row gap="7" align="middle-left">
              <rect w="12" h="12" radius="3" fill="$amber" />
              <text text-style="Small" value="Cloud cover, hourly" color="$muted" />
            </row>
            <row gap="7" align="middle-left">
              <rect w="12" h="12" radius="3" fill="$ember" />
              <text text-style="Small" value="Cloud over 50%" color="$muted" />
            </row>
          </row>
          <!-- weather stat strip -->
          <row w="fill" p="16 0 0 0" border="1 0 0 0 $line" gap="auto" align="top-left">
            <col gap="3" w="170">
              <text text-style="Small" value="AIR TEMP" color="$muted" text-case="uppercase" />
              <text text-style="Mono" value="11 C" color="$text" />
            </col>
            <col gap="3" w="170">
              <text text-style="Small" value="DEW POINT" color="$muted" text-case="uppercase" />
              <text text-style="Mono" value="3 C" color="$text" />
            </col>
            <col gap="3" w="170">
              <text text-style="Small" value="HUMIDITY" color="$muted" text-case="uppercase" />
              <text text-style="Mono" value="41%" color="$text" />
            </col>
            <col gap="3" w="170">
              <text text-style="Small" value="WIND" color="$muted" text-case="uppercase" />
              <text text-style="Mono" value="7 km/h NW" color="$text" />
            </col>
          </row>
        </col>
        <!-- RIGHT: gauges -->
        <col w="440" gap="20" align="top-left">
          <col w="440" fill="$panel" radius="16" border="1 $line" p="20" gap="12" align="top-left">
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="Label" value="SEEING" color="$muted" />
              <text text-style="Label" value="EXCELLENT" color="$amber" />
            </row>
            <row gap="8" align="middle-left">
              <text text-style="Metric" value="0.9&quot;" color="$text" />
              <text text-style="Body" value="arcsec FWHM" color="$muted" />
            </row>
            <frame w="400" h="8" radius="4" fill="$panel2">
              <rect abs="true" x="0" y="0" w="336" h="8" radius="4" fill="$amber" />
            </frame>
          </col>
          <col w="440" fill="$panel" radius="16" border="1 $line" p="20" gap="12" align="top-left">
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="Label" value="TRANSPARENCY" color="$muted" />
              <text text-style="Label" value="ABOVE AVERAGE" color="$amber" />
            </row>
            <row gap="8" align="middle-left">
              <text text-style="Metric" value="6.6" color="$text" />
              <text text-style="Body" value="naked-eye limiting mag" color="$muted" />
            </row>
            <frame w="400" h="8" radius="4" fill="$panel2">
              <rect abs="true" x="0" y="0" w="304" h="8" radius="4" fill="$amber" />
            </frame>
          </col>
          <col w="440" fill="$panel" radius="16" border="1 $line" p="20" gap="14" align="top-left">
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="Label" value="MOON" color="$muted" />
              <text text-style="Label" value="WAXING CRESCENT" color="$amber" />
            </row>
            <row w="fill" gap="18" align="middle-left">
              <frame w="60" h="60" radius="999" fill="$panel2" border="1 $line2" clip="true">
                <ellipse abs="true" x="6" y="6" w="48" h="48" fill="#111015" />
                <ellipse abs="true" x="30" y="6" w="20" h="48" fill="$amber-soft" />
                <ellipse abs="true" x="22" y="6" w="24" h="48" fill="#111015" />
              </frame>
              <col gap="6" w="300" align="top-left">
                <row w="fill" gap="auto">
                  <text text-style="Small" value="ILLUMINATION" color="$muted" />
                  <text text-style="Mono" value="8%" color="$text" />
                </row>
                <row w="fill" gap="auto">
                  <text text-style="Small" value="MOONSET" color="$muted" />
                  <text text-style="Mono" value="23:12" color="$text" />
                </row>
                <row w="fill" gap="auto">
                  <text text-style="Small" value="MOON AGE" color="$muted" />
                  <text text-style="Mono" value="3.1 days" color="$text" />
                </row>
              </col>
            </row>
            <frame w="400" h="8" radius="4" fill="$panel2">
              <rect abs="true" x="0" y="0" w="32" h="8" radius="4" fill="$amber" />
            </frame>
          </col>
        </col>
      </row>
      <!-- ===== ROW D: SKY TARGETS ===== -->
      <col w="1280" fill="$panel" radius="16" border="1 $line" p="24 28" gap="14" align="top-left">
        <row w="fill" gap="auto" align="middle-left">
          <row gap="10" align="middle-left">
            <img src="https://api.iconify.design/lucide/star.svg?color=%23F2A81C" w="18" h="18" />
            <text text-style="Section" value="SKY TARGETS TONIGHT" color="$text" />
          </row>
          <row
            radius="8"
            fill="$panel2"
            border="1 $line"
            p="3"
            gap="0"
            align="middle-center"
            role="segmented-control"
          >
            <row p="6 14" radius="6" fill="$amber">
              <text text-style="Small" value="All" color="$ink" />
            </row>
            <row p="6 14" radius="6">
              <text text-style="Small" value="Planets" color="$muted" />
            </row>
            <row p="6 14" radius="6">
              <text text-style="Small" value="Deep sky" color="$muted" />
            </row>
          </row>
        </row>
        <!-- headings -->
        <row w="fill" h="24" align="middle-left" gap="0">
          <text text-style="Small" value="OBJECT" color="$muted" w="fill" text-case="uppercase" />
          <text text-style="Small" value="TYPE" color="$muted" w="160" text-case="uppercase" />
          <text text-style="Small" value="BEST VIEWING" color="$muted" w="190" text-case="uppercase" />
          <text text-style="Small" value="PEAK ALTITUDE" color="$muted" w="252" text-case="uppercase" />
          <text text-style="Small" value="MAG" color="$muted" w="90" text-case="uppercase" />
        </row>
        <!-- rows -->
        <row w="fill" h="52" align="middle-left" gap="0" border="1 0 0 0 $line" role="table">
          <col w="fill" gap="1">
            <text text-style="TargetName" value="Saturn" color="$text" />
            <text text-style="Small" value="Aquarius" color="$muted" />
          </col>
          <text text-style="Body" value="Planet" color="$muted" w="160" />
          <text text-style="Mono" value="01:52 transit" color="$text" w="190" />
          <row w="252" gap="12" align="middle-left">
            <frame w="180" h="10" radius="5" fill="$panel2">
              <rect abs="true" x="0" y="0" w="76" h="10" radius="5" fill="$amber" />
            </frame>
            <text text-style="Mono" value="38°" color="$text" />
          </row>
          <text text-style="Mono" value="+0.6" color="$text" w="90" />
        </row>
        <row w="fill" h="52" align="middle-left" gap="0" border="1 0 0 0 $line" role="table">
          <col w="fill" gap="1">
            <text text-style="TargetName" value="Jupiter" color="$text" />
            <text text-style="Small" value="Taurus" color="$muted" />
          </col>
          <text text-style="Body" value="Planet" color="$muted" w="160" />
          <text text-style="Mono" value="23:41 rise" color="$text" w="190" />
          <row w="252" gap="12" align="middle-left">
            <frame w="180" h="10" radius="5" fill="$panel2">
              <rect abs="true" x="0" y="0" w="88" h="10" radius="5" fill="$amber" />
            </frame>
            <text text-style="Mono" value="44°" color="$text" />
          </row>
          <text text-style="Mono" value="-1.9" color="$text" w="90" />
        </row>
        <row w="fill" h="52" align="middle-left" gap="0" border="1 0 0 0 $line" role="table">
          <col w="fill" gap="1">
            <text text-style="TargetName" value="Andromeda Galaxy" color="$text" />
            <text text-style="Small" value="M31 / Andromeda" color="$muted" />
          </col>
          <text text-style="Body" value="Galaxy" color="$muted" w="160" />
          <text text-style="Mono" value="03:10 transit" color="$text" w="190" />
          <row w="252" gap="12" align="middle-left">
            <frame w="180" h="10" radius="5" fill="$panel2">
              <rect abs="true" x="0" y="0" w="156" h="10" radius="5" fill="$amber" />
            </frame>
            <text text-style="Mono" value="78°" color="$text" />
          </row>
          <text text-style="Mono" value="+3.4" color="$text" w="90" />
        </row>
        <row w="fill" h="52" align="middle-left" gap="0" border="1 0 0 0 $line" role="table">
          <col w="fill" gap="1">
            <text text-style="TargetName" value="Hercules Cluster" color="$text" />
            <text text-style="Small" value="M13 / Hercules" color="$muted" />
          </col>
          <text text-style="Body" value="Globular cluster" color="$muted" w="160" />
          <text text-style="Mono" value="21:50 transit" color="$text" w="190" />
          <row w="252" gap="12" align="middle-left">
            <frame w="180" h="10" radius="5" fill="$panel2">
              <rect abs="true" x="0" y="0" w="132" h="10" radius="5" fill="$amber" />
            </frame>
            <text text-style="Mono" value="66°" color="$text" />
          </row>
          <text text-style="Mono" value="+5.8" color="$text" w="90" />
        </row>
        <row w="fill" h="52" align="middle-left" gap="0" border="1 0 0 0 $line" role="table">
          <col w="fill" gap="1">
            <text text-style="TargetName" value="Albireo" color="$text" />
            <text text-style="Small" value="Beta Cygni / Cygnus" color="$muted" />
          </col>
          <text text-style="Body" value="Double star" color="$muted" w="160" />
          <text text-style="Mono" value="00:20 transit" color="$text" w="190" />
          <row w="252" gap="12" align="middle-left">
            <frame w="180" h="10" radius="5" fill="$panel2">
              <rect abs="true" x="0" y="0" w="168" h="10" radius="5" fill="$amber" />
            </frame>
            <text text-style="Mono" value="84°" color="$text" />
          </row>
          <text text-style="Mono" value="+3.1" color="$text" w="90" />
        </row>
        <row w="fill" h="52" align="middle-left" gap="0" border="1 0 0 0 $line" role="table">
          <col w="fill" gap="1">
            <text text-style="TargetName" value="Neptune" color="$text" />
            <text text-style="Small" value="Pisces" color="$muted" />
          </col>
          <text text-style="Body" value="Planet" color="$muted" w="160" />
          <text text-style="Mono" value="02:34 transit" color="$text" w="190" />
          <row w="252" gap="12" align="middle-left">
            <frame w="180" h="10" radius="5" fill="$panel2">
              <rect abs="true" x="0" y="0" w="80" h="10" radius="5" fill="$amber" />
            </frame>
            <text text-style="Mono" value="40°" color="$text" />
          </row>
          <text text-style="Mono" value="+7.8" color="$text" w="90" />
        </row>
      </col>
      <!-- ===== ROW E: SUN &amp; TWILIGHT ===== -->
      <col w="1280" fill="$panel" radius="16" border="1 $line" p="24 28" gap="18" align="top-left">
        <row w="fill" gap="auto" align="middle-left">
          <row gap="10" align="middle-left">
            <img src="https://api.iconify.design/lucide/sunset.svg?color=%23F2A81C" w="18" h="18" />
            <text text-style="Section" value="SUN &amp; TWILIGHT" color="$text" />
          </row>
          <text text-style="Mono" value="Total astronomical darkness 6h 12m" color="$amber" />
        </row>
        <row w="fill" gap="40" align="top-left">
          <col w="590" gap="10" align="top-left">
            <text text-style="Label" value="EVENING / DUSK" color="$muted" />
            <row w="fill" gap="auto" align="middle-left">
              <row gap="10" align="middle-left">
                <rect w="10" h="10" radius="999" fill="$amber" />
                <text text-style="Body" value="Sunset" color="$text" />
              </row>
              <text text-style="Mono" value="20:13" color="$muted" />
            </row>
            <row w="fill" gap="auto" align="middle-left">
              <row gap="10" align="middle-left">
                <rect w="10" h="10" radius="999" fill="$amber-soft" />
                <text text-style="Body" value="Civil dusk" color="$text" />
              </row>
              <text text-style="Mono" value="20:46" color="$muted" />
            </row>
            <row w="fill" gap="auto" align="middle-left">
              <row gap="10" align="middle-left">
                <rect w="10" h="10" radius="999" fill="$band" />
                <text text-style="Body" value="Nautical dusk" color="$text" />
              </row>
              <text text-style="Mono" value="21:09" color="$muted" />
            </row>
            <row w="fill" gap="auto" align="middle-left">
              <row gap="10" align="middle-left">
                <rect w="10" h="10" radius="999" fill="$faint" />
                <text text-style="Body" value="Astronomical dusk" color="$text" />
              </row>
              <text text-style="Mono" value="21:36" color="$muted" />
            </row>
          </col>
          <col w="590" gap="10" align="top-left">
            <text text-style="Label" value="MORNING / DAWN" color="$muted" />
            <row w="fill" gap="auto" align="middle-left">
              <row gap="10" align="middle-left">
                <rect w="10" h="10" radius="999" fill="$faint" />
                <text text-style="Body" value="Astronomical dawn" color="$text" />
              </row>
              <text text-style="Mono" value="03:48" color="$muted" />
            </row>
            <row w="fill" gap="auto" align="middle-left">
              <row gap="10" align="middle-left">
                <rect w="10" h="10" radius="999" fill="$band" />
                <text text-style="Body" value="Nautical dawn" color="$text" />
              </row>
              <text text-style="Mono" value="04:15" color="$muted" />
            </row>
            <row w="fill" gap="auto" align="middle-left">
              <row gap="10" align="middle-left">
                <rect w="10" h="10" radius="999" fill="$amber-soft" />
                <text text-style="Body" value="Civil dawn" color="$text" />
              </row>
              <text text-style="Mono" value="04:38" color="$muted" />
            </row>
            <row w="fill" gap="auto" align="middle-left">
              <row gap="10" align="middle-left">
                <rect w="10" h="10" radius="999" fill="$amber" />
                <text text-style="Body" value="Sunrise" color="$text" />
              </row>
              <text text-style="Mono" value="05:11" color="$muted" />
            </row>
          </col>
        </row>
      </col>
    </col>
    <!-- ===== FOOTER ===== -->
    <row w="fill" h="64" p="0 80" align="middle-left" fill="$panel" border="1 0 0 0 $line" gap="auto">
      <text text-style="Mono" value="Cinder Peak, OR / 42.5 N 118.5 W / 4,320 ft" color="$muted" />
      <text text-style="Mono" value="Updated 19:40 PDT / next model run 22:00" color="$muted" />
    </row>
  </col>
</gui>
```