---
title: "Broadside — Paper Cathedrals, Reviewed"
platform: ios
slug: broadside-paper-cathedrals-reviewed
screens: ["reviews"]
domains: ["music"]
style: null
fonts: ["Space Grotesk", "Playfair Display", "EB Garamond"]
roles: ["top-navigation-bar", "button", "badge", "card", "table", "chip", "avatar", "tab-bar"]
score: {clean: 100, consistent: 74, accessible: 85, comprehensible: 55}
url: https://gui.farm/ios/broadside-paper-cathedrals-reviewed
raw: https://gui.farm/ios/broadside-paper-cathedrals-reviewed/design.guix
download: https://gui.farm/ios/broadside-paper-cathedrals-reviewed.gui
---

# Broadside — Paper Cathedrals, Reviewed

A print-magazine-style iOS album review where a music critic scores Juno Vale's "Paper Cathedrals" with a verdict, a five-dimension score breakdown, the written review, and the full tracklist.

- **Live preview:** https://gui.farm/ios/broadside-paper-cathedrals-reviewed
- **Raw source:** https://gui.farm/ios/broadside-paper-cathedrals-reviewed/design.guix
- **Download (.gui):** https://gui.farm/ios/broadside-paper-cathedrals-reviewed.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Broadside — Paper Cathedrals, Reviewed">
  <tokens>
    <color name="paper" value="#F2EBDD" />
    <color name="surface" value="#FAF4E9" />
    <color name="ink" value="#1B1712" />
    <color name="ink-soft" value="#4E463A" />
    <color name="muted" value="#675F4E" />
    <color name="hair" value="#E2D8C6" />
    <color name="track" value="#E7DDCB" />
    <color name="ox" value="#7B1E2B" />
    <color name="ox-deep" value="#6A1622" />
    <color name="ox-tint" value="#F2E1DC" />
    <color name="on-ox" value="#FBF4E7" />
    <number name="r-card" value="14" />
    <number name="r-pill" value="999" />
  </tokens>

  <fonts>
    <font family="Playfair Display" source="google" weights="400 500 600 700 800 900" styles="normal italic" />
    <font family="EB Garamond" source="google" weights="400 500 600" styles="normal italic" />
    <font family="Space Grotesk" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>

  <styles>
    <text-style name="Time" font-family="Space Grotesk" font-size="15" font-weight="600" line-height="18" />
    <text-style name="Wordmark" font-family="Playfair Display" font-size="19" font-weight="800" line-height="22" letter-spacing="0.5" />
    <text-style name="NavSub" font-family="Space Grotesk" font-size="9" font-weight="600" line-height="12" letter-spacing="2.4" />
    <text-style name="Eyebrow" font-family="Space Grotesk" font-size="11" font-weight="600" line-height="14" letter-spacing="1.8" />
    <text-style name="EyebrowSm" font-family="Space Grotesk" font-size="10" font-weight="600" line-height="13" letter-spacing="1.6" />
    <text-style name="Badge" font-family="Space Grotesk" font-size="10" font-weight="700" line-height="12" letter-spacing="1.2" />
    <text-style name="Title" font-family="Playfair Display" font-size="41" font-weight="800" line-height="44" letter-spacing="-0.5" />
    <text-style name="Artist" font-family="EB Garamond" font-size="20" font-weight="500" line-height="24" />
    <text-style name="Meta" font-family="Space Grotesk" font-size="12" font-weight="500" line-height="16" letter-spacing="0.2" />
    <text-style name="Score" font-family="Playfair Display" font-size="58" font-weight="800" line-height="56" letter-spacing="-1" />
    <text-style name="ScoreDen" font-family="Space Grotesk" font-size="11" font-weight="600" line-height="14" letter-spacing="1.2" />
    <text-style name="Quote" font-family="EB Garamond" font-size="19" font-weight="500" line-height="26" />
    <text-style name="Lede" font-family="EB Garamond" font-size="16" font-weight="600" line-height="26" />
    <text-style name="Body" font-family="EB Garamond" font-size="16" font-weight="400" line-height="26" />
    <text-style name="RowLabel" font-family="Space Grotesk" font-size="13" font-weight="600" line-height="16" />
    <text-style name="RowVal" font-family="Space Grotesk" font-size="13" font-weight="700" line-height="16" />
    <text-style name="TrackNo" font-family="Space Grotesk" font-size="13" font-weight="600" line-height="18" letter-spacing="0.5" />
    <text-style name="TrackName" font-family="EB Garamond" font-size="17" font-weight="600" line-height="21" />
    <text-style name="Dur" font-family="Space Grotesk" font-size="13" font-weight="500" line-height="17" letter-spacing="0.3" />
    <text-style name="Chip" font-family="Space Grotesk" font-size="9" font-weight="700" line-height="11" letter-spacing="1" />
    <text-style name="Detail" font-family="Space Grotesk" font-size="13" font-weight="500" line-height="17" />
    <text-style name="DetailV" font-family="EB Garamond" font-size="15" font-weight="600" line-height="19" />
    <text-style name="Byline" font-family="EB Garamond" font-size="16" font-weight="600" line-height="20" />
    <text-style name="Init" font-family="Playfair Display" font-size="15" font-weight="700" line-height="18" />
    <text-style name="Tab" font-family="Space Grotesk" font-size="10" font-weight="600" line-height="13" letter-spacing="0.2" />
    <text-style name="SectionTitle" font-family="Playfair Display" font-size="20" font-weight="700" line-height="24" />
  </styles>

  <col w="393" fill="$paper" align="top-center">

    <!-- status bar (device chrome, untagged) -->
    <row w="393" h="47" p="14 22 0 22" align="middle-left">
      <text w="fill" value="9:41" text-style="Time" color="$ink" />
      <row gap="7" align="middle-right">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%231B1712" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%231B1712" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%231B1712" w="24" h="17" />
      </row>
    </row>

    <!-- top navigation -->
    <row w="fill" h="54" p="0 12" gap="auto" align="middle-center" fill="$paper" 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=%231B1712" w="20" h="20" />
      </row>
      <col gap="2" align="middle-center">
        <text value="BROADSIDE" text-style="Wordmark" color="$ink" align="center" />
        <text value="THE REVIEW" text-style="NavSub" color="$ox" align="center" />
      </col>
      <row gap="8" align="middle-right">
        <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=%231B1712" w="18" h="18" />
        </row>
        <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/bookmark.svg?color=%231B1712" w="18" h="18" />
        </row>
      </row>
    </row>

    <!-- HERO: verified cathedral photograph, text only over the dark gradient -->
    <frame w="393" h="300" clip="true">
      <img x="0" y="0" w="393" h="300" fit="cover" src="https://images.unsplash.com/photo-1473177104440-ffee2f376098?auto=format&amp;fit=crop&amp;w=786&amp;h=600&amp;q=80" />
      <rect x="0" y="0" w="393" h="300" fill="linear-gradient(180deg, #17120CE6 0%, #17120C33 30%, #17120C66 66%, #17120CF2 100%)" />
      <text x="24" y="24" value="ISSUE 47 · NEW THIS WEEK" text-style="Eyebrow" color="$on-ox" />
      <row x="255" y="20" fill="$ox" radius="$r-pill" p="6 12" gap="6" align="middle-center" role="badge">
        <img src="https://api.iconify.design/lucide/star.svg?color=%23FBF4E7" w="12" h="12" />
        <text value="RECOMMENDED" text-style="Badge" color="$on-ox" />
      </row>
      <col x="24" y="228" w="345" gap="8" align="bottom-left">
        <text value="CHAMBER FOLK · 41 MINUTES" text-style="EyebrowSm" color="$on-ox" />
        <row gap="8" align="middle-left">
          <img src="https://api.iconify.design/lucide/disc-3.svg?color=%23FBF4E7" w="16" h="16" />
          <text value="Full album, on repeat since Tuesday" text-style="Meta" color="$on-ox" />
        </row>
      </col>
    </frame>

    <!-- headline block -->
    <col w="fill" p="20 22 6 22" gap="0">
      <text value="ALBUM · JUNO VALE" text-style="Eyebrow" color="$ox" />
      <text w="fill" pt="10" value="Paper Cathedrals" text-style="Title" color="$ink" />
      <row w="fill" pt="14" gap="auto" align="bottom-left">
        <text value="Juno Vale" text-style="Artist" color="$ink" />
        <text value="Meridian Sound · 2026" text-style="Meta" color="$muted" pb="2" />
      </row>
    </col>

    <!-- verdict card: score + pull quote -->
    <col w="fill" p="12 16" gap="0">
      <row w="fill" fill="$surface" border="1 $hair" radius="$r-card" p="18" gap="16" align="middle-left" role="card">
        <col w="96" gap="6" align="middle-center">
          <text value="8.4" text-style="Score" color="$ox" align="center" />
          <text value="OUT OF 10" text-style="ScoreDen" color="$muted" align="center" />
        </col>
        <rect w="1" h="96" fill="$hair" />
        <col w="fill" gap="10" align="middle-left">
          <text w="fill" value="&#8220;A hushed, devastating record that turns a house coming apart into something close to prayer.&#8221;" text-style="Quote" color="$ink" />
          <text value="THE VERDICT" text-style="EyebrowSm" color="$ox" />
        </col>
      </row>
    </col>

    <!-- review prose -->
    <col w="fill" p="10 24 6 24" gap="16">
      <text w="fill" value="Juno Vale spent four years and one divorce making Paper Cathedrals, and you can hear both in every seam of it. The Portland songwriter's third record trades the close-mic'd bedroom folk of her early EPs for something bigger and colder: string sections that swell and then abruptly withdraw, an upright piano recorded in an actual chapel, harmonies stacked until they blur." text-style="Body" color="$ink-soft" />
      <text w="fill" value="What keeps it from collapsing under its own weight is Vale's restraint as a lyricist. She writes about grief in the language of household chores, kerosene, a leaking tin ceiling, saltwater on the kitchen floor, and lets the arrangements do the crying. The back half sags a little; two ballads in a row test your patience before the six-minute closer earns the whole thing back." text-style="Body" color="$ink-soft" />
    </col>

    <!-- score breakdown: 5 labelled bars (fill = value / 10 x 200px track) -->
    <col w="fill" p="10 16" gap="0">
      <col w="fill" fill="$surface" border="1 $hair" radius="$r-card" p="18 16" gap="14" role="card">
        <text value="THE VERDICT, BROKEN DOWN" text-style="Eyebrow" color="$muted" />
        <!-- Songwriting 9.1 -> 182 -->
        <row w="329" gap="8" align="middle-center">
          <text w="91" value="Songwriting" text-style="RowLabel" color="$ink" />
          <frame w="200" h="8" radius="4" clip="true" fill="$track">
            <rect x="0" y="0" w="182" h="8" fill="$ox" />
          </frame>
          <text w="22" value="9.1" text-style="RowVal" color="$ink" align="right" />
        </row>
        <!-- Production 8.6 -> 172 -->
        <row w="329" gap="8" align="middle-center">
          <text w="91" value="Production" text-style="RowLabel" color="$ink" />
          <frame w="200" h="8" radius="4" clip="true" fill="$track">
            <rect x="0" y="0" w="172" h="8" fill="$ox" />
          </frame>
          <text w="22" value="8.6" text-style="RowVal" color="$ink" align="right" />
        </row>
        <!-- Arrangement 8.9 -> 178 -->
        <row w="329" gap="8" align="middle-center">
          <text w="91" value="Arrangement" text-style="RowLabel" color="$ink" />
          <frame w="200" h="8" radius="4" clip="true" fill="$track">
            <rect x="0" y="0" w="178" h="8" fill="$ox" />
          </frame>
          <text w="22" value="8.9" text-style="RowVal" color="$ink" align="right" />
        </row>
        <!-- Cohesion 7.6 -> 152 -->
        <row w="329" gap="8" align="middle-center">
          <text w="91" value="Cohesion" text-style="RowLabel" color="$ink" />
          <frame w="200" h="8" radius="4" clip="true" fill="$track">
            <rect x="0" y="0" w="152" h="8" fill="$ox" />
          </frame>
          <text w="22" value="7.6" text-style="RowVal" color="$ink" align="right" />
        </row>
        <!-- Replay 8.0 -> 160 -->
        <row w="329" gap="8" align="middle-center">
          <text w="91" value="Replay" text-style="RowLabel" color="$ink" />
          <frame w="200" h="8" radius="4" clip="true" fill="$track">
            <rect x="0" y="0" w="160" h="8" fill="$ox" />
          </frame>
          <text w="22" value="8.0" text-style="RowVal" color="$ink" align="right" />
        </row>
      </col>
    </col>

    <!-- tracklist -->
    <col w="fill" p="10 22 4 22" gap="0">
      <row w="fill" gap="auto" align="bottom-left">
        <text value="Tracklist" text-style="SectionTitle" color="$ink" />
        <text value="10 tracks · 41:57" text-style="Meta" color="$muted" pb="3" />
      </row>
    </col>
    <col w="fill" p="4 16 8 16" gap="0">
      <col w="fill" fill="$surface" border="1 $hair" radius="$r-card" p="4 0" gap="0" clip="true" role="table">
        <!-- 1 -->
        <row w="fill" p="13 16" gap="12" align="middle-center" border-bottom="1 $hair">
          <text w="18" value="1" text-style="TrackNo" color="$muted" />
          <text w="fill" value="Nave" text-style="TrackName" color="$ink" />
          <text value="3:42" text-style="Dur" color="$muted" align="right" />
        </row>
        <!-- 2 standout -->
        <row w="fill" p="13 16" gap="12" align="middle-center" border-bottom="1 $hair">
          <text w="18" value="2" text-style="TrackNo" color="$muted" />
          <row w="fill" gap="8" align="middle-left">
            <text value="Paper Cathedrals" text-style="TrackName" color="$ink" />
            <row fill="$ox-tint" radius="$r-pill" p="3 7" gap="4" align="middle-center" role="chip">
              <img src="https://api.iconify.design/lucide/star.svg?color=%237B1E2B" w="9" h="9" />
              <text value="STANDOUT" text-style="Chip" color="$ox-deep" />
            </row>
          </row>
          <text value="4:15" text-style="Dur" color="$muted" align="right" />
        </row>
        <!-- 3 -->
        <row w="fill" p="13 16" gap="12" align="middle-center" border-bottom="1 $hair">
          <text w="18" value="3" text-style="TrackNo" color="$muted" />
          <text w="fill" value="Kerosene Hymn" text-style="TrackName" color="$ink" />
          <text value="3:08" text-style="Dur" color="$muted" align="right" />
        </row>
        <!-- 4 -->
        <row w="fill" p="13 16" gap="12" align="middle-center" border-bottom="1 $hair">
          <text w="18" value="4" text-style="TrackNo" color="$muted" />
          <text w="fill" value="Marrow" text-style="TrackName" color="$ink" />
          <text value="4:51" text-style="Dur" color="$muted" align="right" />
        </row>
        <!-- 5 lead single, featured row -->
        <row w="fill" p="12 16" gap="12" fill="$ox-tint" align="middle-center" border-left="3 $ox" border-bottom="1 $hair">
          <text w="18" value="5" text-style="TrackNo" color="$ox-deep" />
          <row w="fill" gap="8" align="middle-left">
            <text value="Little Famine" text-style="TrackName" color="$ox-deep" />
            <row fill="$ox" radius="$r-pill" p="3 7" gap="4" align="middle-center" role="chip">
              <img src="https://api.iconify.design/lucide/audio-lines.svg?color=%23FBF4E7" w="9" h="9" />
              <text value="LEAD SINGLE" text-style="Chip" color="$on-ox" />
            </row>
          </row>
          <text value="2:57" text-style="Dur" color="$ox-deep" align="right" />
        </row>
        <!-- 6 -->
        <row w="fill" p="13 16" gap="12" align="middle-center" border-bottom="1 $hair">
          <text w="18" value="6" text-style="TrackNo" color="$muted" />
          <text w="fill" value="Aubade for No One" text-style="TrackName" color="$ink" />
          <text value="5:23" text-style="Dur" color="$muted" align="right" />
        </row>
        <!-- 7 -->
        <row w="fill" p="13 16" gap="12" align="middle-center" border-bottom="1 $hair">
          <text w="18" value="7" text-style="TrackNo" color="$muted" />
          <text w="fill" value="Tin Ceiling" text-style="TrackName" color="$ink" />
          <text value="3:34" text-style="Dur" color="$muted" align="right" />
        </row>
        <!-- 8 -->
        <row w="fill" p="13 16" gap="12" align="middle-center" border-bottom="1 $hair">
          <text w="18" value="8" text-style="TrackNo" color="$muted" />
          <text w="fill" value="The Undertow" text-style="TrackName" color="$ink" />
          <text value="4:06" text-style="Dur" color="$muted" align="right" />
        </row>
        <!-- 9 -->
        <row w="fill" p="13 16" gap="12" align="middle-center" border-bottom="1 $hair">
          <text w="18" value="9" text-style="TrackNo" color="$muted" />
          <text w="fill" value="Saltwater Gospel" text-style="TrackName" color="$ink" />
          <text value="3:49" text-style="Dur" color="$muted" align="right" />
        </row>
        <!-- 10 -->
        <row w="fill" p="13 16" gap="12" align="middle-center">
          <text w="18" value="10" text-style="TrackNo" color="$muted" />
          <text w="fill" value="Vale" text-style="TrackName" color="$ink" />
          <text value="6:12" text-style="Dur" color="$muted" align="right" />
        </row>
      </col>
    </col>

    <!-- credits / details -->
    <col w="fill" p="10 16" gap="0">
      <col w="fill" fill="$surface" border="1 $hair" radius="$r-card" p="4 18" gap="0" role="card">
        <row w="fill" p="14 0" gap="auto" align="middle-center" border-bottom="1 $hair">
          <text value="Label" text-style="Detail" color="$muted" />
          <text value="Meridian Sound" text-style="DetailV" color="$ink" align="right" />
        </row>
        <row w="fill" p="14 0" gap="auto" align="middle-center" border-bottom="1 $hair">
          <text value="Released" text-style="Detail" color="$muted" />
          <text value="August 8, 2026" text-style="DetailV" color="$ink" align="right" />
        </row>
        <row w="fill" p="14 0" gap="auto" align="middle-center" border-bottom="1 $hair">
          <text value="Produced by" text-style="Detail" color="$muted" />
          <text value="Wren Kessler" text-style="DetailV" color="$ink" align="right" />
        </row>
        <row w="fill" p="14 0" gap="auto" align="middle-center" border-bottom="1 $hair">
          <text value="Length" text-style="Detail" color="$muted" />
          <text value="41:57 · 10 tracks" text-style="DetailV" color="$ink" align="right" />
        </row>
        <row w="fill" p="14 0" gap="auto" align="middle-center">
          <text value="Genre" text-style="Detail" color="$muted" />
          <text value="Chamber folk" text-style="DetailV" color="$ink" align="right" />
        </row>
      </col>
    </col>

    <!-- byline -->
    <col w="fill" p="6 22 22 22" gap="0">
      <row w="fill" fill="$ox-tint" radius="$r-card" p="16" gap="12" align="middle-left">
        <col w="46" h="46" radius="$r-pill" fill="$ox" align="middle-center" role="avatar">
          <text value="OB" text-style="Init" color="$on-ox" align="center" />
        </col>
        <col w="fill" gap="3" align="middle-left">
          <text value="Review by Odessa Bryn" text-style="Byline" color="$ink" />
          <text value="Senior Critic · Broadside · Aug 14, 2026" text-style="Meta" color="$muted" />
        </col>
        <img src="https://api.iconify.design/lucide/arrow-up-right.svg?color=%237B1E2B" w="20" h="20" />
      </row>
    </col>

    <!-- tab bar: last flow child (fixed bottom bar) -->
    <col w="393" fill="$surface" border-top="1 $hair" role="tab-bar">
      <row w="393" h="60" p="0 20" align="top-center">
        <col w="fill" pt="9" gap="4" align="top-center">
          <img src="https://api.iconify.design/lucide/book-open.svg?color=%237B1E2B" w="22" h="22" />
          <text value="Reviews" text-style="Tab" color="$ox" align="center" />
        </col>
        <col w="fill" pt="9" gap="4" align="top-center">
          <img src="https://api.iconify.design/lucide/list-music.svg?color=%23675F4E" w="22" h="22" />
          <text value="Lists" text-style="Tab" color="$muted" align="center" />
        </col>
        <col w="fill" pt="9" gap="4" align="top-center">
          <img src="https://api.iconify.design/lucide/search.svg?color=%23675F4E" w="22" h="22" />
          <text value="Search" text-style="Tab" color="$muted" align="center" />
        </col>
        <col w="fill" pt="9" gap="4" align="top-center">
          <img src="https://api.iconify.design/lucide/bookmark.svg?color=%23675F4E" w="22" h="22" />
          <text value="Saved" text-style="Tab" color="$muted" align="center" />
        </col>
      </row>
      <!-- home indicator (device chrome, untagged) -->
      <row w="393" h="24" align="top-center">
        <rect w="134" h="5" radius="$r-pill" fill="$ink" />
      </row>
    </col>

  </col>
</gui>
```