---
title: "The Arcadia Grand Hotel · Guest Folio, Suite 1204"
platform: ios
slug: the-arcadia-grand-hotel-guest-folio-suite-1204
screens: ["invoice"]
domains: ["booking"]
style: "art-deco"
fonts: ["Cinzel", "SF Pro Display"]
roles: ["top-navigation-bar", "button", "card", "table", "toolbar"]
score: {clean: 100, consistent: 82, accessible: 86, comprehensible: 42}
url: https://gui.farm/ios/the-arcadia-grand-hotel-guest-folio-suite-1204
raw: https://gui.farm/ios/the-arcadia-grand-hotel-guest-folio-suite-1204/design.guix
download: https://gui.farm/ios/the-arcadia-grand-hotel-guest-folio-suite-1204.gui
---

# The Arcadia Grand Hotel · Guest Folio, Suite 1204

An art-deco iOS guest folio (final hotel bill) for a grand 1929 hotel, itemizing room, dining and spa charges with taxes and a gold total due.

- **Live preview:** https://gui.farm/ios/the-arcadia-grand-hotel-guest-folio-suite-1204
- **Raw source:** https://gui.farm/ios/the-arcadia-grand-hotel-guest-folio-suite-1204/design.guix
- **Download (.gui):** https://gui.farm/ios/the-arcadia-grand-hotel-guest-folio-suite-1204.gui

## Source (design.guix)

```xml
<gui version="0.2" name="The Arcadia Grand Hotel · Guest Folio, Suite 1204">
  <tokens>
    <color name="bg" value="#12100D" />
    <color name="panel" value="#1D1A15" />
    <color name="panel-2" value="#262117" />
    <color name="ink" value="#F4ECDA" />
    <color name="muted" value="#B9AD95" />
    <color name="gold" value="#CBA24C" />
    <color name="gold-tx" value="#E2C374" />
    <color name="gold-bright" value="#EAD79A" />
    <color name="oxblood" value="#7C2333" />
    <color name="oxblood-tx" value="#E0929E" />
    <color name="hair" value="#3A3220" />
    <color name="on-gold" value="#17130A" />
    <number name="r-card" value="4" />
    <number name="r-pill" value="999" />
  </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="Crest" font-family="Cinzel" font-size="22" font-weight="700" line-height="24" />
    <text-style name="Hotel" font-family="Cinzel" font-size="25" font-weight="600" line-height="28" letter-spacing="1.5" />
    <text-style name="Cat" font-family="Cinzel" font-size="15" font-weight="700" line-height="18" letter-spacing="1.2" />
    <text-style name="Total" font-family="Cinzel" font-size="30" font-weight="700" line-height="32" 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="11" font-weight="700" line-height="14" letter-spacing="1" />
    <text-style name="Badge" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="12" letter-spacing="1" />
    <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="ItemName" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="19" />
    <text-style name="ItemSub" 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="AmountSm" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="17" />
    <text-style name="Sub" font-family="SF Pro Display" font-size="13" font-weight="500" line-height="18" />
    <text-style name="H2" font-family="SF Pro Display" font-size="16" font-weight="700" line-height="20" />
    <text-style name="BtnLabel" font-family="SF Pro Display" font-size="15" font-weight="700" line-height="18" letter-spacing="0.4" />
    <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=%23F4ECDA" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F4ECDA" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F4ECDA" 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=%23E2C374" w="24" h="24" />
      </row>
      <col gap="2" align="middle-center">
        <text value="GUEST FOLIO" text-style="Label" color="$ink" align="center" />
        <text value="FOLIO #AC-4471" 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=%23E2C374" w="20" h="20" />
      </row>
    </row>

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

      <!-- HERO: hotel photo + deco crest -->
      <frame w="361" h="228" radius="$r-card" clip="true" border="1 $gold">
        <img x="0" y="0" w="361" h="228" fit="cover" src="https://images.unsplash.com/photo-1759177715489-74112089de1a?auto=format&amp;fit=crop&amp;w=780&amp;h=520&amp;q=80" />
        <rect x="0" y="0" w="361" h="228" fill="linear-gradient(180deg, #12100DC4 0%, #12100D42 26%, #12100D85 60%, #12100DF7 100%)" />
        <text x="18" y="18" value="EST. 1929 · OCEAN AVENUE" text-style="Eyebrow" color="$gold-tx" />
        <row x="233" y="14" w="110" h="26" fill="$oxblood" border="1 $gold" radius="$r-pill" gap="6" align="middle-center">
          <ellipse w="6" h="6" fill="$gold-bright" />
          <text value="BALANCE DUE" text-style="Badge" color="$ink" />
        </row>
        <col x="18" y="104" w="44" h="44" fill="$gold" radius="$r-pill" align="middle-center">
          <text value="A" text-style="Crest" color="$on-gold" align="center" />
        </col>
        <text x="18" y="160" w="325" value="THE ARCADIA GRAND" text-style="Hotel" color="$gold-bright" />
        <text x="18" y="196" w="325" value="Palm Court Wing  ·  Suite 1204" text-style="Meta" color="$muted" />
      </frame>

      <!-- BILL TO -->
      <row w="361" fill="$panel" border="1 $hair" radius="$r-card" p="14" gap="12" align="middle-left" role="card">
        <col w="46" h="46" fill="$panel-2" border="1 $gold" radius="$r-pill" align="middle-center">
          <text value="NH" text-style="H2" color="$gold-tx" align="center" />
        </col>
        <col w="fill" gap="3" align="middle-left">
          <text value="Naomi Hartley" text-style="H2" color="$ink" />
          <text value="Arcadia Club · Gold Member · No. 88213" text-style="Sub" color="$muted" />
        </col>
      </row>

      <!-- STAY SUMMARY strip -->
      <row w="fill" fill="$panel" border="1 $hair" radius="$r-card" p="14 16" gap="auto" align="middle-left" role="card">
        <col gap="5" align="top-left">
          <text value="ARRIVED" text-style="Eyebrow" color="$muted" />
          <text value="Thu, Aug 13" text-style="AmountSm" color="$ink" />
        </col>
        <col w="18" h="34" align="middle-center">
          <img src="https://api.iconify.design/lucide/moon-star.svg?color=%23CBA24C" w="16" h="16" />
        </col>
        <col gap="5" align="top-center">
          <text value="DEPARTED" text-style="Eyebrow" color="$muted" align="center" />
          <text value="Sun, Aug 16" text-style="AmountSm" color="$ink" align="center" />
        </col>
        <col gap="5" align="top-right">
          <text value="STAY" text-style="Eyebrow" color="$muted" align="right" />
          <text value="3 nights · 2 guests" text-style="AmountSm" color="$ink" align="right" />
        </col>
      </row>

      <!-- GROUP 1: ROOM & SUITE -->
      <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/bed-double.svg?color=%23CBA24C" w="18" h="18" />
          <text w="fill" value="ROOM &amp; SUITE" text-style="Cat" color="$gold-tx" />
          <text value="$1,120.00" 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="$gold" />
          <rect x="0" y="2" w="329" h="1" fill="$hair" />
        </frame>
        <col w="329" gap="0" role="table">
          <row w="329" p="2 0 12 0" gap="10" align="middle-left" border-bottom="1 $hair">
            <col w="fill" gap="3" align="top-left">
              <text value="Palm Court Suite · Thu Aug 13" text-style="ItemName" color="$ink" />
              <text value="Standard night" text-style="ItemSub" color="$muted" />
            </col>
            <text value="$342.00" text-style="Amount" color="$ink" align="right" />
          </row>
          <row w="329" p="12 0" gap="10" align="middle-left" border-bottom="1 $hair">
            <col w="fill" gap="3" align="top-left">
              <text value="Palm Court Suite · Fri Aug 14" text-style="ItemName" color="$ink" />
              <text value="Weekend night" text-style="ItemSub" color="$muted" />
            </col>
            <text value="$389.00" text-style="Amount" color="$ink" align="right" />
          </row>
          <row w="329" p="12 0 0 0" gap="10" align="middle-left">
            <col w="fill" gap="3" align="top-left">
              <text value="Palm Court Suite · Sat Aug 15" text-style="ItemName" color="$ink" />
              <text value="Weekend night" text-style="ItemSub" color="$muted" />
            </col>
            <text value="$389.00" text-style="Amount" color="$ink" align="right" />
          </row>
        </col>
      </col>

      <!-- GROUP 2: DINING & BAR -->
      <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/wine.svg?color=%23CBA24C" w="18" h="18" />
          <text w="fill" value="DINING &amp; BAR" text-style="Cat" color="$gold-tx" />
          <text value="$290.90" 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="$gold" />
          <rect x="0" y="2" w="329" h="1" fill="$hair" />
        </frame>
        <col w="329" gap="0" role="table">
          <row w="329" p="2 0 12 0" gap="10" align="middle-left" border-bottom="1 $hair">
            <col w="fill" gap="3" align="top-left">
              <text value="Dinner, The Palm Court" text-style="ItemName" color="$ink" />
              <text value="Table 12 · Aug 14" text-style="ItemSub" color="$muted" />
            </col>
            <text value="$186.40" text-style="Amount" color="$ink" align="right" />
          </row>
          <row w="329" p="12 0" gap="10" align="middle-left" border-bottom="1 $hair">
            <col w="fill" gap="3" align="top-left">
              <text value="In-Room Breakfast" text-style="ItemName" color="$ink" />
              <text value="2 mornings" text-style="ItemSub" color="$muted" />
            </col>
            <text value="$63.00" text-style="Amount" color="$ink" align="right" />
          </row>
          <row w="329" p="12 0 0 0" gap="10" align="middle-left">
            <col w="fill" gap="3" align="top-left">
              <text value="Minibar &amp; Lounge" text-style="ItemName" color="$ink" />
              <text value="Aug 13-15" text-style="ItemSub" color="$muted" />
            </col>
            <text value="$41.50" text-style="Amount" color="$ink" align="right" />
          </row>
        </col>
      </col>

      <!-- GROUP 3: SPA & SERVICES -->
      <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/flower-2.svg?color=%23CBA24C" w="18" h="18" />
          <text w="fill" value="SPA &amp; SERVICES" text-style="Cat" color="$gold-tx" />
          <text value="$271.00" 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="$gold" />
          <rect x="0" y="2" w="329" h="1" fill="$hair" />
        </frame>
        <col w="329" gap="0" role="table">
          <row w="329" p="2 0 12 0" gap="10" align="middle-left" border-bottom="1 $hair">
            <col w="fill" gap="3" align="top-left">
              <text value="Meridian Spa, 60 min" text-style="ItemName" color="$ink" />
              <text value="Deep tissue · Aug 15" text-style="ItemSub" color="$muted" />
            </col>
            <text value="$175.00" text-style="Amount" color="$ink" align="right" />
          </row>
          <row w="329" p="12 0 0 0" gap="10" align="middle-left">
            <col w="fill" gap="3" align="top-left">
              <text value="Valet Parking" text-style="ItemName" color="$ink" />
              <text value="3 nights" text-style="ItemSub" color="$muted" />
            </col>
            <text value="$96.00" text-style="Amount" color="$ink" align="right" />
          </row>
        </col>
      </col>

      <!-- SUMMARY + TOTAL -->
      <col w="361" fill="$panel" border="1 $hair" radius="$r-card" p="16" gap="11" role="card">
        <row w="329" align="middle-left">
          <text w="fill" value="SUBTOTAL" text-style="Label" color="$muted" />
          <text value="$1,681.90" text-style="Amount" color="$ink" align="right" />
        </row>
        <row w="329" align="middle-left">
          <col w="fill" gap="2" align="top-left">
            <text value="RESORT FEE" text-style="Label" color="$muted" />
            <text value="3 nights × $35.00" text-style="ItemSub" color="$muted" />
          </col>
          <text value="+$105.00" text-style="Amount" color="$ink" align="right" />
        </row>
        <row w="329" align="middle-left">
          <col w="fill" gap="2" align="top-left">
            <text value="TAXES &amp; OCCUPANCY" text-style="Label" color="$muted" />
            <text value="14.75%" text-style="ItemSub" color="$muted" />
          </col>
          <text value="+$263.57" text-style="Amount" color="$ink" align="right" />
        </row>
        <row w="329" align="middle-left">
          <col w="fill" gap="2" align="top-left">
            <text value="ARCADIA CLUB CREDIT" text-style="Label" color="$oxblood-tx" />
            <text value="Gold member" text-style="ItemSub" color="$oxblood-tx" />
          </col>
          <text value="-$75.00" text-style="Amount" color="$oxblood-tx" align="right" />
        </row>
        <frame w="329" h="3" clip="true">
          <rect x="0" y="0" w="329" h="1" fill="$gold" />
          <rect x="0" y="2" w="329" h="1" fill="$hair" />
        </frame>
        <frame w="329" h="66" radius="$r-card" clip="true">
          <rect x="0" y="0" w="329" h="66" fill="$gold" />
          <rect x="0" y="0" w="10" h="10" fill="$on-gold" />
          <rect x="319" y="0" w="10" h="10" fill="$on-gold" />
          <rect x="0" y="56" w="10" h="10" fill="$on-gold" />
          <rect x="319" y="56" w="10" h="10" fill="$on-gold" />
          <col x="16" y="13" w="180" gap="3" align="top-left">
            <text value="TOTAL DUE" text-style="Label" color="$on-gold" />
            <text value="Charged at check-out" text-style="ItemSub" color="$on-gold" />
          </col>
          <text x="149" y="17" w="164" value="$1,975.47" text-style="Total" color="$on-gold" align="right" />
        </frame>
      </col>

      <row w="361" gap="8" align="middle-left">
        <img src="https://api.iconify.design/lucide/concierge-bell.svg?color=%23B9AD95" w="15" h="15" />
        <text w="fill" value="Posts to Amex ···· 3007. Dial 0 for the concierge desk." text-style="Sub" color="$muted" />
      </row>

    </col>

    <!-- sticky action bar (last flow child) -->
    <col w="393" fill="$panel" border-top="1 $gold" 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 $gold" radius="$r-card" gap="8" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/calendar-days.svg?color=%23E2C374" w="17" h="17" />
          <text value="By day" text-style="BtnLabel" color="$gold-tx" />
        </row>
        <row w="fill" h="52" fill="$gold" radius="$r-card" gap="8" align="middle-center" role="button">
          <appearance>
            <effect type="drop-shadow" x="0" y="4" radius="14" spread="0" color="#CBA24C40" />
          </appearance>
          <img src="https://api.iconify.design/lucide/check.svg?color=%2317130A" w="19" h="19" />
          <text value="Settle Folio · $1,975.47" text-style="BtnLabel" color="$on-gold" />
        </row>
      </row>
      <row w="361" gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/shield-check.svg?color=%23B9AD95" w="14" h="14" />
        <text value="Secured settlement · card on file or front desk" 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" />
      </row>
    </col>

  </col>
</gui>

```