---
title: "The Aldridge Philharmonic · This Evening"
platform: ios
slug: the-aldridge-philharmonic-this-evening
screens: []
domains: ["music"]
style: "art-deco"
fonts: ["Jost", "Cinzel", "EB Garamond"]
roles: ["top-navigation-bar", "button", "card"]
score: {clean: 100, consistent: 80, accessible: 72, comprehensible: 16}
url: https://gui.farm/ios/the-aldridge-philharmonic-this-evening
raw: https://gui.farm/ios/the-aldridge-philharmonic-this-evening/design.guix
download: https://gui.farm/ios/the-aldridge-philharmonic-this-evening.gui
---

# The Aldridge Philharmonic · This Evening

A dark art-deco iOS concert programme where a symphony patron reviews the evening's running order of Weber, Rachmaninoff and Dvořák with durations, movements, an at-a-glance evening timeline, intermission, and their reserved seat.

- **Live preview:** https://gui.farm/ios/the-aldridge-philharmonic-this-evening
- **Raw source:** https://gui.farm/ios/the-aldridge-philharmonic-this-evening/design.guix
- **Download (.gui):** https://gui.farm/ios/the-aldridge-philharmonic-this-evening.gui

## Source (design.guix)

```xml
<gui version="0.2" name="The Aldridge Philharmonic · This Evening's Programme">
  <tokens>
    <color name="ground" value="#0E0F14" />
    <color name="surface" value="#171A24" />
    <color name="surface-2" value="#1F2331" />
    <color name="ink" value="#F3EEE1" />
    <color name="ink-soft" value="#D2CBBA" />
    <color name="muted" value="#9EA0AC" />
    <color name="hair" value="#2C2F3D" />
    <color name="cobalt" value="#2F5BD7" />
    <color name="cobalt-bright" value="#82ABF6" />
    <color name="on-cobalt" value="#F7FAFF" />
    <color name="int-seg" value="#3B4256" />
    <number name="r-card" value="16" />
    <number name="r-btn" value="12" />
    <number name="r-pill" value="999" />
  </tokens>
  <fonts>
    <font family="Cinzel" source="google" weights="400 500 600 700" styles="normal" />
    <font family="Jost" source="google" weights="400 500 600 700" styles="normal" />
    <font family="EB Garamond" source="google" weights="400 500 600" styles="normal italic" />
  </fonts>
  <styles>
    <text-style name="StatusTime" font-family="Jost" font-size="15" font-weight="600" line-height="18" />
    <text-style
      name="NavCaps"
      font-family="Jost"
      font-size="11"
      font-weight="600"
      line-height="14"
      letter-spacing="2.4"
    />
    <text-style
      name="SectionHead"
      font-family="Cinzel"
      font-size="16"
      font-weight="600"
      line-height="20"
      letter-spacing="2"
    />
    <text-style
      name="Overline"
      font-family="Jost"
      font-size="10"
      font-weight="600"
      line-height="14"
      letter-spacing="2"
    />
    <text-style
      name="Title"
      font-family="Cinzel"
      font-size="29"
      font-weight="700"
      line-height="34"
      letter-spacing="0.4"
    />
    <text-style name="Numeral" font-family="Cinzel" font-size="23" font-weight="600" line-height="26" />
    <text-style
      name="ComposerCaps"
      font-family="Jost"
      font-size="12"
      font-weight="600"
      line-height="15"
      letter-spacing="1.4"
    />
    <text-style
      name="WorkTitle"
      font-family="EB Garamond"
      font-size="20"
      font-weight="500"
      font-style="italic"
      line-height="25"
    />
    <text-style name="Body" font-family="EB Garamond" font-size="16" font-weight="400" line-height="25" />
    <text-style
      name="Movement"
      font-family="EB Garamond"
      font-size="14"
      font-weight="400"
      font-style="italic"
      line-height="21"
    />
    <text-style
      name="MetaLabel"
      font-family="Jost"
      font-size="10"
      font-weight="600"
      line-height="13"
      letter-spacing="1.8"
    />
    <text-style name="MetaValue" font-family="Jost" font-size="15" font-weight="600" line-height="19" />
    <text-style name="Duration" font-family="Jost" font-size="13" font-weight="600" line-height="16" />
    <text-style
      name="Btn"
      font-family="Jost"
      font-size="15"
      font-weight="600"
      line-height="18"
      letter-spacing="0.4"
    />
  </styles>
  <col w="393" fill="$ground" align="top-center">
    <row w="fill" h="50" p="0 22" gap="auto" align="bottom-center">
      <text value="9:41" text-style="StatusTime" color="$ink" />
      <row w="hug" gap="7" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23F3EEE1" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F3EEE1" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F3EEE1" w="22" h="17" />
      </row>
    </row>
    <row
      w="fill"
      h="56"
      p="0 14"
      gap="auto"
      align="middle-center"
      fill="$ground"
      border-bottom="1 $hair"
      role="top-navigation-bar"
    >
      <row w="40" h="40" radius="$r-pill" fill="$surface" border="1 $hair" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%23F3EEE1" w="20" h="20" />
      </row>
      <text value="TONIGHT'S PROGRAMME" text-style="NavCaps" color="$ink-soft" />
      <row w="40" h="40" radius="$r-pill" fill="$surface" border="1 $hair" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/share.svg?color=%23F3EEE1" w="18" h="18" />
      </row>
    </row>
    <frame w="393" h="296" clip="true">
      <img
        x="0"
        y="0"
        w="393"
        h="296"
        fit="cover"
        src="https://images.unsplash.com/photo-1519683109079-d5f539e1542f"
      />
      <rect
        x="0"
        y="0"
        w="393"
        h="296"
        fill="linear-gradient(180deg, #0E0F1400 0%, #0E0F1466 28%, #0E0F14E6 60%, #0E0F14 100%)"
      />
      <rect x="0" y="0" w="393" h="120" fill="linear-gradient(180deg, #12305E55 0%, #0E0F1400 100%)" />
      <text x="22" y="196" value="THORNE CONCERT HALL" text-style="NavCaps" color="$ink" />
      <text
        x="22"
        y="220"
        value="SATURDAY · 22 AUGUST 2026 · 7:30 PM"
        text-style="Overline"
        color="$ink-soft"
      />
      <rect x="22" y="246" w="52" h="3" fill="$cobalt" />
    </frame>
    <col w="fill" p="22 20 0" gap="9" align="top-left">
      <text value="SEASON 88 · CONCERT THREE" text-style="Overline" color="$cobalt-bright" />
      <text value="The Aldridge Philharmonic" text-style="Title" color="$ink" />
      <text value="Elias V. Rourke, Principal Conductor" text-style="Body" color="$ink-soft" />
      <text value="Mireille Chastain, piano" text-style="Body" color="$muted" />
      <col w="fill" gap="3" p="8 0 0">
        <rect w="fill" h="2" fill="$cobalt" />
        <rect w="fill" h="1" fill="$hair" />
      </col>
    </col>
    <col w="fill" p="22 20 0" gap="12" align="top-left">
      <text value="THIS EVENING" text-style="SectionHead" color="$ink" />
      <col
        w="fill"
        fill="$surface"
        border="1 $hair"
        radius="$r-card"
        p="16"
        gap="14"
        align="top-left"
        role="card"
      >
        <row w="fill" gap="12" align="top-left">
          <col w="fill" gap="4" align="top-left">
            <text value="DOWNBEAT" text-style="MetaLabel" color="$muted" />
            <text value="7:30 PM" text-style="MetaValue" color="$ink" />
          </col>
          <col w="fill" gap="4" align="top-left">
            <text value="DOORS OPEN" text-style="MetaLabel" color="$muted" />
            <text value="6:45 PM" text-style="MetaValue" color="$ink" />
          </col>
        </row>
        <rect w="fill" h="1" fill="$hair" />
        <row w="fill" gap="12" align="top-left">
          <col w="fill" gap="4" align="top-left">
            <text value="RUNNING TIME" text-style="MetaLabel" color="$muted" />
            <text value="1 h 40 m" text-style="MetaValue" color="$ink" />
          </col>
          <col w="fill" gap="4" align="top-left">
            <text value="APPROX. CURTAIN" text-style="MetaLabel" color="$muted" />
            <text value="9:10 PM" text-style="MetaValue" color="$ink" />
          </col>
        </row>
      </col>
      <row w="fill" fill="$surface-2" border="1 $hair" radius="$r-btn" p="13 15" gap="12" align="middle-center">
        <img src="https://api.iconify.design/lucide/ticket.svg?color=%2382ABF6" w="20" h="20" />
        <col w="fill" gap="3" align="top-left">
          <text value="YOUR SEAT" text-style="MetaLabel" color="$cobalt-bright" />
          <text value="Grand Tier · Row F · Seat 112" text-style="MetaValue" color="$ink" />
        </col>
        <text value="E-TICKET" text-style="Overline" color="$muted" />
      </row>
    </col>
    <col w="fill" p="22 20 0" gap="12" align="top-left">
      <text value="THE EVENING AT A GLANCE" text-style="SectionHead" color="$ink" />
      <col
        w="fill"
        fill="$surface"
        border="1 $hair"
        radius="$r-card"
        p="16"
        gap="12"
        align="top-left"
        role="card"
      >
        <row w="fill" h="16" radius="4" clip="true" gap="0" align="middle-left">
          <rect w="30" h="16" fill="$cobalt" />
          <rect w="102" h="16" fill="$cobalt-bright" />
          <rect w="60" h="16" fill="$int-seg" />
          <rect w="fill" h="16" fill="$cobalt" />
        </row>
        <row w="fill" gap="10" align="middle-center">
          <text value="7:30 PM" text-style="Duration" color="$muted" />
          <rect w="fill" h="1" fill="$hair" />
          <text value="9:10 PM" text-style="Duration" color="$muted" />
        </row>
        <rect w="fill" h="1" fill="$hair" />
        <row w="fill" gap="16" align="middle-left">
          <row w="hug" gap="7" align="middle-center">
            <rect w="10" h="10" radius="2" fill="$cobalt-bright" />
            <text value="80 MIN OF MUSIC" text-style="MetaLabel" color="$ink-soft" />
          </row>
          <row w="hug" gap="7" align="middle-center">
            <rect w="10" h="10" radius="2" fill="$int-seg" />
            <text value="20 MIN INTERMISSION" text-style="MetaLabel" color="$ink-soft" />
          </row>
        </row>
      </col>
    </col>
    <col w="fill" p="24 20 0" gap="16" align="top-left">
      <col w="fill" gap="3" align="top-left">
        <text value="PROGRAMME" text-style="SectionHead" color="$ink" />
        <rect w="46" h="2" fill="$cobalt" />
      </col>
      <row w="fill" gap="14" align="top-left">
        <text w="30" value="I" text-style="Numeral" color="$cobalt-bright" align="left" />
        <col w="fill" gap="5" align="top-left">
          <row w="fill" gap="auto" align="middle-center">
            <text value="CARL MARIA VON WEBER" text-style="ComposerCaps" color="$cobalt-bright" />
            <text value="10 min" text-style="Duration" color="$muted" />
          </row>
          <text value="Overture to Der Freischütz, J. 277" text-style="WorkTitle" color="$ink" />
        </col>
      </row>
      <rect w="fill" h="1" fill="$hair" />
      <row w="fill" gap="14" align="top-left">
        <text w="30" value="II" text-style="Numeral" color="$cobalt-bright" align="left" />
        <col w="fill" gap="5" align="top-left">
          <row w="fill" gap="auto" align="middle-center">
            <text value="SERGEI RACHMANINOFF" text-style="ComposerCaps" color="$cobalt-bright" />
            <text value="34 min" text-style="Duration" color="$muted" />
          </row>
          <text value="Piano Concerto No. 2 in C minor, Op. 18" text-style="WorkTitle" color="$ink" />
          <text value="Mireille Chastain, piano" text-style="Body" color="$ink-soft" />
          <col w="fill" gap="2" p="4 0 0" align="top-left">
            <text value="I. Moderato" text-style="Movement" color="$muted" />
            <text value="II. Adagio sostenuto" text-style="Movement" color="$muted" />
            <text value="III. Allegro scherzando" text-style="Movement" color="$muted" />
          </col>
        </col>
      </row>
      <row w="fill" gap="12" p="6 0" align="middle-center">
        <rect w="fill" h="1" fill="$hair" />
        <text value="INTERMISSION · 20 MINUTES" text-style="Overline" color="$cobalt-bright" />
        <rect w="fill" h="1" fill="$hair" />
      </row>
      <row w="fill" gap="14" align="top-left">
        <text w="30" value="III" text-style="Numeral" color="$cobalt-bright" align="left" />
        <col w="fill" gap="5" align="top-left">
          <row w="fill" gap="auto" align="middle-center">
            <text value="ANTONÍN DVOŘÁK" text-style="ComposerCaps" color="$cobalt-bright" />
            <text value="36 min" text-style="Duration" color="$muted" />
          </row>
          <text value="Symphony No. 8 in G major, Op. 88" text-style="WorkTitle" color="$ink" />
          <col w="fill" gap="2" p="4 0 0" align="top-left">
            <text value="I. Allegro con brio" text-style="Movement" color="$muted" />
            <text value="II. Adagio" text-style="Movement" color="$muted" />
            <text value="III. Allegretto grazioso" text-style="Movement" color="$muted" />
            <text value="IV. Allegro ma non troppo" text-style="Movement" color="$muted" />
          </col>
        </col>
      </row>
    </col>
    <col w="fill" p="24 20 0" gap="10" align="top-left">
      <text value="FROM THE PODIUM" text-style="Overline" color="$muted" />
      <text
        value="Rourke pairs Weber's storm-lit overture with Rachmaninoff's best-loved concerto, then closes on the pastoral warmth of Dvořák's Eighth, a Bohemian symphony written in a single sunlit summer at Vysoká in 1889."
        text-style="Body"
        color="$ink-soft"
      />
    </col>
    <col w="fill" p="28 20 16" gap="0" align="top-center">
      <col w="fill" gap="3" align="middle-center">
        <text value="THE ALDRIDGE PHILHARMONIC" text-style="NavCaps" color="$ink-soft" />
        <text value="FOUNDED 1938" text-style="Overline" color="$muted" />
      </col>
    </col>
    <row w="fill" p="14 20 22" gap="12" align="middle-center" fill="$surface" border-top="1 $hair">
      <row w="fill" h="52" radius="$r-btn" fill="$cobalt" gap="9" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/calendar-plus.svg?color=%23F7FAFF" w="19" h="19" />
        <text value="Add to Calendar" text-style="Btn" color="$on-cobalt" />
      </row>
      <row w="52" h="52" radius="$r-btn" fill="$surface-2" border="1 $hair" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/map-pin.svg?color=%23F3EEE1" w="20" h="20" />
      </row>
    </row>
    <row w="fill" h="26" align="middle-center">
      <rect w="134" h="5" radius="$r-pill" fill="#FFFFFF3D" />
    </row>
  </col>
</gui>
```