Sonomir — Music Label & Artist Website HTML Template

Sonomir is a free, production-ready HTML template for an independent music label, artist collective, or radio station. The design takes a deliberate left turn from the editorial-minimal trend that dominates most music templates and commits to a synthwave / cyberpunk-neon visual direction: dark base, magenta and cyan accents, iridescent gradients, kinetic marquees, and a mono-driven typographic system that feels closer to a broadcast control room than a brochure site.

The home page is built around a horizontal-marquee hero (composition F): a kinetic mega-marquee of artist names runs across the top, three content columns sit beneath it (newest drop, catalogue mega-number, now-playing waveform card), a live ticker strip carries listener counts, and a reverse marquee announces tour and demo windows below. Every quadrant is intentionally filled — no dead space, no center-aligned single-headline cliché.

What ships in the download

Five fully-built pages, all responsive across 320 / 768 / 1024 / 1440, all hand-written semantic HTML with vanilla CSS and a single tiny JS file:

• Home (index.html) — marquee hero, recent releases grid, full artist roster, tour-date strip, streaming pill row, press quotes, subscribe CTA
• Releases (releases.html) — full catalogue grid with format and genre filters, sleeve cards, pressing notes, catalogue numbers
• Artists (artists.html) — roster grid with bios, portrait art, genre tags, release counts
• Tour (tour.html) — date / city / venue / lineup table with ticket pricing, sold-out states
• Contact (contact.html) — studio info, demo submission window rules, multi-purpose contact form, stockist directory

Design system

Sonomir runs entirely on CSS custom properties — palette, neon accents, type scale, spacing rhythm, and motion easing all live as tokens at the top of assets/css/styles.css. The typography pairs Bebas Neue (display), Syne (body), and JetBrains Mono (mono UI), all served from Google Fonts. Iridescent text gradients are pure CSS background-clip tricks; the kinetic marquees are CSS-only with a reduced-motion fallback. There are no frameworks, no build steps, no JS dependencies.

Who it’s for

Use Sonomir as the foundation for an independent record label, an artist's main site, a radio station, a podcast network, a club residency, a music festival microsite, or any music-adjacent project that wants to read as confident, modern, and visually loud rather than safe and editorial. Replace the SVG cover art and portrait placeholders with your own visuals, swap the catalogue copy, and you have a shippable label site in an afternoon.

Other free templates from the same studio

Sonomir joins a growing free catalogue on html.design — every template ships with the same craft level, all of them free to download and use. If a music site isn’t what you need today, look at Recto for a type-only photography portfolio, Talasea for a boutique hotel, Volta for a high-energy fitness brand, Axioma for a left-rail creative agency, Aurix for a dark-luxury SaaS landing page, Solara for a restaurant, or Meridia for a navy-and-brass real estate site. Each one is built around a different visual recipe, and all of them are free.

Customising

Open assets/css/styles.css and edit the :root token block — change --neon-magenta and --neon-cyan to recolor the entire neon system, change the typography tokens to switch families, or change the spacing tokens to compress or expand the rhythm. Swap the SVG placeholder art in assets/img/ with your own cover artwork and portraits. The HTML is semantic and short enough to read end-to-end in five minutes.

Free for personal and commercial use, no attribution required, no email gate. Built and maintained by html.design.