With multiple iterations of components, inconsistent typography and patterns, absent documentation, and entirely different design systems used for various applications; Sonder (a health, personal safety, and wellbeing app) needed a new design system that would simplify the design and development process while giving its users a consistent experience that reflected the brand personality.
Establishing the right foundation was critical to the future success and scalability of the design system. We looked at where the previous system was failing us and made fixing those deficiencies a priority.
The type scale was built to be flexable and responsive, for use across all of Sonder’s digital products and marketing needs.
| Style | Font / Weight | Size (px) | Line Height | Letter spacing |
|---|---|---|---|---|
| Heading 1 | Gilroy Semi Bold | 56 | 76 | |
| Heading 2 | Gilroy Semi Bold | 42 | 58 | 0 |
| Heading 3 | Gilroy Semi Bold | 32 | 58 | 0 |
| Heading 4 | Gilroy Semi Bold | 24 | 44 | 0 |
| Heading 5 | Gilroy Semi Bold | 18 | 36 | 0 |
| Heading 6 | Gilroy Extra Bold | 18 | 26 | 0 |
| Heading 7 | Gilroy Extra Bold | 16 | 26 | 0 |
| Body | Apercu Light | 18 | 30 | 0 |
| Body Small | Apercu Light | 16 | 28 | 0 |
| Body xSmall | Apercu Light | 14 | 22 | 0 |
| Body xxSmall | Apercu Light | 12 | 20 | 0 |
| Body Strong | Apercu Bold | 18 | 30 | 0 |
| Body Small Strong | Apercu Bold | 16 | 28 | 0 |
| Body xSmall Strong | Apercu Bold | 14 | 22 | 0 |
| Body xxSmall Strong | Apercu Bold | 12 | 20 | 0 |
| Style | Font / Weight | Size (px) | Line Height | Letter spacing |
|---|---|---|---|---|
| Heading 1 | Gilroy Semi Bold | 33 | 43 | 0 |
| Heading 2 | Gilroy Semi Bold | 27 | 36 | 0 |
| Heading 3 | Gilroy Semi Bold | 23 | 30 | 0 |
| Heading 4 | Gilroy Semi Bold | 19 | 28 | 0 |
| Heading 5 | Gilroy Semi Bold | 16 | 24 | 0 |
| Heading 6 | Gilroy Extra Bold | 16 | 24 | 0 |
| Heading 7 | Gilroy Extra Bold | 14 | 24 | 0 |
| Body | Apercu Light | 16 | 28 | 0 |
| Body Small | Apercu Light | 14 | 22 | 0 |
| Body xSmall | Apercu Light | 12 | 20 | 0 |
| Body xxSmall | Apercu Regular | 10 | 18 | 0 |
| Body Strong | Apercu Bold | 16 | 28 | 0 |
| Body Small Strong | Apercu Bold | 14 | 22 | 0 |
| Body xSmall Strong | Apercu Bold | 12 | 20 | 0 |
| Body xxSmall Strong | Apercu Bold | 10 | 18 | 0 |
An entire ecosystem of responsive components were designed to work together to create patterns and intuitive user experiences.
Illustrations are vital components of Sonder’s visual language. They can serve as visual metaphors to convey complex ideas.
While being included as part of a soft rebranding illustrations were not fully defined beyond a stock illustration kit. Usage, style, and colour all required definition.
With safety playing a central role within Sonder’s core product offering a custom map was designed. Not only were aesthetic changes made to match our look and feel, but visability of locations that have a safety or medical focus were increased.
Patterns are reusable combinations of components that solve common user problems. These best practice solutions help users achieve their goals and help ensure consistency across experiences.
The Sonder design system has been a great success that has:
Moving into the future the focus of the design system team will be on growing the system, improving naming conventions, enhancing documentation, and creating greater alignment with code through the use of design tokens.
