<aside> <img src="/icons/view_yellow.svg" alt="/icons/view_yellow.svg" width="40px" /> Preview link**: Storybook** Additional material available upon request

</aside>

Cohabs is an international co-living platform with shared houses in cities such as Brussels, Paris, New York, or Madrid. The company is rethinking how people live together by providing members with an environment designed to create memorable moments.

Project overview

In 2023, Cohabs began revisiting its brand. I joined the team during a 3-month ride to help them get started with the design system project. This is when the story of Louise, the Cohabs design system, started.

Material delivered

Tokens library 🧬: The root layer of the design system is a tokens library available in several formats (JSON, JS module, CSS vars,…). It includes colors, spacing, typography, and other base styles. The library provides a unique source of truth, always up-to-date, of those values that can be consumed in different fashions.

React components and layouts 🧱: A set of initial UI components and layouts that will grow over time.

Figma library 💠 of styles and components that replicate all above tokens and components with their variants.

SCSS framework 🏗 made of components and utilities, this framework provides flexibility and consistency thanks to a SCSS API built on top of the tokens library. It provides the styling of components in an agnostic way, so it can be consumed in different web-app stacks.

Storybook 📙 that fully documents the Design System. Chromatic is also used to track changes.

Role

My role was to kick off, pilot, and architect the design system under its design and technical perspectives. This project was set within a specific timeframe, ensuring that the tech team could emulate my process to continue developing a comprehensive library of components, from design conception to integration into the final products.

Design

While the new brand guidelines provided a solid design foundation, they often fell short in creating holistic user experiences and patterns designed for efficiency and accessibility.

To bridge this gap, I enhanced the brand for user interface, establishing new guidelines and design tokens as cornerstones of the system.

UI components preview.

Simultaneously, I refined existing components, introduced new ones derived from these tokens, and integrated them into the design compositions of the product undergoing redesign.

Pages comps being designed as the design system evolves.

Engineering

Concurrently, I began the engineering phase of the design system, crafting a token package using Style Dictionary that offer compatibility with current and future products.

Color design tokens in code and documented in Storybook with color contrast indicators for accessibility.