---
title: "Haven — Smart Home (Liquid Glass)"
platform: ios
slug: haven-smart-home-glassmorphism-dashboard-ios
screens: ["dashboard"]
domains: ["smart-home"]
style: "glassmorphism"
fonts: ["Inter"]
roles: ["top-navigation-bar", "chip", "card", "button", "tab-bar"]
score: {clean: 100, consistent: 72, accessible: 87, comprehensible: 38}
url: https://gui.farm/ios/haven-smart-home-glassmorphism-dashboard-ios
raw: https://gui.farm/ios/haven-smart-home-glassmorphism-dashboard-ios/design.guix
download: https://gui.farm/ios/haven-smart-home-glassmorphism-dashboard-ios.gui
---

# Haven — Smart Home (Liquid Glass)

A glassmorphic iOS smart-home dashboard for controlling connected devices.

- **Live preview:** https://gui.farm/ios/haven-smart-home-glassmorphism-dashboard-ios
- **Raw source:** https://gui.farm/ios/haven-smart-home-glassmorphism-dashboard-ios/design.guix
- **Download (.gui):** https://gui.farm/ios/haven-smart-home-glassmorphism-dashboard-ios.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Haven — Smart Home (Liquid Glass)">
  <tokens>
    <color name="scrim-base" value="#0A0B0F" />
    <color name="wh" value="#FFFFFF" />
    <color name="wh-85" value="#FFFFFFD9" />
    <color name="wh-60" value="#FFFFFF99" />
    <color name="wh-40" value="#FFFFFF66" />
    <color name="glass" value="#FFFFFF14" />
    <color name="glass-strong" value="#FFFFFF24" />
    <color name="glass-line" value="#FFFFFF2B" />
    <color name="glass-line-soft" value="#FFFFFF1A" />

    <!-- iOS dark system colors -->
    <color name="blue" value="#0A84FF" />
    <color name="green" value="#30D158" />
    <color name="orange" value="#FF9F0A" />
    <color name="yellow" value="#FFD60A" />
    <color name="red" value="#FF453A" />
    <color name="teal" value="#64D2FF" />
    <color name="indigo" value="#5E5CE6" />

    <number name="radius-tile" value="22" />
    <number name="radius-chip" value="18" />
    <number name="radius-pill" value="999" />
  </tokens>

  <fonts>
    <font family="Inter" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>

  <styles>
    <text-style name="H1" font-family="Inter" font-size="24" font-weight="700" line-height="30" />
    <text-style name="Temp" font-family="Inter" font-size="28" font-weight="700" line-height="32" />
    <text-style name="Title" font-family="Inter" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Label" font-family="Inter" font-size="13" font-weight="500" line-height="18" />
    <text-style name="StatusTime" font-family="Inter" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Body" font-family="Inter" font-size="14" font-weight="400" line-height="19" />
    <text-style name="Caption" font-family="Inter" font-size="12" font-weight="400" line-height="16" />
    <text-style name="Caption/Strong" font-family="Inter" font-size="12" font-weight="600" line-height="16" />
    <text-style name="Tiny" font-family="Inter" font-size="10" font-weight="600" line-height="13" />
  </styles>

  <frame w="390" h="844" clip="true" fill="$scrim-base">
    <!-- backdrop photo + legibility scrim -->
    <img x="0" y="0" w="390" h="844" fit="cover"
      src="https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&amp;fit=crop&amp;w=780&amp;h=1688&amp;q=80" />
    <rect x="0" y="0" w="390" h="844"
      fill="linear-gradient(180deg, #0A0B0F66 0%, #0A0B0FB3 50%, #0D0E13E6 100%)" />

    <!-- status bar + dynamic island -->
    <row x="0" y="14" w="390" p="0 28" gap="auto" align="middle-left">
      <text text-style="StatusTime" value="9:41" fill="$wh" />
      <row gap="6" align="middle-left">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23FFFFFF" w="15" h="15" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23FFFFFF" w="15" h="15" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23FFFFFF" w="20" h="20" />
      </row>
    </row>
    <rect x="134" y="11" w="122" h="36" radius="$radius-pill" fill="#000000" />

    <!-- ───────────── Content ───────────── -->
    <col x="0" y="62" w="390" p="0 20" gap="14">

      <!-- header -->
      <row role="top-navigation-bar" w="fill" gap="auto" align="middle-left">
        <col gap="1">
          <text text-style="Caption" value="Good evening, Jin" fill="$wh-60" />
          <text text-style="H1" value="Haven — Maple St." fill="$wh" />
        </col>
        <row gap="10" align="middle-left">
          <row w="36" h="36" radius="$radius-pill" align="middle-center" fill="$glass" border="1 $glass-line-soft">
            <img src="https://api.iconify.design/lucide/plus.svg?color=%23FFFFFFD9" w="16" h="16" />
          </row>
          <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&amp;fit=facearea&amp;facepad=2&amp;w=72&amp;h=72&amp;q=80" w="36" h="36" radius="$radius-pill" fit="cover" border="1.5 $glass-line" />
        </row>
      </row>

      <!-- summary strip -->
      <row w="fill" h="46" radius="$radius-chip" p="0 14" gap="12" align="middle-left">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line-soft" w="1" align="inside" />
          <effect type="background-blur" radius="30" />
        </appearance>
        <row gap="6" align="middle-left">
          <img src="https://api.iconify.design/lucide/thermometer.svg?color=%23FF9F0A" w="14" h="14" />
          <text text-style="Caption/Strong" value="21.5° inside" fill="$wh-85" />
        </row>
        <rect w="1" h="18" fill="$glass-line-soft" />
        <row gap="6" align="middle-left">
          <img src="https://api.iconify.design/lucide/droplets.svg?color=%2364D2FF" w="14" h="14" />
          <text text-style="Caption/Strong" value="44%" fill="$wh-85" />
        </row>
        <rect w="1" h="18" fill="$glass-line-soft" />
        <row gap="6" align="middle-left">
          <img src="https://api.iconify.design/lucide/zap.svg?color=%23FFD60A" w="14" h="14" />
          <text text-style="Caption/Strong" value="1.2 kW now" fill="$wh-85" />
        </row>
        <rect w="1" h="18" fill="$glass-line-soft" />
        <row gap="6" align="middle-left">
          <img src="https://api.iconify.design/lucide/shield-check.svg?color=%2330D158" w="14" h="14" />
          <text text-style="Caption/Strong" value="Armed" fill="$wh-85" />
        </row>
      </row>

      <!-- room chips -->
      <row w="fill" gap="8" align="middle-left" clip="true">
        <row role="chip" h="34" p="0 14" radius="$radius-pill" fill="$wh" align="middle-center">
          <text text-style="Caption/Strong" value="All Rooms" fill="#0D0E13" />
        </row>
        <row role="chip" h="34" p="0 14" radius="$radius-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
          <text text-style="Caption/Strong" value="Living" fill="$wh-60" />
        </row>
        <row role="chip" h="34" p="0 14" radius="$radius-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
          <text text-style="Caption/Strong" value="Kitchen" fill="$wh-60" />
        </row>
        <row role="chip" h="34" p="0 14" radius="$radius-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
          <text text-style="Caption/Strong" value="Bedroom" fill="$wh-60" />
        </row>
        <row role="chip" h="34" p="0 14" radius="$radius-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
          <text text-style="Caption/Strong" value="Studio" fill="$wh-60" />
        </row>
      </row>

      <!-- ───────────── Tile dashboard (unit grid) ───────────── -->
      <grid unit="10" w="350" h="430">

        <!-- Thermostat -->
        <col role="card" gc="1/17" gr="1/17" radius="$radius-tile" p="14" gap="8" clip="true">
          <appearance>
            <fill type="color" value="$glass" />
            <border color="$glass-line" w="1" align="inside" />
            <effect type="background-blur" radius="34" />
          </appearance>
          <row w="fill" gap="auto" align="middle-left">
            <img src="https://api.iconify.design/lucide/flame.svg?color=%23FF9F0A" w="16" h="16" />
            <text text-style="Tiny" value="HEATING" fill="$orange" letter-spacing="8%" />
          </row>
          <col w="fill" align="top-center" pt="2">
            <frame w="96" h="96">
              <ellipse x="0" y="0" w="96" h="96" fill="none" border="7 #FF9F0A" opacity="0.9" />
              <ellipse x="10" y="10" w="76" h="76" fill="#FFFFFF0F" />
              <col x="0" y="26" w="96" align="top-center" gap="0">
                <text text-style="Temp" value="21.5°" fill="$wh" />
                <text text-style="Tiny" value="→ 22.0°" fill="$wh-60" />
              </col>
            </frame>
          </col>
          <text text-style="Caption" value="Living Room · Auto" fill="$wh-60" align="center" w="fill" />
        </col>

        <!-- Lights -->
        <col role="card" gc="19/35" gr="1/17" radius="$radius-tile" p="14" gap="10" clip="true">
          <appearance>
            <fill type="color" value="$glass" />
            <border color="$glass-line" w="1" align="inside" />
            <effect type="background-blur" radius="34" />
          </appearance>
          <row w="fill" gap="auto" align="middle-left">
            <row w="32" h="32" radius="10" fill="#FFD60A26" align="middle-center">
              <img src="https://api.iconify.design/lucide/lamp.svg?color=%23FFD60A" w="16" h="16" />
            </row>
            <frame w="36" h="22" radius="11" fill="$green">
              <ellipse x="16" y="2" w="18" h="18" fill="$wh" />
            </frame>
          </row>
          <col gap="2" pt="6">
            <text text-style="Title" value="Floor Lamp" fill="$wh" />
            <text text-style="Caption" value="70% · Warm white" fill="$wh-60" />
          </col>
          <frame w="fill" h="16">
            <rect x="0" y="5" w="130" h="6" radius="3" fill="#FFFFFF30" />
            <rect x="0" y="5" w="91" h="6" radius="3" fill="$yellow" />
            <ellipse x="83" y="0" w="16" h="16" fill="$wh" />
          </frame>
        </col>

        <!-- Camera (full width) -->
        <frame role="card" gc="1/35" gr="19/30" radius="$radius-tile" clip="true" border="1 $glass-line">
          <img x="0" y="0" w="fill" h="fill" fit="cover"
            src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&amp;fit=crop&amp;w=700&amp;h=240&amp;q=80" />
          <row x="10" y="10" h="22" p="0 8" radius="$radius-pill" fill="#FF453ACC" gap="5" align="middle-center">
            <ellipse w="5" h="5" fill="$wh" />
            <text text-style="Tiny" value="LIVE" fill="$wh" letter-spacing="8%" />
          </row>
          <row x="0" y="80" w="fill" h="40" p="0 12" gap="auto" align="middle-left">
            <appearance>
              <fill type="color" value="#0A0B0F52" />
              <effect type="background-blur" radius="24" />
            </appearance>
            <text text-style="Caption/Strong" value="Front Door" fill="$wh" />
            <row gap="10" align="middle-left">
              <img src="https://api.iconify.design/lucide/mic.svg?color=%23FFFFFFD9" w="14" h="14" />
              <img src="https://api.iconify.design/lucide/expand.svg?color=%23FFFFFFD9" w="14" h="14" />
            </row>
          </row>
        </frame>

        <!-- Music -->
        <col role="card" gc="1/17" gr="32/43" radius="$radius-tile" p="12" gap="8" clip="true">
          <appearance>
            <fill type="color" value="$glass" />
            <border color="$glass-line" w="1" align="inside" />
            <effect type="background-blur" radius="34" />
          </appearance>
          <row w="fill" gap="10" align="middle-left">
            <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&amp;fit=crop&amp;w=88&amp;h=88&amp;q=80" w="44" h="44" radius="10" fit="cover" />
            <col gap="1" w="fill">
              <text text-style="Caption/Strong" value="Holocene" fill="$wh" truncate="true" />
              <text text-style="Caption" value="Bon Iver" fill="$wh-60" truncate="true" />
            </col>
          </row>
          <row w="fill" gap="auto" align="middle-left" pt="2">
            <text text-style="Tiny" value="KITCHEN HOMEPOD" fill="$wh-40" letter-spacing="6%" />
            <row w="30" h="30" radius="$radius-pill" fill="$glass-strong" align="middle-center">
              <img src="https://api.iconify.design/lucide/pause.svg?color=%23FFFFFF" w="13" h="13" />
            </row>
          </row>
        </col>

        <!-- Air purifier -->
        <col role="card" gc="19/35" gr="32/43" radius="$radius-tile" p="12" gap="8" clip="true">
          <appearance>
            <fill type="color" value="$glass" />
            <border color="$glass-line" w="1" align="inside" />
            <effect type="background-blur" radius="34" />
          </appearance>
          <row w="fill" gap="auto" align="middle-left">
            <row w="32" h="32" radius="10" fill="#64D2FF26" align="middle-center">
              <img src="https://api.iconify.design/lucide/wind.svg?color=%2364D2FF" w="16" h="16" />
            </row>
            <row gap="3" align="middle-left">
              <ellipse w="6" h="6" fill="$teal" />
              <ellipse w="6" h="6" fill="$teal" />
              <ellipse w="6" h="6" fill="#FFFFFF30" />
            </row>
          </row>
          <col gap="2" pt="2">
            <text text-style="Title" value="Air Purifier" fill="$wh" />
            <text text-style="Caption" value="Auto · AQI 18 — Good" fill="$teal" />
          </col>
        </col>
      </grid>

      <!-- scenes -->
      <col w="fill" gap="8">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Label" value="Scenes" fill="$wh-85" />
          <text text-style="Caption" value="Edit" fill="$wh-40" />
        </row>
        <row w="fill" gap="8" align="middle-left" clip="true">
          <row role="button" h="40" p="0 14" radius="$radius-pill" gap="8" align="middle-center" fill="$glass" border="1 $glass-line-soft">
            <img src="https://api.iconify.design/lucide/moon.svg?color=%235E5CE6" w="15" h="15" />
            <text text-style="Caption/Strong" value="Goodnight" fill="$wh-85" />
          </row>
          <row role="button" h="40" p="0 14" radius="$radius-pill" gap="8" align="middle-center" fill="$glass" border="1 $glass-line-soft">
            <img src="https://api.iconify.design/lucide/clapperboard.svg?color=%23FF9F0A" w="15" h="15" />
            <text text-style="Caption/Strong" value="Movie Night" fill="$wh-85" />
          </row>
          <row role="button" h="40" p="0 14" radius="$radius-pill" gap="8" align="middle-center" fill="$glass" border="1 $glass-line-soft">
            <img src="https://api.iconify.design/lucide/door-closed.svg?color=%2330D158" w="15" h="15" />
            <text text-style="Caption/Strong" value="Away" fill="$wh-85" />
          </row>
        </row>
      </col>
    </col>

    <!-- ───────────── Floating glass tab bar ───────────── -->
    <row role="tab-bar" x="20" y="756" w="350" h="60" radius="30" p="0 10" gap="auto" align="middle-left">
      <appearance>
        <fill type="color" value="#16171FB8" />
        <border color="$glass-line" w="1" align="inside" />
        <effect type="background-blur" radius="40" />
        <effect type="drop-shadow" x="0" y="12" radius="32" spread="0" color="#00000066" />
      </appearance>
      <row h="44" p="0 16" radius="$radius-pill" gap="7" align="middle-center" fill="$glass-strong">
        <img src="https://api.iconify.design/lucide/house.svg?color=%23FFFFFF" w="17" h="17" />
        <text text-style="Caption/Strong" value="Home" fill="$wh" />
      </row>
      <img src="https://api.iconify.design/lucide/sofa.svg?color=%23FFFFFF80" w="19" h="19" />
      <img src="https://api.iconify.design/lucide/zap.svg?color=%23FFFFFF80" w="19" h="19" />
      <img src="https://api.iconify.design/lucide/video.svg?color=%23FFFFFF80" w="19" h="19" />
      <img src="https://api.iconify.design/lucide/settings.svg?color=%23FFFFFF80" w="19" h="19" />
    </row>

    <!-- home indicator -->
    <rect x="128" y="828" w="134" h="5" radius="3" fill="#FFFFFFE6" />
  </frame>
</gui>

```