---
title: "Vera — Today"
platform: web
slug: vera-today
screens: []
domains: ["healthcare"]
style: "neumorphic"
fonts: ["Hanken Grotesk", "JetBrains Mono"]
roles: ["top-navigation-bar", "chip", "avatar", "card", "button", "segmented-control"]
score: {clean: 100, consistent: 70, accessible: 97, comprehensible: 33}
url: https://gui.farm/web/vera-today
raw: https://gui.farm/web/vera-today/design.guix
download: https://gui.farm/web/vera-today.gui
---

# Vera — Today

A light neumorphic web screen for tracking a day's prescription doses, showing which are taken, the dose due now, weekly adherence, and remaining supply.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Vera — Today's Medications">
  <tokens>
    <color name="base" value="#ECE6E9" />
    <color name="sh-dark" value="#CBC2C9" />
    <color name="sh-light" value="#FFFFFF" />
    <color name="ink" value="#241F26" />
    <color name="sub" value="#625A67" />
    <color name="line" value="#D8D0D6" />
    <color name="accent" value="#DB5E90" />
    <color name="accent-strong" value="#C23A72" />
    <color name="accent-deep" value="#A01E52" />
    <color name="accent-ink" value="#FFFFFF" />
    <color name="accent-tint" value="#F7DEEA" />
    <number name="r-card" value="26" />
    <number name="r-el" value="16" />
    <number name="r-pill" value="999" />
  </tokens>
  <fonts>
    <font family="Hanken Grotesk" source="google" weights="400 500 600 700 800" styles="normal" />
    <font family="JetBrains 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="78" p="0 52" align="middle-left" gap="auto" fill="$base">
      <row gap="13" align="middle-left">
        <frame w="38" h="38" radius="12">
          <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="9" y="9" src="https://api.iconify.design/lucide/pill.svg?color=%23A01E52" w="20" h="20" />
        </frame>
        <text value="Vera" font-family="Hanken Grotesk" font-size="19" font-weight="800" color="$ink" letter-spacing="-0.3" />
      </row>
      <row gap="14" align="middle-right">
        <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/flame.svg?color=%23A01E52" w="15" h="15" />
          <text value="12-day streak" font-family="Hanken Grotesk" font-size="13" font-weight="700" color="$ink" />
        </row>
        <row role="chip" p="9 14" 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/bell.svg?color=%23625A67" w="15" h="15" />
          <text value="Reminders on" font-family="Hanken Grotesk" font-size="13" font-weight="600" color="$sub" />
        </row>
        <frame role="avatar" w="40" h="40" 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="12" w="40" align="center" value="DM" font-family="Hanken Grotesk" font-size="14" font-weight="800" color="$accent-deep" />
        </frame>
      </row>
    </row>

    <!-- CONTENT -->
    <col w="fill" p="30 52 72 52" align="top-center" gap="26">
      <col w="1080" gap="26">

        <!-- Heading -->
        <col gap="8">
          <row gap="10" align="middle-left">
            <text value="SATURDAY · AUGUST 15" font-family="Hanken Grotesk" font-size="11" font-weight="800" color="$accent-deep" letter-spacing="1.6" />
            <text value="9 medications tracked" font-family="Hanken Grotesk" font-size="11" font-weight="600" color="$sub" letter-spacing="0.5" />
          </row>
          <text value="Good morning, Diego" font-family="Hanken Grotesk" font-size="31" font-weight="800" color="$ink" line-height="38" letter-spacing="-0.6" />
          <text value="You've taken 3 of 5 doses today. Your 1:00 PM Metformin is due now." font-family="Hanken Grotesk" font-size="15" font-weight="500" color="$sub" line-height="23" w="640" />
        </col>

        <!-- Main two-column -->
        <row w="fill" gap="28" align="top-left">

          <!-- LEFT: adherence -->
          <col role="card" w="384" p="28 28 26 28" radius="$r-card" gap="22">
            <appearance>
              <fill type="color" value="$base" />
              <effect type="drop-shadow" x="14" y="14" radius="28" spread="0" color="$sh-dark" />
              <effect type="drop-shadow" x="-10" y="-10" radius="22" spread="0" color="$sh-light" />
            </appearance>

            <!-- count -->
            <col gap="10">
              <text value="TODAY'S DOSES" font-family="Hanken Grotesk" font-size="11" font-weight="800" color="$sub" letter-spacing="1.4" />
              <row gap="10" align="bottom-left">
                <text value="3" font-family="JetBrains Mono" font-size="46" font-weight="700" color="$ink" line-height="46" />
                <text value="/ 5" font-family="JetBrains Mono" font-size="22" font-weight="500" color="$sub" line-height="30" />
                <text value="taken" font-family="Hanken Grotesk" font-size="14" font-weight="600" color="$sub" line-height="30" />
              </row>

              <!-- 5-segment dose progress: track 312, seg 56, gap 8; 3 filled -->
              <frame w="312" h="14">
                <rect abs="true" x="0" y="0" w="56" h="14" radius="7" fill="$accent" />
                <rect abs="true" x="64" y="0" w="56" h="14" radius="7" fill="$accent" />
                <rect abs="true" x="128" y="0" w="56" h="14" radius="7" fill="$accent" />
                <frame abs="true" x="192" y="0" w="56" h="14" radius="7">
                  <appearance>
                    <fill type="color" value="$base" />
                    <effect type="inner-shadow" x="2" y="2" radius="4" spread="0" color="$sh-dark" />
                    <effect type="inner-shadow" x="-1" y="-1" radius="3" spread="0" color="$sh-light" />
                  </appearance>
                </frame>
                <frame abs="true" x="256" y="0" w="56" h="14" radius="7">
                  <appearance>
                    <fill type="color" value="$base" />
                    <effect type="inner-shadow" x="2" y="2" radius="4" spread="0" color="$sh-dark" />
                    <effect type="inner-shadow" x="-1" y="-1" radius="3" spread="0" color="$sh-light" />
                  </appearance>
                </frame>
              </frame>
              <text value="60% of today's schedule complete" font-family="Hanken Grotesk" font-size="12" font-weight="500" color="$sub" />
            </col>

            <line fill="$line" />

            <!-- this week -->
            <col w="fill" gap="14">
              <row w="fill" gap="auto" align="middle-left">
                <text value="THIS WEEK" font-family="Hanken Grotesk" font-size="11" font-weight="800" color="$sub" letter-spacing="1.4" />
                <text value="94% · last 30 days" font-family="Hanken Grotesk" font-size="11" font-weight="700" color="$accent-deep" />
              </row>

              <!-- weekly bars: 7 cols w36 gap10; wells h70; per-dose 14px -->
              <row w="fill" gap="10" align="bottom-left">
                <col w="36" gap="8" align="top-center">
                  <frame w="36" h="70" radius="9">
                    <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="22" h="70" radius="8" fill="$accent" />
                  </frame>
                  <text value="M" font-family="Hanken Grotesk" font-size="12" font-weight="600" color="$sub" />
                </col>
                <col w="36" gap="8" align="top-center">
                  <frame w="36" h="70" radius="9">
                    <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="22" h="70" radius="8" fill="$accent" />
                  </frame>
                  <text value="T" font-family="Hanken Grotesk" font-size="12" font-weight="600" color="$sub" />
                </col>
                <col w="36" gap="8" align="top-center">
                  <frame w="36" h="70" radius="9">
                    <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="14" w="22" h="56" radius="8" fill="$accent" />
                  </frame>
                  <text value="W" font-family="Hanken Grotesk" font-size="12" font-weight="600" color="$sub" />
                </col>
                <col w="36" gap="8" align="top-center">
                  <frame w="36" h="70" radius="9">
                    <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="22" h="70" radius="8" fill="$accent" />
                  </frame>
                  <text value="T" font-family="Hanken Grotesk" font-size="12" font-weight="600" color="$sub" />
                </col>
                <col w="36" gap="8" align="top-center">
                  <frame w="36" h="70" radius="9">
                    <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="22" h="70" radius="8" fill="$accent" />
                  </frame>
                  <text value="F" font-family="Hanken Grotesk" font-size="12" font-weight="600" color="$sub" />
                </col>
                <col w="36" gap="8" align="top-center">
                  <frame w="36" h="70" radius="9">
                    <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="22" h="42" radius="8" fill="$accent" />
                  </frame>
                  <text value="S" font-family="Hanken Grotesk" font-size="12" font-weight="800" color="$accent-deep" />
                </col>
                <col w="36" gap="8" align="top-center">
                  <frame w="36" h="70" radius="9">
                    <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="60" w="22" h="10" radius="5" fill="$line" />
                  </frame>
                  <text value="S" font-family="Hanken Grotesk" font-size="12" font-weight="600" color="$sub" />
                </col>
              </row>
            </col>

            <line fill="$line" />

            <!-- supply -->
            <row w="fill" gap="14" align="middle-left">
              <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/package.svg?color=%23A01E52" w="20" h="20" />
              </frame>
              <col gap="2" w="fill">
                <text value="Metformin runs low" font-family="Hanken Grotesk" font-size="14" font-weight="700" color="$ink" />
                <text value="6 days of supply left" font-family="Hanken Grotesk" font-size="12" font-weight="500" color="$sub" />
              </col>
              <row role="button" p="10 16" radius="$r-pill" gap="7" 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>
                <text value="Refill" font-family="Hanken Grotesk" font-size="13" font-weight="800" color="$accent-deep" />
              </row>
            </row>
          </col>

          <!-- RIGHT: today's schedule -->
          <col w="fill" gap="18">

            <!-- header row -->
            <row w="fill" gap="auto" align="middle-left">
              <col gap="3">
                <text value="Today's schedule" font-family="Hanken Grotesk" font-size="20" font-weight="800" color="$ink" letter-spacing="-0.3" />
                <text value="Doses reset at midnight" font-family="Hanken Grotesk" font-size="13" font-weight="500" color="$sub" />
              </col>
              <row role="segmented-control" 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 p="7 15" radius="$r-pill" 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>
                  <text value="All" font-family="Hanken Grotesk" font-size="13" font-weight="800" color="$ink" />
                </row>
                <row p="7 15" radius="$r-pill" align="middle-center">
                  <text value="Morning" font-family="Hanken Grotesk" font-size="13" font-weight="600" color="$sub" />
                </row>
                <row p="7 15" radius="$r-pill" align="middle-center">
                  <text value="Evening" font-family="Hanken Grotesk" font-size="13" font-weight="600" color="$sub" />
                </row>
              </row>
            </row>

            <!-- taken: Levothyroxine -->
            <row role="card" w="fill" p="18 22" radius="$r-el" gap="16" align="middle-left">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="inner-shadow" x="3" y="3" radius="7" spread="0" color="$sh-dark" />
                <effect type="inner-shadow" x="-2" y="-2" radius="6" spread="0" color="$sh-light" />
              </appearance>
              <frame w="46" h="46" radius="13">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="drop-shadow" x="3" y="3" radius="7" spread="0" color="$sh-dark" />
                  <effect type="drop-shadow" x="-2" y="-2" radius="6" spread="0" color="$sh-light" />
                </appearance>
                <img abs="true" x="13" y="13" src="https://api.iconify.design/lucide/sunrise.svg?color=%23625A67" w="20" h="20" />
              </frame>
              <col gap="3" w="fill">
                <text value="Levothyroxine 75 mcg" font-family="Hanken Grotesk" font-size="16" font-weight="700" color="$ink" />
                <text value="1 tablet · empty stomach, before food" font-family="Hanken Grotesk" font-size="13" font-weight="500" color="$sub" />
              </col>
              <col gap="4" align="top-right">
                <text value="7:00 AM" font-family="JetBrains Mono" font-size="14" font-weight="600" color="$sub" align="right" />
                <row gap="6" align="middle-right">
                  <img src="https://api.iconify.design/lucide/check.svg?color=%23A01E52" w="14" h="14" />
                  <text value="Taken 7:04 AM" font-family="Hanken Grotesk" font-size="12" font-weight="700" color="$accent-deep" />
                </row>
              </col>
            </row>

            <!-- taken: Metformin AM -->
            <row role="card" w="fill" p="18 22" radius="$r-el" gap="16" align="middle-left">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="inner-shadow" x="3" y="3" radius="7" spread="0" color="$sh-dark" />
                <effect type="inner-shadow" x="-2" y="-2" radius="6" spread="0" color="$sh-light" />
              </appearance>
              <frame w="46" h="46" radius="13">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="drop-shadow" x="3" y="3" radius="7" spread="0" color="$sh-dark" />
                  <effect type="drop-shadow" x="-2" y="-2" radius="6" spread="0" color="$sh-light" />
                </appearance>
                <img abs="true" x="13" y="13" src="https://api.iconify.design/lucide/sun.svg?color=%23625A67" w="20" h="20" />
              </frame>
              <col gap="3" w="fill">
                <text value="Metformin 500 mg" font-family="Hanken Grotesk" font-size="16" font-weight="700" color="$ink" />
                <text value="1 tablet · with breakfast" font-family="Hanken Grotesk" font-size="13" font-weight="500" color="$sub" />
              </col>
              <col gap="4" align="top-right">
                <text value="8:00 AM" font-family="JetBrains Mono" font-size="14" font-weight="600" color="$sub" align="right" />
                <row gap="6" align="middle-right">
                  <img src="https://api.iconify.design/lucide/check.svg?color=%23A01E52" w="14" h="14" />
                  <text value="Taken 8:11 AM" font-family="Hanken Grotesk" font-size="12" font-weight="700" color="$accent-deep" />
                </row>
              </col>
            </row>

            <!-- taken: Lisinopril -->
            <row role="card" w="fill" p="18 22" radius="$r-el" gap="16" align="middle-left">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="inner-shadow" x="3" y="3" radius="7" spread="0" color="$sh-dark" />
                <effect type="inner-shadow" x="-2" y="-2" radius="6" spread="0" color="$sh-light" />
              </appearance>
              <frame w="46" h="46" radius="13">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="drop-shadow" x="3" y="3" radius="7" spread="0" color="$sh-dark" />
                  <effect type="drop-shadow" x="-2" y="-2" radius="6" spread="0" color="$sh-light" />
                </appearance>
                <img abs="true" x="13" y="13" src="https://api.iconify.design/lucide/sun.svg?color=%23625A67" w="20" h="20" />
              </frame>
              <col gap="3" w="fill">
                <text value="Lisinopril 10 mg" font-family="Hanken Grotesk" font-size="16" font-weight="700" color="$ink" />
                <text value="1 tablet · for blood pressure" font-family="Hanken Grotesk" font-size="13" font-weight="500" color="$sub" />
              </col>
              <col gap="4" align="top-right">
                <text value="8:00 AM" font-family="JetBrains Mono" font-size="14" font-weight="600" color="$sub" align="right" />
                <row gap="6" align="middle-right">
                  <img src="https://api.iconify.design/lucide/check.svg?color=%23A01E52" w="14" h="14" />
                  <text value="Taken 8:11 AM" font-family="Hanken Grotesk" font-size="12" font-weight="700" color="$accent-deep" />
                </row>
              </col>
            </row>

            <!-- DUE NOW: Metformin PM (hero) -->
            <col role="card" w="fill" p="22 24 22 24" radius="$r-el" gap="18" border="2 $accent">
              <appearance>
                <fill type="color" value="$accent-tint" />
                <effect type="drop-shadow" x="8" y="10" radius="22" spread="0" color="#C23A7233" />
                <effect type="drop-shadow" x="-6" y="-6" radius="14" spread="0" color="$sh-light" />
              </appearance>
              <row w="fill" gap="16" align="middle-left">
                <frame w="50" h="50" radius="14">
                  <appearance>
                    <fill type="color" value="$accent-strong" />
                    <effect type="drop-shadow" x="0" y="6" radius="14" spread="0" color="#C23A7259" />
                  </appearance>
                  <img abs="true" x="13" y="13" src="https://api.iconify.design/lucide/pill.svg?color=%23FFFFFF" w="24" h="24" />
                </frame>
                <col gap="3" w="fill">
                  <row gap="9" align="middle-left">
                    <text value="Metformin 500 mg" font-family="Hanken Grotesk" font-size="17" font-weight="800" color="$ink" />
                    <row p="4 10" radius="$r-pill" align="middle-center">
                      <appearance><fill type="color" value="$accent-strong" /></appearance>
                      <text value="DUE NOW" font-family="Hanken Grotesk" font-size="10" font-weight="800" color="$accent-ink" letter-spacing="0.8" />
                    </row>
                  </row>
                  <text value="1 tablet · with lunch" font-family="Hanken Grotesk" font-size="13" font-weight="600" color="$accent-deep" />
                </col>
                <col gap="3" align="top-right">
                  <text value="1:00 PM" font-family="JetBrains Mono" font-size="15" font-weight="700" color="$ink" align="right" />
                  <text value="5 min ago" font-family="Hanken Grotesk" font-size="12" font-weight="600" color="$accent-deep" align="right" />
                </col>
              </row>
              <row w="fill" gap="12" align="middle-left">
                <row role="button" w="fill" h="50" radius="$r-el" gap="9" align="middle-center">
                  <appearance>
                    <fill type="color" value="$accent-strong" />
                    <effect type="drop-shadow" x="0" y="8" radius="18" spread="0" color="#C23A7259" />
                  </appearance>
                  <img src="https://api.iconify.design/lucide/check.svg?color=%23FFFFFF" w="19" h="19" />
                  <text value="Mark as taken" font-family="Hanken Grotesk" font-size="15" font-weight="800" color="$accent-ink" letter-spacing="0.2" />
                </row>
                <row role="button" p="0 22" h="50" radius="$r-el" gap="8" 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/lucide/clock.svg?color=%23625A67" w="17" h="17" />
                  <text value="Snooze 30 min" font-family="Hanken Grotesk" font-size="14" font-weight="700" color="$sub" />
                </row>
              </row>
            </col>

            <!-- upcoming: Atorvastatin -->
            <row role="card" w="fill" p="18 22" radius="$r-el" gap="16" align="middle-left">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="drop-shadow" x="6" y="6" radius="14" spread="0" color="$sh-dark" />
                <effect type="drop-shadow" x="-5" y="-5" radius="12" 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/moon.svg?color=%23625A67" w="20" h="20" />
              </frame>
              <col gap="3" w="fill">
                <text value="Atorvastatin 20 mg" font-family="Hanken Grotesk" font-size="16" font-weight="700" color="$ink" />
                <text value="1 tablet · at bedtime" font-family="Hanken Grotesk" font-size="13" font-weight="500" color="$sub" />
              </col>
              <col gap="4" align="top-right">
                <text value="9:00 PM" font-family="JetBrains Mono" font-size="14" font-weight="600" color="$sub" align="right" />
                <text value="Upcoming" font-family="Hanken Grotesk" font-size="12" font-weight="600" color="$sub" align="right" />
              </col>
            </row>

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

```