corozo design system

Scroll Down!

Designing a Developer Friendly Design System

Corozo is an internal design system for Charles Tyrwhitt digital products and design. It was built off the back of an internal need for fluid visual guidelines, with version control and regular updates that could be visible internally via a website, and also built in a way where styling is developer friendly. It also serves as a starting point for anyone working on a digital product, and offers full styling and visual guidelines as a modular foundation for all digital platforms.

Design System Homepage

The primary concern with the user interface was that it had to be very accessible internally, and that it had to be simple and easy to use, and broken down into groups based on team affiliation. If you work on the web team you simply navigate to web, for example. Another key feature is that feedback and suggestions are made open and actively encouraged. This allows staff to contribute and make suggestions for changes even if they are not designers, and feel part of the Charles Tyrwhitt brand and visual ecosystem.

Design System Menu

It was also really important throughout this project to make sure that all variants of styling were covered. This means not just explaining things like button styles and colours, but going into detail of those elements at a more granular level to include active, hover, and other states, interaction styling, focus and more. Everything you would expect from a fully featured and integrated design system!

Colours
Buttons

Iconography

Icons

Alongside the system itself as part of a consistency piece for the brand we built in over 100 unique and stylistically Charles Tyrwhitt Icons, both system and product features. These debuted along with the 2017 design refresh for the Charles Tyrwhitt site, and sit nicely within the design system, adding an extra level of consistency across all digital channels. This iconography set was also designed in 3 sizes and available in svg and eps to cover both print and digital uses.

The Identity

Corozo Logo

The identity captures part of the essence of Charles Tyrwhitt products, the button. The material so many of the products buttons are made from is called 'Corozo', hence the name, and is a natural plant product that hardens over time and can be carved. Corozo is not only organic and represents part of the future of sustainable product, but is also the consistent element to many of the clothes Charles Tyrwhitt designs, as well as being the functional part that brings those clothes together and makes them complete.

Next Project