Rebuilding a Community Radio Station's Online Identity
Role: Design Director & Developer
Context
Hollow Earth Radio launched January 1, 2007 with a clear mission: audio not heard on the traditional dial. Found sound, field recordings, local musicians, bedroom recordings, things that feel real. Founders Amber Kai Morgan and Garrett Kelly built it from their attic, ran it as an internet-only station for six years, earned an LPFM license in 2013, and by 2017 had KHUH 104.9 FM broadcasting over the air from Seattle's Eastlake neighborhood.
The station has always been all-volunteer. Momentum depends entirely on who steps up when. For years, the website didn't have a steward. The 2010 codebase sat untouched while the station kept growing around it.
When the founders moved on to other projects, the station absorbed the transition the way volunteer organizations do: the people who showed up became the institution. The website still reflected an era it no longer belonged to.
When I started volunteering for Hollow Earth, I said that we needed a new website. Unfortunately, the problem with saying this out loud automatically makes you the person responsible for building it. So... I built it.
The Problem
The issues ran deeper than aesthetics. The 2010-era codebase hadn't been meaningfully touched in over a decade:
- Nobody on the current volunteer team knew how to make changes to the code — and were afraid to try
- Editing the site came down to who could remember how to get in and edit it, as there was no documentation
- The 14-item top navigation represented initiatives and ideas that had come and gone over the years
- Strange quirks in the design, e.g. the events calendar listed the oldest events first
- Spacer GIFs, dated markup, unclear mobile support
The domain shift tells part of the story. The new site lives at khuh.fm, the station's call letters, rather than hollowearthradio.org. A name two people chose in their attic in 2006 belonged to that moment. The call letters belong to everyone.
Discovery
I talked to DJs and volunteers across the station's programming spectrum and to people who had been there from the early days. The questions centered on identity: Who are we now? What does the station need to communicate right now? How do we honor the original DIY vision without being trapped by it?
The community had real affection for the old site's earthiness and weirdness. They didn't want a corporate overhaul. They wanted something that represented them and could grow with them.
What the Field Looked Like
Before committing to any direction, I surveyed roughly 18 community radio station websites, local, national, and international. The range ran from Seattle neighbors (KEXP, Space 101.1, Rainy Dawg) to US non-commercial stations (WFMU, KBOO, WXPN). I also reviewed some notable Australian non-commercial stations (PBS FM Melbourne, Triple R, 3CR, fbi.radio). I was looking for how they handled the core problems: communicating identity, surfacing programming, and representing community.
The biggest single influence was PBS FM Melbourne. PBS FM had solved real structural problems: a clean calendar format, show pages that compressed identity and schedule into one place, and a visual system built around solid color with a slight geometric askew to the layouts. Strong information architecture with a little quirkiness was exactly the register KHUH needed.
I also looked at stations already running Creek (XRAY.fm, KWMR) to understand integration patterns, and at similar low-power freeform stations to understand how the community represents itself online.
The bottom line: Make a site, not an art piece. The old hollowearthradio.org was as much as it was information source. Sites like PBS Melbourne showed a middle ground: a system that holds the station's full personality without becoming precious about it.
Design: Going Underground
The central tension was avoiding two failure modes: sterile minimalism on one end, nostalgic kitsch on the other. The design brief I kept returning to: a portal into a world the algorithm doesn't know about.
I landed on a palette I dubbed "Cavern Glow / Brown Roots" containing ambers, warm neutrals, bone white, stone grey, cavern teal. The visual language is warm subterranean light: ember orange as the primary accent, bone (#EDE3D4) for surfaces, and a full neutral scale running from pale sand to near-black brown. A fixed-attachment gradient background pulls the page into depth as you scroll.
I drew specific earth tones not just from the previous site's palette, but also from clays and loams from places of my own past, e.g. the red dirt and yellow clay of Oklahoma. That level of specificity gives the palette character to counter the genericness brown palettes can have. These browns have provenance.
The 175-degree gradient tilt echoes PBS Melbourne's slightly askew block layouts, a small design homage that most people won't consciously notice but that gives the page controlled movement rather than flat stacking. It's all about keeping the design weird, like the station keeps radio weird.
Typography pairs Arvo (slab serif) for headings and navigation with Lato for body and UI. Arvo's slightly rough, geometric character gives it a bit of edge without being too stylized, and the rounded slab shape calls back to the previous site's slab masthead. Lato is a clean, humanist sans-serif that balances Arvo's personality with readability and warmth. Both are widely available Google Fonts, so they're free and easy for future volunteers to work with.
One additional detail: the Reviews and Shows hero sections use a CSS-only "Bokeh Cave" effect, similar to the bioluminescent worms found in a New Zealand cave — light-dot clusters blurred over a dark gradient, pure radial-gradient stacking with no images or JavaScript. Subtly weird, but also elegant.
From Ten Palettes to One
I ran a systematic color study covering more than ten named directions before committing: from alpenglow oranges & purples to tones of rose colored sandstone, green mosses, sandy beaches, subterranean blues, and magma. Each was applied to a header component — same layout, fifteen-plus labeled variants — to see how the station's identity held before any full-page decisions were made.
From these fifteen I built out six distinct homepage directions. Most explored warm earth tone territory. One went somewhere completely different: near-black, high-contrast, harkening back to turn of the millenium hacker and Geocities design trops. It looked great, but it wasn't KHUH.
All of this was codified into a full brand and UI style guide, color tokens, typography specimens, component library, gradient and surface reference, so future contributors have a clear system to build within.
Working with AI
This project was built using Claude Code as a primary development partner, with me as design director and "human in the loop" throughout.
In practice, I directed the aesthetic, made every significant design call, and hand-edited code when output needed refinement (or when Claude just wasn't getting the details right). The AI accelerated ideation, but it didn't replace design judgment. The Bokeh Cave effect, the color token naming, the type pairing, the gradient system: all of these were guided by mycreative direction, not prompting.
Technical Approach
The most important constraint of the project was that volunteers have to be able to maintain this. The old site was hard to maintain precisely because institutional knowledge to edit it had faded.
- Nuxt/Vue: Modern frontend framework, structured and approachable for future contributors
- Ghost CMS: Gives non-technical staff a real editorial interface for news and blog content
- Creek: Handles playlist data, show scheduling, and real-time music auto-recognition; the site reflects what's on air without anyone touching code
Outcomes
- Maintainable by volunteers. Any station member with Ghost access can publish, update, and manage content without a developer.
- Identity clarified. KHUH 104.9 FM is front and center. The station presents as a modern, volunteer-driven institution of Seattle music and culture.
- Live programming surfaced. Creek integration means the site always reflects what's on air, in real time.
- Navigation rationalized. 14 top-level items reduced to six: Listen, Get Involved, Blog, Reviews, About, Donate.
- Design system established. A full brand and UI style guide means future contributors can build without reverse-engineering decisions.