---
title: "Halcyon — Cinema Seat Selection"
platform: ios
slug: halcyon-cinema-seat-selection
screens: ["seat-selection"]
domains: ["booking"]
style: "glassmorphism"
fonts: ["SF Pro Display"]
roles: ["badge", "chip", "top-navigation-bar", "button", "card", "segmented-control", "toolbar", "divider"]
score: {clean: 99, consistent: 73, accessible: 77, comprehensible: 14}
url: https://gui.farm/ios/halcyon-cinema-seat-selection
raw: https://gui.farm/ios/halcyon-cinema-seat-selection/design.guix
download: https://gui.farm/ios/halcyon-cinema-seat-selection.gui
---

# Halcyon — Cinema Seat Selection

A dark, glassmorphic iOS cinema seat-selection screen for picking specific seats from a live auditorium map before checkout.

- **Live preview:** https://gui.farm/ios/halcyon-cinema-seat-selection
- **Raw source:** https://gui.farm/ios/halcyon-cinema-seat-selection/design.guix
- **Download (.gui):** https://gui.farm/ios/halcyon-cinema-seat-selection.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Halcyon — Cinema Seat Selection">

  <tokens>
    <color name="bg" value="#0B100E" />
    <color name="panel" value="#FFFFFF0F" />
    <color name="panel-2" value="#FFFFFF14" />
    <color name="hairline" value="#FFFFFF26" />
    <color name="mint" value="#35E3A3" />
    <color name="mint-soft" value="#35E3A324" />
    <color name="on-mint" value="#04241A" />
    <color name="taken" value="#FFFFFF0A" />
    <color name="badge-glass" value="#070B09E6" />
    <color name="text" value="#EAF1EE" />
    <color name="text-dim" value="#98A49F" />
    <number name="r-seat" value="9" />
    <number name="r-pill" value="999" />
    <number name="r-card" value="20" />
    <number name="r-panel" value="16" />
  </tokens>

  <styles>
    <text-style name="Nav" font-family="SF Pro Display" font-size="17" font-weight="600" line-height="22" />
    <text-style name="Kicker" font-family="SF Pro Display" font-size="11" font-weight="700" line-height="14" letter-spacing="1.4" />
    <text-style name="Title" font-family="SF Pro Display" font-size="22" font-weight="700" line-height="27" />
    <text-style name="Venue" font-family="SF Pro Display" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Rating" font-family="SF Pro Display" font-size="15" font-weight="700" line-height="20" />
    <text-style name="Seg" font-family="SF Pro Display" font-size="14" font-weight="600" line-height="18" />
    <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="RowL" font-family="SF Pro Display" font-size="12" font-weight="600" line-height="16" />
    <text-style name="ColNum" font-family="SF Pro Display" font-size="11" font-weight="500" line-height="14" />
    <text-style name="ScreenCap" font-family="SF Pro Display" font-size="11" font-weight="600" line-height="14" letter-spacing="4" />
    <text-style name="Legend" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Chip" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="16" />
    <text-style name="Total" font-family="SF Pro Display" font-size="20" font-weight="700" line-height="24" />
    <text-style name="Cap" font-family="SF Pro Display" font-size="11" font-weight="500" line-height="14" />
    <text-style name="Fee" font-family="SF Pro Display" font-size="13" font-weight="400" line-height="18" />
    <text-style name="CTA" font-family="SF Pro Display" font-size="16" font-weight="600" line-height="20" />
  </styles>

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

  <components>
    <component name="SeatStd" id="c-std">
      <rect w="30" h="30" radius="$r-seat" fill="none" border="1 $hairline" />
    </component>
    <component name="SeatTaken" id="c-taken">
      <rect w="30" h="30" radius="$r-seat" fill="$taken" />
    </component>
    <component name="SeatPrem" id="c-prem">
      <rect w="30" h="30" radius="$r-seat" fill="$mint-soft" border="1 $mint" />
    </component>
    <component name="SeatSel" id="c-sel">
      <row w="30" h="30" radius="$r-seat" fill="$mint" align="middle-center">
        <img src="https://api.iconify.design/lucide/check.svg?color=%2304241A" w="18" h="18" />
      </row>
    </component>
    <component name="RowLabel" id="c-rl">
      <props>
        <prop name="l" type="text" target="rlt" />
      </props>
      <row w="16" h="30" align="middle-center">
        <text id="rlt" text-style="RowL" value="A" color="$text-dim" />
      </row>
    </component>
    <component name="FmtBadge" id="c-badge">
      <props>
        <prop name="t" type="text" target="fbt" />
      </props>
      <row role="badge" h="24" radius="$r-pill" fill="$badge-glass" border="1 $hairline" p="0 10" align="middle-center">
        <text id="fbt" text-style="Badge" value="70MM" color="$text" />
      </row>
    </component>
    <component name="SeatChip" id="c-chip">
      <props>
        <prop name="t" type="text" target="sct" />
      </props>
      <row role="chip" h="30" radius="$r-pill" fill="$mint-soft" border="1 $mint" p="0 12" align="middle-center">
        <text id="sct" text-style="Chip" value="F6" color="$mint" />
      </row>
    </component>
  </components>

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

    <!-- status bar (device chrome, untagged) -->
    <row w="fill" h="24" p="0 20" gap="auto" align="middle-center">
      <text text-style="Cap" value="9:41" color="$text" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23EAF1EE" w="15" h="15" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23EAF1EE" w="15" h="15" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23EAF1EE" w="18" h="15" />
      </row>
    </row>

    <!-- top navigation bar -->
    <row role="top-navigation-bar" w="fill" h="56" p="0 16" gap="auto" align="middle-center">
      <row role="button" w="40" h="40" radius="$r-pill" fill="$panel" border="1 $hairline" align="middle-center">
        <img src="https://api.iconify.design/lucide/arrow-left.svg?color=%23EAF1EE" w="20" h="20" />
      </row>
      <text text-style="Nav" value="Select Seats" color="$text" />
      <row role="button" w="40" h="40" radius="$r-pill" fill="$panel" border="1 $hairline" align="middle-center">
        <img src="https://api.iconify.design/lucide/info.svg?color=%23EAF1EE" w="20" h="20" />
      </row>
    </row>

    <!-- content -->
    <col w="fill" p="6 16 0 16" gap="18">

      <!-- movie info card with glass hero -->
      <col role="card" w="fill" radius="$r-card" fill="$panel" border="1 $hairline" clip="true">
        <frame w="361" h="150">
          <img src="https://images.unsplash.com/photo-1762541693135-fb989de961e1?w=1200&amp;q=80&amp;auto=format&amp;fit=crop" x="0" y="0" w="361" h="150" fit="cover" />
          <rect x="0" y="0" w="361" h="150" fill="linear-gradient(180deg, #05080733 0%, #05080766 100%)" />
          <row x="16" y="16" gap="6" align="middle-left">
            <instance component="c-badge" t="DOLBY ATMOS" />
            <instance component="c-badge" t="70MM" />
            <instance component="c-badge" t="2H 46M" />
          </row>
        </frame>
        <row w="fill" p="14 16 16 16" gap="auto" align="middle-center">
          <col gap="4">
            <text text-style="Kicker" value="NOW SHOWING" color="$mint" />
            <text text-style="Title" value="Dune: Part Two" color="$text" />
            <text text-style="Venue" value="Rialto Cinemas · Screen 3" color="$text-dim" />
          </col>
          <col gap="3" align="top-right">
            <row gap="4" align="middle-center">
              <img src="https://api.iconify.design/lucide/star.svg?color=%2335E3A3" w="15" h="15" />
              <text text-style="Rating" value="8.4" color="$text" />
            </row>
            <text text-style="Venue" value="Fri 14 Aug" color="$text-dim" />
          </col>
        </row>
      </col>

      <!-- showtime segmented control -->
      <row role="segmented-control" w="fill" h="46" radius="$r-pill" fill="$panel" border="1 $hairline" p="4" gap="4" align="middle-center">
        <row w="fill" h="fill" align="middle-center">
          <text text-style="Seg" value="4:15 PM" color="$text-dim" />
        </row>
        <row w="fill" h="fill" radius="$r-pill" fill="$mint" align="middle-center">
          <text text-style="Seg" value="7:45 PM" color="$on-mint" />
        </row>
        <row w="fill" h="fill" align="middle-center">
          <text text-style="Seg" value="10:30 PM" color="$text-dim" />
        </row>
      </row>

      <!-- seat map -->
      <col w="fill" p="4 0 0 0" gap="14" align="middle-center">

        <!-- screen indicator (signature glow) -->
        <col w="fill" gap="9" align="middle-center" p="0 0 4 0">
          <rect w="300" h="6" radius="$r-pill" fill="linear-gradient(90deg, #35E3A300 0%, #35E3A3 50%, #35E3A300 100%)" />
          <text text-style="ScreenCap" value="SCREEN" color="$text-dim" align="center" />
        </col>

        <!-- column numbers -->
        <row gap="16" align="middle-center">
          <text w="16" text-style="ColNum" value=" " color="$text-dim" />
          <row gap="7">
            <text w="30" align="center" text-style="ColNum" value="1" color="$text-dim" />
            <text w="30" align="center" text-style="ColNum" value="2" color="$text-dim" />
            <text w="30" align="center" text-style="ColNum" value="3" color="$text-dim" />
            <text w="30" align="center" text-style="ColNum" value="4" color="$text-dim" />
          </row>
          <row gap="7">
            <text w="30" align="center" text-style="ColNum" value="5" color="$text-dim" />
            <text w="30" align="center" text-style="ColNum" value="6" color="$text-dim" />
            <text w="30" align="center" text-style="ColNum" value="7" color="$text-dim" />
            <text w="30" align="center" text-style="ColNum" value="8" color="$text-dim" />
          </row>
        </row>

        <!-- row A -->
        <row gap="16" align="middle-center">
          <instance component="c-rl" l="A" />
          <row gap="7">
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-taken" />
            <instance component="c-std" />
          </row>
          <row gap="7">
            <instance component="c-std" />
            <instance component="c-taken" />
            <instance component="c-std" />
            <instance component="c-std" />
          </row>
        </row>

        <!-- row B -->
        <row gap="16" align="middle-center">
          <instance component="c-rl" l="B" />
          <row gap="7">
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-std" />
          </row>
          <row gap="7">
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-taken" />
            <instance component="c-std" />
          </row>
        </row>

        <!-- row C -->
        <row gap="16" align="middle-center">
          <instance component="c-rl" l="C" />
          <row gap="7">
            <instance component="c-std" />
            <instance component="c-taken" />
            <instance component="c-taken" />
            <instance component="c-std" />
          </row>
          <row gap="7">
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-std" />
          </row>
        </row>

        <!-- row D -->
        <row gap="16" align="middle-center">
          <instance component="c-rl" l="D" />
          <row gap="7">
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-std" />
          </row>
          <row gap="7">
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-std" />
          </row>
        </row>

        <!-- row E -->
        <row gap="16" align="middle-center">
          <instance component="c-rl" l="E" />
          <row gap="7">
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-std" />
          </row>
          <row gap="7">
            <instance component="c-taken" />
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-std" />
          </row>
        </row>

        <!-- row F (selected seats F6, F7) -->
        <row gap="16" align="middle-center">
          <instance component="c-rl" l="F" />
          <row gap="7">
            <instance component="c-taken" />
            <instance component="c-std" />
            <instance component="c-std" />
            <instance component="c-std" />
          </row>
          <row gap="7">
            <instance component="c-std" />
            <instance component="c-sel" />
            <instance component="c-sel" />
            <instance component="c-std" />
          </row>
        </row>

        <!-- row G (premium recliners) -->
        <row gap="16" align="middle-center">
          <instance component="c-rl" l="G" />
          <row gap="7">
            <instance component="c-prem" />
            <instance component="c-prem" />
            <instance component="c-prem" />
            <instance component="c-taken" />
          </row>
          <row gap="7">
            <instance component="c-taken" />
            <instance component="c-prem" />
            <instance component="c-prem" />
            <instance component="c-prem" />
          </row>
        </row>

      </col>

      <!-- legend -->
      <col w="fill" gap="6" p="4 4 0 4">
        <row w="fill" gap="auto" align="middle-center">
          <row gap="7" align="middle-center">
            <rect w="16" h="16" radius="5" fill="none" border="1 $hairline" />
            <text text-style="Legend" value="Available" color="$text-dim" />
          </row>
          <row gap="7" align="middle-center">
            <rect w="16" h="16" radius="5" fill="$mint" />
            <text text-style="Legend" value="Selected" color="$text-dim" />
          </row>
          <row gap="7" align="middle-center">
            <rect w="16" h="16" radius="5" fill="$mint-soft" border="1 $mint" />
            <text text-style="Legend" value="Premium" color="$text-dim" />
          </row>
          <row gap="7" align="middle-center">
            <rect w="16" h="16" radius="5" fill="$taken" />
            <text text-style="Legend" value="Sold" color="$text-dim" />
          </row>
        </row>
        <text text-style="Cap" value="Premium recliners (row G) add $4.50, at $19.00 each" color="$text-dim" />
      </col>

    </col>

    <!-- checkout bar (fixed, last flow child) -->
    <col role="toolbar" w="fill" fill="$panel-2" border="1 $hairline" radius="$r-card $r-card 0 0" p="16 16 0 16" gap="12">
      <row w="fill" gap="auto" align="middle-center">
        <text text-style="Fee" value="2 × Standard  ($14.50)" color="$text-dim" />
        <text text-style="Fee" value="$29.00" color="$text" />
      </row>
      <row w="fill" gap="auto" align="middle-center">
        <text text-style="Fee" value="Booking fee" color="$text-dim" />
        <text text-style="Fee" value="$1.60" color="$text" />
      </row>
      <line fill="$hairline" role="divider" />
      <row w="fill" gap="auto" align="middle-center">
        <col gap="7">
          <text text-style="Cap" value="2 SEATS · ROW F" color="$text-dim" />
          <row gap="6" align="middle-center">
            <instance component="c-chip" t="F6" />
            <instance component="c-chip" t="F7" />
          </row>
        </col>
        <col gap="2" align="top-right">
          <text text-style="Cap" value="TOTAL" color="$text-dim" align="right" />
          <text text-style="Total" value="$30.60" color="$text" />
        </col>
      </row>
      <row role="button" w="fill" h="52" radius="$r-pill" fill="$mint" gap="8" align="middle-center">
        <text text-style="CTA" value="Confirm seats" color="$on-mint" />
        <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%2304241A" w="18" h="18" />
      </row>
      <!-- home indicator (device chrome, untagged) -->
      <row w="fill" h="20" align="middle-center">
        <rect w="134" h="5" radius="$r-pill" fill="$hairline" />
      </row>
    </col>

  </col>
</gui>

```