Design and build a modern, premium, responsive online radio website for “VORTEX RADIO”, using the attached reference image as the main visual direction. Recreate the overall layout, spacing, hierarchy, colors, typography, cards, navigation, and professional broadcasting aesthetic shown in the reference.
Brand: Vortex Radio
Tagline: “Your Sound. Your Voice. Your Vortex.”
Style: Modern digital radio, cinematic, professional, energetic, youthful, premium media/broadcasting platform.
COLOR PALETTE
- Deep Navy: #00142D
- Dark Blue: #002B5C
- Royal Blue: #0057B8
- Luxury Gold: #D4AF37
- Bright Gold/Yellow: #FFC72C
- White: #FFFFFF
- Light Background: #F5F7FA
Use navy/dark blue backgrounds with gold accents, white typography, subtle blue gradients, glowing elements and clean shadows.
HEADER / NAVIGATION
Create a dark navy professional header.
Left side:
- Vortex Radio logo
- Small tagline: “Your Sound. Your Voice. Your Vortex.”
Navigation:
Home | Live Radio | Shows | Schedule | News | Podcasts | About Us | Contact
Right side:
Facebook, Instagram, TikTok, YouTube and search icons.
Highlight Home with a gold underline.
Make the navigation clean, spacious and professional, similar to a major international radio station.
HERO SECTION
Create a large cinematic hero banner.
Use a professional radio studio microphone as the main visual element, with headphones, studio equipment, subtle blue lighting, gold highlights and an ON AIR sign in the background.
Left side text:
ONLINE RADIO
REAL MUSIC.
REAL CONVERSATIONS.
THE VORTEX.
Supporting text:
“Vortex Radio is your home for the best music, fresh news, exciting talk shows, entertainment, culture and more. We keep you informed, inspired and connected — anytime, anywhere.”
Add a large gold rounded button:
▶ LISTEN LIVE
Beside it show:
24/7
On Web • Mobile • Smart Devices
The hero should feel energetic, cinematic and premium.
NOW PLAYING BAR
Directly underneath the hero, create a dark-blue audio player bar.
Left:
- Album artwork
- “NOW PLAYING”
- Song title
- Artist name
Center:
- Previous
- Play/Pause
- Next
- Volume control
- Progress bar
Right:
Gold microphone icon
ON AIR
Current show name
Show time
Make the play button gold and highly visible.
POPULAR SHOWS
Add a white/light section titled:
OUR SHOWS
Popular Shows
Create five modern cards:
Monday Mashup
Music • Vibes • Trends
Tech & Talent
Innovation • Business • Youth
Vortex Q&A
Your Questions • Real Answers
Vortex Vibes
Music • Culture • Lifestyle
Sports Circle
Football • Athletics • More
Each card should have:
- Attractive image
- Show title
- Short description
- Broadcast time
- Small gold play/listen button
Add “View All Shows →” at the top right.
APP PROMOTION
On the right side of the shows section, create a dark promotional card:
Vortex Radio logo
Download Our App
“Listen anywhere, anytime.”
Add Google Play and Apple App Store buttons.
Use headphones and radio imagery in the background.
LATEST NEWS
Create a clean white section titled:
LATEST NEWS
Latest Updates
Display news cards with attractive images, headlines, dates, categories and:
Read More →
Keep the cards clean and editorial, similar to a professional news website.
PODCAST SECTION
Add:
OUR PODCASTS
Latest Podcasts
Display podcast artwork, microphone imagery, episode title, short description and:
▶ Listen Now
Include a View All → link.
SOCIAL MEDIA
Create a separate card:
CONNECT WITH US
Follow Us
“Join our growing community and never miss an update.”
Add Facebook, Instagram, TikTok and YouTube icons.
Gold/blue Follow Us → button.
FOOTER
Use a deep navy background with a thin gold line at the bottom.
Left:
VORTEX RADIO
Your Sound. Your Voice. Your Vortex.
Middle:
Quick Links
Home
Live Radio
Shows
Schedule
News
Podcasts
About Us
Contact
Next column:
Connect With Us
Facebook
Instagram
TikTok
YouTube
Right:
© 2026 Vortex Radio. All Rights Reserved.
Vortex Radio is a division of Vortex Media City.
Privacy Policy | Terms & Conditions | Contact Us
DESIGN REQUIREMENTS
- Desktop-first but fully responsive on mobile and tablet.
- Use Montserrat, Poppins or another modern geometric sans-serif for headings.
- Use bold typography for major headlines.
- Use gold only for important accents, buttons and highlights.
- Use subtle hover animations.
- Rounded cards with professional shadows.
- Smooth transitions.
- Modern audio-player UI.
- High-quality radio/studio imagery.
- Plenty of whitespace.
- Do not overcrowd the page.
- Make it look like a real professional broadcasting company, not a generic template.
- Maintain the exact overall visual hierarchy of the reference image.
- The website should communicate music + news + entertainment + conversation + culture + digital broadcasting.
Overall feeling: A combination of BBC-style professionalism, modern digital radio, Netflix-inspired dark cinematic visuals, and a youthful African media brand, while maintaining the Vortex Radio blue-and-gold identity.
