Mosie Hackett monogram

Studio · Mosie Hackett

Design Studio

Small, self-contained tools for building a look and turning it into a system you can reuse — even if you don’t have a brand yet. They’re laid out in the order you’d actually use them: find a direction, build the system, get it live. Everything runs in your browser; nothing uploads.


Step 1Find your direction3 tools

Start here if you don’t know what your site should look like yet. These tools give you options instead of asking you to have answers — pull colours out of a photo you like, try your own words in different type, make a background with some warmth to it. No particular order: play, keep what you like, move on when something feels right.

Step 2Build the system5 tools

Turn the things you liked into rules you can reuse, so every page you build matches without you deciding again each time. This section runs in order — each one builds on the choices you made in the one before, and the last one writes every decision out as code you can paste into a project. (You carry the values across yourself for now — every tool has a copy button.)

Step 3Get it live4 tools

The jobs between “it’s designed” and “it’s online” — shrinking photos so pages load fast, checking a component in both light and dark, making the browser-tab icon and link preview, adding a little motion. No particular order: open whichever matches what you’re stuck on.

studio.mosiealong.com12 toolsself-contained · vanilla · theme-aware