---
title: "Bloom — Class Calendar"
platform: android
slug: bloom-class-calendar
screens: ["calendar"]
domains: ["fitness"]
style: "minimal"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "avatar", "segmented-control", "date-picker", "card", "chip", "badge", "button", "tab-bar", "floating-action-button"]
score: {clean: 100, consistent: 89, accessible: 86, comprehensible: 70}
url: https://gui.farm/android/bloom-class-calendar
raw: https://gui.farm/android/bloom-class-calendar/design.guix
download: https://gui.farm/android/bloom-class-calendar.gui
---

# Bloom — Class Calendar

Fitness studio class calendar with month/week/day views and booked-class cards.

- **Live preview:** https://gui.farm/android/bloom-class-calendar
- **Raw source:** https://gui.farm/android/bloom-class-calendar/design.guix
- **Download (.gui):** https://gui.farm/android/bloom-class-calendar.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Bloom — Class Calendar">
  <tokens>
    <color name="bg" value="#FFF7F9" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-variant" value="#F1E4E8" />
    <color name="primary" value="#B3004E" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="primary-container" value="#FFD9E2" />
    <color name="on-primary-container" value="#4E0027" />
    <color name="text-primary" value="#211A1C" />
    <color name="text-secondary" value="#5A4E52" />
    <color name="handle" value="#C9B6BC" />
    <number name="r-full" value="999" />
    <number name="r-lg" value="16" />
  </tokens>

  <styles>
    <text-style name="MonthTitle" font-family="Roboto" font-size="22" font-weight="500" line-height="28" />
    <text-style name="Seg" font-family="Roboto" font-size="14" font-weight="600" line-height="20" />
    <text-style name="Weekday" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="AgendaDay" font-family="Roboto" font-size="16" font-weight="600" line-height="24" />
    <text-style name="Time" font-family="Roboto" font-size="16" font-weight="600" line-height="20" />
    <text-style name="Kicker" font-family="Roboto" font-size="11" font-weight="600" line-height="16" letter-spacing="0.6" />
    <text-style name="CardTitle" font-family="Roboto" font-size="16" font-weight="500" line-height="22" />
    <text-style name="Meta" font-family="Roboto" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Label" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Micro" font-family="Roboto" font-size="11" font-weight="500" line-height="16" />
  </styles>

  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>

  <components>
    <component name="DayCell" id="comp-daycell">
      <props>
        <prop name="d" type="text" target="dnum" />
        <prop name="dot" type="visible" target="daydot" />
      </props>
      <col w="fill" h="44" align="middle-center" gap="3">
        <row w="32" h="32" align="middle-center">
          <text id="dnum" value="1" font-family="Roboto" font-size="16" font-weight="500" color="$text-primary" line-height="20" />
        </row>
        <ellipse id="daydot" w="5" h="5" fill="$primary" />
      </col>
    </component>
  </components>

  <col w="360" fill="$bg">

    <!-- status bar (device chrome, untagged) -->
    <row w="fill" h="24" p="0 16" gap="auto" align="middle-center" fill="$bg">
      <text text-style="Label" value="9:41" color="$text-primary" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%23211A1C" w="16" h="16" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%23211A1C" w="16" h="16" />
        <img src="https://api.iconify.design/material-symbols/battery-full.svg?color=%23211A1C" w="16" h="16" />
      </row>
    </row>

    <!-- top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 8 0 16" gap="auto" align="middle-center" fill="$bg">
      <row gap="6" align="middle-center">
        <text text-style="MonthTitle" value="August 2026" color="$text-primary" />
        <img src="https://api.iconify.design/material-symbols/expand-more.svg?color=%235A4E52" w="24" h="24" />
      </row>
      <row gap="2" align="middle-center">
        <row w="40" h="40" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/search.svg?color=%23211A1C" w="24" h="24" />
        </row>
        <row role="avatar" w="36" h="36" radius="$r-full" fill="$primary-container" align="middle-center">
          <text text-style="Label" value="JC" color="$on-primary-container" />
        </row>
      </row>
    </row>

    <!-- content -->
    <col w="fill" p="8 16 24 16" gap="20">

      <!-- view segmented control -->
      <row role="segmented-control" w="fill" h="44" radius="$r-full" fill="$surface-variant" p="4" align="middle-center">
        <row w="fill" h="fill" radius="$r-full" fill="$primary-container" align="middle-center">
          <text text-style="Seg" value="Month" color="$on-primary-container" />
        </row>
        <row w="fill" h="fill" align="middle-center">
          <text text-style="Seg" value="Week" color="$text-secondary" />
        </row>
        <row w="fill" h="fill" align="middle-center">
          <text text-style="Seg" value="Day" color="$text-secondary" />
        </row>
      </row>

      <!-- month grid (date picker) -->
      <col role="date-picker" w="fill" h="324" radius="$r-lg" fill="$surface" p="16" gap="8">
        <row w="fill" h="20" align="middle-center">
          <text w="fill" align="center" text-style="Weekday" value="S" color="$text-secondary" />
          <text w="fill" align="center" text-style="Weekday" value="M" color="$text-secondary" />
          <text w="fill" align="center" text-style="Weekday" value="T" color="$text-secondary" />
          <text w="fill" align="center" text-style="Weekday" value="W" color="$text-secondary" />
          <text w="fill" align="center" text-style="Weekday" value="T" color="$text-secondary" />
          <text w="fill" align="center" text-style="Weekday" value="F" color="$text-secondary" />
          <text w="fill" align="center" text-style="Weekday" value="S" color="$text-secondary" />
        </row>
        <grid columns="7" gap="0" w="fill">
        <instance component="comp-daycell" d=" " dot="false" />
        <instance component="comp-daycell" d=" " dot="false" />
        <instance component="comp-daycell" d=" " dot="false" />
        <instance component="comp-daycell" d=" " dot="false" />
        <instance component="comp-daycell" d=" " dot="false" />
        <instance component="comp-daycell" d=" " dot="false" />
        <instance component="comp-daycell" d="1" dot="false" />
        <instance component="comp-daycell" d="2" dot="false" />
        <instance component="comp-daycell" d="3" dot="false" />
        <instance component="comp-daycell" d="4" dot="true" />
        <instance component="comp-daycell" d="5" dot="false" />
        <instance component="comp-daycell" d="6" dot="true" />
        <instance component="comp-daycell" d="7" dot="false" />
        <instance component="comp-daycell" d="8" dot="false" />
        <instance component="comp-daycell" d="9" dot="false" />
        <instance component="comp-daycell" d="10" dot="false" />
        <instance component="comp-daycell" d="11" dot="true" />
        <instance component="comp-daycell" d="12" dot="false" />
        <col w="fill" h="44" align="middle-center" gap="3">
          <row w="32" h="32" radius="$r-full" fill="$primary" align="middle-center">
            <text value="13" font-family="Roboto" font-size="16" font-weight="600" color="$on-primary" line-height="20" />
          </row>
        </col>
        <instance component="comp-daycell" d="14" dot="false" />
        <instance component="comp-daycell" d="15" dot="false" />
        <instance component="comp-daycell" d="16" dot="false" />
        <instance component="comp-daycell" d="17" dot="false" />
        <instance component="comp-daycell" d="18" dot="true" />
        <instance component="comp-daycell" d="19" dot="false" />
        <instance component="comp-daycell" d="20" dot="true" />
        <instance component="comp-daycell" d="21" dot="false" />
        <instance component="comp-daycell" d="22" dot="false" />
        <instance component="comp-daycell" d="23" dot="false" />
        <instance component="comp-daycell" d="24" dot="false" />
        <instance component="comp-daycell" d="25" dot="true" />
        <instance component="comp-daycell" d="26" dot="false" />
        <instance component="comp-daycell" d="27" dot="true" />
        <instance component="comp-daycell" d="28" dot="false" />
        <instance component="comp-daycell" d="29" dot="false" />
        <instance component="comp-daycell" d="30" dot="false" />
        <instance component="comp-daycell" d="31" dot="false" />
        </grid>
      </col>

      <!-- agenda header -->
      <row w="fill" h="28" gap="auto" align="middle-center">
        <text text-style="AgendaDay" value="Thursday, Aug 13" color="$text-primary" />
        <text text-style="Label" value="3 booked" color="$text-secondary" />
      </row>

      <!-- agenda card 1 -->
      <row role="card" w="fill" h="96" radius="$r-lg" fill="$surface" clip="true" align="middle-left">
        <rect w="4" h="96" fill="$primary" />
        <row w="fill" h="fill" p="14 14 14 12" gap="12" align="middle-left">
          <col w="52" gap="2" align="top-left">
            <text text-style="Time" value="7:00" color="$text-primary" />
            <text text-style="Micro" value="AM" color="$text-secondary" />
            <text text-style="Micro" value="45 min" color="$text-secondary" />
          </col>
          <col w="fill" gap="3" align="middle-left">
            <text text-style="Kicker" value="VINYASA FLOW" color="$primary" text-case="uppercase" />
            <text text-style="CardTitle" value="Sunrise Flow" color="$text-primary" />
            <row gap="8" align="middle-center">
              <row role="avatar" w="24" h="24" radius="$r-full" fill="$primary-container" align="middle-center">
                <text text-style="Micro" value="ME" color="$on-primary-container" />
              </row>
              <text text-style="Meta" value="Mara Ellis" color="$text-secondary" />
              <row role="chip" h="22" radius="$r-full" fill="$surface-variant" p="0 8" align="middle-center">
                <text text-style="Label" value="Studio A" color="$text-secondary" />
              </row>
            </row>
          </col>
          <col align="middle-right">
            <row role="badge" h="24" radius="$r-full" fill="$primary-container" p="0 10" align="middle-center">
              <text text-style="Label" value="Booked" color="$on-primary-container" />
            </row>
          </col>
        </row>
      </row>

      <!-- agenda card 2 -->
      <row role="card" w="fill" h="96" radius="$r-lg" fill="$surface" clip="true" align="middle-left">
        <rect w="4" h="96" fill="$primary" />
        <row w="fill" h="fill" p="14 14 14 12" gap="12" align="middle-left">
          <col w="52" gap="2" align="top-left">
            <text text-style="Time" value="12:15" color="$text-primary" />
            <text text-style="Micro" value="PM" color="$text-secondary" />
            <text text-style="Micro" value="50 min" color="$text-secondary" />
          </col>
          <col w="fill" gap="3" align="middle-left">
            <text text-style="Kicker" value="REFORMER PILATES" color="$primary" text-case="uppercase" />
            <text text-style="CardTitle" value="Core Reformer" color="$text-primary" />
            <row gap="8" align="middle-center">
              <row role="avatar" w="24" h="24" radius="$r-full" fill="$primary-container" align="middle-center">
                <text text-style="Micro" value="DR" color="$on-primary-container" />
              </row>
              <text text-style="Meta" value="Devi Rao" color="$text-secondary" />
              <row role="chip" h="22" radius="$r-full" fill="$surface-variant" p="0 8" align="middle-center">
                <text text-style="Label" value="Studio B" color="$text-secondary" />
              </row>
            </row>
          </col>
          <col align="middle-right">
            <row role="badge" h="24" radius="$r-full" fill="$primary-container" p="0 10" align="middle-center">
              <text text-style="Label" value="Booked" color="$on-primary-container" />
            </row>
          </col>
        </row>
      </row>

      <!-- agenda card 3 (open class) -->
      <row role="card" w="fill" h="96" radius="$r-lg" fill="$surface" clip="true" align="middle-left">
        <rect w="4" h="96" fill="$handle" />
        <row w="fill" h="fill" p="14 14 14 12" gap="12" align="middle-left">
          <col w="52" gap="2" align="top-left">
            <text text-style="Time" value="6:30" color="$text-primary" />
            <text text-style="Micro" value="PM" color="$text-secondary" />
            <text text-style="Micro" value="60 min" color="$text-secondary" />
          </col>
          <col w="fill" gap="3" align="middle-left">
            <text text-style="Kicker" value="CANDLELIGHT YIN" color="$primary" text-case="uppercase" />
            <text text-style="CardTitle" value="Restore &amp; Unwind" color="$text-primary" />
            <row gap="8" align="middle-center">
              <row role="avatar" w="24" h="24" radius="$r-full" fill="$primary-container" align="middle-center">
                <text text-style="Micro" value="ME" color="$on-primary-container" />
              </row>
              <text text-style="Meta" value="Mara Ellis" color="$text-secondary" />
              <row role="chip" h="22" radius="$r-full" fill="$surface-variant" p="0 8" align="middle-center">
                <text text-style="Label" value="4 left" color="$text-secondary" />
              </row>
            </row>
          </col>
          <col align="middle-right">
            <row role="button" h="32" radius="$r-full" fill="$primary" p="0 16" align="middle-center">
              <text text-style="Label" value="Book" color="$on-primary" />
            </row>
          </col>
        </row>
      </row>

      <!-- credits summary -->
      <col role="card" w="fill" h="104" radius="$r-lg" fill="$surface" p="16" gap="10" align="top-left">
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="CardTitle" value="Class credits" color="$text-primary" />
          <text text-style="Label" value="7 of 12 used" color="$text-secondary" />
        </row>
        <frame w="296" h="8" radius="$r-full" fill="$surface-variant" clip="true">
          <rect x="0" y="0" w="173" h="8" radius="$r-full" fill="$primary" />
        </frame>
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="Micro" value="5 credits left" color="$primary" />
          <text text-style="Micro" value="Renews Sep 1" color="$text-secondary" />
        </row>
      </col>

    </col>

    <!-- bottom navigation (last flow child) -->
    <col role="tab-bar" w="fill" h="80" fill="$surface" align="top-center">
      <row w="fill" h="64" p="10 8 0 8" gap="auto" align="top-center">
        <col w="fill" gap="4" align="top-center">
          <row w="56" h="32" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/home.svg?color=%235A4E52" w="24" h="24" />
          </row>
          <text text-style="Label" value="Home" color="$text-secondary" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <row w="56" h="32" radius="$r-full" fill="$primary-container" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/calendar-month.svg?color=%234E0027" w="24" h="24" />
          </row>
          <text text-style="Label" value="Calendar" color="$primary" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <row w="56" h="32" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/self-improvement.svg?color=%235A4E52" w="24" h="24" />
          </row>
          <text text-style="Label" value="Classes" color="$text-secondary" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <row w="56" h="32" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/person.svg?color=%235A4E52" w="24" h="24" />
          </row>
          <text text-style="Label" value="Profile" color="$text-secondary" />
        </col>
      </row>
      <row w="fill" h="16" align="middle-center">
        <rect w="108" h="4" radius="$r-full" fill="$handle" />
      </row>
    </col>

    <!-- floating action button (absolute, floats above tab bar) -->
    <row role="floating-action-button" abs="true" x="288" y="956" w="56" h="56" radius="$r-lg" fill="$primary" align="middle-center">
      <img src="https://api.iconify.design/material-symbols/add.svg?color=%23FFFFFF" w="24" h="24" />
    </row>

  </col>
</gui>

```