---
title: "Verano Live - Ticket, Cinder & Salt at Marbank"
platform: android
slug: verano-live-ticket-cinder-salt-at-marbank
screens: []
domains: ["booking"]
style: "skeuomorphic"
fonts: ["Oswald", "Roboto", "Roboto Mono"]
roles: ["top-navigation-bar", "button", "card", "badge"]
score: {clean: 89, consistent: 71, accessible: 76, comprehensible: 24}
url: https://gui.farm/android/verano-live-ticket-cinder-salt-at-marbank
raw: https://gui.farm/android/verano-live-ticket-cinder-salt-at-marbank/design.guix
download: https://gui.farm/android/verano-live-ticket-cinder-salt-at-marbank.gui
---

# Verano Live - Ticket, Cinder & Salt at Marbank

A dark skeuomorphic Android digital event ticket for a Cinder & Salt concert, with a photographic hero, a perforated tear stub, a vermilion section/row/seat band, a scannable barcode, a fare breakdown, and Add-to-Wallet, transfer and directions actions.

- **Live preview:** https://gui.farm/android/verano-live-ticket-cinder-salt-at-marbank
- **Raw source:** https://gui.farm/android/verano-live-ticket-cinder-salt-at-marbank/design.guix
- **Download (.gui):** https://gui.farm/android/verano-live-ticket-cinder-salt-at-marbank.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Verano Live - Ticket, Cinder &amp; Salt at Marbank">
  <mode name="theme" values="light dark" default="dark" />

  <tokens>
    <color name="bg"        value="#0C0B0D" />
    <color name="stock"     value="#1C181C" />
    <color name="stub"      value="#161215" />
    <color name="panel"     value="#161318" />
    <color name="panel2"    value="#221E24" />
    <color name="ink"       value="#F4EEE7" />
    <color name="ink-2"     value="#B9AFA6" />
    <color name="ink-3"     value="#968B81" />
    <color name="hair"      value="#2A2530" />
    <color name="verm"      value="#FF4D23" />
    <color name="verm-hi"   value="#FF6E45" />
    <color name="verm-dim"  value="#331207" />
    <color name="verm-line" value="#5A2410" />
    <color name="band"      value="#E8431C" />
    <color name="band-line" value="#B7350F" />
    <color name="on-verm"   value="#170804" />
    <color name="paper"     value="#F7F4EC" />
    <color name="code"      value="#14100F" />
    <color name="perf"      value="#4A3A38" />

    <number name="r-card"  value="22" />
    <number name="r-tile"  value="16" />
    <number name="r-sm"    value="12" />
    <number name="r-pill"  value="999" />
  </tokens>

  <fonts>
    <font family="Oswald"      source="google" weights="400 500 600 700" styles="normal" />
    <font family="Roboto"      source="system" weights="400 500 600 700" styles="normal" />
    <font family="Roboto Mono" source="google" weights="400 500 600" styles="normal" />
  </fonts>

  <styles>
    <text-style name="Kicker"    font-family="Oswald"      font-size="12" font-weight="600" line-height="15" letter-spacing="2.6" />
    <text-style name="Marquee"   font-family="Oswald"      font-size="34" font-weight="600" line-height="36" letter-spacing="0.4" />
    <text-style name="Sub"       font-family="Roboto"      font-size="13" font-weight="500" line-height="17" />
    <text-style name="Eyebrow"   font-family="Roboto"      font-size="10" font-weight="700" line-height="13" letter-spacing="1.3" />
    <text-style name="Value"     font-family="Roboto"      font-size="15" font-weight="600" line-height="19" />
    <text-style name="BandLabel" font-family="Oswald"      font-size="11" font-weight="600" line-height="13" letter-spacing="1.6" />
    <text-style name="BandVal"   font-family="Oswald"      font-size="24" font-weight="600" line-height="26" letter-spacing="0.4" />
    <text-style name="Mono"      font-family="Roboto Mono" font-size="13" font-weight="500" line-height="16" letter-spacing="1.0" />
    <text-style name="Caption"   font-family="Roboto"      font-size="11" font-weight="500" line-height="14" />
    <text-style name="Chip"      font-family="Roboto"      font-size="10" font-weight="700" line-height="13" letter-spacing="0.9" />
    <text-style name="Price"     font-family="Roboto"      font-size="20" font-weight="700" line-height="22" letter-spacing="-0.4" />
    <text-style name="Fare"      font-family="Roboto"      font-size="12" font-weight="500" line-height="16" />
    <text-style name="FareVal"   font-family="Roboto Mono" font-size="12" font-weight="500" line-height="16" />
    <text-style name="TotalLbl"  font-family="Roboto"      font-size="13" font-weight="700" line-height="17" />
    <text-style name="ActLabel"  font-family="Roboto"      font-size="14" font-weight="600" line-height="18" />
    <text-style name="ActSub"    font-family="Roboto"      font-size="11" font-weight="500" line-height="14" />
    <text-style name="NavTitle"  font-family="Roboto"      font-size="16" font-weight="600" line-height="20" />
    <text-style name="NavKick"   font-family="Roboto"      font-size="10" font-weight="700" line-height="13" letter-spacing="1.2" />
    <text-style name="BtnLabel"  font-family="Roboto"      font-size="15" font-weight="600" line-height="19" />
    <text-style name="Pager"     font-family="Roboto Mono" font-size="12" font-weight="500" line-height="15" letter-spacing="0.4" />
    <text-style name="Clock"     font-family="Roboto"      font-size="14" font-weight="600" line-height="18" />
  </styles>

  <col w="360" fill="$bg" align="top-center" gap="0">

    <!-- device status bar (untagged chrome) -->
    <row w="fill" h="44" p="0 20" align="middle-center" gap="auto">
      <text text-style="Clock" value="9:41" color="$ink" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%23F4EEE7" w="17" h="17" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%23F4EEE7" w="17" h="17" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23F4EEE7" w="19" h="19" />
      </row>
    </row>

    <!-- top navigation bar -->
    <row role="top-navigation-bar" w="fill" h="52" p="0 8" align="middle-center" gap="auto">
      <col role="button" w="40" h="40" radius="$r-pill" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23F4EEE7" w="24" h="24" />
      </col>
      <col gap="2" align="middle-center">
        <text text-style="NavKick" text-case="uppercase" value="Portland, OR" color="$verm-hi" align="center" />
        <text text-style="NavTitle" value="Your Ticket" color="$ink" align="center" />
      </col>
      <col role="button" w="40" h="40" radius="$r-pill" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/more-horiz.svg?color=%23F4EEE7" w="24" h="24" />
      </col>
    </row>

    <!-- content -->
    <col w="fill" p="8 16 18" gap="16" align="top-center">

      <!-- TICKET CARD -->
      <col role="card" w="328" radius="$r-card" clip="true" fill="$stock" border="1 $hair" align="top-center" gap="0">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #221D22 0%, #151216 100%)" />
          <effect type="drop-shadow" x="0" y="10" radius="26" spread="-10" color="#00000073" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF0F" />
        </appearance>

        <!-- hero -->
        <frame w="328" h="150" clip="true">
          <img src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=656&amp;h=320&amp;fit=crop&amp;auto=format&amp;q=70" w="328" h="150" />
          <col w="328" h="150" x="0" y="0">
            <appearance>
              <fill type="linear-gradient" value="linear-gradient(180deg, #0C0B0D00 34%, #0C0B0DF2 100%)" />
            </appearance>
          </col>
          <row x="12" y="12" role="badge" h="24" radius="$r-pill" fill="#0C0B0DB3" border="1 $verm-line" p="0 10" gap="6" align="middle-center">
            <ellipse w="6" h="6" radius="3" fill="$verm" />
            <text text-style="Chip" text-case="uppercase" value="Live Tonight" color="$verm-hi" />
          </row>
          <col x="16" y="78" w="300" gap="4">
            <text text-style="Kicker" text-case="uppercase" value="Sat · Sep 12 · 2026" color="$verm-hi" />
            <text text-style="Marquee" value="CINDER &amp; SALT" color="$ink" />
            <text text-style="Sub" value="The Longview Tour · with Nova Vale" color="$ink-2" />
          </col>
        </frame>

        <!-- event meta -->
        <col w="fill" p="16 18 14" gap="14">
          <row w="fill" gap="auto">
            <col w="150" gap="3">
              <text text-style="Eyebrow" text-case="uppercase" value="Doors" color="$ink-3" />
              <text text-style="Value" value="7:00 PM" color="$ink" />
            </col>
            <col w="120" gap="3" align="top-right">
              <text text-style="Eyebrow" text-case="uppercase" value="Headline" color="$ink-3" align="right" />
              <text text-style="Value" value="8:30 PM" color="$ink" align="right" />
            </col>
          </row>
          <row w="fill" gap="auto">
            <col w="180" gap="3">
              <text text-style="Eyebrow" text-case="uppercase" value="Venue" color="$ink-3" />
              <text text-style="Value" value="Marbank Auditorium" color="$ink" />
            </col>
            <col w="100" gap="3" align="top-right">
              <text text-style="Eyebrow" text-case="uppercase" value="Entry" color="$ink-3" align="right" />
              <text text-style="Value" value="Reserved" color="$ink" align="right" />
            </col>
          </row>
        </col>

        <!-- perforation tear line -->
        <frame w="328" h="30">
          <ellipse x="-11" y="4" w="22" h="22" radius="11" fill="$bg" />
          <ellipse x="317" y="4" w="22" h="22" radius="11" fill="$bg" />
          <frame x="18" y="13" w="292" h="4">
        <ellipse x="0.0" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="9.93" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="19.86" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="29.79" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="39.72" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="49.66" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="59.59" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="69.52" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="79.45" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="89.38" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="99.31" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="109.24" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="119.17" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="129.1" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="139.03" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="148.97" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="158.9" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="168.83" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="178.76" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="188.69" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="198.62" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="208.55" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="218.48" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="228.41" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="238.34" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="248.28" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="258.21" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="268.14" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="278.07" y="0" w="4" h="4" radius="2" fill="$perf" />
        <ellipse x="288.0" y="0" w="4" h="4" radius="2" fill="$perf" />
          </frame>
        </frame>

        <!-- stub -->
        <col w="fill" fill="$stub" p="4 18 18" gap="14" align="top-center">

          <!-- section / row / seat band -->
          <row w="fill" h="78" radius="$r-sm" clip="true" fill="$band" align="middle-center" gap="0">
            <col w="fill" gap="6" align="middle-center">
              <text text-style="BandLabel" text-case="uppercase" value="Section" color="$on-verm" align="center" />
              <text text-style="BandVal" value="ORCH L" color="$on-verm" align="center" />
            </col>
            <rect w="1" h="42" fill="$band-line" />
            <col w="fill" gap="6" align="middle-center">
              <text text-style="BandLabel" text-case="uppercase" value="Row" color="$on-verm" align="center" />
              <text text-style="BandVal" value="M" color="$on-verm" align="center" />
            </col>
            <rect w="1" h="42" fill="$band-line" />
            <col w="fill" gap="6" align="middle-center">
              <text text-style="BandLabel" text-case="uppercase" value="Seat" color="$on-verm" align="center" />
              <text text-style="BandVal" value="14" color="$on-verm" align="center" />
            </col>
          </row>

          <!-- barcode -->
          <col w="fill" gap="9" align="middle-center">
            <frame w="292" h="104" radius="$r-sm" clip="true" fill="$paper">
              <frame x="20" y="20" w="252" h="58">
          <rect x="0" y="0" w="5" h="58" fill="$code" />
          <rect x="7" y="0" w="4" h="58" fill="$code" />
          <rect x="15" y="0" w="3" h="58" fill="$code" />
          <rect x="23" y="0" w="5" h="58" fill="$code" />
          <rect x="32" y="0" w="2" h="58" fill="$code" />
          <rect x="38" y="0" w="2" h="58" fill="$code" />
          <rect x="44" y="0" w="2" h="58" fill="$code" />
          <rect x="48" y="0" w="2" h="58" fill="$code" />
          <rect x="54" y="0" w="2" h="58" fill="$code" />
          <rect x="61" y="0" w="5" h="58" fill="$code" />
          <rect x="71" y="0" w="2" h="58" fill="$code" />
          <rect x="75" y="0" w="3" h="58" fill="$code" />
          <rect x="81" y="0" w="5" h="58" fill="$code" />
          <rect x="89" y="0" w="2" h="58" fill="$code" />
          <rect x="94" y="0" w="5" h="58" fill="$code" />
          <rect x="104" y="0" w="5" h="58" fill="$code" />
          <rect x="114" y="0" w="2" h="58" fill="$code" />
          <rect x="120" y="0" w="3" h="58" fill="$code" />
          <rect x="127" y="0" w="3" h="58" fill="$code" />
          <rect x="135" y="0" w="4" h="58" fill="$code" />
          <rect x="141" y="0" w="3" h="58" fill="$code" />
          <rect x="149" y="0" w="2" h="58" fill="$code" />
          <rect x="154" y="0" w="5" h="58" fill="$code" />
          <rect x="163" y="0" w="5" h="58" fill="$code" />
          <rect x="172" y="0" w="5" h="58" fill="$code" />
          <rect x="182" y="0" w="5" h="58" fill="$code" />
          <rect x="192" y="0" w="4" h="58" fill="$code" />
          <rect x="199" y="0" w="3" h="58" fill="$code" />
          <rect x="205" y="0" w="4" h="58" fill="$code" />
          <rect x="212" y="0" w="2" h="58" fill="$code" />
          <rect x="217" y="0" w="3" h="58" fill="$code" />
          <rect x="222" y="0" w="3" h="58" fill="$code" />
          <rect x="229" y="0" w="5" h="58" fill="$code" />
          <rect x="238" y="0" w="4" h="58" fill="$code" />
          <rect x="245" y="0" w="7" h="58" fill="$code" />
              </frame>
              <text x="20" y="86" w="252" text-style="Mono" value="8QF 24817 0912 A" color="$code" align="center" />
            </frame>
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/refresh-rounded.svg?color=%23968B81" w="14" h="14" />
              <text text-style="Caption" value="Screenshots won't scan at the gate · refreshes every 60s" color="$ink-3" />
            </row>
          </col>

          <!-- fare summary -->
          <col w="fill" gap="8" p="2 0 0">
            <row w="fill" gap="auto">
              <text text-style="Fare" value="Face value" color="$ink-2" />
              <text text-style="FareVal" value="$58.00" color="$ink-2" align="right" />
            </row>
            <row w="fill" gap="auto">
              <text text-style="Fare" value="Service fee" color="$ink-2" />
              <text text-style="FareVal" value="$8.50" color="$ink-2" align="right" />
            </row>
            <row w="fill" gap="auto">
              <text text-style="Fare" value="Facility fee" color="$ink-2" />
              <text text-style="FareVal" value="$2.00" color="$ink-2" align="right" />
            </row>
            <rect w="fill" h="1" fill="$hair" />
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="TotalLbl" value="Total paid" color="$ink" />
              <text text-style="Price" value="$68.50" color="$ink" align="right" />
            </row>
          </col>

          <!-- entry footer -->
          <row w="fill" gap="auto" align="middle-center" p="4 0 0">
            <row gap="8" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/confirmation-number-rounded.svg?color=%23FF6E45" w="18" h="18" />
              <text text-style="ActLabel" value="Admit One · Gate C" color="$ink" />
            </row>
            <text text-style="Caption" value="Enter by 8:15 PM" color="$verm-hi" align="right" />
          </row>

        </col>
      </col>

      <!-- pager + terms -->
      <row w="fill" gap="auto" align="middle-center" p="0 4">
        <row gap="8" align="middle-center">
          <ellipse w="7" h="7" radius="4" fill="$verm" />
          <ellipse w="7" h="7" radius="4" fill="$hair" />
          <text text-style="Pager" value="Ticket 1 of 2" color="$ink-2" />
        </row>
        <row role="button" gap="4" align="middle-center">
          <text text-style="ActLabel" value="Ticket terms" color="$verm-hi" />
          <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23FF6E45" w="18" h="18" />
        </row>
      </row>

      <!-- actions -->
      <col role="card" w="328" radius="$r-tile" fill="$panel" border="1 $hair" clip="true" gap="0">
        <row role="button" w="fill" h="56" p="0 14" gap="12" align="middle-center">
          <col w="36" h="36" radius="10" fill="$verm-dim" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/send-rounded.svg?color=%23FF6E45" w="19" h="19" />
          </col>
          <col w="fill" gap="1">
            <text text-style="ActLabel" value="Transfer ticket" color="$ink" />
            <text text-style="ActSub" value="Send to a friend by email" color="$ink-3" />
          </col>
          <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23968B81" w="20" h="20" />
        </row>
        <rect w="fill" h="1" fill="$hair" />
        <row role="button" w="fill" h="56" p="0 14" gap="12" align="middle-center">
          <col w="36" h="36" radius="10" fill="$verm-dim" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/near-me-rounded.svg?color=%23FF6E45" w="19" h="19" />
          </col>
          <col w="fill" gap="1">
            <text text-style="ActLabel" value="Get directions" color="$ink" />
            <text text-style="ActSub" value="Marbank Auditorium · 0.8 mi" color="$ink-3" />
          </col>
          <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23968B81" w="20" h="20" />
        </row>
        <rect w="fill" h="1" fill="$hair" />
        <row role="button" w="fill" h="56" p="0 14" gap="12" align="middle-center">
          <col w="36" h="36" radius="10" fill="$verm-dim" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/calendar-add-on-rounded.svg?color=%23FF6E45" w="19" h="19" />
          </col>
          <col w="fill" gap="1">
            <text text-style="ActLabel" value="Add to calendar" color="$ink" />
            <text text-style="ActSub" value="Sat, Sep 12 · 7:00 PM" color="$ink-3" />
          </col>
          <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23968B81" w="20" h="20" />
        </row>
      </col>

    </col>

    <!-- bottom fixed action bar -->
    <col w="fill" fill="$panel" border="1 0 0 0 $hair">
      <row w="fill" h="78" p="0 16" gap="12" align="middle-center">
        <row role="button" w="56" h="56" radius="$r-pill" fill="$panel2" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/ios-share.svg?color=%23F4EEE7" w="22" h="22" />
        </row>
        <row role="button" w="fill" h="56" radius="$r-pill" fill="$verm" gap="8" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/account-balance-wallet-rounded.svg?color=%23170804" w="21" h="21" />
          <text text-style="BtnLabel" value="Add to Google Wallet" color="$on-verm" />
        </row>
      </row>
    </col>

  </col>
</gui>

```