Record Label Template

Prepare your label site

Start with the material your listeners need to find a release:

1. Release information. Gather each catalogue number, title, artist, format and pressing details. The latest-release rack and the full catalogue are separate sections; a release appearing in both needs editing in both. Replace the initial “Now spinning” and catalogue captions to match your first release.
2. Artwork and identity. Keep the supplied CSS sleeves while you try the layout, or replace them with your own covers. Artwork replacement is an HTML/CSS task, not an upload field. Update the wordmark, label story, artist credits and palette to match your label.
3. Artist and release destinations. The sample artist links return to the release rack and the footer social links open service homepages. Replace them with your artist profiles and label accounts. Add links alongside release details for the relevant shop or streaming page; the sleeve buttons already control the vinyl interaction.
4. Submissions and pressing alerts. Replace both sample submission email links. The pressing-alert form only shows a demonstration message and saves nothing. Connect your newsletter provider's supported form or endpoint and test an actual subscription, or remove the form before launch.
5. A final catalogue check. Check titles against covers, verify every destination and read the page on a phone. Try sleeve selection with the keyboard and the catalogue with arrow keys. Replace the sample address and legal line before publishing.

This is a static front end. It includes no checkout, audio player, CMS, subscriber storage or demo-upload service. Adding those capabilities means connecting your own services. Hosting and those services are separate from the files.

Quick Start

1. Copy the downloaded folder somewhere and open index.html. There is no build step, bundler or package installation.
2. Work through the label checklist above, then use the section notes below to find the copy and artwork you want to change.
3. Repaint the colour tokens at the top of assets/style.css (see Palette below).
4. Deploy the folder to a static host. Keep index.html beside assets/; it loads the readable assets/script.js that ships with the download.

Files

The download contains:

• index.html: the complete label site.
• assets/style.css: the styles, including responsive and reduced-motion presentation.
• assets/script.js: readable, commented interaction code.
• README.md: customization instructions and technical reference.
• START-HERE-AI.md: a product-specific brief for an optional coding assistant.
• LICENSE.txt: the download licence.

Fonts and animation libraries load from external services listed under Dependencies. There are no bundled cover-image files: all supplied sleeve art is CSS. Repository-only thumbnail and minified build files are not part of the buyer's download.

Sections and customization

Every section is initialised independently and every lookup is guarded: delete any section and the rest keeps working.

• Hero (#top): the disc size and its off-screen bleed both derive from --disc-d in :root; the wordmark is anchored to the disc (right: calc(var(--disc-d) * 0.4)) so the type always crosses the rim. Change the two data-hero-mark lines for your own name; keep them short, the face is very wide. The disc is an interactive visual platter and the Now spinning module reads its speed (documented in the download reference below); the stacked tagline lockup (.hero-tag-lead) anchors the lower left.
• Latest pressings (#pressings): release titles, artists, catalogue numbers and pressing details live together in each rack item. The download includes the turntable reference below.
• Roster (#roster): each act is one <a class="artist">. Edit the numeral, name and one-line credit in place; alternation (left/right) is automatic from :nth-child. Pick a motif with the artist-motif--* class (disc, bars, wedge, half, square). Hover and keyboard focus reveal the credit; on touch devices the credits are always shown.
• The catalogue (#catalogue): all twelve pressings on the drag-spinnable 3D ring; the download includes the catalogue reference below. The caption's markup text is the no-JavaScript default, so keep it matching the first cover in the list.
• The story (#story): a wax panel and a deck panel with the pull-quote crossing the seam between them. The quote drifts slightly on scroll; edit its two lines in the [data-story-quote] element. On small screens the panels stack and the quote straddles the horizontal seam via its negative margins.
• Submit / footer (#submit): the mailto CTA, the alerts form, socials as styled text wordmarks, and the legal line. The alerts form is decorative: it has no action and the script only prevents the page reload and shows a confirmation line. To make it real, use your newsletter provider's supported embed or submission endpoint and replace the demonstration handler. Provider setup varies; the supplied page contains no subscriber storage or email delivery.

Palette

The palette is the identity, so there is no switcher: reskinning is repainting the token block at the top of assets/style.css. Change each hex and its matching RGB triple; every translucent value in the stylesheet derives from those triples, so nothing else needs hunting down.

Code snippet omitted: it ships with the download.

The :root header comment carries the measured contrast table. If you repaint, re-measure your pairs the same way (composited, at the size used) and mind the two rules the current values enforce: the accent is large-text-only on the ground colour, and the faint ink variant is only used on the dark sections. Keep --deck very dark; it is also the colour of the records.

Accessibility

• Sleeves are real <button>s with aria-pressed state and screen-reader labels; the disc art is aria-hidden decoration.
• Keyboard supports release browsing: select a sleeve with Enter/Space, step the catalogue with the arrow keys, and reveal artist credits by focusing a roster link. Spinning the discs is a pointer interaction. Focus states use visible tangerine outlines.
• Reduced motion (both the CSS media query and the script's matchMedia branch): the hero disc holds still, the first record sits half out, the catalogue ring stands still and jumps instantly, nothing is hidden, and sleeve selection swaps records instantly with no travel or spin.
• No JavaScript / blocked CDN: the document is complete and readable on its own; the first record shows half out via a plain CSS state, and the head gate that pre-hides reveal targets is removed when GSAP fails to load.
• Touch: drag-spinning works with a finger (only the disc itself claims the gesture via touch-action: none); vertical swipes anywhere else on the rack scroll the page normally. The catalogue stage carries touch-action: pan-y, so a sideways drag spins the ring while a vertical swipe on it still scrolls the page.

Smooth scrolling

Lenis is wired in but optional, and the block in script.js is all-or-nothing: it shares the GSAP ticker with ScrollTrigger, honours reduced motion, and can be switched off without touching code via data-smooth="off" on <html> or ?smooth=off in the URL. If you add your own scrollable element (a modal, a sidebar), give it data-lenis-prevent so the mouse wheel works inside it.

Dependencies

Loaded from CDN in index.html (no build step):

• GSAP 3.15.0 core
• ScrollTrigger (reveals, the quote drift)
• Draggable + InertiaPlugin (the turntables)
• Lenis 1.3.17 (optional smooth scrolling)

Fonts: Bungee and Inter from Google Fonts.