---
title: "The Orpheum Room · Reserve Your Evening"
platform: android
slug: the-orpheum-room-reserve-your-evening
screens: ["checkout"]
domains: ["booking"]
style: null
fonts: ["Poiret One", "Jost"]
roles: ["top-navigation-bar", "button", "badge", "card", "text-field"]
score: {clean: 100, consistent: 85, accessible: 84, comprehensible: 24}
url: https://gui.farm/android/the-orpheum-room-reserve-your-evening
raw: https://gui.farm/android/the-orpheum-room-reserve-your-evening/design.guix
download: https://gui.farm/android/the-orpheum-room-reserve-your-evening.gui
---

# The Orpheum Room · Reserve Your Evening

An Art Deco Android reservation checkout for a 1920s jazz supper club, confirming a Saturday dinner-and-show booking with seating choice, an itemized charge summary, and a deposit.

- **Live preview:** https://gui.farm/android/the-orpheum-room-reserve-your-evening
- **Raw source:** https://gui.farm/android/the-orpheum-room-reserve-your-evening/design.guix
- **Download (.gui):** https://gui.farm/android/the-orpheum-room-reserve-your-evening.gui

## Source (design.guix)

```xml
<gui version="0.2" name="The Orpheum Room · Reserve Your Evening">
  <tokens>
    <color name="bg" value="#141017" />
    <color name="panel" value="#1D1822" />
    <color name="raised" value="#271F2D" />
    <color name="ink" value="#F5EEF1" />
    <color name="body" value="#D9CDD5" />
    <color name="muted" value="#A99DA8" />
    <color name="rose" value="#E86A8C" />
    <color name="rose-bright" value="#F6B0C4" />
    <color name="rose-deep" value="#3A1622" />
    <color name="on-rose" value="#1A0E14" />
    <color name="edge" value="#3B2F40" />
    <color name="line" value="#2A2431" />
  </tokens>
  <fonts>
    <font family="Poiret One" source="google" weights="400" styles="normal" />
    <font family="Jost" source="google" weights="300 400 500 600" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Deco" font-family="Poiret One" font-size="30" font-weight="400" line-height="34" />
    <text-style name="DecoSeat" font-family="Poiret One" font-size="16" font-weight="400" line-height="20" />
    <text-style name="Eyebrow" font-family="Jost" font-size="11" font-weight="600" line-height="14" />
    <text-style name="Title" font-family="Jost" font-size="17" font-weight="600" line-height="22" />
    <text-style name="Body" font-family="Jost" font-size="13" font-weight="400" line-height="19" />
    <text-style name="Label" font-family="Jost" font-size="13" font-weight="500" line-height="18" />
    <text-style name="LabelB" font-family="Jost" font-size="13" font-weight="600" line-height="18" />
    <text-style name="Caption" font-family="Jost" font-size="11" font-weight="500" line-height="15" />
    <text-style name="Num" font-family="Jost" font-size="13" font-weight="500" line-height="18" />
    <text-style name="NumB" font-family="Jost" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Metric" font-family="Jost" font-size="22" font-weight="500" line-height="28" />
    <text-style name="Price" font-family="Jost" font-size="18" font-weight="600" line-height="24" />
    <text-style name="Tiny" font-family="Jost" font-size="10" font-weight="500" line-height="13" />
  </styles>
  <col w="360" fill="$bg">
    <!-- ===== status bar (untagged) ===== -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text value="9:41" text-style="Label" color="$ink" />
      <row gap="6" align="middle-right">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%23F5EEF1"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%23F5EEF1" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt.svg?color=%23F5EEF1"
          w="16"
          h="16"
        />
      </row>
    </row>
    <!-- ===== top navigation ===== -->
    <row role="top-navigation-bar" w="360" h="56" p="0 6" gap="2" align="middle-left">
      <row role="button" w="44" h="44" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23F5EEF1"
          w="24"
          h="24"
        />
      </row>
      <text w="fill" value="Confirm reservation" text-style="Title" color="$ink" align="center" />
      <row role="button" w="44" h="44" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/help-outline-rounded.svg?color=%23A99DA8"
          w="22"
          h="22"
        />
      </row>
    </row>
    <!-- ===== hero photograph ===== -->
    <row w="fill" h="250" clip="true">
      <img
        src="https://images.unsplash.com/photo-1761775915848-467e41c1c4db?w=1600&amp;q=80&amp;auto=format&amp;fit=crop"
        x="0"
        y="0"
        w="360"
        h="fill"
fit="cover"
      />
    </row>
    <!-- ===== deco masthead ===== -->
    <col w="360" fill="$panel" border="0 0 1 0 $edge" p="18 20 20 20" gap="12" align="middle-center">
      <row role="badge" h="26" fill="$rose-deep" border="1 $rose" p="0 12" gap="7" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%23F6B0C4"
          w="14"
          h="14"
        />
        <text
          value="Holding your table · 5:52"
          text-style="Caption"
          color="$rose-bright"
          letter-spacing="0.4"
        />
      </row>
      <text
        value="JAZZ SUPPER CLUB · SINCE 1926"
        text-style="Eyebrow"
        color="$rose"
        letter-spacing="2.4"
        align="center"
      />
      <text value="The Orpheum Room" text-style="Deco" color="$ink" letter-spacing="0.5" align="center" />
      <row w="220" gap="10" align="middle-center">
        <line w="fill" fill="$rose" />
        <img
          src="https://api.iconify.design/material-symbols/diamond-rounded.svg?color=%23E86A8C"
          w="11"
          h="11"
        />
        <line w="fill" fill="$rose" />
      </row>
      <text
        value="54 Brandt Street · River North, Chicago"
        text-style="Tiny"
        color="$muted"
        letter-spacing="0.6"
        align="center"
      />
    </col>
    <!-- ===== body ===== -->
    <col w="360" p="20 16 20 16" gap="18">
      <!-- your table -->
      <col role="card" w="328" fill="$panel" border="1 $edge" gap="0">
        <rect w="328" h="3" fill="$rose" />
        <col w="328" p="16 16 14 16" gap="14">
          <col gap="6">
            <text value="YOUR TABLE" text-style="Eyebrow" color="$rose" letter-spacing="1.8" />
            <rect w="24" h="2" fill="$rose" />
          </col>
          <row w="296" gap="12" align="middle-left">
            <col w="34" h="34" fill="$raised" align="middle-center">
              <img
                src="https://api.iconify.design/material-symbols/calendar-month-rounded.svg?color=%23F6B0C4"
                w="19"
                h="19"
              />
            </col>
            <col w="fill" gap="1">
              <text value="Saturday, September 12, 2026" text-style="LabelB" color="$ink" />
              <text value="Dinner service" text-style="Caption" color="$muted" />
            </col>
            <text value="Edit" text-style="LabelB" color="$rose-bright" />
          </row>
          <line w="296" fill="$line" />
          <row w="296" gap="12" align="middle-left">
            <col w="34" h="34" fill="$raised" align="middle-center">
              <img
                src="https://api.iconify.design/material-symbols/schedule-rounded.svg?color=%23F6B0C4"
                w="19"
                h="19"
              />
            </col>
            <col w="fill" gap="1">
              <text value="8:30 PM seating" text-style="LabelB" color="$ink" />
              <text value="Doors 7:45 PM · first set 9:00 PM" text-style="Caption" color="$muted" />
            </col>
            <text value="Edit" text-style="LabelB" color="$rose-bright" />
          </row>
          <line w="296" fill="$line" />
          <row w="296" gap="12" align="middle-left">
            <col w="34" h="34" fill="$raised" align="middle-center">
              <img
                src="https://api.iconify.design/material-symbols/group-rounded.svg?color=%23F6B0C4"
                w="19"
                h="19"
              />
            </col>
            <col w="fill" gap="1">
              <text value="Party of 2" text-style="LabelB" color="$ink" />
              <text value="Reserved for Della Ashford" text-style="Caption" color="$muted" />
            </col>
            <text value="Edit" text-style="LabelB" color="$rose-bright" />
          </row>
        </col>
      </col>
      <!-- seating -->
      <col w="328" gap="12">
        <col gap="6">
          <text value="CHOOSE YOUR SEATING" text-style="Eyebrow" color="$rose" letter-spacing="1.8" />
          <rect w="24" h="2" fill="$rose" />
        </col>
        <!-- selected: main floor -->
        <col w="328" fill="$panel" border="2 $rose" p="14" gap="12">
          <row w="300" gap="12" align="middle-left">
            <col w="fill" gap="2">
              <text value="Main Floor" text-style="DecoSeat" color="$ink" />
              <text value="Center room, closest to the stage" text-style="Body" color="$body" />
            </col>
            <col w="24" h="24" fill="$rose" align="middle-center">
              <img
                src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%231A0E14"
                w="17"
                h="17"
              />
            </col>
          </row>
          <frame w="300" h="6" clip="true">
            <rect x="0" y="0" w="300" h="6" fill="$raised" />
            <rect x="0" y="0" w="225" h="6" fill="$rose" />
          </frame>
          <row w="300" gap="8" align="middle-left">
            <text w="fill" value="6 of 24 tables open tonight" text-style="Caption" color="$muted" />
            <text value="Included" text-style="Caption" color="$rose-bright" />
          </row>
        </col>
        <!-- mezzanine -->
        <row w="328" fill="$panel" border="1 $edge" p="14" gap="12" align="middle-left">
          <col w="34" h="34" fill="$raised" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/event-seat-rounded.svg?color=%23A99DA8"
              w="19"
              h="19"
            />
          </col>
          <col w="fill" gap="2">
            <text value="Mezzanine" text-style="DecoSeat" color="$ink" />
            <text value="Elevated rail, full view of the band" text-style="Body" color="$body" />
          </col>
          <text value="+ $12 / seat" text-style="Caption" color="$muted" />
        </row>
        <!-- bar rail -->
        <row w="328" fill="$panel" border="1 $edge" p="14" gap="12" align="middle-left">
          <col w="34" h="34" fill="$raised" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/local-bar-rounded.svg?color=%23A99DA8"
              w="19"
              h="19"
            />
          </col>
          <col w="fill" gap="2">
            <text value="Bar Rail" text-style="DecoSeat" color="$ink" />
            <text value="Walk-up counter, limited late menu" text-style="Body" color="$body" />
          </col>
          <text value="- $20 / seat" text-style="Caption" color="$muted" />
        </row>
      </col>
      <!-- included this evening -->
      <col role="card" w="328" fill="$panel" border="1 $edge" p="16" gap="14">
        <col gap="6">
          <text value="INCLUDED THIS EVENING" text-style="Eyebrow" color="$rose" letter-spacing="1.8" />
          <rect w="24" h="2" fill="$rose" />
        </col>
        <row w="296" gap="12" align="top-left">
          <text value="01" text-style="DecoSeat" color="$rose" w="22" />
          <col w="fill" gap="2">
            <text value="Five-Course Prix Fixe" text-style="Title" color="$ink" />
            <text value="Autumn menu by Chef Aurelio Vance" text-style="Body" color="$body" />
          </col>
          <text value="$95 / guest" text-style="Num" color="$body" />
        </row>
        <line w="296" fill="$line" />
        <row w="296" gap="12" align="top-left">
          <text value="02" text-style="DecoSeat" color="$rose" w="22" />
          <col w="fill" gap="2">
            <text value="Live Set · The Marguerite Trio" text-style="Title" color="$ink" />
            <text value="Two 40-minute sets, reserved seating" text-style="Body" color="$body" />
          </col>
          <text value="$28 / seat" text-style="Num" color="$body" />
        </row>
        <line w="296" fill="$line" />
        <row w="296" gap="12" align="top-left">
          <text value="03" text-style="DecoSeat" color="$rose" w="22" />
          <col w="fill" gap="2">
            <text value="Sommelier Wine Pairing" text-style="Title" color="$ink" />
            <text value="Four pours chosen for the table" text-style="Body" color="$body" />
          </col>
          <text value="$65" text-style="Num" color="$body" />
        </row>
      </col>
      <!-- summary of charges -->
      <col role="card" w="328" fill="$panel" border="1 $edge" p="16" gap="12">
        <col gap="6">
          <text value="SUMMARY OF CHARGES" text-style="Eyebrow" color="$rose" letter-spacing="1.8" />
          <rect w="24" h="2" fill="$rose" />
        </col>
        <row w="296" gap="12" align="middle-left">
          <text w="fill" value="Prix Fixe Dinner · 2 guests" text-style="Label" color="$body" />
          <text value="$190.00" text-style="Num" color="$ink" />
        </row>
        <row w="296" gap="12" align="middle-left">
          <text w="fill" value="Reserved Show Seating · 2" text-style="Label" color="$body" />
          <text value="$56.00" text-style="Num" color="$ink" />
        </row>
        <row w="296" gap="12" align="middle-left">
          <text w="fill" value="Sommelier Wine Pairing · 1" text-style="Label" color="$body" />
          <text value="$65.00" text-style="Num" color="$ink" />
        </row>
        <line w="296" fill="$line" />
        <row w="296" gap="12" align="middle-left">
          <text w="fill" value="Subtotal" text-style="Label" color="$muted" />
          <text value="$311.00" text-style="Num" color="$body" />
        </row>
        <row w="296" gap="12" align="middle-left">
          <text w="fill" value="Service (18%)" text-style="Label" color="$muted" />
          <text value="$55.98" text-style="Num" color="$body" />
        </row>
        <row w="296" gap="12" align="middle-left">
          <text w="fill" value="Amusement tax (5%)" text-style="Label" color="$muted" />
          <text value="$2.80" text-style="Num" color="$body" />
        </row>
        <row w="296" gap="10" align="middle-center">
          <line w="fill" fill="$rose" />
          <img
            src="https://api.iconify.design/material-symbols/diamond-rounded.svg?color=%23E86A8C"
            w="9"
            h="9"
          />
          <line w="fill" fill="$rose" />
        </row>
        <row w="296" gap="12" align="middle-left">
          <col w="fill" gap="1">
            <text value="Total" text-style="LabelB" color="$ink" />
            <text value="Deposit today $100.00 · balance at table" text-style="Tiny" color="$muted" />
          </col>
          <text value="$369.78" text-style="Metric" color="$rose-bright" />
        </row>
      </col>
      <!-- promo code -->
      <row
        role="text-field"
        w="328"
        h="50"
        fill="$panel"
        border="1 $edge"
        p="0 6 0 14"
        gap="10"
        align="middle-left"
      >
        <img
          src="https://api.iconify.design/material-symbols/redeem-rounded.svg?color=%23A99DA8"
          w="20"
          h="20"
        />
        <text w="fill" value="Member or promo code" text-style="Label" color="$muted" />
        <row role="button" h="38" fill="$raised" border="1 $rose" p="0 16" align="middle-center">
          <text value="Apply" text-style="LabelB" color="$rose-bright" letter-spacing="0.4" />
        </row>
      </row>
      <!-- policy -->
      <row w="328" gap="10" align="top-left">
        <img
          src="https://api.iconify.design/material-symbols/verified-rounded.svg?color=%23A99DA8"
          w="18"
          h="18"
        />
        <text
          w="fill"
          value="Cancel at no charge up to 48 hours before your reservation. Within 48 hours, the $100 deposit is retained. A 15-minute grace period is held for late arrivals."
          text-style="Caption"
          color="$muted"
        />
      </row>
    </col>
    <!-- ===== sticky action bar (last flow child) ===== -->
    <col w="360" fill="$panel" border="0 0 0 0 $edge" p="12 16 16 16" gap="12">
      <line w="328" fill="$edge" />
      <row w="328" gap="12" align="middle-left">
        <col w="fill" gap="1">
          <text value="$369.78" text-style="Price" color="$ink" />
          <text value="Deposit $100.00 charged today" text-style="Tiny" color="$muted" />
        </col>
        <row role="button" h="52" fill="$rose" p="0 22" gap="9" align="middle-center">
          <text value="Confirm reservation" text-style="LabelB" color="$on-rose" letter-spacing="0.5" />
          <img
            src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%231A0E14"
            w="20"
            h="20"
          />
        </row>
      </row>
      <row w="328" h="5" align="middle-center">
        <rect w="120" h="5" fill="$raised" />
      </row>
    </col>
  </col>
</gui>
```