---
title: "Afterglow iOS Event Discovery"
platform: ios
slug: afterglow-events-ios
screens: ["search-results"]
domains: ["booking"]
style: "minimal"
fonts: ["SF Pro"]
roles: ["chip", "top-navigation-bar", "button", "search-bar", "card", "badge", "divider", "tab-bar"]
score: {clean: 100, consistent: 71, accessible: 88, comprehensible: 57}
url: https://gui.farm/ios/afterglow-events-ios
raw: https://gui.farm/ios/afterglow-events-ios/design.guix
download: https://gui.farm/ios/afterglow-events-ios.gui
---

# Afterglow iOS Event Discovery

A dark iOS event discovery screen for finding live music, late-night dining, and nearby cultural events.

- **Live preview:** https://gui.farm/ios/afterglow-events-ios
- **Raw source:** https://gui.farm/ios/afterglow-events-ios/design.guix
- **Download (.gui):** https://gui.farm/ios/afterglow-events-ios.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Afterglow iOS Event Discovery">
  <tokens>
    <color name="bg" value="#111012" />
    <color name="surface" value="#1B191D" />
    <color name="surface-2" value="#252228" />
    <color name="ink" value="#F7F0E7" />
    <color name="muted" value="#AAA1AA" />
    <color name="border" value="#39343D" />
    <color name="ember" value="#E96F45" />
    <color name="ember-soft" value="#4A271F" />
    <color name="acid" value="#D4E66A" />
    <number name="radius-sm" value="10" />
    <number name="radius-card" value="16" />
    <number name="radius-large" value="22" />
  </tokens>
  <styles>
    <text-style name="LargeTitle" font-family="SF Pro" font-size="34" font-weight="700" line-height="41" letter-spacing="-0.8" />
    <text-style name="Title2" font-family="SF Pro" font-size="22" font-weight="600" line-height="28" letter-spacing="-0.3" />
    <text-style name="Headline" font-family="SF Pro" font-size="17" font-weight="600" line-height="22" />
    <text-style name="Body" font-family="SF Pro" font-size="17" font-weight="400" line-height="22" />
    <text-style name="Subheadline" font-family="SF Pro" font-size="15" font-weight="400" line-height="20" />
    <text-style name="Footnote" font-family="SF Pro" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Caption" font-family="SF Pro" font-size="11" font-weight="600" line-height="13" />
  </styles>
  <fonts>
    <font family="SF Pro" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Inter" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <components>
    <component name="Date/Chip" id="date-chip">
      <props><prop name="label" type="text" target="date-label" /></props>
      <row role="chip" p="9 13" fill="$surface" border="1 $border" radius="999" align="middle-center">
        <text id="date-label" value="Date" text-style="Footnote" font-weight="600" fill="$ink" />
      </row>
    </component>
  </components>

  <frame w="390" h="844" fill="$bg" clip>
    <col x="0" y="0" w="390" h="761">
      <row w="fill" h="47" p="12 20 0 20" align="middle-center" gap="auto">
        <text value="9:41" font-family="SF Pro" font-size="15" font-weight="600" line-height="20" fill="$ink" />
        <row gap="6" align="middle-center">
          <img src="https://api.iconify.design/lucide/signal.svg?color=%23F7F0E7" w="16" h="16" />
          <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F7F0E7" w="16" h="16" />
          <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F7F0E7" w="20" h="20" />
        </row>
      </row>

      <row role="top-navigation-bar" w="fill" h="48" p="0 20" align="middle-center" gap="auto">
        <text value="afterglow" font-family="SF Pro" font-size="19" font-weight="700" line-height="23" letter-spacing="-0.7" fill="$ink" />
        <row gap="10" align="middle-center">
          <row role="button" w="38" h="38" fill="$surface" border="1 $border" radius="999" align="middle-center">
            <img src="https://api.iconify.design/lucide/map.svg?color=%23F7F0E7" w="19" h="19" />
          </row>
          <row role="button" w="38" h="38" fill="$surface" border="1 $border" radius="999" align="middle-center">
            <img src="https://api.iconify.design/lucide/user-round.svg?color=%23F7F0E7" w="19" h="19" />
          </row>
        </row>
      </row>

      <col w="fill" p="12 20" gap="12">
        <col w="fill" gap="5">
          <text value="Find your night." text-style="LargeTitle" fill="$ink" />
          <text value="Live music, late dinners, and small rooms worth leaving home for." text-style="Subheadline" fill="$muted" w="330" />
        </col>

        <row role="search-bar" w="fill" h="46" fill="$surface" border="1 $border" radius="14" p="0 14" gap="10" align="middle-left">
          <img src="https://api.iconify.design/lucide/search.svg?color=%23AAA1AA" w="19" h="19" />
          <text value="Artists, venues, or moods" text-style="Body" fill="$muted" />
        </row>

        <row w="fill" gap="8">
          <row role="chip" p="9 13" fill="$ember" radius="999" align="middle-center">
            <text value="Tonight" text-style="Footnote" font-weight="600" fill="$ink" />
          </row>
          <instance component="date-chip" label="Tomorrow" />
          <instance component="date-chip" label="This weekend" />
        </row>

        <frame role="card" w="350" h="235" radius="$radius-large" clip fill="$surface">
          <img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?auto=format&amp;fit=crop&amp;w=800&amp;q=85" x="0" y="0" w="350" h="235" fit="cover" />
          <rect x="0" y="0" w="350" h="235" fill="linear-gradient(180deg, #11101200 24%, #111012E8 100%)" />
          <row x="14" y="14" role="badge" p="7 10" fill="$acid" radius="999" align="middle-center">
            <text value="EDITOR'S PICK" text-style="Caption" fill="#22250F" />
          </row>
          <row x="298" y="14" role="button" w="38" h="38" fill="#111012B8" radius="999" align="middle-center">
            <img src="https://api.iconify.design/lucide/bookmark.svg?color=%23F7F0E7" w="19" h="19" />
          </row>
          <col x="16" y="122" w="318" gap="7">
            <text value="Neon Harbour: Live at The Fridge" text-style="Title2" fill="$ink" w="300" />
            <row w="fill" gap="auto" align="middle-center">
              <col gap="2">
                <text value="Tonight · 9:30 PM" text-style="Subheadline" font-weight="600" fill="$ember" />
                <text value="Alserkal Avenue · 18 min away" text-style="Footnote" fill="#F7F0E7CC" />
              </col>
              <col align="top-right" gap="1">
                <text value="FROM" text-style="Caption" fill="#F7F0E799" />
                <text value="AED 95" text-style="Headline" fill="$ink" />
              </col>
            </row>
          </col>
        </frame>

        <row w="fill" gap="auto" align="middle-center">
          <text value="More around you" text-style="Title2" fill="$ink" />
          <text value="See all 42" text-style="Footnote" font-weight="600" fill="$ember" />
        </row>

        <col w="fill" gap="10">
          <row role="card" w="fill" gap="12" align="middle-left">
            <img src="https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&amp;fit=crop&amp;w=300&amp;q=80" w="70" h="70" fit="cover" radius="12" />
            <col w="fill" gap="3">
              <text value="Rooftop Listening Session" text-style="Headline" fill="$ink" />
              <text value="Tomorrow · 8:00 PM" text-style="Footnote" font-weight="600" fill="$ember" />
              <text value="25hours Hotel · AED 60" text-style="Footnote" fill="$muted" />
            </col>
            <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%23AAA1AA" w="18" h="18" />
          </row>
          <line role="divider" fill="$border" />
          <row role="card" w="fill" gap="12" align="middle-left">
            <img src="https://images.unsplash.com/photo-1527529482837-4698179dc6ce?auto=format&amp;fit=crop&amp;w=300&amp;q=80" w="70" h="70" fit="cover" radius="12" />
            <col w="fill" gap="3">
              <text value="Midnight Cinema Club" text-style="Headline" fill="$ink" />
              <text value="Friday · 10:15 PM" text-style="Footnote" font-weight="600" fill="$ember" />
              <text value="Cinema Akil · AED 45" text-style="Footnote" fill="$muted" />
            </col>
            <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%23AAA1AA" w="18" h="18" />
          </row>
        </col>
      </col>
    </col>

    <col role="tab-bar" x="0" y="761" w="390" h="83" fill="$surface" border-top="1 $border" p="9 14 28 14">
      <row w="fill" gap="auto" align="top-center">
        <col w="70" gap="4" align="top-center">
          <img src="https://api.iconify.design/lucide/compass.svg?color=%23E96F45" w="22" h="22" />
          <text value="Discover" text-style="Caption" fill="$ember" align="center" />
        </col>
        <col w="70" gap="4" align="top-center">
          <img src="https://api.iconify.design/lucide/search.svg?color=%23AAA1AA" w="22" h="22" />
          <text value="Search" text-style="Caption" fill="$muted" align="center" />
        </col>
        <col w="70" gap="4" align="top-center">
          <img src="https://api.iconify.design/lucide/ticket.svg?color=%23AAA1AA" w="22" h="22" />
          <text value="Tickets" text-style="Caption" fill="$muted" align="center" />
        </col>
        <col w="70" gap="4" align="top-center">
          <img src="https://api.iconify.design/lucide/bookmark.svg?color=%23AAA1AA" w="22" h="22" />
          <text value="Saved" text-style="Caption" fill="$muted" align="center" />
        </col>
      </row>
    </col>
  </frame>
</gui>
```