Morrow Studio

Morrow Studio is a fictional independent creative practice I created as a personal project. I wanted to learn Sanity properly and explore how to build a flexible content management system that could support a highly art-directed website without compromising its visual identity.

It grew into a complete studio site: an identity and an editorial design language, ten case studies with their own desktop and mobile compositions, a CMS shaped around the people who would edit it, a script that moved all the content in, and a long round of visual and interaction QA.

That line opens Morrow’s design system, and the rest follows from it. The frame stays quiet: warm neutrals, an orange accent kept for small signals, one typeface used at its extremes, thin rules instead of boxes, and sharp corners. The colour comes from the photography.

Layouts are asymmetric within a strict 12-column grid. Motion explains continuity and never decorates: titles rise from a mask, images unmask as they enter, the menu staggers in, all on two shared curves. I explored the direction in Claude Design, and its exported frames became the reference the build had to match.

Morrow features ten projects, ranging from a hotel in Margate to a running club in Bristol. Rather than building each page separately, I created a reusable system of ten content blocks, including text, images, galleries, videos and quotes. A single renderer brings everything together, while project-specific layout rules control how each page looks and feels.

The Work archive brings all ten projects together, with category filters, list and grid views, and an interactive preview that updates as you browse. On mobile, the layout adapts to show each project's thumbnail directly in the list.

The mobile experience was designed separately, not simply adapted from desktop. Projects could have different hero images, shorter text, fewer gallery images and a different section order. Rather than maintaining two separate versions of every project, I built a system that could support both.

Each project lives in a single CMS document, making content easier to manage and update without duplicating work. Changes to shared content are reflected across both versions, while desktop and mobile can still have their own images, text, section order and visibility settings. For example, Forma uses a different content arrangement on mobile, replacing certain desktop sections with mobile-specific ones.

A well-structured CMS isn't necessarily easy to use. The default setup exposed technical field names, confusing options and long forms that could make managing content difficult for someone unfamiliar with the code.

I customized Sanity Studio to make content management simpler and more intuitive. Editors can log in and update the website without touching the code. The interface focuses on what they need: the Home page, About page and ten projects, organized with clear labels, thumbnails and project details.

Each document is organized into clear sections that match the website, making it easier for editors to find and update content. Mobile settings are kept separate, allowing editors to customize the mobile experience only where needed. Otherwise, the main content is used automatically.

Fields have clear names and helpful descriptions so editors understand what they're changing. I also added validation to catch mistakes before publishing. Minor issues, like unfinished placeholder text, trigger warnings, while important errors, such as missing image descriptions or duplicate project ordering, must be fixed before publishing.

Once everything worked, the job was matching. Playwright captured all thirteen routes at six widths, from 1440 down to 320, and the main pages were compared side by side with their reference frames, adjusted and captured again.

A separate pass checked behaviour rather than pixels: navigation, the menu, focus matching hover, the filters, list and grid, the galleries, next-project links and reduced motion. The final run passed every check.