Lead Designer
theme-library03.jpg

Building a Visual Language

 
 
 

Building a Visual Language

Behind the scenes of making a design system at CFI

 
 
 

When I first started working at CFI, the main focus was to validate the business idea. Three years later, our team has grown, and with it, the need for a cohesive visual library.

In a fast-paced company like CFI, the products are constantly changing and the brand is constantly being challenged to fit the business needs.

The purpose of our design system, which we call “theme library” is to allow everybody internally, to be on the same page about how to use our typography, colours and other elements across our digital products. It also contains an inventory of basic components and sections, templates for PowerPoint, Word, Ebooks, as well as tutorials for content creators that need to edit these templates. This guide is not a final product, it’s rather an inventory management platform where everyone on the team can participate and help to improve the brand.

 
 
 
 

Being Resourceful

One of our key values at CFI and perhaps in every company is being resourceful. Especially when it comes to prototyping and validating an idea. In a small company, we often have to juggle between roles and responsibilities, therefore we need to find ways to be more effective with our time.

Being able to prototype quickly and save time by reutilizing components will give us more time to focus on user experience and performance, therefore improving the conversion rate on our website.



The Foundation

Our first step was to audit our current branding guidelines and components used around our website, find inconsistencies and fix them in order to create an overall theme that looks and feels like the values of CFI, even if the components are different.

This is very important because we are constantly re-evaluating our designs based on performance and user conversion, sometimes we need to adjust layouts and other times, we need to adjust colours or components.

Our foundation library included our colour palette, typography, logos and gradients. This was then expanded to include every detail such as elevation, round corners, writing style, personality, iconography, illustration style, motion style, grid system, layout, dark theme, etc.

 
 
 
 
 
 

Bootstrap 4 at the Core

Our front-end uses the Bootstrap 4 framework. Once we had our foundation library ready for an audit, it was time to fill in the blanks. We expanded the colour palette to a full range of colours and developed a scale of 100 to 900 for each colour. The colour development involved a careful selection of adjacent colours to create our CFI colour wheel. Then, using the HSL system, we adjust the light value to change the saturation and brightness of each colour to generate a scale of 9 colours.

Another important change was our font usage. We revisited the typography scaling and assigned rules to each heading and paragraph style.

We took into consideration the Bootstrap 4 guidelines and applied them to our theme and to each component with the purpose of creating a kitchen sink that will function as our live component library.



Accessible Design

Once we had a full inventory of our components and guidelines, it was time to assess the accessibility of our brand. As an online and global company, CFI cares about the accessibility of its users. After careful consideration, we adjusted a few tones of our core colours to comply with the WCAG guidelines for AA compliance.

 
 
 

Updating Components

 
 

Creating the theme library doesn’t mean that the project is done. There’s really no end to this library, making sure that everything is up to date and that every guideline is laid out properly is important for content creators and designers to create cohesive elements.

Our components are broken-down into nested components. This gives us enough flexibility to be creative and re-arrange or hide an element as we see fit depending on the needs of the user experience.

In a digital world where trends change rapidly, it’s important to be able to maintain this library by re-using components and to have them all interconnected. A single update, such as: changing a colour, removing a shadow, changing the size of a card or adding a border to it, can be reflected real-time on every component across all of our prototypes.