---
title: "Aura — Home Control Center"
platform: web
slug: aura-home-control-center
screens: ["control-panel"]
domains: ["smart-home"]
style: "neumorphic"
fonts: ["Outfit", "IBM Plex Mono"]
roles: ["top-navigation-bar", "chip", "avatar", "button", "card", "slider", "segmented-control", "stepper"]
score: {clean: 100, consistent: 74, accessible: 94, comprehensible: 51}
url: https://gui.farm/web/aura-home-control-center
raw: https://gui.farm/web/aura-home-control-center/design.guix
download: https://gui.farm/web/aura-home-control-center.gui
---

# Aura — Home Control Center

A neumorphic light-theme web smart-home control center where a resident directly adjusts room lighting dimmers, living-room climate, the active scene, energy use, and connected devices from one panel.

- **Live preview:** https://gui.farm/web/aura-home-control-center
- **Raw source:** https://gui.farm/web/aura-home-control-center/design.guix
- **Download (.gui):** https://gui.farm/web/aura-home-control-center.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Aura — Home Control Center">
  <tokens>
    <color name="base" value="#EDE7E1" />
    <color name="sh-dark" value="#CFC6BC" />
    <color name="sh-light" value="#FFFFFF" />
    <color name="ink" value="#241F1B" />
    <color name="sub" value="#6A6058" />
    <color name="line" value="#DBD3CA" />
    <color name="accent" value="#F26A54" />
    <color name="accent-strong" value="#CB4530" />
    <color name="accent-deep" value="#A83A28" />
    <color name="accent-ink" value="#FFFFFF" />
    <color name="accent-tint" value="#FBE0D9" />
    <color name="well" value="#D6CEC5" />
    <number name="r-card" value="26" />
    <number name="r-el" value="16" />
    <number name="r-pill" value="999" />
  </tokens>
  <fonts>
    <font family="Outfit" source="google" weights="400 500 600 700 800" styles="normal" />
    <font family="IBM Plex Mono" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>

  <col w="1440" fill="$base">

    <!-- TOP NAV -->
    <row role="top-navigation-bar" w="fill" h="80" p="0 52" align="middle-left" gap="auto" fill="$base">
      <row gap="13" align="middle-left">
        <frame w="40" h="40" radius="13">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="5" y="5" radius="10" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-4" y="-4" radius="9" spread="0" color="$sh-light" />
          </appearance>
          <img abs="true" x="10" y="10" src="https://api.iconify.design/lucide/house.svg?color=%23A83A28" w="20" h="20" />
        </frame>
        <col gap="1">
          <text value="Aura" font-family="Outfit" font-size="19" font-weight="800" color="$ink" letter-spacing="-0.3" />
          <text value="12 Marlow Crescent" font-family="Outfit" font-size="12" font-weight="500" color="$sub" />
        </col>
      </row>
      <row gap="14" align="middle-right">
        <row role="chip" p="9 15" radius="$r-pill" gap="9" align="middle-left">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
            <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
          </appearance>
          <img src="https://api.iconify.design/lucide/sun.svg?color=%236A6058" w="15" h="15" />
          <text value="21° Clear" font-family="Outfit" font-size="13" font-weight="600" color="$sub" />
        </row>
        <row role="chip" p="9 15" radius="$r-pill" gap="8" align="middle-left">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="4" y="4" radius="8" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="$sh-light" />
          </appearance>
          <img src="https://api.iconify.design/lucide/wifi.svg?color=%23A83A28" w="15" h="15" />
          <text value="All systems normal" font-family="Outfit" font-size="13" font-weight="700" color="$ink" />
        </row>
        <frame role="avatar" w="42" h="42" radius="$r-pill">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="4" y="4" radius="8" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="$sh-light" />
          </appearance>
          <text abs="true" x="0" y="13" w="42" align="center" value="MO" font-family="Outfit" font-size="14" font-weight="800" color="$accent-deep" />
        </frame>
      </row>
    </row>

    <!-- CONTENT -->
    <col w="fill" p="30 52 76 52" align="top-center" gap="28">
      <col w="1120" gap="28">

        <!-- Heading -->
        <col gap="8">
          <row gap="10" align="middle-left">
            <text value="GOOD EVENING · FRIDAY, AUGUST 15" font-family="Outfit" font-size="11" font-weight="800" color="$accent-deep" letter-spacing="1.6" />
          </row>
          <text value="Welcome home, Marisa" font-family="Outfit" font-size="32" font-weight="800" color="$ink" line-height="39" letter-spacing="-0.6" />
          <text value="8 of 11 devices active. Movie Night scene is running, and the living room is warming to 21.5°." font-family="Outfit" font-size="15" font-weight="500" color="$sub" line-height="23" w="720" />
        </col>

        <!-- SCENES -->
        <col w="fill" gap="13">
          <text value="SCENES" font-family="Outfit" font-size="11" font-weight="800" color="$sub" letter-spacing="1.4" />
          <row w="fill" gap="16" align="top-left">

            <!-- Good Morning -->
            <col role="button" w="fill" p="18 18" radius="$r-el" gap="12">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="drop-shadow" x="6" y="6" radius="13" spread="0" color="$sh-dark" />
                <effect type="drop-shadow" x="-5" y="-5" radius="11" spread="0" color="$sh-light" />
              </appearance>
              <frame w="40" h="40" radius="12">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                  <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                </appearance>
                <img abs="true" x="10" y="10" src="https://api.iconify.design/lucide/sunrise.svg?color=%236A6058" w="20" h="20" />
              </frame>
              <col gap="2">
                <text value="Good Morning" font-family="Outfit" font-size="15" font-weight="700" color="$ink" />
                <text value="6:30 AM daily" font-family="Outfit" font-size="12" font-weight="500" color="$sub" />
              </col>
            </col>

            <!-- Focus -->
            <col role="button" w="fill" p="18 18" radius="$r-el" gap="12">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="drop-shadow" x="6" y="6" radius="13" spread="0" color="$sh-dark" />
                <effect type="drop-shadow" x="-5" y="-5" radius="11" spread="0" color="$sh-light" />
              </appearance>
              <frame w="40" h="40" radius="12">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                  <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                </appearance>
                <img abs="true" x="10" y="10" src="https://api.iconify.design/lucide/headphones.svg?color=%236A6058" w="20" h="20" />
              </frame>
              <col gap="2">
                <text value="Focus" font-family="Outfit" font-size="15" font-weight="700" color="$ink" />
                <text value="Desk lamp, no alerts" font-family="Outfit" font-size="12" font-weight="500" color="$sub" />
              </col>
            </col>

            <!-- Movie Night (ACTIVE) -->
            <col role="button" w="fill" p="18 18" radius="$r-el" gap="12" border="2 $accent">
              <appearance>
                <fill type="color" value="$accent-tint" />
                <effect type="drop-shadow" x="6" y="8" radius="16" spread="0" color="#D94E3833" />
                <effect type="drop-shadow" x="-5" y="-5" radius="11" spread="0" color="$sh-light" />
              </appearance>
              <row w="fill" gap="auto" align="middle-left">
                <frame w="40" h="40" radius="12">
                  <appearance>
                    <fill type="color" value="$accent-strong" />
                    <effect type="drop-shadow" x="0" y="5" radius="12" spread="0" color="#D94E3859" />
                  </appearance>
                  <img abs="true" x="10" y="10" src="https://api.iconify.design/lucide/film.svg?color=%23FFFFFF" w="20" h="20" />
                </frame>
                <row p="4 9" radius="$r-pill" align="middle-center">
                  <appearance><fill type="color" value="$accent-strong" /></appearance>
                  <text value="ACTIVE" font-family="Outfit" font-size="9" font-weight="800" color="$accent-ink" letter-spacing="0.8" />
                </row>
              </row>
              <col gap="2">
                <text value="Movie Night" font-family="Outfit" font-size="15" font-weight="800" color="$ink" />
                <text value="Dimmed, TV on" font-family="Outfit" font-size="12" font-weight="600" color="$accent-deep" />
              </col>
            </col>

            <!-- Away -->
            <col role="button" w="fill" p="18 18" radius="$r-el" gap="12">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="drop-shadow" x="6" y="6" radius="13" spread="0" color="$sh-dark" />
                <effect type="drop-shadow" x="-5" y="-5" radius="11" spread="0" color="$sh-light" />
              </appearance>
              <frame w="40" h="40" radius="12">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                  <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                </appearance>
                <img abs="true" x="10" y="10" src="https://api.iconify.design/lucide/log-out.svg?color=%236A6058" w="20" h="20" />
              </frame>
              <col gap="2">
                <text value="Away" font-family="Outfit" font-size="15" font-weight="700" color="$ink" />
                <text value="Lock up, eco temp" font-family="Outfit" font-size="12" font-weight="500" color="$sub" />
              </col>
            </col>

            <!-- Bedtime -->
            <col role="button" w="fill" p="18 18" radius="$r-el" gap="12">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="drop-shadow" x="6" y="6" radius="13" spread="0" color="$sh-dark" />
                <effect type="drop-shadow" x="-5" y="-5" radius="11" spread="0" color="$sh-light" />
              </appearance>
              <frame w="40" h="40" radius="12">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                  <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                </appearance>
                <img abs="true" x="10" y="10" src="https://api.iconify.design/lucide/moon.svg?color=%236A6058" w="20" h="20" />
              </frame>
              <col gap="2">
                <text value="Bedtime" font-family="Outfit" font-size="15" font-weight="700" color="$ink" />
                <text value="11:00 PM, lights off" font-family="Outfit" font-size="12" font-weight="500" color="$sub" />
              </col>
            </col>

          </row>
        </col>

        <!-- MAIN TWO-COLUMN -->
        <row w="fill" gap="28" align="top-left">

          <!-- LEFT: climate + energy -->
          <col w="424" gap="28">

            <!-- CLIMATE (hero) -->
            <col role="card" w="fill" p="26 26 24 26" radius="$r-card" gap="22">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="drop-shadow" x="15" y="15" radius="30" spread="0" color="$sh-dark" />
                <effect type="drop-shadow" x="-11" y="-11" radius="24" spread="0" color="$sh-light" />
              </appearance>

              <row w="fill" gap="auto" align="middle-left">
                <col gap="2">
                  <text value="LIVING ROOM" font-family="Outfit" font-size="11" font-weight="800" color="$sub" letter-spacing="1.4" />
                  <row gap="7" align="middle-left">
                    <img src="https://api.iconify.design/lucide/flame.svg?color=%23A83A28" w="14" h="14" />
                    <text value="Heating to target" font-family="Outfit" font-size="13" font-weight="600" color="$accent-deep" />
                  </row>
                </col>
                <frame w="42" h="42" radius="12">
                  <appearance>
                    <fill type="color" value="$base" />
                    <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                    <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                  </appearance>
                  <img abs="true" x="11" y="11" src="https://api.iconify.design/lucide/thermometer.svg?color=%236A6058" w="20" h="20" />
                </frame>
              </row>

              <!-- big target -->
              <col gap="6">
                <row gap="4" align="top-left">
                  <text value="21.5" font-family="IBM Plex Mono" font-size="58" font-weight="600" color="$ink" line-height="58" letter-spacing="-1.5" />
                  <text value="°C" font-family="IBM Plex Mono" font-size="22" font-weight="500" color="$sub" line-height="26" />
                </row>
                <text value="Target temperature · now 22.8°C, humidity 44%" font-family="Outfit" font-size="13" font-weight="500" color="$sub" />
              </col>

              <!-- temperature slider: track 340, range 16-28, target 21.5 -> fill 156, thumb x 144 -->
              <col w="340" gap="9">
                <frame role="slider" w="340" h="24">
                  <rect abs="true" x="0" y="9" w="340" h="6" radius="3" fill="$well" />
                  <rect abs="true" x="0" y="9" w="156" h="6" radius="3" fill="$accent" />
                  <frame abs="true" x="144" y="0" w="24" h="24" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="$sh-light" />
                      <effect type="drop-shadow" x="2" y="3" radius="6" spread="0" color="#CB453066" />
                    </appearance>
                    <ellipse abs="true" x="7" y="7" w="10" h="10" fill="$accent-strong" />
                  </frame>
                </frame>
                <row w="fill" gap="auto" align="middle-left">
                  <text value="16°" font-family="IBM Plex Mono" font-size="11" font-weight="500" color="$sub" />
                  <text value="28°" font-family="IBM Plex Mono" font-size="11" font-weight="500" color="$sub" />
                </row>
              </col>

              <line fill="$line" />

              <!-- mode segmented -->
              <row role="segmented-control" w="fill" p="4" radius="$r-pill" gap="4" align="middle-left">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                  <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                </appearance>
                <row w="fill" p="9 0" radius="$r-pill" gap="7" align="middle-center">
                  <img src="https://api.iconify.design/lucide/flame.svg?color=%236A6058" w="15" h="15" />
                  <text value="Heat" font-family="Outfit" font-size="13" font-weight="600" color="$sub" />
                </row>
                <row w="fill" p="9 0" radius="$r-pill" gap="7" align="middle-center">
                  <img src="https://api.iconify.design/lucide/snowflake.svg?color=%236A6058" w="15" h="15" />
                  <text value="Cool" font-family="Outfit" font-size="13" font-weight="600" color="$sub" />
                </row>
                <row w="fill" p="9 0" radius="$r-pill" gap="7" align="middle-center">
                  <appearance>
                    <fill type="color" value="$base" />
                    <effect type="drop-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                    <effect type="drop-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                  </appearance>
                  <img src="https://api.iconify.design/lucide/refresh-cw.svg?color=%23A83A28" w="15" h="15" />
                  <text value="Auto" font-family="Outfit" font-size="13" font-weight="800" color="$accent-deep" />
                </row>
              </row>

              <!-- fan stepper -->
              <row w="fill" gap="auto" align="middle-left">
                <col gap="2">
                  <text value="Fan speed" font-family="Outfit" font-size="14" font-weight="700" color="$ink" />
                  <text value="Quiet circulation" font-family="Outfit" font-size="12" font-weight="500" color="$sub" />
                </col>
                <row role="stepper" gap="14" align="middle-center">
                  <frame w="36" h="36" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="drop-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="drop-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <img abs="true" x="10" y="10" src="https://api.iconify.design/lucide/minus.svg?color=%236A6058" w="16" h="16" />
                  </frame>
                  <text value="2" font-family="IBM Plex Mono" font-size="18" font-weight="600" color="$ink" />
                  <frame w="36" h="36" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="drop-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="drop-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <img abs="true" x="10" y="10" src="https://api.iconify.design/lucide/plus.svg?color=%23A83A28" w="16" h="16" />
                  </frame>
                </row>
              </row>
            </col>

            <!-- ENERGY -->
            <col role="card" w="fill" p="24 24 22 24" radius="$r-card" gap="20">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="drop-shadow" x="13" y="13" radius="26" spread="0" color="$sh-dark" />
                <effect type="drop-shadow" x="-10" y="-10" radius="22" spread="0" color="$sh-light" />
              </appearance>

              <row w="fill" gap="auto" align="middle-left">
                <text value="ENERGY TODAY" font-family="Outfit" font-size="11" font-weight="800" color="$sub" letter-spacing="1.4" />
                <row role="chip" p="6 12" radius="$r-pill" gap="7" align="middle-left">
                  <appearance>
                    <fill type="color" value="$base" />
                    <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                    <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                  </appearance>
                  <text value="This week" font-family="Outfit" font-size="12" font-weight="600" color="$sub" />
                </row>
              </row>

              <row gap="10" align="bottom-left">
                <text value="14.2" font-family="IBM Plex Mono" font-size="38" font-weight="700" color="$ink" line-height="38" />
                <text value="kWh" font-family="IBM Plex Mono" font-size="16" font-weight="500" color="$sub" line-height="26" />
                <col gap="1" align="bottom-left">
                  <text value="$3.27 est. cost" font-family="Outfit" font-size="13" font-weight="700" color="$ink" line-height="16" />
                  <text value="3% below 7-day avg" font-family="Outfit" font-size="12" font-weight="600" color="$accent-deep" line-height="15" />
                </col>
              </row>

              <!-- 7-day bars: well w40 h88 gap16; inner bar x7 w26; max 18.2 kWh -> h88 -->
              <row w="fill" gap="16" align="bottom-left">
                <col w="40" gap="8" align="top-center">
                  <frame w="40" h="88" radius="10">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <rect abs="true" x="7" y="22" w="26" h="66" radius="8" fill="$well" />
                  </frame>
                  <text value="Sat" font-family="Outfit" font-size="11" font-weight="600" color="$sub" />
                </col>
                <col w="40" gap="8" align="top-center">
                  <frame w="40" h="88" radius="10">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <rect abs="true" x="7" y="0" w="26" h="88" radius="8" fill="$well" />
                  </frame>
                  <text value="Sun" font-family="Outfit" font-size="11" font-weight="600" color="$sub" />
                </col>
                <col w="40" gap="8" align="top-center">
                  <frame w="40" h="88" radius="10">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <rect abs="true" x="7" y="28" w="26" h="60" radius="8" fill="$well" />
                  </frame>
                  <text value="Mon" font-family="Outfit" font-size="11" font-weight="600" color="$sub" />
                </col>
                <col w="40" gap="8" align="top-center">
                  <frame w="40" h="88" radius="10">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <rect abs="true" x="7" y="15" w="26" h="73" radius="8" fill="$well" />
                  </frame>
                  <text value="Tue" font-family="Outfit" font-size="11" font-weight="600" color="$sub" />
                </col>
                <col w="40" gap="8" align="top-center">
                  <frame w="40" h="88" radius="10">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <rect abs="true" x="7" y="31" w="26" h="57" radius="8" fill="$well" />
                  </frame>
                  <text value="Wed" font-family="Outfit" font-size="11" font-weight="600" color="$sub" />
                </col>
                <col w="40" gap="8" align="top-center">
                  <frame w="40" h="88" radius="10">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <rect abs="true" x="7" y="6" w="26" h="82" radius="8" fill="$well" />
                  </frame>
                  <text value="Thu" font-family="Outfit" font-size="11" font-weight="600" color="$sub" />
                </col>
                <col w="40" gap="8" align="top-center">
                  <frame w="40" h="88" radius="10">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <rect abs="true" x="7" y="19" w="26" h="69" radius="8" fill="$accent" />
                  </frame>
                  <text value="Fri" font-family="Outfit" font-size="11" font-weight="800" color="$accent-deep" />
                </col>
              </row>
            </col>

          </col>

          <!-- RIGHT: lighting + devices -->
          <col w="fill" gap="28">

            <!-- LIGHTING -->
            <col role="card" w="fill" p="26 30 28 30" radius="$r-card" gap="22">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="drop-shadow" x="15" y="15" radius="30" spread="0" color="$sh-dark" />
                <effect type="drop-shadow" x="-11" y="-11" radius="24" spread="0" color="$sh-light" />
              </appearance>

              <row w="fill" gap="auto" align="middle-left">
                <col gap="3">
                  <text value="Lighting" font-family="Outfit" font-size="20" font-weight="800" color="$ink" letter-spacing="-0.3" />
                  <text value="4 of 6 rooms on" font-family="Outfit" font-size="13" font-weight="500" color="$sub" />
                </col>
                <!-- master toggle ON -->
                <frame w="52" h="30" radius="$r-pill">
                  <appearance>
                    <fill type="color" value="$accent-strong" />
                    <effect type="inner-shadow" x="0" y="1" radius="3" spread="0" color="#8A2418" />
                  </appearance>
                  <frame abs="true" x="25" y="4" w="22" h="22" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="$sh-light" />
                      <effect type="drop-shadow" x="1" y="2" radius="4" spread="0" color="#8A241866" />
                    </appearance>
                  </frame>
                </frame>
              </row>

              <!-- Living Room 74% -> fill 414, thumb 402 -->
              <col w="fill" gap="10">
                <row w="fill" gap="auto" align="middle-left">
                  <row gap="10" align="middle-left">
                    <img src="https://api.iconify.design/lucide/sofa.svg?color=%23A83A28" w="17" h="17" />
                    <text value="Living Room" font-family="Outfit" font-size="15" font-weight="700" color="$ink" />
                  </row>
                  <text value="74%" font-family="IBM Plex Mono" font-size="14" font-weight="600" color="$accent-deep" />
                </row>
                <frame role="slider" w="560" h="24">
                  <rect abs="true" x="0" y="9" w="560" h="6" radius="3" fill="$well" />
                  <rect abs="true" x="0" y="9" w="414" h="6" radius="3" fill="$accent" />
                  <frame abs="true" x="402" y="0" w="24" h="24" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="$sh-light" />
                      <effect type="drop-shadow" x="2" y="3" radius="6" spread="0" color="#D94E3866" />
                    </appearance>
                    <ellipse abs="true" x="7" y="7" w="10" h="10" fill="$accent-strong" />
                  </frame>
                </frame>
              </col>

              <!-- Kitchen 41% -> fill 230, thumb 218 -->
              <col w="fill" gap="10">
                <row w="fill" gap="auto" align="middle-left">
                  <row gap="10" align="middle-left">
                    <img src="https://api.iconify.design/lucide/utensils.svg?color=%23A83A28" w="17" h="17" />
                    <text value="Kitchen" font-family="Outfit" font-size="15" font-weight="700" color="$ink" />
                  </row>
                  <text value="41%" font-family="IBM Plex Mono" font-size="14" font-weight="600" color="$accent-deep" />
                </row>
                <frame role="slider" w="560" h="24">
                  <rect abs="true" x="0" y="9" w="560" h="6" radius="3" fill="$well" />
                  <rect abs="true" x="0" y="9" w="230" h="6" radius="3" fill="$accent" />
                  <frame abs="true" x="218" y="0" w="24" h="24" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="$sh-light" />
                      <effect type="drop-shadow" x="2" y="3" radius="6" spread="0" color="#D94E3866" />
                    </appearance>
                    <ellipse abs="true" x="7" y="7" w="10" h="10" fill="$accent-strong" />
                  </frame>
                </frame>
              </col>

              <!-- Bedroom 15% -> fill 84, thumb 72 -->
              <col w="fill" gap="10">
                <row w="fill" gap="auto" align="middle-left">
                  <row gap="10" align="middle-left">
                    <img src="https://api.iconify.design/lucide/bed.svg?color=%23A83A28" w="17" h="17" />
                    <text value="Bedroom" font-family="Outfit" font-size="15" font-weight="700" color="$ink" />
                  </row>
                  <text value="15%" font-family="IBM Plex Mono" font-size="14" font-weight="600" color="$accent-deep" />
                </row>
                <frame role="slider" w="560" h="24">
                  <rect abs="true" x="0" y="9" w="560" h="6" radius="3" fill="$well" />
                  <rect abs="true" x="0" y="9" w="84" h="6" radius="3" fill="$accent" />
                  <frame abs="true" x="72" y="0" w="24" h="24" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="$sh-light" />
                      <effect type="drop-shadow" x="2" y="3" radius="6" spread="0" color="#D94E3866" />
                    </appearance>
                    <ellipse abs="true" x="7" y="7" w="10" h="10" fill="$accent-strong" />
                  </frame>
                </frame>
              </col>

              <!-- Hallway 88% -> fill 493, thumb 481 -->
              <col w="fill" gap="10">
                <row w="fill" gap="auto" align="middle-left">
                  <row gap="10" align="middle-left">
                    <img src="https://api.iconify.design/lucide/lamp.svg?color=%23A83A28" w="17" h="17" />
                    <text value="Hallway" font-family="Outfit" font-size="15" font-weight="700" color="$ink" />
                  </row>
                  <text value="88%" font-family="IBM Plex Mono" font-size="14" font-weight="600" color="$accent-deep" />
                </row>
                <frame role="slider" w="560" h="24">
                  <rect abs="true" x="0" y="9" w="560" h="6" radius="3" fill="$well" />
                  <rect abs="true" x="0" y="9" w="493" h="6" radius="3" fill="$accent" />
                  <frame abs="true" x="481" y="0" w="24" h="24" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="$sh-light" />
                      <effect type="drop-shadow" x="2" y="3" radius="6" spread="0" color="#D94E3866" />
                    </appearance>
                    <ellipse abs="true" x="7" y="7" w="10" h="10" fill="$accent-strong" />
                  </frame>
                </frame>
              </col>
            </col>

            <!-- DEVICES -->
            <col w="fill" gap="16">
              <row w="fill" gap="auto" align="middle-left">
                <text value="Devices" font-family="Outfit" font-size="16" font-weight="800" color="$ink" letter-spacing="-0.2" />
                <row role="button" p="9 15" radius="$r-pill" gap="7" align="middle-center">
                  <appearance>
                    <fill type="color" value="$accent-strong" />
                    <effect type="drop-shadow" x="0" y="5" radius="12" spread="0" color="#D94E3859" />
                  </appearance>
                  <img src="https://api.iconify.design/lucide/plus.svg?color=%23FFFFFF" w="15" h="15" />
                  <text value="Add device" font-family="Outfit" font-size="13" font-weight="800" color="$accent-ink" />
                </row>
              </row>

              <!-- row 1 -->
              <row w="fill" gap="16" align="top-left">
                <!-- Front Door -->
                <row role="card" w="fill" p="18 18" radius="$r-el" gap="14" align="middle-left">
                  <appearance>
                    <fill type="color" value="$base" />
                    <effect type="drop-shadow" x="8" y="8" radius="16" spread="0" color="$sh-dark" />
                    <effect type="drop-shadow" x="-6" y="-6" radius="13" spread="0" color="$sh-light" />
                  </appearance>
                  <frame w="46" h="46" radius="13">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <img abs="true" x="13" y="13" src="https://api.iconify.design/lucide/lock.svg?color=%23A83A28" w="20" h="20" />
                  </frame>
                  <col gap="3" w="fill">
                    <text value="Front Door" font-family="Outfit" font-size="15" font-weight="700" color="$ink" />
                    <text value="Locked · 6:12 PM" font-family="Outfit" font-size="12" font-weight="500" color="$sub" />
                  </col>
                  <frame w="52" h="30" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="$accent-strong" />
                      <effect type="inner-shadow" x="0" y="1" radius="3" spread="0" color="#8A2418" />
                    </appearance>
                    <frame abs="true" x="25" y="4" w="22" h="22" radius="$r-pill">
                      <appearance>
                        <fill type="color" value="$sh-light" />
                        <effect type="drop-shadow" x="1" y="2" radius="4" spread="0" color="#8A241866" />
                      </appearance>
                    </frame>
                  </frame>
                </row>

                <!-- Air Purifier -->
                <row role="card" w="fill" p="18 18" radius="$r-el" gap="14" align="middle-left">
                  <appearance>
                    <fill type="color" value="$base" />
                    <effect type="drop-shadow" x="8" y="8" radius="16" spread="0" color="$sh-dark" />
                    <effect type="drop-shadow" x="-6" y="-6" radius="13" spread="0" color="$sh-light" />
                  </appearance>
                  <frame w="46" h="46" radius="13">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <img abs="true" x="13" y="13" src="https://api.iconify.design/lucide/wind.svg?color=%23A83A28" w="20" h="20" />
                  </frame>
                  <col gap="3" w="fill">
                    <text value="Air Purifier" font-family="Outfit" font-size="15" font-weight="700" color="$ink" />
                    <text value="Auto · 44% humidity" font-family="Outfit" font-size="12" font-weight="500" color="$sub" />
                  </col>
                  <frame w="52" h="30" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="$accent-strong" />
                      <effect type="inner-shadow" x="0" y="1" radius="3" spread="0" color="#8A2418" />
                    </appearance>
                    <frame abs="true" x="25" y="4" w="22" h="22" radius="$r-pill">
                      <appearance>
                        <fill type="color" value="$sh-light" />
                        <effect type="drop-shadow" x="1" y="2" radius="4" spread="0" color="#8A241866" />
                      </appearance>
                    </frame>
                  </frame>
                </row>
              </row>

              <!-- row 2 -->
              <row w="fill" gap="16" align="top-left">
                <!-- Speaker -->
                <row role="card" w="fill" p="18 18" radius="$r-el" gap="14" align="middle-left">
                  <appearance>
                    <fill type="color" value="$base" />
                    <effect type="drop-shadow" x="8" y="8" radius="16" spread="0" color="$sh-dark" />
                    <effect type="drop-shadow" x="-6" y="-6" radius="13" spread="0" color="$sh-light" />
                  </appearance>
                  <frame w="46" h="46" radius="13">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <img abs="true" x="13" y="13" src="https://api.iconify.design/lucide/speaker.svg?color=%23A83A28" w="20" h="20" />
                  </frame>
                  <col gap="3" w="fill">
                    <text value="Living Room Speaker" font-family="Outfit" font-size="15" font-weight="700" color="$ink" />
                    <text value="Playing · Khruangbin" font-family="Outfit" font-size="12" font-weight="500" color="$sub" />
                  </col>
                  <frame w="52" h="30" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="$accent-strong" />
                      <effect type="inner-shadow" x="0" y="1" radius="3" spread="0" color="#8A2418" />
                    </appearance>
                    <frame abs="true" x="25" y="4" w="22" h="22" radius="$r-pill">
                      <appearance>
                        <fill type="color" value="$sh-light" />
                        <effect type="drop-shadow" x="1" y="2" radius="4" spread="0" color="#8A241866" />
                      </appearance>
                    </frame>
                  </frame>
                </row>

                <!-- Robot Vacuum (off) -->
                <row role="card" w="fill" p="18 18" radius="$r-el" gap="14" align="middle-left">
                  <appearance>
                    <fill type="color" value="$base" />
                    <effect type="drop-shadow" x="8" y="8" radius="16" spread="0" color="$sh-dark" />
                    <effect type="drop-shadow" x="-6" y="-6" radius="13" spread="0" color="$sh-light" />
                  </appearance>
                  <frame w="46" h="46" radius="13">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                      <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                    </appearance>
                    <img abs="true" x="13" y="13" src="https://api.iconify.design/lucide/bot.svg?color=%236A6058" w="20" h="20" />
                  </frame>
                  <col gap="3" w="fill">
                    <text value="Robot Vacuum" font-family="Outfit" font-size="15" font-weight="700" color="$ink" />
                    <text value="Docked · 100% charged" font-family="Outfit" font-size="12" font-weight="500" color="$sub" />
                  </col>
                  <frame w="52" h="30" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="$base" />
                      <effect type="inner-shadow" x="2" y="2" radius="5" spread="0" color="$sh-dark" />
                      <effect type="inner-shadow" x="-2" y="-2" radius="4" spread="0" color="$sh-light" />
                    </appearance>
                    <frame abs="true" x="5" y="4" w="22" h="22" radius="$r-pill">
                      <appearance>
                        <fill type="color" value="$sh-light" />
                        <effect type="drop-shadow" x="1" y="1" radius="3" spread="0" color="$sh-dark" />
                      </appearance>
                    </frame>
                  </frame>
                </row>
              </row>
            </col>

          </col>
        </row>
      </col>
    </col>
  </col>
</gui>
```