---
title: "Cadence - Today"
platform: android
slug: cadence-today
screens: []
domains: ["healthcare"]
style: "neumorphic"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "chip", "button", "banner", "card", "badge", "tab-bar"]
score: {clean: 97, consistent: 70, accessible: 73, comprehensible: 34}
url: https://gui.farm/android/cadence-today
raw: https://gui.farm/android/cadence-today/design.guix
download: https://gui.farm/android/cadence-today.gui
---

# Cadence - Today

A dark neumorphic Android medication screen showing today's dose schedule grouped by time, an adherence ring, the next dose with a take-now action, and a 7-day adherence chart.

- **Live preview:** https://gui.farm/android/cadence-today
- **Raw source:** https://gui.farm/android/cadence-today/design.guix
- **Download (.gui):** https://gui.farm/android/cadence-today.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Cadence - Today's Medications">
  <tokens>
    <color name="base" value="#262C33" />
    <color name="inner" value="#20262C" />
    <color name="sh-dark" value="#171B20" />
    <color name="sh-light" value="#333B44" />
    <color name="ink" value="#EEF2F5" />
    <color name="sub" value="#9BA6B0" />
    <color name="track" value="#3A424C" />
    <color name="accent" value="#34D0E0" />
    <color name="accent-strong" value="#12A9B8" />
    <color name="accent-ink" value="#06222A" />
    <color name="banner" value="#143038" />
    <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="20"
      font-weight="800"
      line-height="24"
      letter-spacing="-0.4"
    />
    <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="13" font-weight="700" line-height="16" />
    <text-style
      name="Caps"
      font-family="Roboto"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="1.4"
    />
    <text-style
      name="DialLabel"
      font-family="Roboto"
      font-size="11"
      font-weight="800"
      line-height="14"
      letter-spacing="2"
    />
    <text-style
      name="DialBig"
      font-family="Roboto"
      font-size="46"
      font-weight="700"
      line-height="50"
      letter-spacing="-1.5"
    />
    <text-style name="DialSub" font-family="Roboto" font-size="13" font-weight="500" line-height="17" />
    <text-style
      name="Badge"
      font-family="Roboto"
      font-size="10"
      font-weight="800"
      line-height="12"
      letter-spacing="0.6"
    />
    <text-style
      name="BannerCap"
      font-family="Roboto"
      font-size="11"
      font-weight="800"
      line-height="14"
      letter-spacing="1"
    />
    <text-style
      name="DoseName"
      font-family="Roboto"
      font-size="16"
      font-weight="700"
      line-height="20"
      letter-spacing="-0.2"
    />
    <text-style name="Meta" font-family="Roboto" font-size="12" font-weight="600" line-height="16" />
    <text-style
      name="BtnLabel"
      font-family="Roboto"
      font-size="13"
      font-weight="800"
      line-height="16"
      letter-spacing="0.2"
    />
    <text-style
      name="CardTitle"
      font-family="Roboto"
      font-size="15"
      font-weight="700"
      line-height="19"
      letter-spacing="-0.2"
    />
    <text-style name="DayLabel" font-family="Roboto" font-size="11" font-weight="700" line-height="14" />
    <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="12:50" fill="$ink" />
      <row gap="7" align="middle-right">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23EEF2F5"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23EEF2F5" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23EEF2F5"
          w="15"
          h="15"
        />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="62" p="0 20" 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/medication-liquid.svg?color=%2334D0E0"
            w="22"
            h="22"
          />
        </frame>
        <col gap="2" align="middle-left">
          <text text-style="Wordmark" value="Cadence" fill="$ink" />
          <text text-style="NavSub" value="Tuesday, Aug 18" fill="$sub" />
        </col>
      </row>
      <row gap="10" align="middle-right">
        <row role="chip" p="9 13" radius="$r-pill" gap="6" align="middle-center">
          <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/material-symbols/local-fire-department.svg?color=%2334D0E0"
            w="15"
            h="15"
          />
          <text text-style="Chip" value="18" fill="$accent" />
        </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.svg?color=%239BA6B0"
            w="20"
            h="20"
          />
        </frame>
      </row>
    </row>
    <col w="fill" p="14 20 22 20" gap="18" align="top-center">
      <frame w="224" h="224">
        <frame abs="true" x="0" y="0" w="224" h="224" radius="112">
          <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="108" y="8" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="124" y="9" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="139" y="13" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="153" y="19" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="167" y="27" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="179" y="37" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="189" y="49" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="197" y="63" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="203" y="77" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="207" y="92" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="208" y="108" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="207" y="124" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="203" y="139" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="197" y="153" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="189" y="167" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="179" y="179" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="167" y="189" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="153" y="197" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="139" y="203" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="124" y="207" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="108" y="208" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="92" y="207" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="77" y="203" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="63" y="197" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="49" y="189" w="8" h="8" radius="4" fill="$accent" />
        <rect abs="true" x="37" y="179" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="27" y="167" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="19" y="153" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="13" y="139" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="9" y="124" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="8" y="108" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="9" y="92" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="13" y="77" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="19" y="63" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="27" y="49" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="37" y="37" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="49" y="27" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="63" y="19" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="77" y="13" w="8" h="8" radius="4" fill="$track" />
        <rect abs="true" x="92" y="9" w="8" h="8" radius="4" fill="$track" />
        <frame abs="true" x="38" y="38" w="148" h="148" radius="74">
          <appearance>
            <fill type="color" value="$inner" />
            <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="38" y="70" w="148" gap="4" align="top-center">
          <text text-style="DialLabel" value="TAKEN TODAY" fill="$accent" align="center" />
          <text text-style="DialBig" value="5/8" fill="$ink" align="center" />
          <text text-style="DialSub" value="3 doses left" fill="$sub" align="center" />
        </col>
      </frame>
      <row role="banner" w="fill" h="88" radius="12" clip="true" align="middle-left">
        <appearance>
          <fill type="color" value="$banner" />
        </appearance>
        <rect w="8" h="88" fill="$accent" />
        <row w="fill" h="fill" p="14 16" gap="12" align="middle-left">
          <col w="fill" gap="5" align="middle-left">
            <text text-style="BannerCap" value="NEXT DOSE · IN 40 MIN" fill="$accent" />
            <text text-style="DoseName" value="Metformin 500 mg" fill="$ink" />
            <text text-style="Meta" value="1:30 PM · with lunch" fill="$sub" />
          </col>
          <row role="button" w="98" h="46" radius="23" align="middle-center">
            <appearance>
              <fill type="color" value="$accent" />
            </appearance>
            <text text-style="BtnLabel" value="Take now" fill="$accent-ink" align="center" />
          </row>
        </row>
      </row>
      <col w="fill" gap="10" align="top-center">
        <row w="fill" p="6 4 0 4" gap="auto" align="middle-left">
          <text text-style="Caps" value="MORNING" fill="$sub" />
          <text text-style="Caps" value="4 OF 4 DONE" fill="$accent-strong" />
        </row>
        <row role="card" w="fill" h="66" p="0 14" gap="12" radius="16" align="middle-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>
          <frame w="38" h="38" radius="12">
            <appearance>
              <fill type="color" value="$inner" />
              <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
              abs="true"
              x="9"
              y="9"
              src="https://api.iconify.design/material-symbols/medication.svg?color=%2334D0E0"
              w="20"
              h="20"
            />
          </frame>
          <col w="fill" gap="3" align="middle-left">
            <text text-style="DoseName" value="Levothyroxine" fill="$ink" />
            <text text-style="Meta" value="7:30 AM · 75 mcg" fill="$sub" />
          </col>
          <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/check-rounded.svg?color=%2306222A"
              w="18"
              h="18"
            />
          </frame>
        </row>
        <row role="card" w="fill" h="66" p="0 14" gap="12" radius="16" align="middle-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>
          <frame w="38" h="38" radius="12">
            <appearance>
              <fill type="color" value="$inner" />
              <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
              abs="true"
              x="9"
              y="9"
              src="https://api.iconify.design/material-symbols/medication.svg?color=%2334D0E0"
              w="20"
              h="20"
            />
          </frame>
          <col w="fill" gap="3" align="middle-left">
            <text text-style="DoseName" value="Vitamin D3" fill="$ink" />
            <text text-style="Meta" value="8:00 AM · 2000 IU" fill="$sub" />
          </col>
          <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/check-rounded.svg?color=%2306222A"
              w="18"
              h="18"
            />
          </frame>
        </row>
        <row role="card" w="fill" h="66" p="0 14" gap="12" radius="16" align="middle-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>
          <frame w="38" h="38" radius="12">
            <appearance>
              <fill type="color" value="$inner" />
              <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
              abs="true"
              x="9"
              y="9"
              src="https://api.iconify.design/material-symbols/medication.svg?color=%2334D0E0"
              w="20"
              h="20"
            />
          </frame>
          <col w="fill" gap="3" align="middle-left">
            <text text-style="DoseName" value="Sertraline" fill="$ink" />
            <text text-style="Meta" value="8:00 AM · 50 mg" fill="$sub" />
          </col>
          <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/check-rounded.svg?color=%2306222A"
              w="18"
              h="18"
            />
          </frame>
        </row>
        <row role="card" w="fill" h="66" p="0 14" gap="12" radius="16" align="middle-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>
          <frame w="38" h="38" radius="12">
            <appearance>
              <fill type="color" value="$inner" />
              <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
              abs="true"
              x="9"
              y="9"
              src="https://api.iconify.design/material-symbols/medication.svg?color=%2334D0E0"
              w="20"
              h="20"
            />
          </frame>
          <col w="fill" gap="3" align="middle-left">
            <text text-style="DoseName" value="Metformin" fill="$ink" />
            <text text-style="Meta" value="8:00 AM · 500 mg" fill="$sub" />
          </col>
          <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/check-rounded.svg?color=%2306222A"
              w="18"
              h="18"
            />
          </frame>
        </row>
        <row w="fill" p="6 4 0 4" gap="auto" align="middle-left">
          <text text-style="Caps" value="AFTERNOON" fill="$sub" />
          <text text-style="Caps" value="1 OF 2 DONE" fill="$accent-strong" />
        </row>
        <row role="card" w="fill" h="66" p="0 14" gap="12" radius="16" align="middle-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>
          <frame w="38" h="38" radius="12">
            <appearance>
              <fill type="color" value="$inner" />
              <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
              abs="true"
              x="9"
              y="9"
              src="https://api.iconify.design/material-symbols/medication.svg?color=%2334D0E0"
              w="20"
              h="20"
            />
          </frame>
          <col w="fill" gap="3" align="middle-left">
            <text text-style="DoseName" value="Omega-3" fill="$ink" />
            <text text-style="Meta" value="12:30 PM · 1000 mg" fill="$sub" />
          </col>
          <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/check-rounded.svg?color=%2306222A"
              w="18"
              h="18"
            />
          </frame>
        </row>
        <row role="card" w="fill" h="66" p="0 14" gap="12" radius="16" align="middle-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>
          <frame w="38" h="38" radius="12">
            <appearance>
              <fill type="color" value="$inner" />
              <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
              abs="true"
              x="9"
              y="9"
              src="https://api.iconify.design/material-symbols/medication.svg?color=%2334D0E0"
              w="20"
              h="20"
            />
          </frame>
          <col w="fill" gap="3" align="middle-left">
            <text text-style="DoseName" value="Metformin" fill="$ink" />
            <text text-style="Meta" value="1:30 PM · 500 mg" fill="$sub" />
          </col>
          <row role="badge" p="6 10" radius="999" align="middle-center">
            <appearance>
              <fill type="color" value="$accent" />
            </appearance>
            <text text-style="Badge" value="NEXT" fill="$accent-ink" />
          </row>
        </row>
        <row w="fill" p="6 4 0 4" gap="auto" align="middle-left">
          <text text-style="Caps" value="EVENING" fill="$sub" />
          <text text-style="Caps" value="0 OF 2 DONE" fill="$accent-strong" />
        </row>
        <row role="card" w="fill" h="66" p="0 14" gap="12" radius="16" align="middle-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>
          <frame w="38" h="38" radius="12">
            <appearance>
              <fill type="color" value="$inner" />
              <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
              abs="true"
              x="9"
              y="9"
              src="https://api.iconify.design/material-symbols/medication.svg?color=%239BA6B0"
              w="20"
              h="20"
            />
          </frame>
          <col w="fill" gap="3" align="middle-left">
            <text text-style="DoseName" value="Metformin" fill="$ink" />
            <text text-style="Meta" value="7:00 PM · 500 mg" fill="$sub" />
          </col>
          <frame w="30" h="30" radius="15">
            <appearance>
              <fill type="color" value="$inner" />
              <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>
        </row>
        <row role="card" w="fill" h="66" p="0 14" gap="12" radius="16" align="middle-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>
          <frame w="38" h="38" radius="12">
            <appearance>
              <fill type="color" value="$inner" />
              <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
              abs="true"
              x="9"
              y="9"
              src="https://api.iconify.design/material-symbols/medication.svg?color=%239BA6B0"
              w="20"
              h="20"
            />
          </frame>
          <col w="fill" gap="3" align="middle-left">
            <text text-style="DoseName" value="Atorvastatin" fill="$ink" />
            <text text-style="Meta" value="9:00 PM · 20 mg" fill="$sub" />
          </col>
          <frame w="30" h="30" radius="15">
            <appearance>
              <fill type="color" value="$inner" />
              <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>
        </row>
      </col>
      <col role="card" w="fill" p="16 16 18 16" gap="14" radius="20" align="top-center">
        <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>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="CardTitle" value="Adherence, last 7 days" fill="$ink" />
          <text text-style="CardTitle" value="88%" fill="$accent" />
        </row>
        <row w="fill" gap="auto" p="4 4 0 4" align="bottom-center">
          <col w="fill" gap="9" align="middle-center">
            <frame w="14" h="52" align="bottom-center">
              <rect w="14" h="52" radius="5" fill="$accent-strong" />
            </frame>
            <text text-style="DayLabel" value="W" fill="$accent-strong" align="center" />
          </col>
          <col w="fill" gap="9" align="middle-center">
            <frame w="14" h="52" align="bottom-center">
              <rect w="14" h="46" radius="5" fill="$accent-strong" />
            </frame>
            <text text-style="DayLabel" value="T" fill="$accent-strong" align="center" />
          </col>
          <col w="fill" gap="9" align="middle-center">
            <frame w="14" h="52" align="bottom-center">
              <rect w="14" h="52" radius="5" fill="$accent-strong" />
            </frame>
            <text text-style="DayLabel" value="F" fill="$accent-strong" align="center" />
          </col>
          <col w="fill" gap="9" align="middle-center">
            <frame w="14" h="52" align="bottom-center">
              <rect w="14" h="39" radius="5" fill="$accent-strong" />
            </frame>
            <text text-style="DayLabel" value="S" fill="$accent-strong" align="center" />
          </col>
          <col w="fill" gap="9" align="middle-center">
            <frame w="14" h="52" align="bottom-center">
              <rect w="14" h="52" radius="5" fill="$accent-strong" />
            </frame>
            <text text-style="DayLabel" value="S" fill="$accent-strong" align="center" />
          </col>
          <col w="fill" gap="9" align="middle-center">
            <frame w="14" h="52" align="bottom-center">
              <rect w="14" h="46" radius="5" fill="$accent-strong" />
            </frame>
            <text text-style="DayLabel" value="M" fill="$accent-strong" align="center" />
          </col>
          <col w="fill" gap="9" align="middle-center">
            <frame w="14" h="52" align="bottom-center">
              <rect w="14" h="32" radius="5" fill="$accent" />
            </frame>
            <text text-style="DayLabel" value="T" fill="$ink" align="center" />
          </col>
        </row>
      </col>
    </col>
    <col w="fill" fill="$base" border="1 0 0 0 $sh-dark">
      <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/today.svg?color=%2334D0E0" w="23" h="23" />
          <text text-style="TabOn" value="Today" fill="$accent" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img src="https://api.iconify.design/material-symbols/pill.svg?color=%239BA6B0" w="23" h="23" />
          <text text-style="TabOff" value="Meds" fill="$sub" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/local-pharmacy.svg?color=%239BA6B0"
            w="23"
            h="23"
          />
          <text text-style="TabOff" value="Refills" fill="$sub" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img src="https://api.iconify.design/material-symbols/person.svg?color=%239BA6B0" w="23" h="23" />
          <text text-style="TabOff" value="Profile" 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>
```