---
title: "The Rosewood Theatre · The Midnight Revue, Sat"
platform: ios
slug: the-rosewood-theatre-the-midnight-revue-sat
screens: []
domains: ["booking"]
style: "art-deco"
fonts: ["Cinzel", "SF Pro Display"]
roles: ["top-navigation-bar", "button", "card", "divider", "toolbar"]
score: {clean: 80, consistent: 86, accessible: 68, comprehensible: 16}
url: https://gui.farm/ios/the-rosewood-theatre-the-midnight-revue-sat
raw: https://gui.farm/ios/the-rosewood-theatre-the-midnight-revue-sat/design.guix
download: https://gui.farm/ios/the-rosewood-theatre-the-midnight-revue-sat.gui
---

# The Rosewood Theatre · The Midnight Revue, Sat

An art-deco mobile admission ticket for a one-night cabaret revue, showing section/row/seat, doors and curtain times, a scannable barcode, house capacity, and a paid-receipt breakdown.

- **Live preview:** https://gui.farm/ios/the-rosewood-theatre-the-midnight-revue-sat
- **Raw source:** https://gui.farm/ios/the-rosewood-theatre-the-midnight-revue-sat/design.guix
- **Download (.gui):** https://gui.farm/ios/the-rosewood-theatre-the-midnight-revue-sat.gui

## Source (design.guix)

```xml
<gui version="0.2" name="The Rosewood Theatre · The Midnight Revue, Sat">
  <tokens>
    <color name="bg" value="#0E0A0D" />
    <color name="panel" value="#191219" />
    <color name="panel-2" value="#221825" />
    <color name="ink" value="#F6EAF0" />
    <color name="muted" value="#C2A7B6" />
    <color name="rose" value="#E84D8A" />
    <color name="rose-tx" value="#FF89B4" />
    <color name="rose-deep" value="#611233" />
    <color name="hair" value="#372430" />
    <color name="hair-2" value="#4A3340" />
    <color name="on-rose" value="#1A0510" />
    <number name="r-tkt" value="10" />
    <number name="r-card" value="4" />
    <number name="r-pill" value="999" />
    <number name="r-chip" value="3" />
  </tokens>

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

  <styles>
    <text-style name="Wordmark" font-family="Cinzel" font-size="15" font-weight="700" line-height="18" letter-spacing="1.5" />
    <text-style name="Title" font-family="Cinzel" font-size="26" font-weight="700" line-height="30" letter-spacing="0.5" />
    <text-style name="Cat" font-family="Cinzel" font-size="14" font-weight="700" line-height="17" letter-spacing="1.2" />
    <text-style name="Value" font-family="Cinzel" font-size="18" font-weight="600" line-height="22" />
    <text-style name="ValueSm" font-family="Cinzel" font-size="15" font-weight="600" line-height="19" />
    <text-style name="Total" font-family="Cinzel" font-size="26" font-weight="700" line-height="28" letter-spacing="-0.5" />
    <text-style name="Eyebrow" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="13" letter-spacing="2" />
    <text-style name="Label" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="13" letter-spacing="1.2" />
    <text-style name="Badge" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="12" letter-spacing="0.8" />
    <text-style name="Meta" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" letter-spacing="0.2" />
    <text-style name="Sub" font-family="SF Pro Display" font-size="12" font-weight="400" line-height="16" />
    <text-style name="Amount" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="19" />
    <text-style name="ItemName" font-family="SF Pro Display" font-size="14" font-weight="600" line-height="18" />
    <text-style name="BtnLabel" font-family="SF Pro Display" font-size="15" font-weight="700" line-height="18" letter-spacing="0.5" />
    <text-style name="CodeMeta" font-family="SF Pro Display" font-size="11" font-weight="500" line-height="14" letter-spacing="0.6" />
    <text-style name="StatusTime" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="18" />
  </styles>

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

    <!-- status bar (device chrome, untagged) -->
    <row w="393" h="47" p="14 20 0 20" align="middle-left">
      <text w="fill" value="9:41" text-style="StatusTime" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23F6EAF0" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F6EAF0" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F6EAF0" w="24" h="17" />
      </row>
    </row>

    <!-- top navigation -->
    <row w="fill" h="54" p="0 12" gap="auto" align="middle-center" fill="$bg" border-bottom="1 $hair" role="top-navigation-bar">
      <row w="44" h="44" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%23FF89B4" w="24" h="24" />
      </row>
      <col gap="2" align="middle-center">
        <text value="ADMISSION TICKET" text-style="Label" color="$ink" align="center" />
        <text value="ORDER RW-88213" text-style="Eyebrow" color="$muted" align="center" />
      </col>
      <row w="44" h="44" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/share.svg?color=%23FF89B4" w="20" h="20" />
      </row>
    </row>

    <!-- body -->
    <col w="393" p="16" gap="14">

      <!-- TICKET CARD -->
      <col w="361" fill="$panel" radius="$r-tkt" border="1 $rose" clip="true" gap="0" role="card">
        <appearance>
          <effect type="drop-shadow" x="0" y="12" radius="30" spread="0" color="#E84D8A24" />
        </appearance>

        <!-- HERO stub: theatre photo + deco frame -->
        <frame w="361" h="196">
          <img x="0" y="0" w="361" h="196" fit="cover" src="https://images.unsplash.com/photo-1514306191717-452ec28c7814?auto=format&amp;fit=crop&amp;w=780&amp;h=440&amp;q=80" />
          <rect x="0" y="0" w="361" h="196" fill="linear-gradient(180deg, #0E0A0DCC 0%, #0E0A0D30 32%, #0E0A0D99 64%, #0E0A0DFA 100%)" />

          <!-- deco corner brackets -->
          <rect x="14" y="14" w="24" h="2" fill="$rose" />
          <rect x="14" y="14" w="2" h="24" fill="$rose" />
          <rect x="323" y="14" w="24" h="2" fill="$rose" />
          <rect x="345" y="14" w="2" h="24" fill="$rose" />
          <rect x="14" y="180" w="24" h="2" fill="$rose" />
          <rect x="14" y="158" w="2" h="24" fill="$rose" />
          <rect x="323" y="180" w="24" h="2" fill="$rose" />
          <rect x="345" y="158" w="2" h="24" fill="$rose" />

          <text x="26" y="24" value="EST. 1921 · WEST END REVUE" text-style="Eyebrow" color="$rose-tx" />

          <row x="233" y="22" w="104" h="26" fill="$rose" radius="$r-pill" gap="6" align="middle-center">
            <ellipse w="6" h="6" fill="$on-rose" />
            <text value="ADMIT ONE" text-style="Badge" color="$on-rose" />
          </row>

          <text x="26" y="92" value="THE ROSEWOOD THEATRE" text-style="Wordmark" color="$rose-tx" />
          <text x="26" y="112" w="320" value="The Midnight Revue" text-style="Title" color="$ink" />
          <row x="26" y="152" w="309" gap="8" align="middle-left">
            <row fill="$rose-deep" p="3 8" radius="$r-chip" align="middle-center">
              <text value="ONE NIGHT ONLY" text-style="Badge" color="$rose-tx" />
            </row>
            <text value="A Jazz-Age Cabaret" text-style="Meta" color="$muted" />
          </row>
        </frame>

        <!-- perforation tear-line -->
        <frame w="361" h="24" fill="$panel">
          <ellipse x="-12" y="0" w="24" h="24" fill="$bg" />
          <ellipse x="349" y="0" w="24" h="24" fill="$bg" />
          <rect x="20" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="36" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="52" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="68" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="84" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="100" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="116" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="132" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="148" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="164" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="180" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="196" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="212" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="228" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="244" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="260" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="276" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="292" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="308" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="324" y="11" w="9" h="2" radius="1" fill="$hair-2" />
        </frame>

        <!-- detail body -->
        <col w="361" p="6 16 18 16" gap="14">

          <!-- SECTION / ROW / SEAT -->
          <row w="329" gap="12" align="top-left">
            <col w="fill" gap="5" align="top-left">
              <text value="SECTION" text-style="Label" color="$muted" />
              <text value="Orchestra" text-style="Value" color="$ink" />
            </col>
            <col w="fill" gap="5" align="top-center">
              <text value="ROW" text-style="Label" color="$muted" align="center" />
              <text value="F" text-style="Value" color="$ink" align="center" />
            </col>
            <col w="fill" gap="5" align="top-right">
              <text value="SEAT" text-style="Label" color="$muted" align="right" />
              <text value="108" text-style="Value" color="$ink" align="right" />
            </col>
          </row>

          <line role="divider" w="329" fill="$hair" />

          <!-- DATE / DOORS / CURTAIN -->
          <row w="329" gap="12" align="top-left">
            <col w="fill" gap="5" align="top-left">
              <text value="DATE" text-style="Label" color="$muted" />
              <text value="Sat, Aug 22" text-style="ValueSm" color="$ink" />
            </col>
            <col w="fill" gap="5" align="top-center">
              <text value="DOORS" text-style="Label" color="$muted" align="center" />
              <text value="7:30 PM" text-style="ValueSm" color="$ink" align="center" />
            </col>
            <col w="fill" gap="5" align="top-right">
              <text value="CURTAIN" text-style="Label" color="$muted" align="right" />
              <text value="8:15 PM" text-style="ValueSm" color="$rose-tx" align="right" />
            </col>
          </row>

          <line role="divider" w="329" fill="$hair" />

          <!-- TIER / ADMITS / GATE -->
          <row w="329" gap="12" align="top-left">
            <col w="fill" gap="5" align="top-left">
              <text value="TIER" text-style="Label" color="$muted" />
              <text value="Rose Circle" text-style="ValueSm" color="$ink" />
            </col>
            <col w="fill" gap="5" align="top-center">
              <text value="ADMITS" text-style="Label" color="$muted" align="center" />
              <text value="One" text-style="ValueSm" color="$ink" align="center" />
            </col>
            <col w="fill" gap="5" align="top-right">
              <text value="ENTRY" text-style="Label" color="$muted" align="right" />
              <text value="Foyer B" text-style="ValueSm" color="$ink" align="right" />
            </col>
          </row>

          <line role="divider" w="329" fill="$hair" />

          <!-- barcode plate -->
          <col w="329" gap="10" align="middle-center" pt="2">
            <frame w="329" h="68" fill="$ink" radius="$r-card" clip="true">
              <rect x="16.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="20.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="23.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="28.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="32.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="35.5" y="12" w="4.5" h="44" fill="$bg" />
              <rect x="41.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="46.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="50.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="53.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="58.0" y="12" w="4.5" h="44" fill="$bg" />
              <rect x="64.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="68.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="73.0" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="76.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="80.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="85.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="89.5" y="12" w="4.5" h="44" fill="$bg" />
              <rect x="95.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="100.0" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="103.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="107.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="110.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="115.0" y="12" w="4.5" h="44" fill="$bg" />
              <rect x="121.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="125.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="130.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="134.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="137.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="142.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="146.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="149.5" y="12" w="4.5" h="44" fill="$bg" />
              <rect x="155.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="160.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="164.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="167.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="172.0" y="12" w="4.5" h="44" fill="$bg" />
              <rect x="178.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="182.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="187.0" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="190.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="194.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="199.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="203.5" y="12" w="4.5" h="44" fill="$bg" />
              <rect x="209.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="214.0" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="217.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="221.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="224.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="229.0" y="12" w="4.5" h="44" fill="$bg" />
              <rect x="235.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="239.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="244.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="248.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="251.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="256.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="260.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="263.5" y="12" w="4.5" h="44" fill="$bg" />
              <rect x="269.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="274.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="278.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="281.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="286.0" y="12" w="4.5" h="44" fill="$bg" />
              <rect x="292.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="296.5" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="301.0" y="12" w="1.5" h="44" fill="$bg" />
              <rect x="304.0" y="12" w="3.0" h="44" fill="$bg" />
              <rect x="308.5" y="12" w="1.5" h="44" fill="$bg" />
            </frame>
            <text value="RW-88213  ·  ROSEWOOD  ·  SEQ 0142  ·  ADMIT ONE" text-style="CodeMeta" color="$muted" align="center" />
          </col>

        </col>
      </col>

      <!-- HOUSE / capacity -->
      <col w="361" fill="$panel" border="1 $hair" radius="$r-card" p="16" gap="12" role="card">
        <row w="329" gap="10" align="middle-left">
          <img src="https://api.iconify.design/lucide/users-round.svg?color=%23E84D8A" w="17" h="17" />
          <text w="fill" value="THE HOUSE" text-style="Cat" color="$rose-tx" />
          <text value="210 / 240" text-style="Amount" color="$ink" align="right" />
        </row>
        <frame w="329" h="3" clip="true">
          <rect x="0" y="0" w="329" h="1" fill="$rose" />
          <rect x="0" y="2" w="329" h="1" fill="$rose-deep" />
        </frame>
        <frame w="328" h="8" radius="$r-pill" clip="true">
          <rect x="0" y="0" w="328" h="8" fill="$panel-2" />
          <rect x="0" y="0" w="287" h="8" fill="$rose" />
        </frame>
        <row w="329" gap="10" align="middle-left">
          <text w="fill" value="210 of 240 seats claimed" text-style="Sub" color="$muted" />
          <text value="30 left" text-style="Meta" color="$rose-tx" align="right" />
        </row>
      </col>

      <!-- RECEIPT -->
      <col w="361" fill="$panel" border="1 $hair" radius="$r-card" p="16" gap="11" role="card">
        <row w="329" gap="10" align="middle-left">
          <img src="https://api.iconify.design/lucide/receipt.svg?color=%23E84D8A" w="17" h="17" />
          <text w="fill" value="TICKET RECEIPT" text-style="Cat" color="$rose-tx" />
        </row>
        <frame w="329" h="3" clip="true">
          <rect x="0" y="0" w="329" h="1" fill="$rose" />
          <rect x="0" y="2" w="329" h="1" fill="$rose-deep" />
        </frame>
        <row w="329" align="middle-left">
          <text w="fill" value="Face value" text-style="ItemName" color="$ink" />
          <text value="$72.00" text-style="Amount" color="$ink" align="right" />
        </row>
        <row w="329" align="middle-left">
          <text w="fill" value="Service fee" text-style="ItemName" color="$ink" />
          <text value="+$10.80" text-style="Amount" color="$ink" align="right" />
        </row>
        <row w="329" align="middle-left">
          <text w="fill" value="Facility fee" text-style="ItemName" color="$ink" />
          <text value="+$4.25" text-style="Amount" color="$ink" align="right" />
        </row>
        <row w="329" align="middle-left">
          <col w="fill" gap="2" align="top-left">
            <text value="Rose Circle credit" text-style="ItemName" color="$rose-tx" />
            <text value="Member No. 88213" text-style="Sub" color="$muted" />
          </col>
          <text value="-$6.00" text-style="Amount" color="$rose-tx" align="right" />
        </row>
        <frame w="329" h="3" clip="true">
          <rect x="0" y="0" w="329" h="1" fill="$rose" />
          <rect x="0" y="2" w="329" h="1" fill="$rose-deep" />
        </frame>
        <frame w="329" h="64" radius="$r-card" clip="true">
          <rect x="0" y="0" w="329" h="64" fill="$rose" />
          <rect x="0" y="0" w="9" h="9" fill="$on-rose" />
          <rect x="320" y="0" w="9" h="9" fill="$on-rose" />
          <rect x="0" y="55" w="9" h="9" fill="$on-rose" />
          <rect x="320" y="55" w="9" h="9" fill="$on-rose" />
          <col x="16" y="13" w="180" gap="3" align="top-left">
            <text value="TOTAL PAID" text-style="Label" color="$on-rose" />
            <text value="Paid Aug 2 · Amex ···· 3007" text-style="Sub" color="$on-rose" />
          </col>
          <text x="149" y="17" w="164" value="$81.05" text-style="Total" color="$on-rose" align="right" />
        </frame>
      </col>

      <row w="361" gap="8" align="middle-left">
        <img src="https://api.iconify.design/lucide/clock.svg?color=%23C2A7B6" w="15" h="15" />
        <text w="fill" value="Doors 7:30 PM. Latecomers seated at intermission, no re-entry." text-style="Sub" color="$muted" />
      </row>

    </col>

    <!-- sticky action bar (last flow child) -->
    <col w="393" fill="$panel" border-top="1 $rose" p="14 16 10 16" gap="10" role="toolbar">
      <row w="361" gap="10" align="middle-left">
        <row w="128" h="52" fill="$bg" border="1 $rose" radius="$r-card" gap="8" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/wallet.svg?color=%23FF89B4" w="17" h="17" />
          <text value="Wallet" text-style="BtnLabel" color="$rose-tx" />
        </row>
        <row w="fill" h="52" fill="$rose" radius="$r-card" gap="8" align="middle-center" role="button">
          <appearance>
            <effect type="drop-shadow" x="0" y="4" radius="14" spread="0" color="#E84D8A45" />
          </appearance>
          <img src="https://api.iconify.design/lucide/ticket.svg?color=%231A0510" w="19" h="19" />
          <text value="Show at Door" text-style="BtnLabel" color="$on-rose" />
        </row>
      </row>
      <row w="361" gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/shield-check.svg?color=%23C2A7B6" w="14" h="14" />
        <text value="Verified admission · Rosewood Box Office" text-style="Meta" color="$muted" align="center" />
      </row>
      <row w="361" h="16" align="bottom-center">
        <rect w="140" h="5" radius="3" fill="$hair-2" />
      </row>
    </col>

  </col>
</gui>

```