---
title: "Hearth Thermostat"
platform: ios
slug: hearth-thermostat
screens: []
domains: ["smart-home"]
style: "skeuomorphic"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "button", "segmented-control", "card", "tab-bar"]
score: {clean: 100, consistent: 76, accessible: 88, comprehensible: 40}
url: https://gui.farm/ios/hearth-thermostat
raw: https://gui.farm/ios/hearth-thermostat/design.guix
download: https://gui.farm/ios/hearth-thermostat.gui
---

# Hearth Thermostat

A skeuomorphic smart-home thermostat with a brushed-metal dial, an amber heat-glow gauge ring, mode selector, schedule, and per-room climate list.

- **Live preview:** https://gui.farm/ios/hearth-thermostat
- **Raw source:** https://gui.farm/ios/hearth-thermostat/design.guix
- **Download (.gui):** https://gui.farm/ios/hearth-thermostat.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Hearth Thermostat">
  <mode name="theme" values="light dark" default="dark" />

  <tokens>
    <color name="bg"       value="#141210" />
    <color name="panel"    value="#211D18" />
    <color name="panel-2"  value="#2A251F" />
    <color name="ink"      value="#F3ECDE" />
    <color name="ink-2"    value="#B4A78F" />
    <color name="hair"     value="#322C24" />
    <color name="amber"    value="#E7A44A" />
    <color name="amber-lt" value="#F0B968" />
    <color name="tick"     value="#37322B" />
    <color name="cool"     value="#79B8E0" />

    <number name="r-pill" value="999" />
    <number name="r-card" value="22" />
    <number name="r-tile" value="14" />
    <number name="r-btn"  value="18" />
  </tokens>

  <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="17" font-weight="600" line-height="20" />
    <text-style name="Dial"      font-family="SF Pro Display" font-size="82" font-weight="300" line-height="82" letter-spacing="-1" />
    <text-style name="Read"      font-family="SF Pro Display" font-size="13" font-weight="500" line-height="16" />
    <text-style name="SegLabel"  font-family="SF Pro Display" font-size="13" font-weight="600" line-height="16" />
    <text-style name="CardVal"   font-family="SF Pro Display" font-size="26" font-weight="600" line-height="28" />
    <text-style name="Title"     font-family="SF Pro Display" font-size="16" font-weight="600" line-height="20" />
    <text-style name="Caption"   font-family="SF Pro Display" font-size="12" font-weight="500" line-height="15" />
    <text-style name="Tiny"      font-family="SF Pro Display" font-size="10" font-weight="600" line-height="13" letter-spacing="0.5" />
    <text-style name="ModeNow"   font-family="SF Pro Display" font-size="15" font-weight="600" line-height="18" />
  </styles>

  <fonts>
    <font family="SF Pro Display" source="system" weights="300 400 500 600 700" styles="normal" />
  </fonts>

  <col w="393" fill="$bg" pb="34" gap="16" align="top-center">

    <!-- 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/wifi.svg?color=%23F3ECDE" w="17" h="17" />
        <row w="24" h="12" radius="3" border="1 $ink-2" p="2" align="middle-left">
          <rect w="17" 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="linear-gradient(180deg, #4A453E 0%, #2A2620 100%)">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #4A453E 0%, #2A2620 100%)" />
          <effect type="drop-shadow" x="0" y="4" radius="10" spread="0" color="#00000059" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF24" />
        </appearance>
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%23ECE4D2" w="22" h="22" />
      </col>
      <col gap="2" align="middle-center">
        <text text-style="Eyebrow" text-case="uppercase" value="Hearth" color="$amber" align="center" />
        <text text-style="NavTitle" value="Living Room" color="$ink" align="center" />
      </col>
      <col role="button" w="40" h="40" radius="$r-pill" align="middle-center" fill="linear-gradient(180deg, #4A453E 0%, #2A2620 100%)">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #4A453E 0%, #2A2620 100%)" />
          <effect type="drop-shadow" x="0" y="4" radius="10" spread="0" color="#00000059" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF24" />
        </appearance>
        <img src="https://api.iconify.design/lucide/ellipsis.svg?color=%23ECE4D2" w="22" h="22" />
      </col>
    </row>

    <!-- Thermostat dial -->
    <col w="393" p="6 0 0" align="middle-center">
      <frame w="344" h="344">
        <!-- Metal bezel with recessed face -->
        <col x="12" y="12" w="320" h="320" radius="$r-pill" align="middle-center" fill="radial-gradient(circle at 50% 30%, #4A4640 0%, #201C18 62%, #0C0A08 100%)">
          <appearance>
            <fill type="radial-gradient" value="radial-gradient(circle at 50% 30%, #4A4640 0%, #201C18 62%, #0C0A08 100%)" />
            <fill type="linear-gradient" value="linear-gradient(160deg, #FFFFFF1F 0%, #FFFFFF00 32%, #FFFFFF00 70%, #FFFFFF12 100%)" />
            <effect type="drop-shadow" x="0" y="20" radius="44" spread="-8" color="#00000080" />
            <effect type="inner-shadow" x="0" y="2" radius="0" spread="0" color="#FFFFFF2E" />
            <effect type="inner-shadow" x="0" y="-3" radius="4" spread="0" color="#00000073" />
          </appearance>
          <!-- Recessed dark face with amber heat glow -->
          <col w="236" h="236" radius="$r-pill" align="middle-center" gap="6" fill="radial-gradient(circle at 50% 30%, #14110E 0%, #090706 72%)">
            <appearance>
              <fill type="radial-gradient" value="radial-gradient(circle at 50% 30%, #14110E 0%, #090706 72%)" />
              <fill type="radial-gradient" value="radial-gradient(circle at 50% 47%, #E7A44A3D 0%, #E7A44A0F 34%, #E7A44A00 52%)" />
              <effect type="inner-shadow" x="0" y="2" radius="6" spread="0" color="#000000A6" />
              <effect type="inner-shadow" x="0" y="-1" radius="0" spread="0" color="#FFFFFF14" />
            </appearance>
            <text text-style="Eyebrow" text-case="uppercase" value="Heating to" color="$amber" align="center" />
            <text text-style="Dial" value="72°" color="$ink" align="center" />
            <row gap="8" align="middle-center">
              <text text-style="Read" value="Now 68°" color="$ink-2" />
              <rect w="3" h="3" radius="$r-pill" fill="$ink-2" />
              <text text-style="Read" value="44%" color="$ink-2" />
            </row>
          </col>
        </col>
        <!-- Gauge dots -->
        <col x="79.4" y="257.6" w="7" h="7" radius="$r-pill" fill="$amber"><appearance><fill type="color" value="#E7A44A"/><effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#E7A44A6E"/></appearance></col>
        <col x="61.1" y="234.3" w="7" h="7" radius="$r-pill" fill="$amber"><appearance><fill type="color" value="#E7A44A"/><effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#E7A44A6E"/></appearance></col>
        <col x="48.7" y="207.4" w="7" h="7" radius="$r-pill" fill="$amber"><appearance><fill type="color" value="#E7A44A"/><effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#E7A44A6E"/></appearance></col>
        <col x="42.9" y="178.4" w="7" h="7" radius="$r-pill" fill="$amber"><appearance><fill type="color" value="#E7A44A"/><effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#E7A44A6E"/></appearance></col>
        <col x="44.1" y="148.8" w="7" h="7" radius="$r-pill" fill="$amber"><appearance><fill type="color" value="#E7A44A"/><effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#E7A44A6E"/></appearance></col>
        <col x="52.1" y="120.3" w="7" h="7" radius="$r-pill" fill="$amber"><appearance><fill type="color" value="#E7A44A"/><effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#E7A44A6E"/></appearance></col>
        <col x="66.6" y="94.4" w="7" h="7" radius="$r-pill" fill="$amber"><appearance><fill type="color" value="#E7A44A"/><effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#E7A44A6E"/></appearance></col>
        <col x="86.7" y="72.7" w="7" h="7" radius="$r-pill" fill="$amber"><appearance><fill type="color" value="#E7A44A"/><effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#E7A44A6E"/></appearance></col>
        <col x="111.3" y="56.2" w="7" h="7" radius="$r-pill" fill="$amber"><appearance><fill type="color" value="#E7A44A"/><effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#E7A44A6E"/></appearance></col>
        <col x="139.1" y="46.0" w="7" h="7" radius="$r-pill" fill="$amber"><appearance><fill type="color" value="#E7A44A"/><effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#E7A44A6E"/></appearance></col>
        <col x="168.5" y="42.5" w="7" h="7" radius="$r-pill" fill="$amber"><appearance><fill type="color" value="#E7A44A"/><effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#E7A44A6E"/></appearance></col>
        <col x="197.9" y="46.0" w="7" h="7" radius="$r-pill" fill="$amber"><appearance><fill type="color" value="#E7A44A"/><effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#E7A44A6E"/></appearance></col>
        <col x="225.7" y="56.2" w="7" h="7" radius="$r-pill" fill="$tick"><appearance><fill type="color" value="#37322B"/><effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#00000080"/></appearance></col>
        <col x="250.3" y="72.7" w="7" h="7" radius="$r-pill" fill="$tick"><appearance><fill type="color" value="#37322B"/><effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#00000080"/></appearance></col>
        <col x="270.4" y="94.4" w="7" h="7" radius="$r-pill" fill="$tick"><appearance><fill type="color" value="#37322B"/><effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#00000080"/></appearance></col>
        <col x="284.9" y="120.3" w="7" h="7" radius="$r-pill" fill="$tick"><appearance><fill type="color" value="#37322B"/><effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#00000080"/></appearance></col>
        <col x="292.9" y="148.8" w="7" h="7" radius="$r-pill" fill="$tick"><appearance><fill type="color" value="#37322B"/><effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#00000080"/></appearance></col>
        <col x="294.1" y="178.4" w="7" h="7" radius="$r-pill" fill="$tick"><appearance><fill type="color" value="#37322B"/><effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#00000080"/></appearance></col>
        <col x="288.3" y="207.4" w="7" h="7" radius="$r-pill" fill="$tick"><appearance><fill type="color" value="#37322B"/><effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#00000080"/></appearance></col>
        <col x="275.9" y="234.3" w="7" h="7" radius="$r-pill" fill="$tick"><appearance><fill type="color" value="#37322B"/><effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#00000080"/></appearance></col>
        <col x="257.6" y="257.6" w="7" h="7" radius="$r-pill" fill="$tick"><appearance><fill type="color" value="#37322B"/><effect type="inner-shadow" x="0" y="1" radius="1" spread="0" color="#00000080"/></appearance></col>
      </frame>
    </col>

    <!-- Adjust rocker -->
    <row w="353" align="middle-center" gap="16">
      <col role="button" w="66" h="66" radius="$r-pill" align="middle-center" fill="linear-gradient(180deg, #4A453E 0%, #241F1A 100%)">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #4A453E 0%, #241F1A 100%)" />
          <effect type="drop-shadow" x="0" y="5" radius="12" spread="-1" color="#00000073" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF26" />
          <effect type="inner-shadow" x="0" y="-2" radius="3" spread="0" color="#0000005C" />
        </appearance>
        <img src="https://api.iconify.design/lucide/minus.svg?color=%23E7CFA6" w="26" h="26" />
      </col>
      <col w="fill" align="middle-center" gap="3">
        <row gap="7" align="middle-center">
          <img src="https://api.iconify.design/lucide/flame.svg?color=%23E7A44A" w="18" h="18" />
          <text text-style="ModeNow" value="Heating" color="$ink" />
        </row>
        <text text-style="Tiny" text-case="uppercase" value="Hold until 5:30 PM" color="$ink-2" align="center" />
      </col>
      <col role="button" w="66" h="66" radius="$r-pill" align="middle-center" fill="linear-gradient(180deg, #4A453E 0%, #241F1A 100%)">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #4A453E 0%, #241F1A 100%)" />
          <effect type="drop-shadow" x="0" y="5" radius="12" spread="-1" color="#00000073" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF26" />
          <effect type="inner-shadow" x="0" y="-2" radius="3" spread="0" color="#0000005C" />
        </appearance>
        <img src="https://api.iconify.design/lucide/plus.svg?color=%23E7CFA6" w="26" h="26" />
      </col>
    </row>

    <!-- Mode segmented control -->
    <row role="segmented-control" w="353" h="54" radius="$r-btn" p="5" gap="5" align="middle-center" fill="#100E0B">
      <appearance>
        <fill type="color" value="#100E0B" />
        <effect type="inner-shadow" x="0" y="2" radius="4" spread="0" color="#000000A6" />
      </appearance>
      <col w="82" h="44" radius="14" align="middle-center" gap="3" fill="linear-gradient(180deg, #F0B25A 0%, #D98E2E 100%)">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #F0B25A 0%, #D98E2E 100%)" />
          <effect type="drop-shadow" x="0" y="3" radius="8" spread="-1" color="#C6832E80" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF66" />
        </appearance>
        <img src="https://api.iconify.design/lucide/flame.svg?color=%2323201B" w="19" h="19" />
        <text text-style="SegLabel" value="Heat" color="#23201B" />
      </col>
      <col w="82" h="44" radius="14" align="middle-center" gap="3">
        <img src="https://api.iconify.design/lucide/snowflake.svg?color=%23B4A78F" w="19" h="19" />
        <text text-style="SegLabel" value="Cool" color="$ink-2" />
      </col>
      <col w="82" h="44" radius="14" align="middle-center" gap="3">
        <img src="https://api.iconify.design/lucide/refresh-cw.svg?color=%23B4A78F" w="19" h="19" />
        <text text-style="SegLabel" value="Auto" color="$ink-2" />
      </col>
      <col w="82" h="44" radius="14" align="middle-center" gap="3">
        <img src="https://api.iconify.design/lucide/leaf.svg?color=%23B4A78F" w="19" h="19" />
        <text text-style="SegLabel" value="Eco" color="$ink-2" />
      </col>
    </row>

    <!-- Stat tiles -->
    <row w="353" gap="13" align="top-left">
      <col role="card" w="170" fill="$panel" radius="$r-tile" p="14" gap="10" border="1 $hair" align="top-left">
        <row w="fill" align="middle-left" gap="auto">
          <img src="https://api.iconify.design/lucide/droplet.svg?color=%2379B8E0" w="19" h="19" />
          <text text-style="Tiny" text-case="uppercase" value="Humidity" color="$ink-2" />
        </row>
        <row gap="4" align="bottom-left">
          <text text-style="CardVal" value="44" color="$ink" />
          <text text-style="Caption" value="%" color="$ink-2" pb="4" />
        </row>
      </col>
      <col role="card" w="170" fill="$panel" radius="$r-tile" p="14" gap="10" border="1 $hair" align="top-left">
        <row w="fill" align="middle-left" gap="auto">
          <img src="https://api.iconify.design/lucide/thermometer.svg?color=%23E7A44A" w="19" h="19" />
          <text text-style="Tiny" text-case="uppercase" value="Outside" color="$ink-2" />
        </row>
        <row gap="4" align="bottom-left">
          <text text-style="CardVal" value="51°" color="$ink" />
          <text text-style="Caption" value="Clear" color="$ink-2" pb="4" />
        </row>
      </col>
    </row>

    <!-- Schedule card -->
    <row role="card" w="353" fill="$panel" radius="$r-card" p="16" gap="14" border="1 $hair" align="middle-left">
      <col w="42" h="42" radius="12" align="middle-center" fill="$panel-2">
        <img src="https://api.iconify.design/lucide/clock.svg?color=%23E7A44A" w="21" h="21" />
      </col>
      <col w="fill" gap="3">
        <text text-style="Title" value="Away until 5:30 PM" color="$ink" />
        <text text-style="Caption" value="Resumes Home schedule at 72°" color="$ink-2" />
      </col>
      <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%23B4A78F" w="20" h="20" />
    </row>

    <!-- Rooms -->
    <col role="card" w="353" fill="$panel" radius="$r-card" p="4 16" gap="0" border="1 $hair">
      <row w="321" h="60" align="middle-left" gap="13">
        <col w="40" h="40" radius="12" align="middle-center" fill="$panel-2">
          <img src="https://api.iconify.design/lucide/sofa.svg?color=%23E7A44A" w="20" h="20" />
        </col>
        <col w="fill" gap="2">
          <text text-style="Title" value="Living Room" color="$ink" />
          <row gap="6" align="middle-center">
            <rect w="6" h="6" radius="$r-pill" fill="$amber" />
            <text text-style="Caption" value="Heating" color="$amber-lt" />
          </row>
        </col>
        <text text-style="CardVal" value="72°" color="$ink" />
      </row>
      <line w="321" fill="$hair" />
      <row w="321" h="60" align="middle-left" gap="13">
        <col w="40" h="40" radius="12" align="middle-center" fill="$panel-2">
          <img src="https://api.iconify.design/lucide/bed.svg?color=%23B4A78F" w="20" h="20" />
        </col>
        <col w="fill" gap="2">
          <text text-style="Title" value="Bedroom" color="$ink" />
          <text text-style="Caption" value="Idle" color="$ink-2" />
        </col>
        <text text-style="CardVal" value="68°" color="$ink-2" />
      </row>
      <line w="321" fill="$hair" />
      <row w="321" h="60" align="middle-left" gap="13">
        <col w="40" h="40" radius="12" align="middle-center" fill="$panel-2">
          <img src="https://api.iconify.design/lucide/book-open.svg?color=%2379B8E0" w="20" h="20" />
        </col>
        <col w="fill" gap="2">
          <text text-style="Title" value="Study" color="$ink" />
          <row gap="6" align="middle-center">
            <rect w="6" h="6" radius="$r-pill" fill="$cool" />
            <text text-style="Caption" value="Cooling" color="$cool" />
          </row>
        </col>
        <text text-style="CardVal" value="70°" color="$ink" />
      </row>
    </col>

    <!-- Tab bar (viewport-fixed, last flow child) -->
    <row role="tab-bar" w="fill" h="84" fill="#1B1712" border="1 $hair" p="10 20 24" align="top-center" gap="auto">
      <col w="70" align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/house.svg?color=%23B4A78F" w="22" h="22" />
        <text text-style="Tiny" value="Home" color="$ink-2" align="center" />
      </col>
      <col w="70" align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/thermometer.svg?color=%23E7A44A" w="22" h="22" />
        <text text-style="Tiny" value="Climate" color="$amber" align="center" />
      </col>
      <col w="70" align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/zap.svg?color=%23B4A78F" w="22" h="22" />
        <text text-style="Tiny" value="Energy" color="$ink-2" align="center" />
      </col>
      <col w="70" align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/settings.svg?color=%23B4A78F" w="22" h="22" />
        <text text-style="Tiny" value="Settings" color="$ink-2" align="center" />
      </col>
    </row>

  </col>
</gui>
```