---
title: "Northline — Studio Schedule"
platform: ios
slug: northline-studio-schedule
screens: ["calendar"]
domains: ["productivity"]
style: "minimal"
fonts: ["SF Pro Display", "SF Mono"]
roles: ["top-navigation-bar", "avatar", "segmented-control", "date-picker", "card", "badge", "tab-bar", "button"]
score: {clean: 100, consistent: 80, accessible: 65, comprehensible: 50}
url: https://gui.farm/ios/northline-studio-schedule
raw: https://gui.farm/ios/northline-studio-schedule/design.guix
download: https://gui.farm/ios/northline-studio-schedule.gui
---

# Northline — Studio Schedule

A photo studio's day schedule on an hourly time grid, with overlapping bookings and a current-time marker.

- **Live preview:** https://gui.farm/ios/northline-studio-schedule
- **Raw source:** https://gui.farm/ios/northline-studio-schedule/design.guix
- **Download (.gui):** https://gui.farm/ios/northline-studio-schedule.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Northline — Studio Schedule">
  <tokens>
    <color name="paper" value="#FBFBFA" />
    <color name="card" value="#FFFFFF" />
    <color name="surface" value="#F2F2F0" />
    <color name="ink" value="#17181B" />
    <color name="body" value="#4A4D53" />
    <color name="muted" value="#6E727A" />
    <color name="line" value="#E4E4E1" />
    <color name="line-soft" value="#EDEDEA" />
    <color name="indigo" value="#4B4FD6" />
    <color name="now" value="#C43325" />

    <!-- event tints : each pairs a saturated rail with a washed fill -->
    <color name="teal" value="#0B6A63" />
    <color name="teal-fill" value="#E3F2F0" />
    <color name="violet" value="#6B4BC4" />
    <color name="violet-fill" value="#EDE8F9" />
    <color name="amber" value="#875711" />
    <color name="amber-fill" value="#F7EEDF" />
    <color name="slate" value="#4A5560" />
    <color name="slate-fill" value="#ECEEF0" />

    <number name="r-event" value="9" />
    <number name="r-md" value="12" />
    <number name="r-full" value="999" />
  </tokens>

  <styles>
    <text-style name="Status" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Month" font-family="SF Pro Display" font-size="22" font-weight="700" line-height="27" letter-spacing="-0.4" />
    <text-style name="Section" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Event" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="17" />
    <text-style name="Body" font-family="SF Pro Display" font-size="13" font-weight="400" line-height="17" />
    <text-style name="Label" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Tiny" font-family="SF Pro Display" font-size="11" font-weight="500" line-height="15" />
    <text-style name="Micro" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="13" letter-spacing="0.7" />
    <text-style name="Clock" font-family="SF Mono" font-size="11" font-weight="500" line-height="14" />
    <text-style name="ClockNow" font-family="SF Mono" font-size="11" font-weight="700" line-height="14" />
  </styles>

  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="SF Mono" source="system" weights="500 700" styles="normal" />
  </fonts>

  <!-- No scroll in .gui: the canvas expands to all content, so the root col hugs
       its children and the tab bar is the last flow child. -->
  <col w="393" fill="$paper">

    <!-- iOS status bar : device chrome, deliberately untagged -->
    <row w="fill" h="54" p="0 24" 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=%2317181B" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%2317181B" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery.svg?color=%2317181B" w="22" h="13" />
      </row>
    </row>

    <row role="top-navigation-bar" w="fill" h="48" p="0 16" gap="12" align="middle-left">
      <row w="fill" gap="5" align="middle-left">
        <text text-style="Month" value="August" fill="$ink" />
        <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%2317181B" w="19" h="19" />
      </row>
      <row w="34" h="34" radius="17" align="middle-center">
        <img src="https://api.iconify.design/lucide/search.svg?color=%234A4D53" w="19" h="19" />
      </row>
      <row role="avatar" w="32" h="32" radius="16" fill="$indigo" align="middle-center">
        <text font-family="SF Pro Display" font-size="12" font-weight="600" line-height="16" value="JJ" fill="#FFFFFF" />
      </row>
    </row>

    <!-- view switch -->
    <row w="fill" p="4 16 12 16" align="middle-left">
      <row role="segmented-control" w="fill" h="34" radius="$r-full" fill="$surface" p="3" gap="2" align="middle-center">
        <row w="fill" h="fill" radius="$r-full" fill="$card" align="middle-center">
          <appearance>
            <fill type="color" value="$card" />
            <effect type="drop-shadow" x="0" y="1" radius="3" spread="0" color="#17181B1F" />
          </appearance>
          <text text-style="Label" font-weight="600" value="Day" fill="$ink" />
        </row>
        <row w="fill" h="fill" radius="$r-full" align="middle-center">
          <text text-style="Label" value="Week" fill="$muted" />
        </row>
        <row w="fill" h="fill" radius="$r-full" align="middle-center">
          <text text-style="Label" value="Month" fill="$muted" />
        </row>
      </row>
    </row>

    <!-- week strip : today filled, days with work carry a dot -->
    <row role="date-picker" w="fill" p="0 16 12 16" gap="auto" align="middle-left">
      <col w="44" h="58" radius="$r-md" gap="4" align="middle-center">
        <text text-style="Tiny" value="MON" fill="$muted" />
        <text text-style="Section" value="10" fill="$ink" />
        <ellipse w="4" h="4" fill="$muted" />
      </col>
      <col w="44" h="58" radius="$r-md" fill="$ink" gap="4" align="middle-center">
        <text text-style="Tiny" value="TUE" fill="#FFFFFFB8" />
        <text text-style="Section" value="11" fill="#FFFFFF" />
        <ellipse w="4" h="4" fill="#FFFFFF" />
      </col>
      <col w="44" h="58" radius="$r-md" gap="4" align="middle-center">
        <text text-style="Tiny" value="WED" fill="$muted" />
        <text text-style="Section" value="12" fill="$ink" />
        <ellipse w="4" h="4" fill="$muted" />
      </col>
      <col w="44" h="58" radius="$r-md" gap="4" align="middle-center">
        <text text-style="Tiny" value="THU" fill="$muted" />
        <text text-style="Section" value="13" fill="$ink" />
        <ellipse w="4" h="4" fill="$muted" />
      </col>
      <col w="44" h="58" radius="$r-md" gap="4" align="middle-center">
        <text text-style="Tiny" value="FRI" fill="$muted" />
        <text text-style="Section" value="14" fill="$ink" />
        <ellipse w="4" h="4" fill="$muted" />
      </col>
      <col w="44" h="58" radius="$r-md" gap="4" align="middle-center">
        <text text-style="Tiny" value="SAT" fill="$line" />
        <text text-style="Section" value="15" fill="$muted" />
      </col>
      <col w="44" h="58" radius="$r-md" gap="4" align="middle-center">
        <text text-style="Tiny" value="SUN" fill="$line" />
        <text text-style="Section" value="16" fill="$muted" />
      </col>
    </row>

    <line w="fill" fill="$line" />

    <!-- all-day rail, kept out of the timed grid where it has no start -->
    <row w="fill" h="42" p="0 16" gap="10" border="0 0 1 0 $line" align="middle-left">
      <text w="36" text-style="Micro" value="ALL DAY" fill="$muted" />
      <row w="fill" h="24" radius="6" fill="$amber-fill" p="0 9" gap="7" align="middle-left">
        <rect w="3" h="12" radius="2" fill="$amber" />
        <text w="fill" max-lines="1" truncate="true" text-style="Label" value="Vega Athletic — shoot day" fill="$amber" />
      </row>
    </row>

    <!-- ============ TIME GRID ============
         8 AM sits at y=0 and every hour is 64px, so an event's top is
         (start − 8) × 64 and its height is its duration × 64. Hour rules run
         x=52→377; timed events occupy x=60→377, halving to 155/156 with a 6px
         gutter wherever two overlap. -->
    <frame w="393" h="608" clip="true">

      <text x="8" y="-7" w="36" text-style="Clock" value="8 AM" fill="$muted" align="right" />
      <rect x="52" y="0" w="325" h="1" fill="$line-soft" />

      <text x="8" y="57" w="36" text-style="Clock" value="9 AM" fill="$muted" align="right" />
      <rect x="52" y="64" w="325" h="1" fill="$line-soft" />

      <text x="8" y="121" w="36" text-style="Clock" value="10 AM" fill="$muted" align="right" />
      <rect x="52" y="128" w="325" h="1" fill="$line-soft" />

      <text x="8" y="185" w="36" text-style="Clock" value="11 AM" fill="$muted" align="right" />
      <rect x="52" y="192" w="325" h="1" fill="$line-soft" />

      <text x="8" y="249" w="36" text-style="Clock" value="12 PM" fill="$muted" align="right" />
      <rect x="52" y="256" w="325" h="1" fill="$line-soft" />

      <text x="8" y="313" w="36" text-style="Clock" value="1 PM" fill="$muted" align="right" />
      <rect x="52" y="320" w="325" h="1" fill="$line-soft" />

      <text x="8" y="377" w="36" text-style="Clock" value="2 PM" fill="$muted" align="right" />
      <rect x="52" y="384" w="325" h="1" fill="$line-soft" />

      <text x="8" y="441" w="36" text-style="Clock" value="3 PM" fill="$muted" align="right" />
      <rect x="52" y="448" w="325" h="1" fill="$line-soft" />

      <text x="8" y="505" w="36" text-style="Clock" value="4 PM" fill="$muted" align="right" />
      <rect x="52" y="512" w="325" h="1" fill="$line-soft" />

      <text x="8" y="569" w="36" text-style="Clock" value="5 PM" fill="$muted" align="right" />
      <rect x="52" y="576" w="325" h="1" fill="$line-soft" />

      <!-- 8:30–9:30 -->
      <row role="card" x="60" y="32" w="317" h="64" radius="$r-event" fill="$slate-fill" p="8 10" gap="9" align="top-left">
        <rect w="3" h="fill" radius="2" fill="$slate" />
        <col w="fill" gap="2">
          <row w="fill" gap="8" align="middle-left">
            <text w="fill" text-style="Event" value="Studio prep, lighting check" fill="$slate" />
            <text text-style="Tiny" value="1h" fill="$slate" />
          </row>
          <text text-style="Body" value="8:30 – 9:30 · Bay 2" fill="$slate" />
        </col>
      </row>

      <!-- 10:00–11:15 -->
      <col role="card" x="60" y="128" w="317" h="80" radius="$r-event" fill="$teal-fill" p="9 10" gap="0">
        <row w="fill" h="fill" gap="9" align="top-left">
          <rect w="3" h="fill" radius="2" fill="$teal" />
          <col w="fill" gap="3">
            <row w="fill" gap="8" align="middle-left">
              <text w="fill" text-style="Event" value="Client shoot — Vega Athletic" fill="$teal" />
              <text text-style="Tiny" value="1h 15m" fill="$teal" />
            </row>
            <text text-style="Body" value="10:00 – 11:15 · Cyc wall" fill="$teal" />
            <row gap="6" p="3 0 0 0" align="middle-left">
              <row role="badge" h="18" radius="$r-full" fill="#FFFFFF" p="0 7" align="middle-center">
                <text text-style="Micro" value="4 LOOKS" fill="$teal" />
              </row>
              <row role="badge" h="18" radius="$r-full" fill="#FFFFFF" p="0 7" gap="4" align="middle-center">
                <img src="https://api.iconify.design/lucide/users.svg?color=%230B6A63" w="10" h="10" />
                <text text-style="Micro" value="3" fill="$teal" />
              </row>
            </row>
          </col>
        </row>
      </col>

      <!-- 12:00–12:45 -->
      <row x="60" y="256" w="317" h="48" radius="$r-event" fill="none" border="1 $line" p="0 10" gap="9" align="middle-left">
        <rect w="3" h="20" radius="2" fill="$muted" />
        <text w="fill" text-style="Event" value="Lunch" fill="$body" />
        <text text-style="Tiny" value="12:00 – 12:45" fill="$muted" />
      </row>

      <!-- 1:00–2:30 and 1:30–2:15 overlap, so both halve -->
      <col role="card" x="60" y="320" w="155" h="96" radius="$r-event" fill="$violet-fill" p="9 10" gap="0">
        <row w="fill" h="fill" gap="8" align="top-left">
          <rect w="3" h="fill" radius="2" fill="$violet" />
          <col w="fill" gap="3">
            <text w="fill" text-style="Event" value="Retouch pass" fill="$violet" />
            <text text-style="Body" value="1:00 – 2:30" fill="$violet" />
            <text text-style="Tiny" value="Vega — 42 frames" fill="$violet" />
          </col>
        </row>
      </col>

      <col role="card" x="221" y="352" w="156" h="48" radius="$r-event" fill="$amber-fill" p="8 10" gap="0">
        <row w="fill" h="fill" gap="8" align="top-left">
          <rect w="3" h="fill" radius="2" fill="$amber" />
          <col w="fill" gap="2">
            <text w="fill" max-lines="1" truncate="true" text-style="Event" value="Call with Priya" fill="$amber" />
            <text text-style="Tiny" value="1:30 – 2:15" fill="$amber" />
          </col>
        </row>
      </col>

      <!-- 3:00–4:00 -->
      <row role="card" x="60" y="448" w="317" h="64" radius="$r-event" fill="$slate-fill" p="8 10" gap="9" align="top-left">
        <rect w="3" h="fill" radius="2" fill="$slate" />
        <col w="fill" gap="2">
          <row w="fill" gap="8" align="middle-left">
            <text w="fill" text-style="Event" value="Deliver gallery, invoice" fill="$slate" />
            <text text-style="Tiny" value="1h" fill="$slate" />
          </row>
          <text text-style="Body" value="3:00 – 4:00 · Desk" fill="$slate" />
        </col>
      </row>

      <!-- now line at 11:20 → (11.333 − 8) × 64 = 213 -->
      <text x="4" y="206" w="40" text-style="ClockNow" value="11:20" fill="$now" align="right" />
      <rect x="52" y="213" w="325" h="1.5" fill="$now" />
      <ellipse x="48" y="209" w="9" h="9" fill="$now" />

    </frame>

    <!-- ============ TAB BAR ============ -->
    <col w="fill" fill="$card" border="1 0 0 0 $line">
      <row role="tab-bar" w="fill" h="58" p="0 8" gap="auto" align="middle-center">
        <col w="66" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/inbox.svg?color=%236E727A" w="22" h="22" />
          <text text-style="Micro" font-weight="500" value="Inbox" fill="$muted" />
        </col>
        <col w="66" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/calendar-days.svg?color=%234B4FD6" w="22" h="22" />
          <text text-style="Micro" font-weight="500" value="Schedule" fill="$indigo" />
        </col>
        <row role="button" w="48" h="48" radius="24" fill="$ink" align="middle-center">
          <img src="https://api.iconify.design/lucide/plus.svg?color=%23FFFFFF" w="22" h="22" />
        </row>
        <col w="66" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/folder-open.svg?color=%236E727A" w="22" h="22" />
          <text text-style="Micro" font-weight="500" value="Jobs" fill="$muted" />
        </col>
        <col w="66" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/settings.svg?color=%236E727A" w="22" h="22" />
          <text text-style="Micro" font-weight="500" value="Settings" fill="$muted" />
        </col>
      </row>
      <row w="fill" h="30" align="middle-center">
        <rect w="140" h="5" radius="3" fill="$ink" />
      </row>
    </col>

  </col>
</gui>

```