Skip to content
Raagwave

Raagwave

Sector & region
Music streamingIndia
Year
2026
Type
Concept
Raagwave homepage hero

We treated an archive of old masters like analog hardware: film grain, amber phosphor screens and a brass radio, so the site feels as patient as a raga unfolding at dusk.

About

Raagwave is an invented streaming service for Hindustani and Carnatic music. Its archive is built from live concert tape, and its one big idea comes from the tradition itself: every raga has a prahar, a three-hour watch of the day when it should be heard. Most streaming apps sort music by popularity. Raagwave sorts it by the clock, and sells a brass desk radio that keeps the schedule without a screen.

We built the identity around hardware rather than illustration. The page sits inside a ledger frame of full-height rails crossed by hairlines, headlines are set in Newsreader against an all-monospace voice in Geist Mono, and every button is a bevelled cream key. The palette is charcoal with a single saffron accent, used the way an amber phosphor screen glows. The hero places the Raagwave Set, a brass and ivory radio drawn entirely in CSS, in front of a chrome serif wordmark that runs off the bottom of the screen, with a perforated tape-vault stamp tucked behind it.

The landing page runs fifteen bands, from a tabbed feature stage and a gharana bento to a prahar dial that redraws for dawn, midday, dusk and midnight, and pricing in rupees. Every image is code: ordered-dither canvases draw the waveforms, the rising stats field and the ghosted tanpura, product scenes are real HTML scaled to fit their frames, and grain comes from an SVG turbulence filter. On phones the product scenes crop to their focal device instead of shrinking, and the floating nav folds into a menu.

Features

WebsiteBrandProduct UI3D

Deliverables

  • Landing page
  • Logo and prahar-dial mark
  • Desk radio product render
  • App, desktop and watch UI
  • Responsive system
  • Motion
raagwave.conceptOpen live ↗
Raagwave homepage
Live, scrollable prototype of the Raagwave website.
Raagwave: showcase section

Highlights

  1. 0115-band landing page, responsive from 360px to 1920px
  2. 02Brass and ivory desk radio built in CSS, reused in the hero, platforms and footer
  3. 03Working prahar dial, feature tabs, restoration views, billing toggle and FAQ
  4. 04No photographs: dithered canvases, inline SVG and HTML product UI throughout
Raagwave: features section
Raagwave on a phone, view 1
Raagwave on a phone, view 2
Raagwave on a phone, view 3
Raagwave: prahar section
Raagwave: bento section

The whole page

Every section of the homepage, top to bottom, exactly as built.

The full Raagwave homepage, top to bottomHover to scroll the full page
Raagwave: pricing section
Raagwave: footer section

Colour

Riyaz CharcoalBackground#2B2B2B
Ledger RailRails, hairlines and borders#3A3A3A
Tanpura IvoryInk and device body#ECE7DE
Saffron PhosphorAccent and glowing screens#F2A33A
Brushed BrassDevice trim and seals#E7C97F
Midnight UmberFooter field#22150C

Type

DisplayAaNewsreaderWeight 400
WordmarkAaNewsreader ItalicWeight 400
Body and UIAaGeist MonoWeight 400

Next projectHair salon

Kesh Club

Related work