Header of the case study with the Baseline logo, and the indication that this is a "Design system" case study. Over the brand blue color in a solid background

Baseline

Design System
UI/UX
Product Design
About
This is a work in progress. Baseline is a portal designed to inform and support partners who actively advocate for better jobs, greater opportunities, and stronger incomes, so that targeted communities can rise above the poverty line. I was brought in to extend the newly developed brand into web spaces, with the long-term goal of evolving the platform into a more complete product across multiple environments.

Branding by Alexis Mahrus
Client
Baseline
Date
2024-25
Role
Visual Designer,
UX Lead, Brand, Animator 
Tools
Figma

Structure

The system was designed with scalability in mind. Using an atomic design methodology, brand tokens were defined at the foundational level, then expanded into semantic tokens and responsive tokens, establishing a flexible framework to support consistent growth.
Various cellphone screens showcasing the app
Various cellphone screens showcasing the app
Various cellphone screens showcasing the app
Various cellphone screens showcasing the app

Composition

Within Figma, components were developed to allow for quick, consistent, and integrated configuration across the platform.
Various cellphone screens showcasing the app
Various cellphone screens showcasing the app

Expansion

The brand was translated to meet the needs of the web environment while laying the groundwork for future growth across a variety of platforms and product ecosystems.
Various cellphone screens showcasing the app
Various cellphone screens showcasing the app
Various cellphone screens showcasing the app

Interaction

Animations were generated using Figma’s native motion capabilities to closely simulate coded behavior, making the developer handoff more accurate and straightforward.