<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.

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.

I laid out the SCSS framework and utilities, which facilitated the styling of components and layouts with a uniform look and feel. Additionally, I developed several foundational components.

/** Load required modules from Louise **/

@use "~@cohabs/louise-scss/api/fonts";
@use "~@cohabs/louise-scss/api/colors";
@use "~@cohabs/louise-scss/api/spaces";
@use "~@cohabs/louise-scss/api/elevations";
@use "~@cohabs/louise-scss/api/radiuses";

/** Load required mixins from Louise **/

@use "~@cohabs/louise-scss/mixins/reset";
@use "~@cohabs/louise-scss/mixins/breakpoints";

/** Define component base styles **/

.c-componentname {

  /* General styles */
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;

  /* Use SCSS functions to retrieve tokens values */
  gap: spaces.get("xs");
  background-color: colors.get("sand");
  box-shadow: elevations.get-shadow("10");
  border-radius: radiuses.get("m");

  /* Use a breakpoint mixin to set responsive styles */
  @include breakpoints.from('md') {
    flex-direction: row;
    gap: spaces.get("m");
    text-align: start;
  }

}