---
title: "Trellis - This Week"
platform: android
slug: trellis-this-week
screens: []
domains: ["fitness"]
style: "claymorphism"
fonts: ["Roboto", "Fredoka"]
roles: ["top-navigation-bar", "avatar", "hyperlink", "card", "button", "tab-bar"]
score: {clean: 100, consistent: 79, accessible: 69, comprehensible: 18}
url: https://gui.farm/android/trellis-this-week
raw: https://gui.farm/android/trellis-this-week/design.guix
download: https://gui.farm/android/trellis-this-week.gui
---

# Trellis - This Week

An Android wellness habit-tracker home screen with a weekly completion summary and per-habit streaks tracked as daily check-off dots.

- **Live preview:** https://gui.farm/android/trellis-this-week
- **Raw source:** https://gui.farm/android/trellis-this-week/design.guix
- **Download (.gui):** https://gui.farm/android/trellis-this-week.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Trellis - This Week">
  <tokens>
    <color name="bg" value="#F1ECFA" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-2" value="#F7F2FD" />
    <color name="done-tint" value="#EBE3FD" />
    <color name="ink" value="#221C31" />
    <color name="sub" value="#5C5473" />
    <color name="line" value="#E7E0F3" />
    <color name="dot-empty" value="#DED6EF" />
    <color name="violet" value="#7C4DFF" />
    <color name="violet-deep" value="#5A32D6" />
    <color name="violet-ink" value="#5024BE" />
    <color name="hero-fill" value="#5A32D6" />
    <color name="t-lilac" value="#C9B8FF" />
    <color name="t-sky" value="#A6D3FF" />
    <color name="t-coral" value="#FFB3A0" />
    <color name="t-amber" value="#FAD07A" />
    <color name="t-mint" value="#A6E4C6" />
    <color name="t-peri" value="#B7BEFF" />
    <number name="r-card" value="26" />
    <number name="r-tile" value="16" />
    <number name="r-pill" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="13" font-weight="500" line-height="16" />
    <text-style name="Wordmark" font-family="Fredoka" font-size="18" font-weight="600" line-height="22" letter-spacing="0.2" />
    <text-style name="Eyebrow" font-family="Fredoka" font-size="12" font-weight="700" line-height="15" letter-spacing="1.3" />
    <text-style name="H1" font-family="Fredoka" font-size="23" font-weight="700" line-height="28" letter-spacing="-0.3" />
    <text-style name="HeroLabel" font-family="Fredoka" font-size="12" font-weight="700" line-height="15" letter-spacing="1.4" />
    <text-style name="HeroNum" font-family="Fredoka" font-size="42" font-weight="700" line-height="44" letter-spacing="-1.2" />
    <text-style name="HeroStat" font-family="Fredoka" font-size="17" font-weight="600" line-height="20" />
    <text-style name="HeroSub" font-family="Roboto" font-size="12" font-weight="500" line-height="15" />
    <text-style name="MiniStat" font-family="Roboto" font-size="12.5" font-weight="600" line-height="16" />
    <text-style name="SectionTitle" font-family="Fredoka" font-size="18" font-weight="700" line-height="22" />
    <text-style name="Link" font-family="Roboto" font-size="13" font-weight="600" line-height="16" />
    <text-style name="CardLabel" font-family="Fredoka" font-size="16" font-weight="600" line-height="20" />
    <text-style name="CardMeta" font-family="Roboto" font-size="12" font-weight="500" line-height="15" />
    <text-style name="Micro" font-family="Roboto" font-size="10" font-weight="600" line-height="12" letter-spacing="0.2" />
    <text-style name="AddLabel" font-family="Fredoka" font-size="15" font-weight="700" line-height="19" />
    <text-style name="Nav" font-family="Roboto" font-size="11" font-weight="600" line-height="13" letter-spacing="0.2" />
    <text-style name="Avatar" font-family="Fredoka" font-size="16" font-weight="600" line-height="20" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 700" styles="normal" />
    <font family="Fredoka" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="360" fill="$bg" gap="0" align="top-center">
    <!-- Status bar (untagged device chrome) -->
    <row w="fill" p="10 20 0" align="middle-center" gap="auto">
      <text text-style="Status" value="9:41" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23221C31" w="16" h="16" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23221C31" w="16" h="16" />
        <img src="https://api.iconify.design/material-symbols/battery-full-rounded.svg?color=%23221C31" w="16" h="16" />
      </row>
    </row>
    <!-- Top navigation -->
    <row role="top-navigation-bar" w="fill" p="12 20 4" align="middle-center" gap="auto">
      <row gap="10" align="middle-center">
        <frame w="38" h="38" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="color" value="$violet" />
            <effect type="drop-shadow" x="0" y="4" radius="10" spread="0" color="#5A32D659" />
            <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF4D" />
          </appearance>
          <img abs="true" x="8" y="8" src="https://api.iconify.design/material-symbols/spa-rounded.svg?color=%23FFFFFF" w="22" h="22" />
        </frame>
        <text text-style="Wordmark" value="Trellis" color="$ink" />
      </row>
      <frame role="avatar" w="40" h="40" radius="$r-pill" align="middle-center">
        <appearance>
          <fill type="color" value="$t-coral" />
          <effect type="drop-shadow" x="3" y="4" radius="9" spread="0" color="#A98FB255" />
          <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF66" />
        </appearance>
        <text abs="true" x="0" y="10" w="40" text-style="Avatar" value="M" color="#5A2318" align="center" />
      </frame>
    </row>
    <!-- Header -->
    <col w="fill" p="12 20 0" gap="6" align="top-left">
      <text text-style="Eyebrow" text-case="uppercase" value="Tuesday, August 18" color="$violet-ink" />
      <text w="fill" text-style="H1" value="Good evening, Maya" color="$ink" />
    </col>
    <!-- Hero: weekly completion -->
    <col w="fill" p="16 20 0" align="top-center">
      <col w="fill" radius="$r-card" p="20" gap="16" align="top-center">
        <appearance>
          <fill type="color" value="$hero-fill" />
          <effect type="drop-shadow" x="0" y="10" radius="22" spread="0" color="#5A32D659" />
          <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF33" />
        </appearance>
        <row w="fill" align="top-left" gap="auto">
          <col gap="4" align="top-left">
            <text text-style="HeroLabel" text-case="uppercase" value="Last 7 days" color="#E6DBFF" />
            <text text-style="HeroNum" value="74%" color="#FFFFFF" />
          </col>
          <col gap="2" align="top-right">
            <text text-style="HeroStat" value="31 of 42" color="#FFFFFF" align="right" />
            <text text-style="HeroSub" value="habits complete" color="#E6DBFF" align="right" />
          </col>
        </row>
        <!-- Progress bar: 31/42 = 0.738095 x 280 = 206.67 -->
        <frame w="280" h="14" radius="$r-pill" clip="true">
          <rect abs="true" x="0" y="0" w="280" h="14" radius="$r-pill" fill="#FFFFFF33" />
          <rect abs="true" x="0" y="0" w="206.67" h="14" radius="$r-pill" fill="#D8C9FF" />
        </frame>
        <row w="fill" align="middle-left" gap="18">
          <row gap="7" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/local-fire-department-rounded.svg?color=%23FFFFFF" w="17" h="17" />
            <text text-style="MiniStat" value="42-day best streak" color="#FFFFFF" />
          </row>
          <row gap="7" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%23FFFFFF" w="17" h="17" />
            <text text-style="MiniStat" value="3 of 6 done today" color="#FFFFFF" />
          </row>
        </row>
      </col>
    </col>
    <!-- Section header -->
    <row w="fill" p="20 20 0" align="middle-center" gap="auto">
      <text text-style="SectionTitle" value="Habits" color="$ink" />
      <row gap="4" align="middle-center">
        <text role="hyperlink" text-style="Link" value="Last 7 days" color="$sub" />
        <img src="https://api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg?color=%235C5473" w="18" h="18" />
      </row>
    </row>
    <!-- Habit list -->
    <col w="fill" p="14 20 0" gap="12" align="top-center">

      <!-- Meditate: 6/7, done today, streak 18 -->
      <col role="card" w="fill" radius="$r-card" p="14 16" gap="13" align="top-left">
        <appearance>
          <fill type="color" value="$surface" />
          <effect type="drop-shadow" x="5" y="7" radius="16" spread="0" color="#B4A2D640" />
          <effect type="drop-shadow" x="-4" y="-4" radius="10" spread="0" color="#FFFFFFCC" />
        </appearance>
        <row w="fill" align="middle-center" gap="12">
          <frame w="46" h="46" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$t-lilac" />
              <effect type="drop-shadow" x="3" y="4" radius="8" spread="0" color="#8E79C255" />
              <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF80" />
            </appearance>
            <img abs="true" x="11" y="11" src="https://api.iconify.design/material-symbols/self-improvement-rounded.svg?color=%2333265C" w="24" h="24" />
          </frame>
          <col gap="3" align="top-left" w="fill">
            <text text-style="CardLabel" value="Meditate 10 min" color="$ink" />
            <row gap="5" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/local-fire-department-rounded.svg?color=%235024BE" w="13" h="13" />
              <text text-style="CardMeta" value="18 day streak" color="$sub" />
            </row>
          </col>
          <frame w="40" h="40" radius="$r-pill" align="middle-center">
            <appearance>
              <fill type="color" value="$violet" />
              <effect type="drop-shadow" x="0" y="4" radius="9" spread="0" color="#5A32D659" />
              <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF4D" />
            </appearance>
            <img abs="true" x="9" y="9" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF" w="22" h="22" />
          </frame>
        </row>
        <!-- 7-dot strip: W T F S S M T (today). filled: W T F _ S M T -->
        <row w="fill" align="top-center" gap="0">
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="W" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="T" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="F" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$dot-empty" /><text text-style="Micro" value="S" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="S" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="M" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet-deep" /><text text-style="Micro" value="T" color="$violet-ink" /></col>
        </row>
      </col>

      <!-- Drink water: 7/7, done today, streak 42 -->
      <col role="card" w="fill" radius="$r-card" p="14 16" gap="13" align="top-left">
        <appearance>
          <fill type="color" value="$surface" />
          <effect type="drop-shadow" x="5" y="7" radius="16" spread="0" color="#B4A2D640" />
          <effect type="drop-shadow" x="-4" y="-4" radius="10" spread="0" color="#FFFFFFCC" />
        </appearance>
        <row w="fill" align="middle-center" gap="12">
          <frame w="46" h="46" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$t-sky" />
              <effect type="drop-shadow" x="3" y="4" radius="8" spread="0" color="#6E97C255" />
              <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF80" />
            </appearance>
            <img abs="true" x="11" y="11" src="https://api.iconify.design/material-symbols/water-drop-rounded.svg?color=%2333265C" w="24" h="24" />
          </frame>
          <col gap="3" align="top-left" w="fill">
            <text text-style="CardLabel" value="Drink water" color="$ink" />
            <row gap="5" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/local-fire-department-rounded.svg?color=%235024BE" w="13" h="13" />
              <text text-style="CardMeta" value="42 day streak - 2.6 L today" color="$sub" />
            </row>
          </col>
          <frame w="40" h="40" radius="$r-pill" align="middle-center">
            <appearance>
              <fill type="color" value="$violet" />
              <effect type="drop-shadow" x="0" y="4" radius="9" spread="0" color="#5A32D659" />
              <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF4D" />
            </appearance>
            <img abs="true" x="9" y="9" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF" w="22" h="22" />
          </frame>
        </row>
        <!-- filled: all 7 -->
        <row w="fill" align="top-center" gap="0">
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="W" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="T" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="F" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="S" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="S" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="M" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet-deep" /><text text-style="Micro" value="T" color="$violet-ink" /></col>
        </row>
      </col>

      <!-- Workout: 4/7, NOT done today, streak 5 -->
      <col role="card" w="fill" radius="$r-card" p="14 16" gap="13" align="top-left">
        <appearance>
          <fill type="color" value="$surface" />
          <effect type="drop-shadow" x="5" y="7" radius="16" spread="0" color="#B4A2D640" />
          <effect type="drop-shadow" x="-4" y="-4" radius="10" spread="0" color="#FFFFFFCC" />
        </appearance>
        <row w="fill" align="middle-center" gap="12">
          <frame w="46" h="46" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$t-coral" />
              <effect type="drop-shadow" x="3" y="4" radius="8" spread="0" color="#C2836E55" />
              <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF80" />
            </appearance>
            <img abs="true" x="11" y="11" src="https://api.iconify.design/material-symbols/fitness-center-rounded.svg?color=%2333265C" w="24" h="24" />
          </frame>
          <col gap="3" align="top-left" w="fill">
            <text text-style="CardLabel" value="Workout" color="$ink" />
            <row gap="5" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/local-fire-department-rounded.svg?color=%235024BE" w="13" h="13" />
              <text text-style="CardMeta" value="5 day streak" color="$sub" />
            </row>
          </col>
          <frame w="40" h="40" radius="$r-pill" border="2 $line" align="middle-center">
            <appearance>
              <fill type="color" value="$surface-2" />
            </appearance>
            <img abs="true" x="9" y="9" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23C7BEDE" w="22" h="22" />
          </frame>
        </row>
        <!-- filled: W _ F S _ M _ ; today (T) empty ring -->
        <row w="fill" align="top-center" gap="0">
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="W" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$dot-empty" /><text text-style="Micro" value="T" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="F" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="S" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$dot-empty" /><text text-style="Micro" value="S" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="M" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><rect w="14" h="14" radius="$r-pill" border="2 $violet" /><text text-style="Micro" value="T" color="$violet-ink" /></col>
        </row>
      </col>

      <!-- Read: 6/7, done today, streak 11 -->
      <col role="card" w="fill" radius="$r-card" p="14 16" gap="13" align="top-left">
        <appearance>
          <fill type="color" value="$surface" />
          <effect type="drop-shadow" x="5" y="7" radius="16" spread="0" color="#B4A2D640" />
          <effect type="drop-shadow" x="-4" y="-4" radius="10" spread="0" color="#FFFFFFCC" />
        </appearance>
        <row w="fill" align="middle-center" gap="12">
          <frame w="46" h="46" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$t-amber" />
              <effect type="drop-shadow" x="3" y="4" radius="8" spread="0" color="#C2A15E55" />
              <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF80" />
            </appearance>
            <img abs="true" x="11" y="11" src="https://api.iconify.design/material-symbols/menu-book-rounded.svg?color=%2333265C" w="24" h="24" />
          </frame>
          <col gap="3" align="top-left" w="fill">
            <text text-style="CardLabel" value="Read 20 pages" color="$ink" />
            <row gap="5" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/local-fire-department-rounded.svg?color=%235024BE" w="13" h="13" />
              <text text-style="CardMeta" value="11 day streak" color="$sub" />
            </row>
          </col>
          <frame w="40" h="40" radius="$r-pill" align="middle-center">
            <appearance>
              <fill type="color" value="$violet" />
              <effect type="drop-shadow" x="0" y="4" radius="9" spread="0" color="#5A32D659" />
              <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF4D" />
            </appearance>
            <img abs="true" x="9" y="9" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF" w="22" h="22" />
          </frame>
        </row>
        <!-- filled: W _ F S S M T ; miss Thu -->
        <row w="fill" align="top-center" gap="0">
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="W" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$dot-empty" /><text text-style="Micro" value="T" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="F" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="S" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="S" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="M" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet-deep" /><text text-style="Micro" value="T" color="$violet-ink" /></col>
        </row>
      </col>

      <!-- Stretch: 3/7, NOT done today, streak 2 -->
      <col role="card" w="fill" radius="$r-card" p="14 16" gap="13" align="top-left">
        <appearance>
          <fill type="color" value="$surface" />
          <effect type="drop-shadow" x="5" y="7" radius="16" spread="0" color="#B4A2D640" />
          <effect type="drop-shadow" x="-4" y="-4" radius="10" spread="0" color="#FFFFFFCC" />
        </appearance>
        <row w="fill" align="middle-center" gap="12">
          <frame w="46" h="46" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$t-mint" />
              <effect type="drop-shadow" x="3" y="4" radius="8" spread="0" color="#6EB08E55" />
              <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF80" />
            </appearance>
            <img abs="true" x="11" y="11" src="https://api.iconify.design/material-symbols/sports-gymnastics-rounded.svg?color=%2333265C" w="24" h="24" />
          </frame>
          <col gap="3" align="top-left" w="fill">
            <text text-style="CardLabel" value="Stretch" color="$ink" />
            <row gap="5" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/local-fire-department-rounded.svg?color=%235024BE" w="13" h="13" />
              <text text-style="CardMeta" value="2 day streak" color="$sub" />
            </row>
          </col>
          <frame w="40" h="40" radius="$r-pill" border="2 $line" align="middle-center">
            <appearance>
              <fill type="color" value="$surface-2" />
            </appearance>
            <img abs="true" x="9" y="9" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23C7BEDE" w="22" h="22" />
          </frame>
        </row>
        <!-- filled: W _ _ _ S M _ ; today empty ring -->
        <row w="fill" align="top-center" gap="0">
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="W" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$dot-empty" /><text text-style="Micro" value="T" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$dot-empty" /><text text-style="Micro" value="F" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$dot-empty" /><text text-style="Micro" value="S" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="S" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="M" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><rect w="14" h="14" radius="$r-pill" border="2 $violet" /><text text-style="Micro" value="T" color="$violet-ink" /></col>
        </row>
      </col>

      <!-- Lights out: 5/7, NOT done today (pending), streak 9 -->
      <col role="card" w="fill" radius="$r-card" p="14 16" gap="13" align="top-left">
        <appearance>
          <fill type="color" value="$surface" />
          <effect type="drop-shadow" x="5" y="7" radius="16" spread="0" color="#B4A2D640" />
          <effect type="drop-shadow" x="-4" y="-4" radius="10" spread="0" color="#FFFFFFCC" />
        </appearance>
        <row w="fill" align="middle-center" gap="12">
          <frame w="46" h="46" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$t-peri" />
              <effect type="drop-shadow" x="3" y="4" radius="8" spread="0" color="#7C82C255" />
              <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF80" />
            </appearance>
            <img abs="true" x="11" y="11" src="https://api.iconify.design/material-symbols/bedtime-rounded.svg?color=%2333265C" w="24" h="24" />
          </frame>
          <col gap="3" align="top-left" w="fill">
            <text text-style="CardLabel" value="Lights out by 11" color="$ink" />
            <row gap="5" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/local-fire-department-rounded.svg?color=%235024BE" w="13" h="13" />
              <text text-style="CardMeta" value="9 day streak" color="$sub" />
            </row>
          </col>
          <frame w="40" h="40" radius="$r-pill" border="2 $line" align="middle-center">
            <appearance>
              <fill type="color" value="$surface-2" />
            </appearance>
            <img abs="true" x="9" y="9" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23C7BEDE" w="22" h="22" />
          </frame>
        </row>
        <!-- filled: W T _ S S M _ ; today empty ring -->
        <row w="fill" align="top-center" gap="0">
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="W" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="T" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$dot-empty" /><text text-style="Micro" value="F" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="S" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="S" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><ellipse w="14" h="14" fill="$violet" /><text text-style="Micro" value="M" color="$sub" /></col>
          <col w="fill" gap="6" align="top-center"><rect w="14" h="14" radius="$r-pill" border="2 $violet" /><text text-style="Micro" value="T" color="$violet-ink" /></col>
        </row>
      </col>

      <!-- New habit ghost row -->
      <row role="button" w="fill" radius="$r-card" p="12 16" gap="12" align="middle-center">
        <appearance>
          <fill type="color" value="$surface-2" />
          <effect type="inner-shadow" x="0" y="1" radius="2" spread="0" color="#00000008" />
        </appearance>
        <frame w="40" h="40" radius="$r-tile" align="middle-center">
          <appearance>
            <fill type="color" value="$done-tint" />
          </appearance>
          <img abs="true" x="9" y="9" src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%235024BE" w="22" h="22" />
        </frame>
        <text text-style="AddLabel" value="New habit" color="$violet-ink" w="fill" />
        <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23A79DC0" w="20" h="20" />
      </row>

      <rect w="fill" h="12" fill="$bg" />
    </col>

    <!-- Bottom tab bar (viewport-fixed, last flow child) -->
    <col role="tab-bar" w="fill" fill="$surface" border="1 $line" p="10 24 8" gap="6" align="top-center">
      <row w="fill" align="top-center" gap="auto">
        <col w="64" gap="5" align="top-center">
          <frame w="46" h="30" radius="$r-pill" align="middle-center">
            <appearance>
              <fill type="color" value="$done-tint" />
            </appearance>
            <img abs="true" x="13" y="5" src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%235024BE" w="20" h="20" />
          </frame>
          <text text-style="Nav" value="Today" color="$violet-ink" />
        </col>
        <col w="64" gap="5" align="top-center">
          <frame w="46" h="30" align="middle-center">
            <img abs="true" x="13" y="5" src="https://api.iconify.design/material-symbols/monitoring-rounded.svg?color=%23A79DC0" w="20" h="20" />
          </frame>
          <text text-style="Nav" value="Insights" color="$sub" />
        </col>
        <col w="64" gap="5" align="top-center">
          <frame w="46" h="30" align="middle-center">
            <img abs="true" x="13" y="5" src="https://api.iconify.design/material-symbols/format-list-bulleted-rounded.svg?color=%23A79DC0" w="20" h="20" />
          </frame>
          <text text-style="Nav" value="Habits" color="$sub" />
        </col>
        <col w="64" gap="5" align="top-center">
          <frame w="46" h="30" align="middle-center">
            <img abs="true" x="13" y="5" src="https://api.iconify.design/material-symbols/person-rounded.svg?color=%23A79DC0" w="20" h="20" />
          </frame>
          <text text-style="Nav" value="Profile" color="$sub" />
        </col>
      </row>
      <rect w="128" h="4" radius="$r-pill" fill="$dot-empty" />
    </col>
  </col>
</gui>

```