---
title: "The Coronet — Select Seats, Metropolis (1927)"
platform: android
slug: the-coronet-select-seats-metropolis-1927
screens: ["seat-selection"]
domains: ["booking"]
style: "art-deco"
fonts: ["Poiret One", "Roboto", "Roboto Mono"]
roles: ["badge", "chip", "top-navigation-bar", "button", "card", "segmented-control", "toolbar", "divider"]
score: {clean: 100, consistent: 80, accessible: 77, comprehensible: 13}
url: https://gui.farm/android/the-coronet-select-seats-metropolis-1927
raw: https://gui.farm/android/the-coronet-select-seats-metropolis-1927/design.guix
download: https://gui.farm/android/the-coronet-select-seats-metropolis-1927.gui
---

# The Coronet — Select Seats, Metropolis (1927)

An art-deco cinema seat-selection screen for The Coronet, a restored 1929 picture palace, where a moviegoer picks Grand Circle seats for a Metropolis revival and sees the running total before confirming.

- **Live preview:** https://gui.farm/android/the-coronet-select-seats-metropolis-1927
- **Raw source:** https://gui.farm/android/the-coronet-select-seats-metropolis-1927/design.guix
- **Download (.gui):** https://gui.farm/android/the-coronet-select-seats-metropolis-1927.gui

## Source (design.guix)

```xml
<gui version="0.2" name="The Coronet — Select Seats, Metropolis (1927)">
  <tokens>
    <color name="bg" value="#F3EDE0" />
    <color name="panel" value="#FBF7EE" />
    <color name="ink" value="#17181D" />
    <color name="muted" value="#5C574C" />
    <color name="sapp" value="#1E45B8" />
    <color name="sapp-tx" value="#16357F" />
    <color name="sapp-soft" value="#1E45B824" />
    <color name="on-sapp" value="#F4F6FF" />
    <color name="hair" value="#17181D2E" />
    <color name="hair-2" value="#17181D1A" />
    <color name="taken" value="#B3A88C" />
    <color name="on-hero" value="#FBF7EE" />
    <number name="r-seat" value="4" />
    <number name="r-card" value="6" />
    <number name="r-pill" value="999" />
  </tokens>
  <fonts>
    <font family="Poiret One" source="google" weights="400" styles="normal" />
    <font family="Roboto" source="google" weights="400 500 600 700" styles="normal" />
    <font family="Roboto Mono" source="google" weights="400 500 600" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Marquee" font-family="Poiret One" font-size="27" font-weight="400" line-height="30" letter-spacing="0.5" />
    <text-style name="TotalNum" font-family="Poiret One" font-size="25" font-weight="400" line-height="27" letter-spacing="0.5" />
    <text-style name="Nav" font-family="Roboto" font-size="15" font-weight="700" line-height="19" letter-spacing="0.6" />
    <text-style name="Eyebrow" font-family="Roboto" font-size="10" font-weight="700" line-height="13" letter-spacing="2" />
    <text-style name="Badge" font-family="Roboto" font-size="9" font-weight="700" line-height="11" letter-spacing="1" />
    <text-style name="Tier" font-family="Roboto" font-size="11" font-weight="700" line-height="14" letter-spacing="0.6" />
    <text-style name="Venue" font-family="Roboto" font-size="12" font-weight="400" line-height="16" />
    <text-style name="Rating" font-family="Roboto" font-size="15" font-weight="700" line-height="19" />
    <text-style name="Seg" font-family="Roboto" font-size="13" font-weight="600" line-height="17" />
    <text-style name="ScreenCap" font-family="Roboto" font-size="11" font-weight="700" line-height="14" letter-spacing="4" />
    <text-style name="Legend" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Cap" font-family="Roboto" font-size="11" font-weight="500" line-height="14" />
    <text-style name="Fee" font-family="Roboto" font-size="13" font-weight="500" line-height="17" />
    <text-style name="CTA" font-family="Roboto" font-size="15" font-weight="700" line-height="19" letter-spacing="0.4" />
    <text-style name="RowL" font-family="Roboto Mono" font-size="11" font-weight="600" line-height="14" />
    <text-style name="ColNum" font-family="Roboto Mono" font-size="11" font-weight="500" line-height="14" />
    <text-style name="Mono" font-family="Roboto Mono" font-size="12" font-weight="500" line-height="16" letter-spacing="0.3" />
    <text-style name="Amount" font-family="Roboto Mono" font-size="13" font-weight="500" line-height="17" />
    <text-style name="Chip" font-family="Roboto Mono" font-size="13" font-weight="600" line-height="16" />
  </styles>
  <components>
    <component name="SeatStd" id="c-std">
      <rect w="28" h="28" radius="$r-seat" fill="none" border="1 $hair" />
    </component>
    <component name="SeatTaken" id="c-taken">
      <rect w="28" h="28" radius="$r-seat" fill="$taken" />
    </component>
    <component name="SeatPrem" id="c-prem">
      <rect w="28" h="28" radius="$r-seat" fill="$sapp-soft" border="1 $sapp" />
    </component>
    <component name="SeatSel" id="c-sel">
      <row w="28" h="28" radius="$r-seat" fill="$sapp" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23F4F6FF" 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="28" align="middle-center">
        <text id="rlt" text-style="RowL" value="A" color="$muted" />
      </row>
    </component>
    <component name="FmtBadge" id="c-badge">
      <props>
        <prop name="t" type="text" target="fbt" />
      </props>
      <row role="badge" h="22" radius="$r-card" fill="$sapp" p="0 8" align="middle-center">
        <text id="fbt" text-style="Badge" value="70MM" color="$on-sapp" />
      </row>
    </component>
    <component name="SeatChip" id="c-chip">
      <props>
        <prop name="t" type="text" target="sct" />
      </props>
      <row role="chip" h="28" radius="$r-card" fill="$sapp-soft" border="1 $sapp" p="0 10" align="middle-center">
        <text id="sct" text-style="Chip" value="F6" color="$sapp-tx" />
      </row>
    </component>
  </components>
  <col w="360" fill="$bg" gap="0">
    <!-- status bar (device chrome, untagged) -->
    <row w="fill" h="28" p="0 18" gap="auto" align="middle-center">
      <text value="9:41" text-style="Mono" color="$ink" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%2317181D" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%2317181D" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%2317181D" w="15" h="15" />
      </row>
    </row>
    <!-- top navigation -->
    <row w="fill" h="56" p="0 8" gap="4" align="middle-center" fill="$bg" border-bottom="1 $hair-2" role="top-navigation-bar">
      <row w="44" h="44" align="middle-center" role="button">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%2317181D" w="24" h="24" />
      </row>
      <col w="fill" gap="1" align="middle-center">
        <text value="SELECT SEATS" text-style="Nav" color="$ink" align="center" />
        <text value="THE CORONET · SCREEN 1" text-style="Mono" color="$muted" align="center" />
      </col>
      <row w="44" h="44" align="middle-center" role="button">
        <img src="https://api.iconify.design/material-symbols/info-outline-rounded.svg?color=%2317181D" w="22" h="22" />
      </row>
    </row>
    <!-- body -->
    <col w="360" p="12 16 10 16" gap="14">
      <!-- FEATURE CARD -->
      <col w="328" fill="$panel" border="1 $hair-2" radius="$r-card" clip="true" role="card">
        <frame w="326" h="146">
          <img x="0" y="0" w="326" h="146" fit="cover" src="https://images.unsplash.com/photo-1785521033823-1026fca07fc8?auto=format&amp;fit=crop&amp;w=800&amp;h=420&amp;q=80" />
          <rect x="0" y="0" w="326" h="146" fill="linear-gradient(180deg, #1212172E 0%, #12121717 44%, #121217C7 100%)" />
          <!-- deco corner brackets -->
          <rect x="12" y="12" w="20" h="2" fill="$on-hero" />
          <rect x="12" y="12" w="2" h="20" fill="$on-hero" />
          <rect x="294" y="12" w="20" h="2" fill="$on-hero" />
          <rect x="312" y="12" w="2" h="20" fill="$on-hero" />
          <row x="14" y="16" gap="6" align="middle-left">
            <instance component="c-badge" t="70MM RESTORATION" />
            <instance component="c-badge" t="LIVE SCORE" />
          </row>
          <text x="14" y="110" value="Metropolis" text-style="Marquee" color="$on-hero" />
        </frame>
        <row w="fill" p="12 14 14 14" gap="auto" align="middle-center">
          <col gap="3" align="top-left">
            <text value="TONIGHT · REPERTORY REVIVAL" text-style="Eyebrow" color="$sapp-tx" />
            <text value="Fritz Lang · 1927 · Restored 2H 28M" text-style="Venue" color="$muted" />
          </col>
          <col gap="3" align="top-right">
            <row gap="4" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%231E45B8" w="15" h="15" />
              <text value="8.3" text-style="Rating" color="$ink" />
            </row>
            <text value="Sat 22 Aug" text-style="Venue" color="$muted" align="right" />
          </col>
        </row>
      </col>
      <!-- SHOWTIMES -->
      <row w="328" h="46" radius="$r-card" fill="$panel" border="1 $hair-2" p="4" gap="4" align="middle-center" role="segmented-control">
        <row w="fill" h="fill" align="middle-center">
          <text value="5:00 PM" text-style="Seg" color="$muted" />
        </row>
        <row w="fill" h="fill" radius="$r-card" fill="$sapp" align="middle-center">
          <text value="7:30 PM" text-style="Seg" color="$on-sapp" />
        </row>
        <row w="fill" h="fill" align="middle-center">
          <text value="9:45 PM" text-style="Seg" color="$muted" />
        </row>
      </row>
      <!-- SEAT MAP -->
      <col w="328" gap="14" align="middle-center">
        <!-- screen indicator -->
        <col w="fill" gap="9" align="middle-center" p="2 0 2 0">
          <row gap="8" align="middle-center">
            <rect w="5" h="5" fill="$sapp" />
            <rect w="230" h="6" radius="$r-pill" fill="linear-gradient(90deg, #1E45B800 0%, #1E45B8 50%, #1E45B800 100%)" />
            <rect w="5" h="5" fill="$sapp" />
          </row>
          <text value="THE SCREEN" text-style="ScreenCap" color="$muted" align="center" />
        </col>
        <!-- column numbers -->
        <row gap="14" align="middle-center">
          <rect w="16" h="14" fill="none" />
          <row gap="6">
            <text w="28" align="center" text-style="ColNum" value="1" color="$muted" />
            <text w="28" align="center" text-style="ColNum" value="2" color="$muted" />
            <text w="28" align="center" text-style="ColNum" value="3" color="$muted" />
            <text w="28" align="center" text-style="ColNum" value="4" color="$muted" />
          </row>
          <row gap="6">
            <text w="28" align="center" text-style="ColNum" value="5" color="$muted" />
            <text w="28" align="center" text-style="ColNum" value="6" color="$muted" />
            <text w="28" align="center" text-style="ColNum" value="7" color="$muted" />
            <text w="28" align="center" text-style="ColNum" value="8" color="$muted" />
          </row>
        </row>
        <!-- STALLS tier heading -->
        <row w="304" gap="10" align="middle-center">
          <rect w="fill" h="1" fill="$hair-2" />
          <text value="STALLS · £12.50" text-style="Tier" color="$muted" />
          <rect w="fill" h="1" fill="$hair-2" />
        </row>
        <!-- stalls rows A-E -->
        <col gap="8" align="middle-center">
          <!-- row A -->
          <row gap="14" align="middle-center">
            <instance component="c-rl" l="A" />
            <row gap="6">
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-taken" />
              <instance component="c-std" />
            </row>
            <row gap="6">
              <instance component="c-std" />
              <instance component="c-taken" />
              <instance component="c-std" />
              <instance component="c-std" />
            </row>
          </row>
          <!-- row B -->
          <row gap="14" align="middle-center">
            <instance component="c-rl" l="B" />
            <row gap="6">
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-std" />
            </row>
            <row gap="6">
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-taken" />
              <instance component="c-std" />
            </row>
          </row>
          <!-- row C -->
          <row gap="14" align="middle-center">
            <instance component="c-rl" l="C" />
            <row gap="6">
              <instance component="c-std" />
              <instance component="c-taken" />
              <instance component="c-taken" />
              <instance component="c-std" />
            </row>
            <row gap="6">
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-std" />
            </row>
          </row>
          <!-- row D -->
          <row gap="14" align="middle-center">
            <instance component="c-rl" l="D" />
            <row gap="6">
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-std" />
            </row>
            <row gap="6">
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-std" />
            </row>
          </row>
          <!-- row E -->
          <row gap="14" align="middle-center">
            <instance component="c-rl" l="E" />
            <row gap="6">
              <instance component="c-taken" />
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-std" />
            </row>
            <row gap="6">
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-std" />
              <instance component="c-taken" />
            </row>
          </row>
        </col>
        <!-- GRAND CIRCLE tier heading -->
        <row w="304" gap="10" align="middle-center">
          <rect w="fill" h="1" fill="$hair-2" />
          <text value="GRAND CIRCLE · £18.00" text-style="Tier" color="$sapp-tx" />
          <rect w="fill" h="1" fill="$hair-2" />
        </row>
        <!-- circle rows F-G -->
        <col gap="8" align="middle-center">
          <!-- row F (selected F6, F7) -->
          <row gap="14" align="middle-center">
            <instance component="c-rl" l="F" />
            <row gap="6">
              <instance component="c-prem" />
              <instance component="c-taken" />
              <instance component="c-prem" />
              <instance component="c-prem" />
            </row>
            <row gap="6">
              <instance component="c-prem" />
              <instance component="c-sel" />
              <instance component="c-sel" />
              <instance component="c-prem" />
            </row>
          </row>
          <!-- row G -->
          <row gap="14" align="middle-center">
            <instance component="c-rl" l="G" />
            <row gap="6">
              <instance component="c-prem" />
              <instance component="c-prem" />
              <instance component="c-taken" />
              <instance component="c-prem" />
            </row>
            <row gap="6">
              <instance component="c-prem" />
              <instance component="c-prem" />
              <instance component="c-prem" />
              <instance component="c-taken" />
            </row>
          </row>
        </col>
      </col>
      <!-- LEGEND -->
      <col w="328" gap="8" fill="$panel" border="1 $hair-2" radius="$r-card" p="12 14">
        <row w="fill" gap="auto" align="middle-center">
          <row gap="7" align="middle-center">
            <rect w="16" h="16" radius="3" fill="none" border="1 $hair" />
            <text value="Available" text-style="Legend" color="$muted" />
          </row>
          <row gap="7" align="middle-center">
            <rect w="16" h="16" radius="3" fill="$sapp" />
            <text value="Selected" text-style="Legend" color="$muted" />
          </row>
          <row gap="7" align="middle-center">
            <rect w="16" h="16" radius="3" fill="$sapp-soft" border="1 $sapp" />
            <text value="Circle" text-style="Legend" color="$muted" />
          </row>
          <row gap="7" align="middle-center">
            <rect w="16" h="16" radius="3" fill="$taken" />
            <text value="Sold" text-style="Legend" color="$muted" />
          </row>
        </row>
        <text value="Grand Circle recliners include the interval champagne service." text-style="Cap" color="$muted" />
      </col>
    </col>
    <!-- CHECKOUT BAR (fixed, last flow child) -->
    <col w="360" fill="$panel" border-top="1 $sapp" p="14 16 0 16" gap="11" role="toolbar">
      <row w="fill" gap="auto" align="middle-center">
        <text value="2 × Grand Circle (£18.00)" text-style="Fee" color="$muted" />
        <text value="£36.00" text-style="Amount" color="$ink" />
      </row>
      <row w="fill" gap="auto" align="middle-center">
        <text value="Booking fee" text-style="Fee" color="$muted" />
        <text value="£1.50" text-style="Amount" color="$ink" />
      </row>
      <line fill="$hair-2" role="divider" />
      <row w="fill" gap="auto" align="middle-center">
        <col gap="7" align="top-left">
          <text value="2 SEATS · GRAND CIRCLE · ROW F" text-style="Cap" color="$muted" />
          <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 value="TOTAL" text-style="Cap" color="$muted" align="right" />
          <text value="£37.50" text-style="TotalNum" color="$ink" align="right" />
        </col>
      </row>
      <row w="328" h="52" radius="$r-card" fill="$sapp" gap="8" align="middle-center" role="button">
        <appearance>
          <effect type="drop-shadow" x="0" y="4" radius="14" spread="0" color="#1E45B840" />
        </appearance>
        <text value="Confirm seats" text-style="CTA" color="$on-sapp" />
        <img src="https://api.iconify.design/material-symbols/arrow-forward-rounded.svg?color=%23F4F6FF" w="18" h="18" />
      </row>
      <!-- home indicator (device chrome, untagged) -->
      <row w="328" h="18" align="bottom-center">
        <rect w="130" h="5" radius="3" fill="$hair" />
      </row>
    </col>
  </col>
</gui>
```