---
title: "Northwind - Garage Charger, Kia EV6 Overnight"
platform: android
slug: northwind-garage-charger-kia-ev6-overnight
screens: []
domains: ["smart-home"]
style: "neumorphic"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "chip", "banner", "card", "tab-bar"]
score: {clean: 92, consistent: 73, accessible: 77, comprehensible: 39}
url: https://gui.farm/android/northwind-garage-charger-kia-ev6-overnight
raw: https://gui.farm/android/northwind-garage-charger-kia-ev6-overnight/design.guix
download: https://gui.farm/android/northwind-garage-charger-kia-ev6-overnight.gui
---

# Northwind - Garage Charger, Kia EV6 Overnight

A light neumorphic Android live EV charging screen where a homeowner charges a Kia EV6 overnight on a 48A garage wallbox, with a radial state-of-charge ring, live rate/energy/cost/range metrics, an off-peak projected total, and a plugged-in to 90%-target session timeline.

- **Live preview:** https://gui.farm/android/northwind-garage-charger-kia-ev6-overnight
- **Raw source:** https://gui.farm/android/northwind-garage-charger-kia-ev6-overnight/design.guix
- **Download (.gui):** https://gui.farm/android/northwind-garage-charger-kia-ev6-overnight.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Northwind - Garage Charger, Kia EV6 Overnight">
  <tokens>
    <color name="base" value="#E7ECF0" />
    <color name="well" value="#DCE3E8" />
    <color name="sh-dark" value="#C4CDD5" />
    <color name="sh-light" value="#FFFFFF" />
    <color name="ink" value="#1E2A33" />
    <color name="sub" value="#586771" />
    <color name="line" value="#D2DAE0" />
    <color name="track" value="#CBD5DC" />
    <color name="accent" value="#2C6284" />
    <color name="accent-strong" value="#1E445E" />
    <color name="accent-tint" value="#DCE7EE" />
    <number name="r-pill" value="999" />
    <number name="r-card" value="20" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Wordmark"
      font-family="Roboto"
      font-size="18"
      font-weight="800"
      line-height="22"
      letter-spacing="-0.3"
    />
    <text-style name="NavSub" font-family="Roboto" font-size="12" font-weight="500" line-height="15" />
    <text-style
      name="Chip"
      font-family="Roboto"
      font-size="12"
      font-weight="700"
      line-height="15"
      letter-spacing="0.2"
    />
    <text-style
      name="Caps"
      font-family="Roboto"
      font-size="11"
      font-weight="800"
      line-height="14"
      letter-spacing="1.6"
    />
    <text-style
      name="DialCap"
      font-family="Roboto"
      font-size="11"
      font-weight="800"
      line-height="14"
      letter-spacing="2.4"
    />
    <text-style
      name="DialBig"
      font-family="Roboto"
      font-size="52"
      font-weight="800"
      line-height="54"
      letter-spacing="-2"
    />
    <text-style name="DialSub" font-family="Roboto" font-size="14" font-weight="600" line-height="18" />
    <text-style
      name="BtnLabel"
      font-family="Roboto"
      font-size="14"
      font-weight="800"
      line-height="18"
      letter-spacing="0.2"
    />
    <text-style
      name="BannerCap"
      font-family="Roboto"
      font-size="11"
      font-weight="800"
      line-height="14"
      letter-spacing="1"
    />
    <text-style
      name="BannerBig"
      font-family="Roboto"
      font-size="22"
      font-weight="800"
      line-height="26"
      letter-spacing="-0.6"
    />
    <text-style name="BannerSub" font-family="Roboto" font-size="12" font-weight="600" line-height="16" />
    <text-style
      name="MetricCap"
      font-family="Roboto"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="0.4"
    />
    <text-style
      name="MetricBig"
      font-family="Roboto"
      font-size="22"
      font-weight="800"
      line-height="26"
      letter-spacing="-0.6"
    />
    <text-style name="MetricSub" font-family="Roboto" font-size="11" font-weight="600" line-height="14" />
    <text-style name="RowLabel" font-family="Roboto" font-size="13" font-weight="600" line-height="17" />
    <text-style
      name="RowStrong"
      font-family="Roboto"
      font-size="14"
      font-weight="800"
      line-height="18"
      letter-spacing="-0.1"
    />
    <text-style
      name="EvTitle"
      font-family="Roboto"
      font-size="14"
      font-weight="700"
      line-height="18"
      letter-spacing="-0.1"
    />
    <text-style name="EvMeta" font-family="Roboto" font-size="12" font-weight="500" line-height="15" />
    <text-style name="EvValue" font-family="Roboto" font-size="13" font-weight="700" line-height="16" />
    <text-style
      name="TabOn"
      font-family="Roboto"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="0.2"
    />
    <text-style
      name="TabOff"
      font-family="Roboto"
      font-size="10"
      font-weight="500"
      line-height="13"
      letter-spacing="0.2"
    />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 700 800" styles="normal" />
  </fonts>
  <col w="360" fill="$base">
    <row w="fill" h="28" p="0 18" gap="auto" align="middle-left">
      <text text-style="Status" value="11:02" fill="$ink" />
      <row gap="7" align="middle-right">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%231E2A33"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%231E2A33" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%231E2A33"
          w="15"
          h="15"
        />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="62" p="0 18" gap="auto" align="middle-left" fill="$base">
      <row gap="12" align="middle-left">
        <frame w="42" h="42" radius="14">
          <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/material-symbols/ev-station-rounded.svg?color=%232C6284"
            w="22"
            h="22"
          />
        </frame>
        <col gap="2" align="middle-left">
          <text text-style="Wordmark" value="Garage Charger" fill="$ink" />
          <text text-style="NavSub" value="Pulsar Plus wallbox · 48 A" fill="$sub" />
        </col>
      </row>
      <frame role="button" 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>
        <img
          abs="true"
          x="11"
          y="11"
          src="https://api.iconify.design/material-symbols/tune-rounded.svg?color=%23586771"
          w="20"
          h="20"
        />
      </frame>
    </row>
    <col w="fill" p="12 20 22 20" gap="16" align="top-center">
      <row w="fill" gap="8" p="2 2 2 2" align="middle-center">
        <row role="chip" p="8 12" radius="$r-pill" gap="7" align="middle-center">
          <appearance>
            <fill type="color" value="$accent-tint" />
          </appearance>
          <rect w="8" h="8" radius="4" fill="$accent" />
          <text text-style="Chip" value="Charging · Kia EV6" fill="$accent-strong" />
        </row>
      </row>
      <frame w="220" h="220" align="top-center">
        <frame abs="true" x="0" y="0" w="220" h="220" radius="110">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="16" y="16" radius="32" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-12" y="-12" radius="26" spread="0" color="$sh-light" />
          </appearance>
        </frame>
        <rect abs="true" x="106" y="14" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="118" y="15" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="129" y="17" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="140" y="20" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="150" y="25" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="160" y="32" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="169" y="39" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="177" y="47" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="184" y="57" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="189" y="67" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="193" y="78" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="196" y="89" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="198" y="100" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="198" y="112" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="196" y="123" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="193" y="134" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="189" y="145" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="184" y="155" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="177" y="165" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="169" y="173" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="160" y="180" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="150" y="187" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="140" y="192" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="129" y="195" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="118" y="197" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="106" y="198" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="94" y="197" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="83" y="195" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="72" y="192" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="62" y="187" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="52" y="180" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="43" y="173" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="35" y="165" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="28" y="155" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="23" y="145" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="19" y="134" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="16" y="123" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="14" y="112" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="14" y="100" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="16" y="89" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="19" y="78" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="23" y="67" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="28" y="57" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="35" y="47" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="43" y="39" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="51" y="31" w="8" h="8" radius="5" fill="$track" />
        <rect abs="true" x="62" y="25" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="72" y="20" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="83" y="17" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="94" y="15" w="8" h="8" radius="4" fill="$track" />
        <frame abs="true" x="42" y="42" w="136" h="136" radius="68">
          <appearance>
            <fill type="color" value="$well" />
            <effect type="inner-shadow" x="6" y="6" radius="13" spread="0" color="$sh-dark" />
            <effect type="inner-shadow" x="-5" y="-5" radius="11" spread="0" color="$sh-light" />
          </appearance>
        </frame>
        <col abs="true" x="42" y="72" w="136" gap="3" align="top-center">
          <text text-style="DialCap" value="CHARGING" fill="$accent" align="center" />
          <text text-style="DialBig" value="67%" fill="$ink" align="center" />
          <text text-style="DialSub" value="174 mi range" fill="$sub" align="center" />
        </col>
      </frame>
      <row w="fill" gap="12" align="middle-center">
        <row role="button" w="fill" h="54" radius="$r-pill" gap="9" align="middle-center">
          <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
            src="https://api.iconify.design/material-symbols/stop-circle-outline-rounded.svg?color=%231E445E"
            w="21"
            h="21"
          />
          <text text-style="BtnLabel" value="Stop charging" fill="$accent-strong" />
        </row>
        <frame role="button" w="54" h="54" radius="$r-pill">
          <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="15"
            y="15"
            src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%23586771"
            w="24"
            h="24"
          />
        </frame>
      </row>
      <row role="banner" w="fill" radius="$r-card" clip="true" align="middle-left">
        <appearance>
          <fill type="color" value="$accent-tint" />
        </appearance>
        <rect w="6" h="94" fill="$accent" />
        <row w="fill" p="15 16" gap="12" align="middle-left">
          <col w="fill" gap="5" align="middle-left">
            <text text-style="BannerCap" value="REACHES 90% TARGET AT 12:31 AM" fill="$accent-strong" />
            <text text-style="BannerBig" value="1h 29m remaining" fill="$ink" />
            <text text-style="BannerSub" value="Off-peak rate held until 6:00 AM" fill="$sub" />
          </col>
          <frame w="46" h="46" radius="23">
            <appearance>
              <fill type="color" value="$accent" />
            </appearance>
            <img
              abs="true"
              x="12"
              y="12"
              src="https://api.iconify.design/material-symbols/bolt-rounded.svg?color=%23FFFFFF"
              w="22"
              h="22"
            />
          </frame>
        </row>
      </row>
      <row w="fill" gap="12" align="top-center">
        <col role="card" w="fill" h="96" p="14 14" gap="6" radius="18" align="top-left">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="4" y="4" radius="9" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-3" y="-3" radius="8" spread="0" color="$sh-light" />
          </appearance>
          <text text-style="MetricCap" value="RATE NOW" fill="$sub" />
          <text text-style="MetricBig" value="11.5 kW" fill="$ink" />
          <text text-style="MetricSub" value="48 A · 240 V" fill="$sub" />
        </col>
        <col role="card" w="fill" h="96" p="14 14" gap="6" radius="18" align="top-left">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="4" y="4" radius="9" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-3" y="-3" radius="8" spread="0" color="$sh-light" />
          </appearance>
          <text text-style="MetricCap" value="ADDED" fill="$sub" />
          <text text-style="MetricBig" value="19.2 kWh" fill="$ink" />
          <text text-style="MetricSub" value="+67 mi this session" fill="$sub" />
        </col>
      </row>
      <row w="fill" gap="12" align="top-center">
        <col role="card" w="fill" h="96" p="14 14" gap="6" radius="18" align="top-left">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="4" y="4" radius="9" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-3" y="-3" radius="8" spread="0" color="$sh-light" />
          </appearance>
          <text text-style="MetricCap" value="COST SO FAR" fill="$sub" />
          <text text-style="MetricBig" value="$3.08" fill="$ink" />
          <text text-style="MetricSub" value="at $0.16 / kWh" fill="$sub" />
        </col>
        <col role="card" w="fill" h="96" p="14 14" gap="6" radius="18" align="top-left">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="4" y="4" radius="9" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-3" y="-3" radius="8" spread="0" color="$sh-light" />
          </appearance>
          <text text-style="MetricCap" value="TARGET SOC" fill="$sub" />
          <text text-style="MetricBig" value="90%" fill="$ink" />
          <text text-style="MetricSub" value="233 mi when full" fill="$sub" />
        </col>
      </row>
      <row role="card" w="fill" h="58" p="0 16" gap="12" radius="16" align="middle-left">
        <appearance>
          <fill type="color" value="$well" />
          <effect type="inner-shadow" x="2" y="2" 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/material-symbols/receipt-long-rounded.svg?color=%23586771"
          w="20"
          h="20"
        />
        <text text-style="RowLabel" value="Projected to 90%" fill="$sub" />
        <row w="fill" gap="8" align="middle-right">
          <text text-style="RowStrong" value="36.2 kWh" fill="$ink" />
          <text text-style="RowStrong" value="· $5.80" fill="$accent-strong" />
        </row>
      </row>
      <col role="card" w="fill" p="16 16 8 16" gap="4" radius="$r-card" align="top-left">
        <appearance>
          <fill type="color" value="$base" />
          <effect type="drop-shadow" x="4" y="4" radius="9" spread="0" color="$sh-dark" />
          <effect type="drop-shadow" x="-3" y="-3" radius="8" spread="0" color="$sh-light" />
        </appearance>
        <text text-style="Caps" value="SESSION TIMELINE" fill="$sub" />
        <row w="fill" h="60" gap="12" align="middle-left">
          <col w="26" align="middle-center" gap="0">
            <frame w="26" h="26" radius="13">
              <appearance>
                <fill type="color" value="$accent-tint" />
              </appearance>
              <img
                abs="true"
                x="4"
                y="4"
                src="https://api.iconify.design/material-symbols/power-rounded.svg?color=%232C6284"
                w="18"
                h="18"
              />
            </frame>
          </col>
          <col w="fill" gap="2" align="middle-left">
            <text text-style="EvTitle" value="Plugged in" fill="$ink" />
            <text text-style="EvMeta" value="9:14 PM · 41% · 106 mi" fill="$sub" />
          </col>
          <img
            src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%23586771"
            w="18"
            h="18"
          />
        </row>
        <row w="fill" h="4" p="0 0 0 12" align="middle-left">
          <rect w="2" h="4" radius="1" fill="$line" />
        </row>
        <row w="fill" h="60" gap="12" align="middle-left">
          <col w="26" align="middle-center" gap="0">
            <frame w="26" h="26" radius="13">
              <appearance>
                <fill type="color" value="$accent-tint" />
              </appearance>
              <img
                abs="true"
                x="4"
                y="4"
                src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%232C6284"
                w="18"
                h="18"
              />
            </frame>
          </col>
          <col w="fill" gap="2" align="middle-left">
            <text text-style="EvTitle" value="Off-peak rate started" fill="$ink" />
            <text text-style="EvMeta" value="9:18 PM · $0.16 / kWh" fill="$sub" />
          </col>
          <img
            src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%23586771"
            w="18"
            h="18"
          />
        </row>
        <row w="fill" h="4" p="0 0 0 12" align="middle-left">
          <rect w="2" h="4" radius="1" fill="$line" />
        </row>
        <row role="card" w="fill" h="66" p="0 12" gap="12" radius="16" align="middle-left">
          <appearance>
            <fill type="color" value="$accent-tint" />
          </appearance>
          <frame w="30" h="30" radius="15">
            <appearance>
              <fill type="color" value="$accent" />
            </appearance>
            <img
              abs="true"
              x="6"
              y="6"
              src="https://api.iconify.design/material-symbols/bolt-rounded.svg?color=%23FFFFFF"
              w="18"
              h="18"
            />
          </frame>
          <col w="fill" gap="2" align="middle-left">
            <text text-style="EvTitle" value="Charging now" fill="$ink" />
            <text text-style="EvMeta" value="11:02 PM · 67% · 174 mi" fill="$accent-strong" />
          </col>
          <text text-style="EvValue" value="+11.5 kW" fill="$accent-strong" />
        </row>
        <row w="fill" h="4" p="0 0 0 12" align="middle-left">
          <rect w="2" h="4" radius="1" fill="$line" />
        </row>
        <row w="fill" h="60" gap="12" align="middle-left">
          <col w="26" align="middle-center" gap="0">
            <frame w="26" h="26" radius="13">
              <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>
              <img
                abs="true"
                x="4"
                y="4"
                src="https://api.iconify.design/material-symbols/flag-rounded.svg?color=%23586771"
                w="18"
                h="18"
              />
            </frame>
          </col>
          <col w="fill" gap="2" align="middle-left">
            <text text-style="EvTitle" value="Reaches 90% target" fill="$sub" />
            <text text-style="EvMeta" value="~12:31 AM · 233 mi" fill="$sub" />
          </col>
          <text text-style="EvValue" value="Upcoming" fill="$sub" />
        </row>
      </col>
    </col>
    <col w="fill" fill="$base" border="1 0 0 0 $line">
      <row role="tab-bar" w="fill" h="64" p="0 12" align="middle-center">
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/bolt-rounded.svg?color=%232C6284"
            w="23"
            h="23"
          />
          <text text-style="TabOn" value="Charge" fill="$accent" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/calendar-clock-rounded.svg?color=%23586771"
            w="23"
            h="23"
          />
          <text text-style="TabOff" value="Schedule" fill="$sub" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/history-rounded.svg?color=%23586771"
            w="23"
            h="23"
          />
          <text text-style="TabOff" value="History" fill="$sub" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/directions-car-rounded.svg?color=%23586771"
            w="23"
            h="23"
          />
          <text text-style="TabOff" value="Car" fill="$sub" align="center" />
        </col>
      </row>
      <row w="fill" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$track" />
      </row>
    </col>
  </col>
</gui>
```