Every named visual treatment in the radio app, in one place. Seven surface skins (live + available) that set surfaces, borders, and chrome via ui_config.surface_skin. Five layout proposals on a separate orthogonal axis (ui_config.home_layout). One station concept — a bespoke design exploration. Filter, search, jump.
13
Total entries
2
In production
5
Available
6
Proposed / concept
Filter
13 entries
Surface Skins
Named AppTokens instances. JSON field: ui_config.surface_skin
Named AppTokens instances. Stations pick one via ui_config.surface_skin. Controls surfaces, borders, chrome.
07 entries
S1 · surface_skin: "editorial" · Default
Editorial
Dark charcoal. Yellow broadcast moment. Glass chrome.
The V9 baseline. Dark grey surfaces stepped up from near-black, with yellow reserved for a single high-value moment: the live indicator, the active nav item, the primary play action. Frosted glass on floating chrome (mini player, bottom nav). Anton headline type for show names; engineered for community radio, bilingual stations, and talk formats where the station brand is the identity.
Pixels off on AMOLED. The live hero becomes a full-bleed gradient poster — teal radial light source at top-left, forest shadow at bottom-right — instead of a card. The primary action color comes entirely from the station's JSON branding.primary_color, so any station can use this skin. The teal accent stripe on the mini player uses that same primary. No frosted glass — solid dark surfaces on pure black are cleaner and lighter-weight than blur.
JSON value
"oled"
Mode
Dark — OLED-optimized
Hero component
LivePoster
Best for
Music stations, Caribbean, Latin, island formats
Stations using this skin
Radio Palmis · live NEW
Your next station here
Palette
#000000
#0A0A0A
#111111
#2997B2
#092902
9:41▲▲▲ ☁ 🔋
● Radio Palmis
ON AIR
Bis Ble
Radio kominote a
HOME
PODS
ABOUT
Android
9:41▲▲▲ 🔋
Radio Palmis
ON AIR
Bis Ble
Radio kominote a
Home
Pods
About
iOS
S3 · surface_skin: "vivid" · Available
Vivid
Light mode. Full-bleed color hero. White card content below.
The only light-mode skin. The hero is pure saturated color — a gradient pulled from the station's primary and secondary — and everything below it is white or off-white cards on a neutral grey surface. Bold, optimistic, high-energy. Designed for pop, lifestyle, youth, and modern music formats where a daytime feel and visual punch matter more than battery life. The hero gradient adapts to the station's branding colors automatically.
JSON value
"vivid"
Mode
Light — not OLED-friendly
Hero component
LiveVividHero
Best for
Pop, top 40, lifestyle, youth, Latin pop
Stations using this skin
Available — no station assigned yet
Palette
#F0F2F5
#FFFFFF
#FF3B82
#FF6B35
#FF9F1C
9:41▲▲▲ 🔋
HOT 99.5
ON AIR
Morning Show
Live · Top 40
HOME
PODS
ABOUT
Android
9:41🔋
Hot 99.5
ON AIR
Morning Show
Live · Top 40
Home
Pods
About
iOS
S4 · surface_skin: "newsroom" · Available
Newsroom
Near-black. Red accent. Dense structured layout. Serif show names.
Built for news, talk, and AM formats where information density signals credibility. The layout is tighter than Editorial — smaller padding, more items visible above the fold. A red 3dp left-stripe runs the full height of the live card (a visual nod to broadcast news chyrons). Show names use an italic serif weight for a headline-paper feel. The active nav item is the only red element in the chrome — everything else is monochrome. Designed to feel like a newsroom, not a music app.
JSON value
"newsroom"
Mode
Dark — high-contrast
Hero component
LiveNewsHero
Best for
News, talk, AM, NPR affiliates, political radio
Stations using this skin
Available — no station assigned yet
Palette
#0D0D0D
#111111
#1A1A1A
#E8291C
#F5F5F5
9:41▲▲▲ 🔋
WNYC · NEWS
● LIVE BROADCAST
Morning Edition
NPR · 6AM–9AM
HOME
PODS
ABOUT
Android
9:41🔋
WNYC
● LIVE BROADCAST
Morning Edition
NPR · 6AM–9AM
Home
Pods
About
iOS
S5 · surface_skin: "nocturne" · Available
Nocturne
Deep indigo. Grain texture. Slow gradient pulse on the hero.
Midnight purple surfaces with a film grain overlay on the hero card — the texture is rendered via an SVG noise filter, no image assets required. The live hero breathes with a very slow radial gradient animation (8s loop, subtle enough that many users won't consciously notice it). Primary color should be purple or violet from the station's branding; warm colors also work against the indigo base. Designed for jazz, ambient, late-night, blues, and any format that should feel intimate and atmospheric rather than high-energy.
High contrast. Diagonal slash. The energy bar at the bottom of everything.
Near-black base with a diagonal gradient slash across the live hero — pulled from the station's primary and secondary colors at 18% opacity. The real signature: a 3dp gradient stripe runs the full bottom edge of the live card and the mini player as a continuous "energy bar." Oversized show names (40sp), wide tracking on secondary labels, and more compressed card padding so each item looks punchy. Designed for sports radio, hip-hop, dance, top 40 countdown, and any format where urgency and energy are the identity.
JSON value
"kinetic"
Mode
Dark — high energy
Hero component
LiveKineticHero
Best for
Sports, hip-hop, dance, top 40 countdown, urban
Stations using this skin
Available — no station assigned yet
Palette
#0A0A0A
#141414
#FF2D55
#FF6B00
#FFCC00
9:41▲▲▲ 🔋
ESPN RADIO
LIVE
Sportscenter
AM 1000 · Sports
HOME
PODS
ABOUT
Android
9:41🔋
ESPN Radio
LIVE
Sportscenter
AM 1000 · Sports
Home
Pods
About
iOS
S7 · surface_skin: "glass" · Available
Glass
Frosted glass cards on a light mesh background. Premium, Apple-adjacent.
Light-mode skin where every elevated surface is a frosted glass panel — white at 45% with a blur backdrop and a near-white top highlight stroke. The page background is a very subtle blue-grey gradient mesh that catches the glass. Primary accent from JSON branding handles the play button and active nav; the template default is indigo, but it maps cleanly to any saturated color. Designed for Christian radio, smooth jazz, classical, and premium adult contemporary formats where calm refinement is the identity — and for stations whose audience expects their apps to look like a well-made iOS app.
Layout languages, not colorways. Each defines hero shape, content rhythm, chrome. Proposed JSON field ui_config.home_layout.
05 entries
P1 · home_layout: "hub" · Proposed
Hub
Dominant live tile. 2×2 grid. Vertical episode list.
Tall hero tile (~38% screen). 2×2 podcast grid. Vertical episode list with thumbs. Conventional bottom nav.
JSON value
"hub"
Field
home_layout (new)
Hero component
HubLiveTile
Best for
Talk, sports talk, AM drive-time
Layout language
Hero tile is tall (~38% of screen). Contains live indicator, show name, time, full-width "Listen Live" pill button, and an embedded waveform.
Podcast section uses a 2×2 grid of icon-led cards — not a horizontal shelf. Conveys completeness; users see all four at once.
Vertical episode list below the grid with small thumbs + play affordance on the right.
Conventional bottom nav with 3–4 destinations.
Home-only
Just Hub on Home. Schedule, Podcasts, About keep standard treatment.
Whole-app
Hub language extends: podcast detail page also uses the grid + stats pattern (right phone).
Stations using this layout
—
Palette
#0E1014
#181B22
#1E40AF
#60A5FA
#22C55E
9:41▲▲▲ ☁ 🔋
KQRX 91.5
LIVE NOW
Morning Drive with Marcus
Talk & Music · 10:00 AM – 12:00 PM
Listen Live
PodcastsSee all
Tech Talk Weekly
88 episodes
World Report
52 episodes
HOME
SCHED
PODS
ABOUT
HomeShips in both options
9:41▲▲▲ ☁ 🔋
PODCAST
88 EPISODES
Tech Talk Weekly
88
EPS
42m
AVG LEN
WED
NEW EP
LatestAll eps
AI at the Edge
Wed · 38 min
Quantum Computing 101
Last Wed · 44 min
Open Source Wars
Apr 24 · 51 min
HOME
SCHED
PODS
ABOUT
Podcast detailOnly ships in whole-app
P2 · home_layout: "disc" · Proposed
Disc
Circular vinyl. Centered composition. Tactile.
Circular vinyl-disc hero. Centered composition. Color and chrome step back so the disc carries the screen.
JSON value
"disc"
Field
home_layout (new)
Hero component
DiscPlayer
Best for
Curated music, vinyl shows, indie stations
Layout language
No live card. A 160dp circular disc is the hero, centered, taking ~45% of screen.
Conic gradient ring wraps the disc as a progress indicator with a glowing dot at the current position.
Show metadata centered below the disc — not inside it.
Animated multicolor waveform replaces the standard progress bar.
Three-button control row (skip / play-pause / skip) directly below the waveform.
Condensed track list at the bottom with one "now playing" highlighted row.
Home-only
Disc is home only. Podcast on-demand uses the standard now-playing screen.
Whole-app
Disc extends: on-demand podcast playback also uses circular geometry (right phone), so the visual language is consistent whether the user is listening live or on-demand.
Stations using this layout
—
Palette
#0A0418
#160B2A
#FF5AB4
#6E4AFF
#C586E8
9:41▲▲▲ ☁ 🔋
PULSE FM
LIVE
Late Night Mix
DJ Solene · On air now
11:002 AM
Up next
Pulse After Dark · 2AM
LIVE
Sunday Sessions
Replay · 8PM Sun
2h
HOME
LIVE
ABOUT
HomeShips in both options
9:41▲▲▲ ☁ 🔋
NOW PLAYING
12:42
After Hours EP 12
The Pulse Podcast · 45 min
12:4245:00
HOME
LIVE
ABOUT
Now PlayingOnly ships in whole-app
P3 · home_layout: "marquee" · Proposed
Marquee
Landscape hero. Horizontal show rails. Cinematic.
Wide landscape hero card. Horizontal scrolling rails for shows and episodes. Cinematic, magazine-like rhythm.
JSON value
"marquee"
Field
home_layout (new)
Hero component
MarqueeHero
Best for
Music discovery, mixed-format stations
Layout language
Full-bleed portrait photo as the hero — ~280dp tall, 4:5 ratio. Gradient fade at the bottom.
Show name overlaid on the photo in italic Fraunces serif, large (~26sp), centered.
Thin gold progress line between photo and controls — no card, no chrome.
Three-button control row with a rose-gold radial-gradient play button as the only saturated element.
Tonight's lineup list at the bottom with small square thumbs and gold time stamps.
No bottom-nav coloring — chrome stays warm-neutral; gold reserved for the play button + active state.
Home-only
Marquee is home only. Risk: stations must commit to a real photo per show — won't work without strong imagery.
Whole-app
Show-detail pages also use the portrait-photo treatment (right phone). Reinforces the host-as-personality identity throughout the app.
Stations using this layout
—
Palette
#14100E
#1F1A18
#D4A574
#E8B4B4
#F8E4DE
9:41▲▲▲ ☁ 🔋
Velvet 101
ON AIR
After Hours
with Maya West
Tonight's lineup
Slow Burn Sessions
with Andre Wells
11 PM
Vinyl Hours
with DJ Rosé
1 AM
HOME
SHOWS
ABOUT
HomeShips in both options
9:41▲▲▲ ☁ 🔋
SHOW
SLOW BURN SESSIONS
Andre Wells
M – F · 11 PM
Three hours of deep cuts, B-sides, and the kind of records you only put on after midnight.
Recent shows
Tuesday · April 30
Soul records pt. III
3h
Monday · April 29
Late dedications
3h
HOME
SHOWS
ABOUT
Show detailOnly ships in whole-app
P4 · home_layout: "channel" · Proposed
Channel
TV-guide layout. Schedule-forward. Time-blocked.
Schedule-driven TV-guide style home. Current show pinned, surrounded by time-blocked upcoming programs. Schedule is the home.
JSON value
"channel"
Field
home_layout (new)
Hero component
ChannelGuide
Best for
Programming-driven stations, NPR-style outlets
Layout language
Banner header (~120dp) bleeds to the edges. Solid teal gradient on Home; show-specific gradient on detail pages.
Circular avatar overlaid on the banner, centered, half-in/half-out. White ring, soft shadow.
Station metadata centered below the avatar: name, "X listeners · Y shows", short description.
Big "LISTEN LIVE" pill button full-width, primary action.
Tab strip below the button: Episodes / Schedule / About — content swaps in place.
Episode list uses numbered episode rows with mono numerals — borrowed from podcast-app convention.
Home-only
Home = station profile page. Other screens stay standard. Risk: tabs duplicate bottom-nav function and could be confusing.
Whole-app
Every "entity page" (station, show, podcast) uses the banner+avatar+tabs pattern. Show detail (right phone) becomes a podcast profile.
Stations using this layout
—
Palette
#5DCBE0
#7DD9E8
#1FB4D0
#FFFFFF
#1A3A40
9:41▲▲▲ ☁ 🔋
Coast Radio
1.2M listeners · 49 shows
Easy listening from the Atlantic coast. Independent radio since 2014.
Listen Live
Episodes
Shows
About
01
To be or not to be focused
54 min · Oct 17
02
Ways to find happiness
38 min · Oct 15
HOME
PODS
ABOUT
Home (station profile)Ships in both options
9:41▲▲▲ ☁ 🔋
Ingredia Nutrisha
1.2M listeners · 249 episodes
Daily wellness for the curious. Weekday mornings, hosted by Maya West.
Follow
Episodes
About
249
The one about morning routines
42 min · Today
248
Sleep, water, repeat
38 min · Yesterday
HOME
PODS
ABOUT
Podcast profileOnly ships in whole-app · color reskinned per podcast
P5 · home_layout: "episode" · Proposed
Episode
Episode-first. Show grid below. Podcast-native.
Featured episode lockup as hero. Show grid below. Treats radio like a podcast network — episodes are first-class.
JSON value
"episode"
Field
home_layout (new)
Hero component
EpisodeFeature
Best for
Podcast-heavy stations, on-demand-first audiences
Layout language
Chrome is back + title + menu — not logo + nav. The home screen ASSUMES something is already playing.
Large square artwork (~184dp) with rounded corners. Episode-art-first, not station-logo-first.
Episode title prominent, show attribution secondary and small.
Full-width progress bar with elapsed + total time underneath.
"Next Episode" card at the bottom — primes the queue, gives the user something to swipe-to.
Home-only
Risky standalone. If nothing is playing, what does this screen show? Needs a "tap to start the latest episode" empty state.
Whole-app
Show-detail page (right phone) carries the same warm-peach + numbered-list visual language. This is the more coherent option.
Stations using this layout
—
Palette
#FAD8BC
#F5C297
#F0AC75
#E85D2F
#2A1A12
9:41▲▲▲ ☁ 🔋
Now Playing
EPS 01 — The Mysterious Disappearance
True Crime Chronicles · True Crime Chronicles
36:4240:00
Next Episode
EPS 02 — Murder in the Mansion
Mar 16, 2024 · 45 mins
HOME
PODS
ABOUT
Home (now-playing-as-home)Ships in both options
9:41▲▲▲ ☁ 🔋
Show
12 EPISODES · WEEKLY
True Crime Chronicles
Follow
01
The Mysterious Disappearance
Mar 9 · 40 min
02
Murder in the Mansion
Mar 16 · 45 min
03
The Witness Who Vanished
Mar 23 · 42 min
HOME
PODS
ABOUT
Show detailOnly ships in whole-app
Station Concepts
Bespoke design explorations for specific stations. Not shipped as reusable skins. Source of language that may graduate into the surface-skin or layout-proposal tracks.
01 entry
C1 · station_concept: "laraza-v9" · Concept
La Raza v9 · Quiet Glass
v1 restraint with sparing glass touches. Station-specific concept.
Solid surfaces for content (live hero, show cards, episode rows). Frosted glass only on chrome (mini player, bottom nav, full-player tuner). Single typeface (Inter). No gradient text. Yellow earns its place: live indicators, current-show markers, primary actions.
Status
v9 · For Review
Direction
Quiet Glass — v1 + v7 mix
Constraint
No track metadata for live audio
Best for
La Raza Austin — exploration of v1 + v7 mix
Stations using this concept
La Raza Austin · 104.9 FM / 95.1 FM
Palette
#0A0A0A
#141416
#1A1A1D
#FBE521
glass
/ 01
Solid for content.
Live hero, show cards, episode rows — all solid dark surfaces with crisp 1px borders. Easy on the eyes, high text contrast.
/ 02
Glass for chrome.
Only the floating elements — mini player, bottom nav, full-player tuner panel — get the frosted treatment. Glass earns its place.
/ 03
One voice.
Inter for everything. Mono for numerics only. No italic accents, no gradient text. Type does its job and steps aside.
/ 04
Yellow earns it.
Single subtle glow at the top of each screen. Yellow appears only on live indicators, current-show markers, and primary actions.
Home / live
Solid dark live hero, solid show cards. Frosted mini player and bottom nav float on top.
9:41
La Raza104.9 / 95.1
ON AIR
10:00 AM — 2:00 PM
Compa Ramón
Mid-day · Mon — Fri
SIGNAL
Today's Lineup
See all ›
CR
show logo
10A — 2P
Compa Ramón
AR
show logo
2P — 3P
Alex Ruiz
ET
show logo
3P — 7P
El Tigre
Latest Episodes
All ›
AR
ALEX RUIZ · APR 27
Lo mejor del fin de semana
42:18
CR
COMPA RAMÓN · APR 26
Especial del Día del Niño 2026
1:05:42
CR
LIVE · 104.9 FM
El Show de Compa Ramón
Home
Pods
About
Schedule / tue 28
Day pills with active day in solid yellow. Timeline with current-show node and ON NOW indicator.
9:41
Schedule
Sun
26
Mon
27
Tue
28
Wed
29
Thu
30
Fri
01
Sat
02
Tuesday, April 28
5:00 AM 10:00 AM
Conejo y Chilanga
Morning Drive
CC
10:00 AM 2:00 PM
Compa RamónOn Now
Mid-day
CR
2:00 PM 3:00 PM
Alex Ruiz
Afternoon Hour
AR
3:00 PM 7:00 PM
El Tigre y Mela
Drive Home
ET
7:00 PM 12:00 AM
Los Mejores Mix
Night Mix
LM
Home
Pods
About
Podcasts / shows
Two-column gallery. Solid dark show tiles with rounded corners.
9:41
Podcasts
CR
show logo
Compa Ramón
42 episodes
AR
show logo
Alex Ruiz
28 episodes
ET
show logo
El Tigre y Mela
87 episodes
CC
show logo
Conejo + Chilanga
114 episodes
LM
show logo
Los Mejores Mix
31 episodes
LR
show logo
La Raza Especial
12 episodes
Home
Pods
About
About / station
Logo in a rounded frame. Solid contact pills. Yellow CTA pill at the bottom.
9:41
About
FM 104.9 · 95.1 · AUSTIN
La Raza
The hottest Latino music in Central Texas. Live shows, hosts, and music that moves you.
Call
(512) 472-1049
WhatsApp
(512) 555-1049
Email
contacto@laraza.com
Update the App
Home
Pods
About
Full Player / tuned
The one big glass moment. Frosted tuner panel with frequency dial, station name, VU meter. Solid play controls below.
9:41
PLAYING FROM
La Raza · On Air
TUNED · FM
9296104.9108
Compa Ramón
10:00 AM — 2:00 PM · MID-DAY
LIVE BROADCAST
Cast
Sleep
Share
Schedule
Podcast / show
Solid show artwork tile. Yellow Play Latest pill. Solid episode rows below.
9:41
Podcast
CR
show logo
EL SHOW DE
Compa Ramón
Mid-day · Mon — Fri 10A — 2P
Play Latest
CR
APR 26 · LATEST
Especial del Día del Niño 2026
1:05:42
CR
APR 19
Música nueva: lo más sonado
52:08
CR
APR 12
Entrevista con Los Bukis
47:30
Home
Pods
About
Quick Reference
All thirteen entries across the library. Set ui_config.surface_skin for surface skins, ui_config.home_layout (proposed field) for layout languages. Station concepts are not currently configurable via JSON.