Designing frames: one profile, many identities

The same person might be a musician on Friday, a poker streamer on Saturday, and someone quietly shipping a side project by Sunday night. One account, three faces. Frames are how a Melodreams page keeps up with a life like that.

Underneath, it is always the same page. Same links, same content. A frame is a coordinated set of choices about colour, layout, motion, and type, laid over the top. Switching between them should feel less like fiddling with settings and more like walking into a room you decorated for a different mood.

One person, many rooms

We started with four rooms that had almost nothing in common, on purpose, to see whether the idea would hold up under pressure.

• List is the calm default. Soft glow, roomy spacing, a page that stays out of your way.
• Terminal is monospaced and green on black, with a $ in front of every link, as if your bio compiled.
• Channel puts video first: a banner, a subscribe button, a grid of thumbnails.
• Casino is a neon marquee with dashed dividers and far too much gold.

If a design system can hold that spread together without cracking, the bones are sound.

Frames, not templates

A template is a fixed shape. You pour your content into it and hope it fits. A frame does not box you in like that. It is a set of rules that bend to whatever you put in, so a long name scales down instead of clipping, and a page with twenty links keeps its rhythm as well as a page with two. That is the reason we did not just ship a gallery of skins and call it personalisation.

Change the typeface and the mood changes with it, before anyone has read a single word.

The type does the heavy lifting

Almost everything that gives a frame its feeling is typographic. Terminal is monospaced on purpose. A fixed letter width reads as machine: precise, literal, a little cold, which is exactly the feeling we were chasing. Casino leans on heavy condensed weights and wide letter spacing, the grammar of a sign built to be read across a crowded floor. Channel keeps its interface type plain and quiet so the thumbnails get to carry the colour. The words are identical in all three. What changes is how they feel, and that is the type doing its work.

This blog pulls the same trick with a single typeface. It is set in Onest, the Melodreams face, top to bottom. The masthead tightens the spacing and drops the weight so it reads as editorial the instant it loads. The body opens the spacing back up for calm, long reading. Size and space do all the work here. The font itself never changes.

Constraints that travel

The hard part was never designing one good frame. It was writing rules strict enough that every frame stays good, and none of them fall apart on a five year old Android in bright sun. Type scales smoothly. Contrast stays readable in light and dark. Motion is optional and never holds anything up. Nothing leans on an image that might not arrive. A frame has to look deliberate on the best phone in the room and the worst one too.

Do that well, and a frame is no longer a coat of paint. It is a decision about how you want to meet the people who show up. The frames sit a couple of taps inside your own Melodreams page, if you want to feel the difference for yourself.