---
title: "The Ember Room · Cocktail List"
platform: web
slug: the-ember-room-cocktail-list
screens: ["menu"]
domains: []
style: "art-deco"
fonts: ["Poiret One", "Cinzel", "Jost"]
roles: ["card", "table", "button"]
score: {clean: 100, consistent: 81, accessible: 78, comprehensible: 13}
url: https://gui.farm/web/the-ember-room-cocktail-list
raw: https://gui.farm/web/the-ember-room-cocktail-list/design.guix
download: https://gui.farm/web/the-ember-room-cocktail-list.gui
---

# The Ember Room · Cocktail List

An art-deco cocktail list for a 1920s speakeasy, with signature drinks, strength meters, a barkeep's feature pour, and a whisky flight.

- **Live preview:** https://gui.farm/web/the-ember-room-cocktail-list
- **Raw source:** https://gui.farm/web/the-ember-room-cocktail-list/design.guix
- **Download (.gui):** https://gui.farm/web/the-ember-room-cocktail-list.gui

## Source (design.guix)

```xml
<gui version="0.2" name="The Ember Room · Cocktail List">
  <tokens>
    <color name="bg" value="#14100C" />
    <color name="panel" value="#1C160F" />
    <color name="panel-2" value="#241C13" />
    <color name="ink" value="#F1E7D2" />
    <color name="muted" value="#B7A88C" />
    <color name="faint" value="#9C8E72" />
    <color name="ember" value="#C24A1E" />
    <color name="ember-tx" value="#EE7B3B" />
    <color name="ember-deep" value="#8F3212" />
    <color name="ember-tint" value="#3A1E12" />
    <color name="hair" value="#3A2E1E" />
    <number name="r-card" value="4" />
    <number name="r-sm" value="3" />
    <number name="r-pill" value="999" />
  </tokens>

  <fonts>
    <font family="Poiret One" source="google" weights="400" styles="normal" />
    <font family="Cinzel" source="google" weights="400 600 700" styles="normal" />
    <font family="Jost" source="google" weights="400 500 600" styles="normal" />
  </fonts>

  <styles>
    <text-style name="Wordmark" font-family="Poiret One" font-size="54" font-weight="400" line-height="54" letter-spacing="6" />
    <text-style name="Crest" font-family="Cinzel" font-size="22" font-weight="700" line-height="24" letter-spacing="1" />
    <text-style name="Kicker" font-family="Cinzel" font-size="11" font-weight="700" line-height="14" letter-spacing="3" />
    <text-style name="Sect" font-family="Cinzel" font-size="20" font-weight="700" line-height="24" letter-spacing="2" />
    <text-style name="Feature" font-family="Cinzel" font-size="26" font-weight="700" line-height="30" letter-spacing="0.5" />
    <text-style name="ItemName" font-family="Jost" font-size="16" font-weight="600" line-height="20" letter-spacing="0.2" />
    <text-style name="Spirit" font-family="Jost" font-size="12" font-weight="500" line-height="16" letter-spacing="0.3" />
    <text-style name="Desc" font-family="Jost" font-size="13" font-weight="400" line-height="19" />
    <text-style name="Price" font-family="Jost" font-size="17" font-weight="600" line-height="20" />
    <text-style name="PriceSm" font-family="Jost" font-size="13" font-weight="500" line-height="17" />
    <text-style name="Meta" font-family="Jost" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Micro" font-family="Jost" font-size="10" font-weight="600" line-height="12" letter-spacing="1" />
    <text-style name="Pill" font-family="Jost" font-size="10" font-weight="600" line-height="12" letter-spacing="0.6" />
    <text-style name="BtnLabel" font-family="Cinzel" font-size="13" font-weight="700" line-height="16" letter-spacing="2" />
  </styles>

  <col w="1440" fill="$bg" align="top-center">

    <!-- MASTHEAD -->
    <row w="fill" p="40 80 34 80" fill="$panel" align="middle-left" gap="auto">
      <row gap="22" align="middle-left">
        <col w="60" h="60" fill="$ember-deep" border="1 $ember" radius="$r-pill" align="middle-center">
          <text value="E" text-style="Crest" color="$ink" align="center" />
        </col>
        <col gap="9" align="top-left">
          <text value="THE EMBER ROOM" text-style="Wordmark" color="$ink" />
          <text value="COCKTAILS · SUPPER · EST. 1926" text-style="Kicker" color="$ember-tx" />
        </col>
      </row>
      <col gap="6" align="top-right">
        <text value="TUESDAY TILL SUNDAY · 5PM TILL LATE" text-style="Kicker" color="$ink" align="right" />
        <text value="Beneath the Haloran Building, 2nd &amp; Vine" text-style="Meta" color="$muted" align="right" />
        <text value="No standing room · Last pour 12:45am" text-style="Meta" color="$faint" align="right" />
      </col>
    </row>

    <!-- deco double rule -->
    <col w="fill" gap="2">
      <rect w="fill" h="2" fill="$ember" />
      <rect w="fill" h="1" fill="$hair" />
    </col>

    <!-- house line strip -->
    <row w="fill" p="15 80" fill="$bg" align="middle-left" gap="auto">
      <text value="An 84-seat room for slow drinking. Spirits poured to the ounce, ice cut to order." text-style="Desc" color="$muted" />
      <text value="Cash &amp; card · 20% added for parties of six" text-style="Meta" color="$faint" align="right" />
    </row>
    <rect w="fill" h="1" fill="$hair" />

    <!-- BODY: two columns -->
    <row w="fill" p="38 80 46 80" gap="48" align="top-left">

      <!-- MAIN COLUMN -->
      <col w="760" gap="40" align="top-left">

        <!-- SIGNATURES -->
        <col w="fill" gap="0" align="top-left">
          <row w="fill" align="middle-left" gap="auto">
            <text value="SIGNATURES" text-style="Sect" color="$ink" />
            <text value="poured 2 oz · stirred over hand-cut ice" text-style="Meta" color="$faint" align="right" />
          </row>
          <rect w="fill" h="2" fill="$ember" />

          <!-- 1 -->
          <row w="fill" p="18 0 16 0" gap="20" align="top-left" border-bottom="1 $hair">
            <col w="fill" gap="7" align="top-left">
              <row gap="9" align="middle-left">
                <text value="The Ember Old Fashioned" text-style="ItemName" color="$ink" />
                <row p="3 8" radius="$r-pill" fill="$ember-tint">
                  <text value="STIRRED" text-style="Pill" color="$ember-tx" />
                </row>
              </row>
              <text value="Rye · demerara · charred orange · Angostura" text-style="Spirit" color="$muted" />
              <text value="Our flagship: a fat-washed rye stirred down with burnt-sugar syrup and a coal-blackened orange coin." text-style="Desc" color="$faint" />
              <row gap="10" align="middle-left" p="3 0 0 0">
                <text value="STRENGTH" text-style="Micro" color="$faint" />
                <row gap="4" align="middle-left">
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                </row>
                <text value="5 / 5" text-style="Micro" color="$ember-tx" />
              </row>
            </col>
            <col w="90" align="top-right">
              <text value="$19" text-style="Price" color="$ink" align="right" />
            </col>
          </row>

          <!-- 2 -->
          <row w="fill" p="16 0" gap="20" align="top-left" border-bottom="1 $hair">
            <col w="fill" gap="7" align="top-left">
              <row gap="9" align="middle-left">
                <text value="Vine Street Sour" text-style="ItemName" color="$ink" />
                <row p="3 8" radius="$r-pill" fill="$ember-tint">
                  <text value="SHAKEN" text-style="Pill" color="$ember-tx" />
                </row>
              </row>
              <text value="Mezcal · lime · prickly pear · egg white" text-style="Spirit" color="$muted" />
              <text value="Espadin shaken hard over a whisper of pear, capped with a bruised-mint crown." text-style="Desc" color="$faint" />
              <row gap="10" align="middle-left" p="3 0 0 0">
                <text value="STRENGTH" text-style="Micro" color="$faint" />
                <row gap="4" align="middle-left">
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$hair" />
                </row>
                <text value="4 / 5" text-style="Micro" color="$ember-tx" />
              </row>
            </col>
            <col w="90" align="top-right">
              <text value="$17" text-style="Price" color="$ink" align="right" />
            </col>
          </row>

          <!-- 3 -->
          <row w="fill" p="16 0" gap="20" align="top-left" border-bottom="1 $hair">
            <col w="fill" gap="7" align="top-left">
              <row gap="9" align="middle-left">
                <text value="The Haloran Fizz" text-style="ItemName" color="$ink" />
                <row p="3 8" radius="$r-pill" fill="$ember-tint">
                  <text value="SHAKEN" text-style="Pill" color="$ember-tx" />
                </row>
              </row>
              <text value="London dry · Cocchi Americano · grapefruit · soda" text-style="Spirit" color="$muted" />
              <text value="Long, dry and effervescent, built for the first drink of the night." text-style="Desc" color="$faint" />
              <row gap="10" align="middle-left" p="3 0 0 0">
                <text value="STRENGTH" text-style="Micro" color="$faint" />
                <row gap="4" align="middle-left">
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$hair" />
                  <rect w="13" h="6" radius="$r-sm" fill="$hair" />
                </row>
                <text value="3 / 5" text-style="Micro" color="$ember-tx" />
              </row>
            </col>
            <col w="90" align="top-right">
              <text value="$16" text-style="Price" color="$ink" align="right" />
            </col>
          </row>

          <!-- 4 -->
          <row w="fill" p="16 0 2 0" gap="20" align="top-left">
            <col w="fill" gap="7" align="top-left">
              <row gap="9" align="middle-left">
                <text value="Midnight at Second" text-style="ItemName" color="$ink" />
                <row p="3 8" radius="$r-pill" fill="$ember-tint">
                  <text value="STIRRED" text-style="Pill" color="$ember-tx" />
                </row>
              </row>
              <text value="Cognac · sweet vermouth · cold brew · mole bitters" text-style="Spirit" color="$muted" />
              <text value="A nightcap with weight, all dark fruit and cocoa, finished over a single large cube." text-style="Desc" color="$faint" />
              <row gap="10" align="middle-left" p="3 0 0 0">
                <text value="STRENGTH" text-style="Micro" color="$faint" />
                <row gap="4" align="middle-left">
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$ember" />
                  <rect w="13" h="6" radius="$r-sm" fill="$hair" />
                </row>
                <text value="4 / 5" text-style="Micro" color="$ember-tx" />
              </row>
            </col>
            <col w="90" align="top-right">
              <text value="$18" text-style="Price" color="$ink" align="right" />
            </col>
          </row>
        </col>

        <!-- CLASSICS -->
        <col w="fill" gap="0" align="top-left">
          <row w="fill" align="middle-left" gap="auto">
            <text value="CLASSICS, TO THE OUNCE" text-style="Sect" color="$ink" />
            <text value="the canon, unhurried" text-style="Meta" color="$faint" align="right" />
          </row>
          <rect w="fill" h="2" fill="$ember" />

          <row w="fill" p="15 0" gap="20" align="middle-left" border-bottom="1 $hair">
            <col w="fill" gap="4" align="top-left">
              <text value="Negroni" text-style="ItemName" color="$ink" />
              <text value="Gin · Campari · sweet vermouth · orange oil" text-style="Spirit" color="$muted" />
            </col>
            <text value="$15" text-style="Price" color="$ink" align="right" />
          </row>
          <row w="fill" p="15 0" gap="20" align="middle-left" border-bottom="1 $hair">
            <col w="fill" gap="4" align="top-left">
              <text value="Sazerac" text-style="ItemName" color="$ink" />
              <text value="Rye · absinthe rinse · Peychaud's · lemon" text-style="Spirit" color="$muted" />
            </col>
            <text value="$16" text-style="Price" color="$ink" align="right" />
          </row>
          <row w="fill" p="15 0" gap="20" align="middle-left" border-bottom="1 $hair">
            <col w="fill" gap="4" align="top-left">
              <text value="Daiquiri" text-style="ItemName" color="$ink" />
              <text value="White rum · lime · cane sugar" text-style="Spirit" color="$muted" />
            </col>
            <text value="$14" text-style="Price" color="$ink" align="right" />
          </row>
          <row w="fill" p="15 0 2 0" gap="20" align="middle-left">
            <col w="fill" gap="4" align="top-left">
              <text value="The Vesper" text-style="ItemName" color="$ink" />
              <text value="Gin · vodka · Lillet Blanc · lemon coin" text-style="Spirit" color="$muted" />
            </col>
            <text value="$17" text-style="Price" color="$ink" align="right" />
          </row>
        </col>

        <!-- ZERO PROOF -->
        <col w="fill" gap="0" align="top-left">
          <row w="fill" align="middle-left" gap="auto">
            <text value="ZERO PROOF" text-style="Sect" color="$ink" />
            <text value="every bit as considered" text-style="Meta" color="$faint" align="right" />
          </row>
          <rect w="fill" h="2" fill="$ember" />

          <row w="fill" p="15 0" gap="20" align="middle-left" border-bottom="1 $hair">
            <col w="fill" gap="4" align="top-left">
              <text value="Garden Spritz" text-style="ItemName" color="$ink" />
              <text value="Seedlip Garden · verjus · tonic · cucumber" text-style="Spirit" color="$muted" />
            </col>
            <text value="$11" text-style="Price" color="$ink" align="right" />
          </row>
          <row w="fill" p="15 0 2 0" gap="20" align="middle-left">
            <col w="fill" gap="4" align="top-left">
              <text value="Smoked Cider Shrub" text-style="ItemName" color="$ink" />
              <text value="Pressed apple · maple · cider vinegar · smoke" text-style="Spirit" color="$muted" />
            </col>
            <text value="$10" text-style="Price" color="$ink" align="right" />
          </row>
        </col>

      </col>

      <!-- SIDEBAR -->
      <col w="472" gap="20" align="top-left">

        <!-- FEATURE CARD -->
        <col w="472" fill="$panel" border="1 $hair" radius="$r-card" clip="true" gap="0" role="card">
          <frame w="472" h="286" clip="true">
            <img x="0" y="0" w="472" h="286" fit="cover" src="https://images.unsplash.com/photo-1666632836815-6496482616b5?auto=format&amp;fit=crop&amp;w=944&amp;h=572&amp;q=80" />
            <rect x="0" y="0" w="472" h="286" fill="linear-gradient(180deg, #14100C26 0%, #14100C1F 40%, #14100CD9 82%, #14100CF7 100%)" />
            <text x="22" y="20" value="BARKEEP'S CHOICE · TONIGHT" text-style="Kicker" color="$ember-tx" />
            <text x="22" y="212" w="428" value="The Smoked Negroni '87" text-style="Feature" color="$ink" />
            <text x="22" y="250" w="428" value="Applewood-smoked, bottle-aged ninety days" text-style="Meta" color="$muted" />
          </frame>
          <col w="472" p="18 22 22 22" gap="12" align="top-left">
            <text value="Tanqueray, Cynar and Carpano Antica, married in oak and rested until the edges soften. One pour a night, then it is gone." text-style="Desc" color="$muted" />
            <col w="fill" gap="7" align="top-left">
              <row w="fill" align="middle-left" gap="auto">
                <text value="PROOF" text-style="Micro" color="$faint" />
                <text value="58 proof · 29% ABV" text-style="Micro" color="$ember-tx" align="right" />
              </row>
              <frame w="428" h="6" radius="$r-pill" clip="true">
                <rect x="0" y="0" w="428" h="6" fill="$hair" />
                <rect x="0" y="0" w="248" h="6" fill="$ember" />
              </frame>
            </col>
            <row w="fill" p="4 0 0 0" align="middle-left" gap="auto">
              <text value="Neat, one large cube" text-style="Meta" color="$faint" />
              <text value="$21" text-style="Price" color="$ember-tx" align="right" />
            </row>
          </col>
        </col>

        <!-- SPIRITS FLIGHT -->
        <col w="472" fill="$panel" border="1 $hair" radius="$r-card" p="20 22" gap="14" role="card">
          <row w="fill" align="middle-left" gap="auto">
            <text value="THE CELLAR FLIGHT" text-style="Kicker" color="$ink" />
            <text value="three half-pours" text-style="Meta" color="$faint" align="right" />
          </row>
          <rect w="fill" h="1" fill="$hair" />
          <col w="fill" gap="0" align="top-left" role="table">
            <row w="fill" p="0 0 12 0" gap="12" align="middle-left" border-bottom="1 $hair">
              <col w="fill" gap="3" align="top-left">
                <text value="Lagavulin 12" text-style="ItemName" color="$ink" />
                <text value="Islay single malt · peat &amp; brine" text-style="Spirit" color="$muted" />
              </col>
              <text value="$9" text-style="PriceSm" color="$muted" align="right" />
            </row>
            <row w="fill" p="12 0" gap="12" align="middle-left" border-bottom="1 $hair">
              <col w="fill" gap="3" align="top-left">
                <text value="Oban Highland" text-style="ItemName" color="$ink" />
                <text value="West coast malt · orchard &amp; salt" text-style="Spirit" color="$muted" />
              </col>
              <text value="$8" text-style="PriceSm" color="$muted" align="right" />
            </row>
            <row w="fill" p="12 0 0 0" gap="12" align="middle-left">
              <col w="fill" gap="3" align="top-left">
                <text value="Hibiki Harmony" text-style="ItemName" color="$ink" />
                <text value="Japanese blend · honey &amp; oak" text-style="Spirit" color="$muted" />
              </col>
              <text value="$10" text-style="PriceSm" color="$muted" align="right" />
            </row>
          </col>
          <row w="fill" p="12 16" fill="$ember-tint" radius="$r-sm" align="middle-left" gap="auto">
            <text value="ALL THREE, POURED SIDE BY SIDE" text-style="Micro" color="$ember-tx" />
            <text value="$27" text-style="Price" color="$ink" align="right" />
          </row>
        </col>

        <!-- THE ROOM -->
        <col w="472" fill="$panel" border="1 $hair" radius="$r-card" clip="true" gap="0" role="card">
          <frame w="472" h="168" clip="true">
            <img x="0" y="0" w="472" h="168" fit="cover" src="https://images.unsplash.com/photo-1775955849483-5992deefbed3?auto=format&amp;fit=crop&amp;w=944&amp;h=336&amp;q=80" />
            <rect x="0" y="0" w="472" h="168" fill="linear-gradient(90deg, #14100CE6 0%, #14100C73 55%, #14100C33 100%)" />
            <col x="22" y="52" w="300" gap="7" align="top-left">
              <text value="THE ROOM" text-style="Kicker" color="$ember-tx" />
              <text value="Live piano, Thursday to Saturday" text-style="ItemName" color="$ink" />
              <text value="Doors at five · walk-ins at the bar" text-style="Meta" color="$muted" />
            </col>
          </frame>
        </col>

        <!-- HOUSE NOTES + CTA -->
        <col w="472" fill="$panel-2" border="1 $hair" radius="$r-card" p="20 22" gap="14" role="card">
          <text value="AT THE BAR" text-style="Kicker" color="$ink" />
          <row w="fill" gap="10" align="top-left">
            <col w="fill" gap="4" align="top-left">
              <text value="STIRRED" text-style="Micro" color="$ember-tx" />
              <text value="spirit-forward, silken, cold" text-style="Meta" color="$muted" />
            </col>
            <col w="fill" gap="4" align="top-left">
              <text value="SHAKEN" text-style="Micro" color="$ember-tx" />
              <text value="citrus, bright, aerated" text-style="Meta" color="$muted" />
            </col>
          </row>
          <rect w="fill" h="1" fill="$hair" />
          <text value="Ask your bartender for the off-menu list. We keep a short reserve of pre-Prohibition bottles for those who ask kindly." text-style="Desc" color="$muted" />
          <row w="fill" h="48" fill="$ember-deep" radius="$r-sm" align="middle-center" gap="10" role="button">
            <img src="https://api.iconify.design/lucide/calendar-check.svg?color=%23F1E7D2" w="17" h="17" />
            <text value="RESERVE A TABLE" text-style="BtnLabel" color="$ink" align="center" />
          </row>
        </col>

      </col>
    </row>

    <!-- deco footer rule -->
    <col w="fill" gap="2">
      <rect w="fill" h="1" fill="$hair" />
      <rect w="fill" h="2" fill="$ember" />
    </col>
    <col w="fill" p="26 80 34 80" fill="$panel" gap="12" align="middle-center">
      <col gap="3" align="middle-center">
        <rect w="26" h="3" fill="$ember" />
        <rect w="17" h="3" fill="$ember" />
        <rect w="8" h="3" fill="$ember" />
      </col>
      <text value="A HALORAN BUILDING ESTABLISHMENT · POURING SINCE 1926" text-style="Kicker" color="$muted" align="center" />
    </col>

  </col>
</gui>
```