---
title: "Arcade Hub Notifications"
platform: ios
slug: arcade-notifications
screens: ["notifications"]
domains: ["gaming"]
style: "retro"
fonts: ["Press Start 2P", "SF Pro Display", "VT323"]
roles: []
score: {clean: 100, consistent: 73, accessible: 53, comprehensible: 0}
url: https://gui.farm/ios/arcade-notifications
raw: https://gui.farm/ios/arcade-notifications/design.guix
download: https://gui.farm/ios/arcade-notifications.gui
---

# Arcade Hub Notifications

A retro CRT-styled notification center for a competitive arcade gaming platform, with a live tournament alert, achievement XP progress, squad requests, and reward claims.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Arcade Hub Notifications">
  <tokens>
    <color name="bg" value="#0F0F12" />
    <color name="surface" value="#17171C" />
    <color name="surface-2" value="#20202A" />
    <color name="border" value="#33333F" />
    <color name="accent" value="#F5B841" />
    <color name="ink" value="#0F0F12" />
    <color name="text-primary" value="#F2EDE3" />
    <color name="text-secondary" value="#9C968A" />
    <color name="text-tertiary" value="#948E82" />
    <number name="r-card" value="6" />
    <number name="r-sm" value="4" />
  </tokens>

  <styles>
    <text-style name="Pixel/Eyebrow" font-family="Press Start 2P" font-size="8" font-weight="400" line-height="12" letter-spacing="0.5" />
    <text-style name="Pixel/Label" font-family="Press Start 2P" font-size="9" font-weight="400" line-height="13" letter-spacing="0.5" />
    <text-style name="Pixel/Button" font-family="Press Start 2P" font-size="10" font-weight="400" line-height="14" letter-spacing="0.5" />
    <text-style name="Pixel/Tab" font-family="Press Start 2P" font-size="7" font-weight="400" line-height="10" letter-spacing="0.5" />
    <text-style name="Title/Screen" font-family="SF Pro Display" font-size="28" font-weight="700" line-height="34" />
    <text-style name="Title/Card" font-family="SF Pro Display" font-size="19" font-weight="700" line-height="24" />
    <text-style name="Title/Row" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Body/Sub" font-family="SF Pro Display" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Body/Action" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="18" />
    <text-style name="Body/Meta" font-family="SF Pro Display" font-size="12" font-weight="400" line-height="16" />
    <text-style name="Crt/Timer" font-family="VT323" font-size="30" font-weight="400" line-height="30" />
    <text-style name="Crt/Stat" font-family="VT323" font-size="17" font-weight="400" line-height="18" />
  </styles>

  <fonts>
    <font family="Press Start 2P" source="google" weights="400" styles="normal" />
    <font family="VT323" source="google" weights="400" styles="normal" />
    <font family="SF Pro Display" source="system" weights="400 600 700" styles="normal" />
  </fonts>

  <col w="393" fill="$bg" pb="0">

    <!-- Header: brand eyebrow + large title + settings -->
    <col w="fill" p="58 16 12 16" gap="12">
      <row w="fill" gap="auto" align="middle-center">
        <col gap="5">
          <text text-style="Pixel/Eyebrow" value="ARCADE HUB" color="$accent" />
          <text text-style="Title/Screen" value="Notifications" color="$text-primary" />
        </col>
        <row w="40" h="40" radius="$r-card" fill="$surface" border="2 $border" align="middle-center">
          <img src="https://api.iconify.design/lucide/settings.svg?color=%239C968A" w="20" h="20" />
        </row>
      </row>

      <!-- Filter chips + unread count -->
      <row w="fill" gap="auto" align="middle-center">
        <row gap="8" align="middle-center">
          <row p="7 11" radius="$r-sm" fill="$accent" align="middle-center">
            <text text-style="Pixel/Tab" value="ALL" color="$ink" />
          </row>
          <row p="7 11" radius="$r-sm" fill="$surface" border="2 $border" align="middle-center">
            <text text-style="Pixel/Tab" value="SQUAD" color="$text-secondary" />
          </row>
          <row p="7 11" radius="$r-sm" fill="$surface" border="2 $border" align="middle-center">
            <text text-style="Pixel/Tab" value="REWARDS" color="$text-secondary" />
          </row>
        </row>
        <row gap="6" align="middle-center">
          <ellipse w="7" h="7" fill="$accent" />
          <text text-style="Pixel/Label" value="4 NEW" color="$accent" />
        </row>
      </row>
    </col>

    <col w="fill" p="4 16 24 16" gap="12">

      <!-- HERO: tournament alert with photo + primary CTA -->
      <col w="fill" fill="$surface" radius="8" border="2 $accent">
        <img src="https://images.unsplash.com/photo-1498736297812-3a08021f206f?w=760&amp;h=296&amp;fit=crop&amp;q=70" w="fill" h="148" fit="cover" radius="6" />
        <col w="fill" p="14" gap="10">
          <row gap="8" align="middle-center">
            <row p="4 8" radius="$r-sm" fill="$accent" align="middle-center" gap="5">
              <ellipse w="6" h="6" fill="$ink" />
              <text text-style="Pixel/Eyebrow" value="LIVE SOON" color="$ink" />
            </row>
            <text text-style="Pixel/Eyebrow" value="TOURNAMENT" color="$text-secondary" />
          </row>
          <text text-style="Title/Card" value="Neon Circuit: Season Finals" color="$text-primary" />
          <row gap="8" align="middle-center">
            <img src="https://api.iconify.design/lucide/users.svg?color=%239C968A" w="14" h="14" />
            <text text-style="Body/Sub" value="128 players" color="$text-secondary" />
            <text text-style="Body/Sub" value="/" color="$border" />
            <img src="https://api.iconify.design/lucide/trophy.svg?color=%23F5B841" w="14" h="14" />
            <text text-style="Body/Sub" value="$5,000 pool" color="$text-secondary" />
          </row>
          <row w="fill" gap="auto" align="middle-center" pt="4">
            <col gap="3">
              <text text-style="Pixel/Eyebrow" value="BRACKET LOCKS IN" color="$text-secondary" />
              <text text-style="Crt/Timer" value="04:12" color="$accent" />
            </col>
            <row p="13 18" radius="$r-card" fill="$accent" align="middle-center" gap="8">
              <appearance>
                <effect type="drop-shadow" x="0" y="3" radius="0" spread="0" color="#00000099" />
              </appearance>
              <img src="https://api.iconify.design/lucide/swords.svg?color=%230F0F12" w="16" h="16" />
              <text text-style="Pixel/Button" value="JOIN" color="$ink" />
            </row>
          </row>
        </col>
      </col>

      <!-- Section: TODAY -->
      <row w="fill" gap="auto" align="middle-center" pt="4">
        <text text-style="Pixel/Label" value="TODAY" color="$text-secondary" />
        <text text-style="Body/Action" value="Mark all read" color="$accent" />
      </row>

      <!-- Achievement (unread) with XP progress bar -->
      <col w="fill" fill="$surface" radius="$r-card" border="2 $accent" p="12" gap="10">
        <row w="fill" gap="12" align="top-left">
          <row w="40" h="40" radius="$r-sm" fill="$surface-2" border="2 $border" align="middle-center">
            <img src="https://api.iconify.design/lucide/trophy.svg?color=%23F5B841" w="20" h="20" />
          </row>
          <col w="fill" gap="4">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Pixel/Eyebrow" value="ACHIEVEMENT" color="$accent" />
              <row gap="7" align="middle-center">
                <ellipse w="7" h="7" fill="$accent" />
                <text text-style="Body/Meta" value="2m" color="$text-tertiary" />
              </row>
            </row>
            <text text-style="Title/Row" value="Perfect Run: cleared Sector 9 flawlessly" color="$text-primary" />
            <text text-style="Body/Sub" value="No damage, no continues. +250 XP banked." color="$text-secondary" />
          </col>
        </row>
        <col w="fill" gap="6" pt="2">
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="Pixel/Eyebrow" value="RANK 23" color="$text-secondary" />
            <text text-style="Crt/Stat" value="1,840 / 2,500 XP" color="$accent" />
          </row>
          <frame w="250" h="12" radius="3" fill="$surface-2">
            <rect x="0" y="0" w="184" h="12" radius="3" fill="$accent" />
          </frame>
        </col>
      </col>

      <!-- Squad request (unread) with dual actions -->
      <col w="fill" fill="$surface" radius="$r-card" border="2 $accent" p="12" gap="10">
        <row w="fill" gap="12" align="top-left">
          <row w="40" h="40" radius="$r-sm" fill="$surface-2" border="2 $border" align="middle-center">
            <img src="https://api.iconify.design/lucide/user-plus.svg?color=%23F5B841" w="20" h="20" />
          </row>
          <col w="fill" gap="4">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Pixel/Eyebrow" value="SQUAD REQUEST" color="$accent" />
              <row gap="7" align="middle-center">
                <ellipse w="7" h="7" fill="$accent" />
                <text text-style="Body/Meta" value="14m" color="$text-tertiary" />
              </row>
            </row>
            <text text-style="Title/Row" value="Mara 'Voltage' Okonkwo wants to squad up" color="$text-primary" />
            <text text-style="Body/Sub" value="Ranked #2 on your regional Blitz ladder." color="$text-secondary" />
          </col>
        </row>
        <row gap="8" w="fill">
          <row w="fill" p="11" radius="$r-card" fill="$accent" align="middle-center">
            <text text-style="Pixel/Button" value="ACCEPT" color="$ink" />
          </row>
          <row w="fill" p="11" radius="$r-card" fill="$surface-2" border="2 $border" align="middle-center">
            <text text-style="Pixel/Button" value="IGNORE" color="$text-secondary" />
          </row>
        </row>
      </col>

      <!-- Leaderboard drop (unread) -->
      <col w="fill" fill="$surface" radius="$r-card" border="2 $accent" p="12">
        <row w="fill" gap="12" align="top-left">
          <row w="40" h="40" radius="$r-sm" fill="$surface-2" border="2 $border" align="middle-center">
            <img src="https://api.iconify.design/lucide/trending-down.svg?color=%23F5B841" w="20" h="20" />
          </row>
          <col w="fill" gap="4">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Pixel/Eyebrow" value="LEADERBOARD" color="$accent" />
              <row gap="7" align="middle-center">
                <ellipse w="7" h="7" fill="$accent" />
                <text text-style="Body/Meta" value="1h" color="$text-tertiary" />
              </row>
            </row>
            <text text-style="Title/Row" value="You slipped to #4 on the Blitz Ladder" color="$text-primary" />
            <text text-style="Body/Sub" value="Rono edged ahead by 320 points. Reclaim your spot." color="$text-secondary" />
          </col>
        </row>
      </col>

      <!-- Section: YESTERDAY -->
      <row w="fill" align="middle-center" pt="4">
        <text text-style="Pixel/Label" value="YESTERDAY" color="$text-secondary" />
      </row>

      <!-- Daily streak reward (unread) with inline action -->
      <col w="fill" fill="$surface" radius="$r-card" border="2 $accent" p="12">
        <row w="fill" gap="12" align="top-left">
          <row w="40" h="40" radius="$r-sm" fill="$surface-2" border="2 $border" align="middle-center">
            <img src="https://api.iconify.design/lucide/flame.svg?color=%23F5B841" w="20" h="20" />
          </row>
          <col w="fill" gap="4">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Pixel/Eyebrow" value="DAILY STREAK" color="$accent" />
              <row gap="7" align="middle-center">
                <ellipse w="7" h="7" fill="$accent" />
                <text text-style="Body/Meta" value="19h" color="$text-tertiary" />
              </row>
            </row>
            <text text-style="Title/Row" value="12 day streak unlocked" color="$text-primary" />
            <text text-style="Body/Sub" value="Your bonus resets tonight at midnight." color="$text-secondary" />
            <text text-style="Body/Action" value="Claim 500 credits" color="$accent" pt="2" />
          </col>
        </row>
      </col>

      <!-- Patch notes (read) -->
      <col w="fill" fill="$surface" radius="$r-card" border="2 $border" p="12">
        <row w="fill" gap="12" align="top-left">
          <row w="40" h="40" radius="$r-sm" fill="$surface-2" border="2 $border" align="middle-center">
            <img src="https://api.iconify.design/lucide/download.svg?color=%239C968A" w="20" h="20" />
          </row>
          <col w="fill" gap="4">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Pixel/Eyebrow" value="PATCH NOTES" color="$text-secondary" />
              <text text-style="Body/Meta" value="1d" color="$text-tertiary" />
            </row>
            <text text-style="Title/Row" value="Neon Circuit v2.4 is live" color="$text-primary" />
            <text text-style="Body/Sub" value="New Sector 9 boss, 3 balance fixes, HDR support." color="$text-secondary" />
          </col>
        </row>
      </col>

      <!-- System maintenance (read) -->
      <col w="fill" fill="$surface" radius="$r-card" border="2 $border" p="12">
        <row w="fill" gap="12" align="top-left">
          <row w="40" h="40" radius="$r-sm" fill="$surface-2" border="2 $border" align="middle-center">
            <img src="https://api.iconify.design/lucide/wrench.svg?color=%239C968A" w="20" h="20" />
          </row>
          <col w="fill" gap="4">
            <row w="fill" gap="auto" align="middle-center">
              <text text-style="Pixel/Eyebrow" value="SYSTEM" color="$text-secondary" />
              <text text-style="Body/Meta" value="2d" color="$text-tertiary" />
            </row>
            <text text-style="Title/Row" value="Scheduled maintenance finished at 02:00 UTC" color="$text-primary" />
            <text text-style="Body/Sub" value="All ranked queues are back online." color="$text-secondary" />
          </col>
        </row>
      </col>

    </col>

    <!-- Bottom tab bar (last flow child) -->
    <row w="fill" p="12 24 34 24" fill="$surface" border-top="2 $border" gap="auto" align="top-center">
      <col align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/gamepad-2.svg?color=%239C968A" w="22" h="22" />
        <text text-style="Pixel/Tab" value="PLAY" color="$text-secondary" />
      </col>
      <col align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/swords.svg?color=%239C968A" w="22" h="22" />
        <text text-style="Pixel/Tab" value="ARENA" color="$text-secondary" />
      </col>
      <col align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/bell.svg?color=%23F5B841" w="22" h="22" />
        <text text-style="Pixel/Tab" value="ALERTS" color="$accent" />
      </col>
      <col align="top-center" gap="5">
        <img src="https://api.iconify.design/lucide/circle-user.svg?color=%239C968A" w="22" h="22" />
        <text text-style="Pixel/Tab" value="PROFILE" color="$text-secondary" />
      </col>
    </row>

  </col>
</gui>

```