---
title: "Lumen — Cycle"
platform: ios
slug: lumen-cycle
screens: ["calendar"]
domains: ["healthcare"]
style: "material"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "avatar", "card", "badge", "hyperlink", "date-picker", "chip", "button", "tab-bar"]
score: {clean: 100, consistent: 85, accessible: 91, comprehensible: 86}
url: https://gui.farm/ios/lumen-cycle
raw: https://gui.farm/ios/lumen-cycle/design.guix
download: https://gui.farm/ios/lumen-cycle.gui
---

# Lumen — Cycle

Lumen — Cycle — an iOS UI example in the .gui format. Preview it, read the source, and download the single .gui file. Plain text an AI agent can inspect without unzipping anything.

- **Live preview:** https://gui.farm/ios/lumen-cycle
- **Raw source:** https://gui.farm/ios/lumen-cycle/design.guix
- **Download (.gui):** https://gui.farm/ios/lumen-cycle.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Lumen — Cycle">
  <tokens>
    <color name="bg" value="#F6F1F2" />
    <color name="surface" value="#FFFFFF" />
    <color name="ink" value="#241A1D" />
    <color name="muted" value="#6E5A60" />
    <color name="line" value="#ECE2E5" />
    <color name="rose" value="#A81448" />
    <color name="rose-fill" value="#C9375F" />
    <color name="phase-follicular" value="#F6C2D2" />
    <color name="phase-fertile" value="#EE86A4" />
    <color name="phase-luteal" value="#FADCE5" />
    <color name="tint" value="#F7DBE4" />
    <color name="faint" value="#FCEBF0" />
    <color name="chip" value="#F3E7EB" />
    <color name="indicator" value="#1D1B1C" />
    <number name="r-card" value="20" />
    <number name="r-cell" value="18" />
    <number name="r-pill" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="SF Pro Display" font-size="15" font-weight="500" line-height="20" />
    <text-style name="Title" font-family="SF Pro Display" font-size="28" font-weight="700" line-height="34" />
    <text-style name="Phase" font-family="SF Pro Display" font-size="26" font-weight="700" line-height="32" />
    <text-style name="CardTitle" font-family="SF Pro Display" font-size="17" font-weight="700" line-height="22" />
    <text-style name="Big" font-family="SF Pro Display" font-size="22" font-weight="700" line-height="26" />
    <text-style name="Body" font-family="SF Pro Display" font-size="15" font-weight="400" line-height="20" />
    <text-style name="BodyMed" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Sub" font-family="SF Pro Display" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Section" font-family="SF Pro Display" font-size="11" font-weight="600" line-height="14" letter-spacing="0.6" />
    <text-style name="Badge" font-family="SF Pro Display" font-size="11" font-weight="700" line-height="14" letter-spacing="0.4" />
    <text-style name="Weekday" font-family="SF Pro Display" font-size="12" font-weight="600" line-height="16" />
    <text-style name="Numeral" font-family="SF Pro Display" font-size="15" font-weight="500" line-height="20" />
    <text-style name="NumeralB" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Chip" font-family="SF Pro Display" font-size="13" font-weight="500" line-height="16" />
    <text-style name="Tab" font-family="SF Pro Display" font-size="10" font-weight="500" line-height="12" />
  </styles>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="393" fill="$bg">

    <row w="393" h="54" p="16 20 0 20" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" fill="$ink" />
      <row gap="7" align="middle-right">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23241A1D" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23241A1D" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23241A1D" w="22" h="22" />
      </row>
    </row>

    <row role="top-navigation-bar" w="393" h="52" p="0 16 0 20" gap="auto" align="middle-left">
      <text text-style="Title" value="Cycle" fill="$ink" />
      <frame role="avatar" w="36" h="36" radius="18" clip="true">
        <img x="0" y="0" w="36" h="36" fit="cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&amp;fit=crop&amp;w=96&amp;h=96&amp;q=80" />
      </frame>
    </row>

    <col w="393" p="6 16 0 16">
      <col role="card" w="361" radius="$r-card" fill="$surface" p="16" gap="14">
        <row w="329" gap="auto" align="middle-left">
          <row role="badge" h="22" radius="$r-pill" fill="$tint" p="0 10" align="middle-center">
            <text text-style="Badge" value="CYCLE DAY 14 OF 28" fill="$rose" />
          </row>
          <row role="hyperlink" gap="3" align="middle-right">
            <text text-style="BodyMed" value="History" fill="$rose" />
            <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%23A81448" w="17" h="17" />
          </row>
        </row>
        <col w="329" gap="2">
          <text text-style="Phase" value="Ovulation" fill="$ink" />
          <text text-style="Body" value="High chance of pregnancy today" fill="$muted" />
        </col>
        <frame w="329" h="16">
          <frame x="0" y="1" w="329" h="14" radius="7" clip="true">
            <row w="329" h="14" gap="0" align="middle-left">
              <rect w="59" h="14" fill="$rose-fill" />
              <rect w="59" h="14" fill="$phase-follicular" />
              <rect w="70" h="14" fill="$phase-fertile" />
              <rect w="141" h="14" fill="$phase-luteal" />
            </row>
          </frame>
          <ellipse x="150" y="0" w="16" h="16" fill="$surface" />
          <ellipse x="152" y="2" w="12" h="12" fill="$rose" />
        </frame>
        <row w="329" gap="auto" align="middle-left">
          <text text-style="Sub" value="Day 1" fill="$muted" />
          <text text-style="Sub" value="Menstrual · Follicular · Fertile · Luteal" fill="$muted" />
          <text text-style="Sub" value="Day 28" fill="$muted" />
        </row>
      </col>
    </col>

    <col w="393" p="12 16 0 16">
      <col role="date-picker" w="361" radius="$r-card" fill="$surface" p="16" gap="10">
        <row w="329" gap="auto" align="middle-center">
          <row w="32" h="32" radius="$r-pill" fill="$bg" align="middle-center">
            <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%236E5A60" w="18" h="18" />
          </row>
          <text text-style="CardTitle" value="June 2026" fill="$ink" />
          <row w="32" h="32" radius="$r-pill" fill="$bg" align="middle-center">
            <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%236E5A60" w="18" h="18" />
          </row>
        </row>

        <row w="329" h="20" gap="0" align="middle-left">
          <col w="47" align="middle-center"><text text-style="Weekday" value="S" fill="$muted" /></col>
          <col w="47" align="middle-center"><text text-style="Weekday" value="M" fill="$muted" /></col>
          <col w="47" align="middle-center"><text text-style="Weekday" value="T" fill="$muted" /></col>
          <col w="47" align="middle-center"><text text-style="Weekday" value="W" fill="$muted" /></col>
          <col w="47" align="middle-center"><text text-style="Weekday" value="T" fill="$muted" /></col>
          <col w="47" align="middle-center"><text text-style="Weekday" value="F" fill="$muted" /></col>
          <col w="47" align="middle-center"><text text-style="Weekday" value="S" fill="$muted" /></col>
        </row>

        <col w="329" gap="2">
          <frame w="329" h="44">
            <rect x="47" y="4" w="235" h="36" radius="$r-cell" fill="$rose-fill" />
            <row w="329" h="44" gap="0" align="middle-left">
              <col w="47" align="middle-center"><text text-style="Numeral" value="31" fill="$muted" /></col>
              <col w="47" align="middle-center"><text text-style="NumeralB" value="1" fill="$surface" /></col>
              <col w="47" align="middle-center"><text text-style="NumeralB" value="2" fill="$surface" /></col>
              <col w="47" align="middle-center"><text text-style="NumeralB" value="3" fill="$surface" /></col>
              <col w="47" align="middle-center"><text text-style="NumeralB" value="4" fill="$surface" /></col>
              <col w="47" align="middle-center"><text text-style="NumeralB" value="5" fill="$surface" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="6" fill="$ink" /></col>
            </row>
          </frame>

          <frame w="329" h="44">
            <rect x="188" y="4" w="141" h="36" radius="$r-cell" fill="$tint" />
            <row w="329" h="44" gap="0" align="middle-left">
              <col w="47" align="middle-center"><text text-style="Numeral" value="7" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="8" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="9" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="10" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="11" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="12" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="13" fill="$ink" /></col>
            </row>
          </frame>

          <frame w="329" h="44">
            <rect x="0" y="4" w="141" h="36" radius="$r-cell" fill="$tint" />
            <ellipse x="4" y="2" w="40" h="40" fill="$rose" />
            <row w="329" h="44" gap="0" align="middle-left">
              <col w="47" align="middle-center"><text text-style="NumeralB" value="14" fill="$surface" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="15" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="16" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="17" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="18" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="19" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="20" fill="$ink" /></col>
            </row>
          </frame>

          <frame w="329" h="44">
            <row w="329" h="44" gap="0" align="middle-left">
              <col w="47" align="middle-center"><text text-style="Numeral" value="21" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="22" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="23" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="24" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="25" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="26" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="27" fill="$ink" /></col>
            </row>
          </frame>

          <frame w="329" h="44">
            <ellipse x="50" y="2" w="40" h="40" fill="$faint" />
            <ellipse x="97" y="2" w="40" h="40" fill="$faint" />
            <row w="329" h="44" gap="0" align="middle-left">
              <col w="47" align="middle-center"><text text-style="Numeral" value="28" fill="$ink" /></col>
              <col w="47" align="middle-center"><text text-style="NumeralB" value="29" fill="$rose" /></col>
              <col w="47" align="middle-center"><text text-style="NumeralB" value="30" fill="$rose" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="1" fill="$muted" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="2" fill="$muted" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="3" fill="$muted" /></col>
              <col w="47" align="middle-center"><text text-style="Numeral" value="4" fill="$muted" /></col>
            </row>
          </frame>
        </col>

        <line w="329" fill="$line" />
        <row w="329" gap="auto" align="middle-left">
          <row gap="6" align="middle-left">
            <ellipse w="10" h="10" fill="$rose-fill" />
            <text text-style="Sub" value="Period" fill="$muted" />
          </row>
          <row gap="6" align="middle-left">
            <ellipse w="10" h="10" fill="$tint" />
            <text text-style="Sub" value="Fertile" fill="$muted" />
          </row>
          <row gap="6" align="middle-left">
            <ellipse w="10" h="10" fill="$rose" />
            <text text-style="Sub" value="Ovulation" fill="$muted" />
          </row>
          <row gap="6" align="middle-left">
            <ellipse w="10" h="10" fill="$faint" />
            <text text-style="Sub" value="Predicted" fill="$muted" />
          </row>
        </row>
      </col>
    </col>

    <col w="393" p="12 16 0 16">
      <col role="card" w="361" radius="$r-card" fill="$surface" p="16" gap="14">
        <row w="329" gap="auto" align="middle-left">
          <col gap="2" align="top-left">
            <text text-style="CardTitle" value="Saturday, June 14" fill="$ink" />
            <text text-style="Sub" value="Cycle day 14 · Ovulation" fill="$muted" />
          </col>
          <img src="https://api.iconify.design/lucide/droplet.svg?color=%23A81448" w="22" h="22" />
        </row>
        <row w="329" gap="8" align="middle-left">
          <row role="chip" h="32" radius="$r-pill" fill="$chip" p="0 12" gap="6" align="middle-center">
            <img src="https://api.iconify.design/lucide/droplet.svg?color=%23241A1D" w="15" h="15" />
            <text text-style="Chip" value="Cramps" fill="$ink" />
          </row>
          <row role="chip" h="32" radius="$r-pill" fill="$chip" p="0 12" gap="6" align="middle-center">
            <img src="https://api.iconify.design/lucide/zap.svg?color=%23241A1D" w="15" h="15" />
            <text text-style="Chip" value="High energy" fill="$ink" />
          </row>
          <row role="chip" h="32" radius="$r-pill" fill="$chip" p="0 12" gap="6" align="middle-center">
            <img src="https://api.iconify.design/lucide/heart.svg?color=%23241A1D" w="15" h="15" />
            <text text-style="Chip" value="Tender" fill="$ink" />
          </row>
        </row>
        <row role="button" w="329" h="48" radius="$r-pill" fill="$rose" gap="8" align="middle-center">
          <img src="https://api.iconify.design/lucide/plus.svg?color=%23FFFFFF" w="18" h="18" />
          <text text-style="BodyMed" value="Log today" fill="$surface" />
        </row>
      </col>
    </col>

    <col w="393" p="12 16 0 16">
      <row w="361" gap="13" align="top-left">
        <col role="card" w="174" radius="$r-card" fill="$surface" p="14" gap="6">
          <text text-style="Section" value="NEXT PERIOD" fill="$muted" />
          <text text-style="Big" value="15 days" fill="$ink" />
          <text text-style="Sub" value="Expected Jun 29" fill="$muted" />
        </col>
        <col role="card" w="174" radius="$r-card" fill="$surface" p="14" gap="6">
          <text text-style="Section" value="CYCLE LENGTH" fill="$muted" />
          <text text-style="Big" value="28 days" fill="$ink" />
          <text text-style="Sub" value="Regular range" fill="$muted" />
        </col>
      </row>
    </col>

    <col w="393" p="20 0 0 0" />

    <col role="tab-bar" w="393" fill="$surface">
      <line w="393" fill="$line" />
      <row w="393" h="60" p="8 12 0 12" gap="auto" align="top-center">
        <col w="60" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/house.svg?color=%236E5A60" w="23" h="23" />
          <text text-style="Tab" value="Today" fill="$muted" />
        </col>
        <col w="60" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/calendar.svg?color=%23A81448" w="23" h="23" />
          <text text-style="Tab" value="Calendar" fill="$rose" />
        </col>
        <col w="60" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/activity.svg?color=%236E5A60" w="23" h="23" />
          <text text-style="Tab" value="Insights" fill="$muted" />
        </col>
        <col w="60" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/plus-circle.svg?color=%236E5A60" w="23" h="23" />
          <text text-style="Tab" value="Log" fill="$muted" />
        </col>
        <col w="60" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/user.svg?color=%236E5A60" w="23" h="23" />
          <text text-style="Tab" value="You" fill="$muted" />
        </col>
      </row>
      <row w="393" h="24" align="middle-center">
        <rect w="140" h="5" radius="$r-pill" fill="$indicator" />
      </row>
    </col>

  </col>
</gui>

```