---
title: "Peony — Studio Day"
platform: android
slug: peony-studio-day
screens: ["calendar"]
domains: ["productivity"]
style: "minimal"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "segmented-control", "card", "badge", "chip", "avatar", "floating-action-button", "tab-bar"]
score: {clean: 100, consistent: 90, accessible: 74, comprehensible: 42}
url: https://gui.farm/android/peony-studio-day
raw: https://gui.farm/android/peony-studio-day/design.guix
download: https://gui.farm/android/peony-studio-day.gui
---

# Peony — Studio Day

Creative studio daily schedule with an hourly agenda, event cards, and a booked-hours summary.

- **Live preview:** https://gui.farm/android/peony-studio-day
- **Raw source:** https://gui.farm/android/peony-studio-day/design.guix
- **Download (.gui):** https://gui.farm/android/peony-studio-day.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Peony — Studio Day">
  <tokens>
    <color name="bg" value="#FBF3F6" />
    <color name="surface" value="#FFFFFF" />
    <color name="grid" value="#F1DEE7" />
    <color name="outline" value="#E7CBD8" />
    <color name="text" value="#241319" />
    <color name="text-secondary" value="#6E4453" />
    <color name="primary" value="#B01251" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="primary-container" value="#FBDCE7" />
    <color name="on-primary-container" value="#78082F" />
    <color name="container-secondary" value="#8A2B4C" />
    <number name="r-sm" value="8" />
    <number name="r-lg" value="16" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="400" line-height="28" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="BodyMedium" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="LabelSmall" 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>
  <col w="360" fill="$bg">

    <!-- status bar (untagged) -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" fill="$text" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23241319" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23241319" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23241319" w="15" h="15" />
      </row>
    </row>

    <!-- top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 4 0 4" gap="4" align="middle-left">
      <row w="48" h="48" radius="$r-full" align="middle-center"><img src="https://api.iconify.design/material-symbols/menu-rounded.svg?color=%23241319" w="24" h="24" /></row>
      <col w="fill" gap="0">
        <text text-style="TitleLarge" value="Today" fill="$text" />
        <text text-style="LabelMedium" value="August 2026" fill="$text-secondary" />
      </col>
      <row w="48" h="48" radius="$r-full" align="middle-center"><img src="https://api.iconify.design/material-symbols/search-rounded.svg?color=%23241319" w="24" h="24" /></row>
      <row w="48" h="48" radius="$r-full" align="middle-center"><img src="https://api.iconify.design/material-symbols/more-vert-rounded.svg?color=%236E4453" w="24" h="24" /></row>
    </row>

    <col w="fill" p="4 16 8 16" gap="16">

      <!-- view switch: segmented control -->
      <row role="segmented-control" w="fill" h="40" radius="$r-full" fill="$surface" border="1 $outline" p="4" gap="4" align="middle-center">
        <row w="fill" h="32" radius="$r-full" fill="$primary" align="middle-center"><text text-style="LabelLarge" value="Day" fill="$on-primary" /></row>
        <row w="fill" h="32" radius="$r-full" align="middle-center"><text text-style="LabelLarge" value="Week" fill="$text-secondary" /></row>
        <row w="fill" h="32" radius="$r-full" align="middle-center"><text text-style="LabelLarge" value="Month" fill="$text-secondary" /></row>
      </row>

      <!-- week day strip; today (Wed 12) filled rose -->
      <row w="fill" h="56" gap="auto" align="middle-center">
        <col w="36" gap="4" align="middle-center"><text text-style="LabelSmall" value="M" fill="$text-secondary" /><row w="32" h="32" radius="$r-full" align="middle-center"><text text-style="LabelLarge" value="10" fill="$text" /></row></col>
        <col w="36" gap="4" align="middle-center"><text text-style="LabelSmall" value="T" fill="$text-secondary" /><row w="32" h="32" radius="$r-full" align="middle-center"><text text-style="LabelLarge" value="11" fill="$text" /></row></col>
        <col w="36" gap="4" align="middle-center"><text text-style="LabelSmall" value="W" fill="$primary" /><row w="32" h="32" radius="$r-full" fill="$primary" align="middle-center"><text text-style="LabelLarge" value="12" fill="$on-primary" /></row></col>
        <col w="36" gap="4" align="middle-center"><text text-style="LabelSmall" value="T" fill="$text-secondary" /><row w="32" h="32" radius="$r-full" align="middle-center"><text text-style="LabelLarge" value="13" fill="$text" /></row></col>
        <col w="36" gap="4" align="middle-center"><text text-style="LabelSmall" value="F" fill="$text-secondary" /><row w="32" h="32" radius="$r-full" align="middle-center"><text text-style="LabelLarge" value="14" fill="$text" /></row></col>
        <col w="36" gap="4" align="middle-center"><text text-style="LabelSmall" value="S" fill="$text-secondary" /><row w="32" h="32" radius="$r-full" align="middle-center"><text text-style="LabelLarge" value="15" fill="$text-secondary" /></row></col>
        <col w="36" gap="4" align="middle-center"><text text-style="LabelSmall" value="S" fill="$text-secondary" /><row w="32" h="32" radius="$r-full" align="middle-center"><text text-style="LabelLarge" value="16" fill="$text-secondary" /></row></col>
      </row>

      <!-- day summary card with booked-hours bar (rose data-viz) -->
      <col role="card" w="328" h="96" radius="$r-lg" fill="$surface" border="1 $outline" p="16" gap="8">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="Wednesday, Aug 12" fill="$text" />
          <row role="badge" h="24" radius="$r-full" fill="$primary-container" p="0 10" align="middle-center"><text text-style="LabelMedium" value="5 events" fill="$on-primary-container" /></row>
        </row>
        <frame w="200" h="8"><rect x="0" y="0" w="200" h="8" radius="4" fill="$grid" /><rect x="0" y="0" w="90" h="8" radius="4" fill="$primary" /></frame>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="LabelMedium" value="4.5 h booked" fill="$container-secondary" />
          <text text-style="LabelSmall" value="of 10 h day" fill="$text-secondary" />
        </row>
      </col>

      <!-- filter chips -->
      <row w="fill" gap="8" align="middle-left">
        <row role="chip" h="32" radius="$r-full" fill="$primary" p="0 14" align="middle-center"><text text-style="LabelLarge" value="All" fill="$on-primary" /></row>
        <row role="chip" h="32" radius="$r-full" fill="$surface" border="1 $outline" p="0 14" align="middle-center"><text text-style="LabelLarge" value="Deliveries" fill="$text-secondary" /></row>
        <row role="chip" h="32" radius="$r-full" fill="$surface" border="1 $outline" p="0 14" align="middle-center"><text text-style="LabelLarge" value="Consults" fill="$text-secondary" /></row>
      </row>

      <!-- timeline: hourly grid 8AM–2PM at 64px/hr; origin y=8 -->
      <frame w="328" h="400">
        <!-- hour gridlines + labels -->
        <rect x="44" y="8" w="284" h="1" fill="$grid" /><text x="0" y="0" w="38" align="right" text-style="LabelSmall" value="8 AM" fill="$text-secondary" />
        <rect x="44" y="72" w="284" h="1" fill="$grid" /><text x="0" y="64" w="38" align="right" text-style="LabelSmall" value="9 AM" fill="$text-secondary" />
        <rect x="44" y="136" w="284" h="1" fill="$grid" /><text x="0" y="128" w="38" align="right" text-style="LabelSmall" value="10 AM" fill="$text-secondary" />
        <rect x="44" y="200" w="284" h="1" fill="$grid" /><text x="0" y="192" w="38" align="right" text-style="LabelSmall" value="11 AM" fill="$text-secondary" />
        <rect x="44" y="264" w="284" h="1" fill="$grid" /><text x="0" y="256" w="38" align="right" text-style="LabelSmall" value="12 PM" fill="$text-secondary" />
        <rect x="44" y="328" w="284" h="1" fill="$grid" /><text x="0" y="320" w="38" align="right" text-style="LabelSmall" value="1 PM" fill="$text-secondary" />
        <rect x="44" y="392" w="284" h="1" fill="$grid" /><text x="0" y="384" w="38" align="right" text-style="LabelSmall" value="2 PM" fill="$text-secondary" />

        <!-- event: Market pickup 8:00–9:00 (tier B) -->
        <row role="card" x="44" y="8" w="284" h="64" radius="$r-sm" fill="$primary-container" clip="true" align="middle-left">
          <rect w="4" h="64" fill="$primary" />
          <col w="fill" p="8 12" gap="2">
            <row w="fill" gap="auto" align="middle-left"><text text-style="LabelLarge" value="Market flower pickup" fill="$on-primary-container" /><text text-style="LabelSmall" value="1h" fill="$container-secondary" /></row>
            <text text-style="LabelSmall" value="8:00 – 9:00 · Wholesale market" fill="$container-secondary" />
          </col>
        </row>

        <!-- event: Bridal consult 9:30–10:30 (tier A featured, solid rose) -->
        <row role="card" x="44" y="104" w="284" h="64" radius="$r-sm" fill="$primary" clip="true" gap="10" p="0 12 0 12" align="middle-left">
          <row role="avatar" w="36" h="36" radius="$r-full" fill="$on-primary" align="middle-center"><text text-style="LabelLarge" value="AR" fill="$primary" /></row>
          <col w="fill" gap="2">
            <row w="fill" gap="auto" align="middle-left"><text text-style="LabelLarge" value="Bridal consult — Amara" fill="$on-primary" /><text text-style="LabelSmall" value="1h" fill="$on-primary" /></row>
            <text text-style="LabelSmall" value="9:30 – 10:30 · Studio table 2" fill="$on-primary" />
          </col>
        </row>

        <!-- overlap pair: Centerpiece build (left) + Client call (right) -->
        <row role="card" x="44" y="200" w="140" h="96" radius="$r-sm" fill="$primary-container" clip="true" align="top-left">
          <rect w="4" h="96" fill="$primary" />
          <col w="fill" p="8 10" gap="2">
            <text text-style="LabelLarge" value="Centerpiece build" fill="$on-primary-container" />
            <text text-style="LabelSmall" value="11:00 – 12:30" fill="$container-secondary" />
            <text text-style="LabelSmall" value="8 arrangements" fill="$container-secondary" />
          </col>
        </row>
        <row role="card" x="188" y="232" w="140" h="32" radius="$r-sm" fill="$primary-container" clip="true" align="middle-left">
          <rect w="4" h="32" fill="$primary" />
          <col w="fill" p="0 10" gap="0">
            <text text-style="LabelMedium" value="Client call — Priya" fill="$on-primary-container" truncate="true" />
          </col>
        </row>

        <!-- event: Delivery run 1:00–2:00 (tier B) -->
        <row role="card" x="44" y="328" w="284" h="64" radius="$r-sm" fill="$primary-container" clip="true" gap="10" p="0 12 0 12" align="middle-left">
          <row role="avatar" w="36" h="36" radius="$r-full" fill="$primary" align="middle-center"><img src="https://api.iconify.design/material-symbols/local-shipping-outline-rounded.svg?color=%23FFFFFF" w="20" h="20" /></row>
          <col w="fill" gap="2">
            <row w="fill" gap="auto" align="middle-left"><text text-style="LabelLarge" value="Delivery run — Eastside" fill="$on-primary-container" /><text text-style="LabelSmall" value="1h" fill="$container-secondary" /></row>
            <text text-style="LabelSmall" value="1:00 – 2:00 · 4 stops" fill="$container-secondary" />
          </col>
        </row>

        <!-- now line 10:35 -->
        <row x="2" y="165" w="38" h="16" radius="$r-full" fill="$primary" align="middle-center"><text text-style="LabelSmall" value="10:35" fill="$on-primary" /></row>
        <ellipse x="40" y="169" w="8" h="8" fill="$primary" />
        <rect x="44" y="173" w="284" h="2" fill="$primary" />
      </frame>
    </col>

    <!-- FAB (floats 16dp above bottom nav) -->
    <row role="floating-action-button" abs="true" x="288" y="720" w="56" h="56" radius="$r-lg" fill="$primary" align="middle-center">
      <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23FFFFFF" w="26" h="26" />
    </row>

    <!-- bottom navigation -->
    <row role="tab-bar" w="fill" h="80" fill="$surface" border="1 $outline" p="8 0 0 0" align="top-center">
      <col w="fill" gap="4" align="top-center">
        <row w="56" h="28" radius="$r-full" fill="$primary-container" align="middle-center"><img src="https://api.iconify.design/material-symbols/calendar-today-rounded.svg?color=%2378082F" w="22" h="22" /></row>
        <text text-style="LabelSmall" value="Today" fill="$primary" />
      </col>
      <col w="fill" gap="4" align="top-center">
        <row w="56" h="28" align="middle-center"><img src="https://api.iconify.design/material-symbols/inbox-outline-rounded.svg?color=%236E4453" w="22" h="22" /></row>
        <text text-style="LabelSmall" value="Orders" fill="$text-secondary" />
      </col>
      <col w="fill" gap="4" align="top-center">
        <row w="56" h="28" align="middle-center"><img src="https://api.iconify.design/material-symbols/group-outline-rounded.svg?color=%236E4453" w="22" h="22" /></row>
        <text text-style="LabelSmall" value="Clients" fill="$text-secondary" />
      </col>
      <col w="fill" gap="4" align="top-center">
        <row w="56" h="28" align="middle-center"><img src="https://api.iconify.design/material-symbols/settings-outline-rounded.svg?color=%236E4453" w="22" h="22" /></row>
        <text text-style="LabelSmall" value="Settings" fill="$text-secondary" />
      </col>
    </row>

    <!-- home indicator (untagged) -->
    <row w="fill" h="24" align="middle-center"><rect w="108" h="4" radius="2" fill="$outline" /></row>
  </col>
</gui>

```