Introduction
The material below presents the creation of a design system from the Airbnb brand as a final exercise for Meiuca's Design System & OPS course.
Discovery
First step of the project was mapping the Airbnb website. Identifying cases of inconsistency or components used in a very specific way and without reuse, and organizing elements for the development of the Design System separating by user type, in the case of Airbnb there are two: the Traveler and the Host, and uniting the constructions that make sense for any type of environment of the site identifying them as Design System Core.
Brand Properties
In this step we mapped the visual elements used by Airbnb and created a visual guide with the help of the mapping tool provided by css stats. Identifying colors and typography. The hierarchy of font size and weight, contrast between background and text, and brand applications were observed and tested.
Design principles
In a second moment, after the identification of the needs by the mappings, the identity and principles of the future Design System were built.
Name of the Design System: COCOON
Description: A cover made of soft, smooth yarns that wrap and protect specific insects during the pupa stage as they develop into adults.
Meaning: DS is a project in which the brand goes through some processes to evolve and attribute more quality to its product, a metaphor to the process that the caterpillar also goes through when transforming into a butterfly.
Principles: Welcoming, Freedom, Trust and Simplicity.
Design System
Creation of Design Tokens containing name, semantics, variable and compositional name of color palette styles, typography and complementary. Then the development of these patterns into Base Components. Finally the Handoff of the created components.
Result
Below I present the result of the web and app version screens of the Design System COCOON application.
