A Figma kit so every artist site starts with a clear direction, and gets checked before it plays.
Designers stall at the start of an artist site. Finding the direction is slow, and once it’s found, nothing keeps it for the next designer.
A brief before any pixel. Every site starts with a one-page brief, about 15 minutes: what the client sent, what’s missing, and the direction. A blank is a question back to the client, never a guess.
Structure in the blocks, the look in the tokens. The artist’s colors and fonts are set once as variables and flow through every block. The same hero becomes any artist’s hero by switching modes.
29 checks before a client sees it. 23 musts and 6 shoulds, on phone and desktop. A failed must blocks the review.
It’s built and checked, but my contract ended before a real job could test it. So no speed claims: nobody says it’s faster until a pilot measures it.
Three teammates described the same start: a new artist site, a blank file, and a slow hunt for the direction. Once someone found it, it lived in their head. The question I set out to answer: what does a designer need at the start of an artist site to reach a clear direction quickly?
I used public sources only, from artists and labels outside our clients. I took apart 14 artist sites on phone and desktop, followed 5 artists across eras, and read designers’ case studies. Type and color carried the direction on every site. Across eras, palette, type and image changed while the structure stayed. 9 of the 14 sites used the same standard sections and navigation. So templates work when they carry only that structure, not a look.
Fill the brief, set the tokens, pick a size, build from the catalog, run the checks, send it for review. Page 00 walks through them, and page 06 shows them done once for Ninth & Elm, a fictional R&B duo, from the manager’s first email to the review.
Two questions set the size: how much site (one screen, one page, or pages over time) and how much craft (system only, one custom moment, or fully custom). Moving between sizes never means a rebuild: the smaller versions are copies with blocks turned off.
Nav bar, hero, music, tour list, video, merch, sign-up and footer, each on phone and desktop. They look plain on purpose until an artist’s tokens are on. Designers can use them as they are, restyle them, or start from scratch. Detaching is feedback: a block that keeps getting detached is wrong, and we fix it or drop it.
29 checks look at the finished site, however it was built: 44 px tap targets, labels above fields, errors in words, one main action above the cookie banner, and hover and focus drawn on every control. The designer runs them, then a lead signs. Ninth & Elm passes 28 of 29, with one held for later and said plainly.
It works by hand in Figma, so it fits clients who don’t allow AI. Labels own the legal and consent wording in a separate library; artists own the look.
Nobody outside the project has used it yet. Next would be a pilot on one real request, timed against how the team works today. Until then, the brief’s 15 minutes is a target, not a measurement.
