Remora design system

Design system

Remora is a template-based website framework built by Manta Ray Media as a product for international organisations working in global health. Connected to a custom CMS, it gives clients a content-rich, professional website without the cost of a fully bespoke build. My role was to design the visual layer of the system: a Figma-based component and style library structured to allow each new client website to be designed quickly, consistently, and with enough flexibility to feel tailored to their organisation.

Go to website

The system

Rather than designing each website from scratch, I built a comprehensive set of reusable assets that could be configured rapidly for each new client. The foundation is a set of five colour palettes, each fully implemented through Figma colour styles. A single style change cascades consistently across every component that uses it. Crucially, individual pages are not locked to one palette. Each content section can be assigned its own palette independently, allowing a page to shift in tone and visual weight as the user scrolls, while still feeling coherent as a whole.

Design proposal

Early in each project, after initial research and ideation, I presented clients with a palette proposal: a structured overview showing all five palettes alongside representative card examples. This gave clients a clear and comparable view of how each palette would look in context, and how different sections of a page might feel alongside one another, before any design decisions were locked in.

Components

The component library covers the core building blocks of each page: navigation, header, hero slideshow, banner, footer, and a range of card types. Cards are where much of the content flexibility lives. Using Figma's component swapping, a single card slot can hold different types depending on the content: a standard box link with title and summary text, an event card showing date, duration and location, or a publication card displaying date, author and a category tag. Palette and hover states can also be swapped at the component level, keeping everything consistent without manual duplication.

Larger assets such as the header are built with different states for different device breakpoints, ensuring the handover to developers is as clear and complete as possible.

Outcome

Remora reduced the time required to design a complete website from several weeks to approximately four days, with developers able to theme the built site in a further five days. Clients including LSTM and RSTMH received websites that felt tailored to their organisation while benefiting from the efficiency and consistency the system provides. For each new client, I duplicated the Remora template, applied their brand through the style system, and configured the component library to suit their content, giving them a website that could continue to grow and adapt after launch.