MAKING A MUMBAI RECORD LABEL READ AS A COMPANY, AND GIVING IT A HOMEPAGE NOBODY MISTAKES FOR A TEMPLATE

Fat Man Kills Records is an independent music company in Mumbai, run by FMKRP LLP. Its sibling, Boom Bap Bombay, is the culture platform I built a site for earlier. I designed the logo and brand values, then the website, and in October I rebuilt the homepage from scratch after deciding the first version, though sound, looked like every other label site. This page covers the thinking, the parts that were hard, and what I'd still change.

A label that isn't only a label

Most label sites are a roster and a list of releases, which is the right shape for a label that releases songs. FMKR describes itself differently: not a label that releases songs, but a company that owns catalogue and builds brands. A roster-and-releases site would have undersold that, so the job was to make the homepage say "company" early without turning into a corporate brochure.

Built around who's visiting

Three kinds of people turn up. Artists want to know whether FMKR is worth sending music to. Partners want to know what the company can do for them. Licensors want to know who to talk to about rights. I organised the site around those questions rather than the label's own org chart: Artists, Releases, Services, About and Contact, with Services (label services, distribution, publishing, sync and licensing) sitting next to the music instead of buried in a footer.

Contact does the same job. Enquiries go to separate desks, so a demo reaches A&R and a licensing request reaches rights. Someone sending a demo and someone clearing a track are asking for different things and shouldn't share an inbox.

Art direction: one object, not a collage

My first homepage passes were competent and forgettable. A 3D object floating in a dark studio, a glowing orb, text over a gradient: the visual vocabulary that makes people dismiss a site as generated before they've read it. I rejected them and wrote myself rules instead. One confident hero object. A couple of elements scaled huge and everything else small, so the hero is never crowded. Gestalt principles for grouping and alignment. Anything important has to be the easiest thing on the screen to spot.

The hero object is a knife animation I drew by hand, frame by frame, laid across the whole screen. I tried other ideas first and cut them: a 3D mask, the logo itself, a vinyl record. Each was a good picture that didn't carry the brand. The drawing did, because it looks like something someone made.

Navigation as a composition

A header bar reads as a separate section, which was the opposite of what I wanted. On the landing page the links are a large stack in the corner that scrolls away with the page like everything else. Once they've gone, a Menu button appears and summons the same stack over wherever you are, with no panel behind it.

Everything is blended against the page, so the colour does the work: the links come out blue on paper and flip to gold or purple wherever a dark or blue section passes under them. That took a negative-colour trick (the link colour is the inverse of the blue I want, which a difference blend turns back into blue), not a separate dark-mode style.

The mascot, and why I drew its legs

The logo has a mascot, and I wanted it walking along the top of the hero, slowly and confidently, passing behind the FMKR lockup. The logo drawing has its legs on two different hips, one far behind and one ahead, so however you swing them the back foot never gets past the front one. It just drags. That's exactly how my first attempt looked.

So I kept the drawn head and coat, and drew new legs in the same bold outline: baggy at the thigh, tapering to the cuff, both hanging from one hip and scissoring past each other half a cycle apart. Each leg swings, lifts as it comes forward and plants; the shoes stay flat; the body dips when both feet are down so the planted foot doesn't slide. All of it is SVG and CSS keyframes, with no animation library.

Timing the mascot to the animation

The brief for the last detail was precise: when the knife animation reaches the end of its loop, the mascot should reach the right edge of the screen and turn round. The catch is that an animated image keeps its own clock, which the page can neither read nor seek, while the mascot runs on a CSS animation with a different start.

I made every stretch of the walk a whole number of the knife's 8.4-second loops, so each crossing is three loops and both turns land on loop boundaries. A small component holds the mascot until the knife has loaded and then starts both together. It also re-aligns them when the hero scrolls back into view, because browsers can pause an animated image off-screen while CSS carries on. I checked it by screenshotting the page at about 20 frames per second and cross-correlating the knife's frame changes against the mascot's clock: a 0 ms offset, including after scrolling away and back.

A billboard for the latest releases

Below the landing, the latest releases fill the screen like a streaming service's billboard: a muted preview behind the newest release's details, the rest lined up along the bottom to skip to, and each one auto-advancing after twelve seconds. The progress bar on the active card is the timer, so the two can't disagree, and pausing is a single CSS property.

It's built to be considerate: nothing loads until it's on screen, it pauses in a background tab, it has a visible pause control, and below tablet width, with data-saver, or with reduced motion it falls back to still images and loads no video at all.

Problems I only found by running it

• Smoothing that deleted the drawing. The knife frames are only 480 pixels wide and stair-stepped when stretched across a screen, so I smoothed them with an SVG filter. It looked clean and quietly erased the fine hairlines I'd drawn. I replaced it with a one-off offline render at 2400 pixels that rounds the edges without fusing or dropping a stroke.
• A section that rendered white on white. The accent statement band had been blank, a full screen of nothing, on the live site from the original build. Its class read the accent colour after redefining it to white. I fixed it with a separate token that nothing overrides.
• A flash of the old layout on refresh. The header rendered compact first and animated into the poster layout after the page hydrated. I made the first paint the final layout, covered the first frame with the preloader from a head script, and stopped the page wipe from playing on initial load.

Under the hood, and what it measures

Content lives in typed TypeScript validated with Zod, read only through one adapter, so the site could move to a CMS without touching a component. Colour, type and spacing sit in a three-layer token system, and a route group sets the brand scope on the server so there's no flash of the wrong palette. I built it with AI tools, and I review, test and own everything that ships.

I measured the live homepage with Lighthouse (desktop) after the redesign, not before it: 91 performance, 96 accessibility, 100 best practices, 100 SEO, with a 0.8 s largest paint, no layout shift and no blocking time. The cost of the hero shows up in Speed Index (3.6 s), because of a 1.9 MB animation. The single accessibility failure is the deliberately faint, decorative "OUTLAST" word flagged by the contrast audit.

What's real and what isn't

The structure, design system and engineering are real and live at fmkrecords.com. The roster, releases and press copy are placeholder content. The artist portraits and the preview footage in the billboard are stand-ins, frames from other artists' official videos, shown until the label has its own. I've tested in Chrome only, so Safari and real phones are still to check.