Design Systems & Branding

Building a design system at Qualio

The foundation that increased productivity and unified the Qualio brand

Project overview

Role

Design Systems & Branding

Timeline

July-September 2021

Status

Fully deployed

Before implementing a design system at Qualio, the brand faced several challenges in scaling designs and maintaining consistency, which ultimately affected brand awareness and growth.

The goal of this project was to create a scalable design system and establish a single source of truth for designers and developers, boosting productivity, reducing guesswork, and enhancing Qualio’s brand presence across all internal and external channels.

As a fast-growing startup, Qualio understood that a unified brand approach was essential for competing effectively in the market. By implementing this system, I streamlined design processes and strengthened the company’s position as a key player in the industry.

80%

increase in productivity, reducing design & development turnaround times

300%

growth on social channels, positively impacting brand awareness

We gained 350 new customers in the first year following our rebrand and website refresh. I believe this success is directly tied to our efforts in establishing a more consistent brand.

——

VP of Marketing, Qualio

We gained 350 new customers in the first year following our rebrand and website refresh. I believe this success is directly tied to our efforts in establishing a more consistent brand.

——

VP of Marketing, Qualio

We gained 350 new customers in the first year following our rebrand and website refresh. I believe this success is directly tied to our efforts in establishing a more consistent brand.

——

VP of Marketing, Qualio

The process

Creating the system’s building blocks

This design system was built using the atomic design principle, following a hierarchical approach from core components to high-fidelity pages:

01.

Foundation: I started by selecting the color palette, defining typography, and implementing a grid system. Additionally, I designed the iconography, illustrations, and key brand assets that make up the visual identity.

02.

Base components: once the foundation was set, I created the base UI components, like buttons, tags, and form inputs, which are the building blocks for all other main components.

03.

Main components: with the base components in place, I combined them to shape the layout structure and create objects that would eventually form modules and pages. Examples of these main components include navigation, footers, call-to-actions (CTAs), and feature cards.

04.

Modules: next, I focused on developing fully functional modules that form templates and pages. The key benefit of this stage was consistency, which made the page-building process seamless and efficient.

05.

Templates & pages: finally, I worked on the templates and pages, defining the layout structure and establishing the overall tone. It was essential to capture a variety of scenarios and implement guidelines on how to use them effectively.

Typography: the Qualio brand utilizes two font families to create contrast between headings and body content. This approach enhances readability and establishes a clear visual hierarchy.

Typography: the Qualio brand utilizes two font families to create contrast between headings and body content. This approach enhances readability and establishes a clear visual hierarchy.

Royal Blue

Primary

AAA

25

#F5F6FF

AAA

25

#F5F6FF

AAA

25

#F5F6FF

AAA

50

#E5E8FF

AAA

50

#E5E8FF

AAA

50

#E5E8FF

AAA

100

#D6DAFF

AAA

100

#D6DAFF

AAA

100

#D6DAFF

AAA

200

#B5BBFF

AAA

200

#B5BBFF

AAA

200

#B5BBFF

AA

300

#7883FF

AA

300

#7883FF

AA

300

#7883FF

400

#6370FF

400

#6370FF

400

#6370FF

AA

500

#3D4CF2

AA

500

#3D4CF2

AA

500

#3D4CF2

AAA

600

#303CBF

AAA

600

#303CBF

AAA

600

#303CBF

AAA

700

#232C8C

AAA

700

#232C8C

AAA

700

#232C8C

AAA

800

#1D2473

AAA

800

#1D2473

AAA

800

#1D2473

AAA

900

#13184D

AAA

900

#13184D

AAA

900

#13184D

Yellow

Primary

AAA

25

#FCF7E3

AAA

25

#FCF7E3

AAA

25

#FCF7E3

AAA

50

#FCECBA

AAA

50

#FCECBA

AAA

50

#FCECBA

AAA

100

#FCDF88

AAA

100

#FCDF88

AAA

100

#FCDF88

AAA

200

#FCD256F

AAA

200

#FCD256F

AAA

200

#FCD256F

AAA

300

#FCC626

AAA

300

#FCC626

AAA

300

#FCC626

400

#FCB80D

400

#FCB80D

400

#FCB80D

AA

500

#DE9B00

AA

500

#DE9B00

AA

500

#DE9B00

AAA

600

#A66F00

AAA

600

#A66F00

AAA

600

#A66F00

AA

700

#8C5E00

AA

700

#8C5E00

AA

700

#8C5E00

AAA

800

#734D00

AAA

800

#734D00

AAA

800

#734D00

AAA

900

#523600

AAA

900

#523600

AAA

900

#523600

Orange

Primary

AAA

25

#FFF2F0

AAA

25

#FFF2F0

AAA

25

#FFF2F0

AAA

50

#FFE1DB

AAA

50

#FFE1DB

AAA

50

#FFE1DB

AAA

100

#FFC7BD

AAA

100

#FFC7BD

AAA

100

#FFC7BD

AA

200

#FFAE9E

AA

200

#FFAE9E

AA

200

#FFAE9E

AA

300

#FF9480

AA

300

#FF9480

AA

300

#FF9480

400

#FF7A61

400

#FF7A61

400

#FF7A61

500

#FF6E52

500

#FF6E52

500

#FF6E52

600

#E5634A

600

#E5634A

600

#E5634A

AA

700

#B2442E

AA

700

#B2442E

AA

700

#B2442E

AAA

800

#942E1E

AAA

800

#942E1E

AAA

800

#942E1E

AAA

900

#661F15

AAA

900

#661F15

AAA

900

#661F15

Purple

Secondary

AAA

25

#F4F0FF

AAA

25

#F4F0FF

AAA

25

#F4F0FF

AAA

50

#E8E0FF

AAA

50

#E8E0FF

AAA

50

#E8E0FF

AAA

100

#D7C9FF

AAA

100

#D7C9FF

AAA

100

#D7C9FF

AAA

200

#B8A1FF

AAA

200

#B8A1FF

AAA

200

#B8A1FF

AA

300

#9A78FF

AA

300

#9A78FF

AA

300

#9A78FF

400

#8A63FF

400

#8A63FF

400

#8A63FF

AA

500

#6A3DF2

AA

500

#6A3DF2

AA

500

#6A3DF2

AAA

600

#5430BF

AAA

600

#5430BF

AAA

600

#5430BF

AAA

700

#3D238C

AAA

700

#3D238C

AAA

700

#3D238C

AAA

800

#321D73

AAA

800

#321D73

AAA

800

#321D73

AAA

900

#21134D

AAA

900

#21134D

AAA

900

#21134D

Pink

Secondary

AAA

25

#FFEDFB

AAA

25

#FFEDFB

AAA

25

#FFEDFB

AAA

50

#F5D7EE

AAA

50

#F5D7EE

AAA

50

#F5D7EE

AAA

100

#F5BFE8

AAA

100

#F5BFE8

AAA

100

#F5BFE8

AA

200

#F5ABE4

AA

200

#F5ABE4

AA

200

#F5ABE4

AA

300

#EB8DD5

AA

300

#EB8DD5

AA

300

#EB8DD5

400

#D67CC2

400

#D67CC2

400

#D67CC2

AA

500

#CC70B7

AA

500

#CC70B7

AA

500

#CC70B7

AAA

600

#C261AC

AAA

600

#C261AC

AAA

600

#C261AC

AA

700

#AD5799

AA

700

#AD5799

AA

700

#AD5799

AAA

800

#80336E

AAA

800

#80336E

AAA

800

#80336E

AAA

900

#57234B

AAA

900

#57234B

AAA

900

#57234B

Colour palette: the color selection for this design system was derived from the brand guidelines, with all hues and shades thoroughly tested for accessibility and compatibility.

Colour palette: the color selection for this design system was derived from the brand guidelines, with all hues and shades thoroughly tested for accessibility and compatibility.

Iconography: the icon selection for this design system is simple yet effective, with legibility being the top priority when defining the style and size of the icons.

Iconography: the icon selection for this design system is simple yet effective, with legibility being the top priority when defining the style and size of the icons.

The solution

Shaping components, templates, and pages

To maintain a consistent style throughout the website, all components, templates, and pages were developed based on the core and base components. Applying the grid system and typography scale was crucial for achieving a user-friendly experience.

The entire website was built with three main templates: a default template used for most product and solution pages, an article-style template for blogs and resources, and a lighter demo template featuring a simpler header and footer. This approach increased productivity by eliminating guesswork while allowing for flexibility in design through interchangeable modules.

Creating multiple pages and adding content became easy and straightforward with these templates in place!

Our brand must be aligned with our vision and goals — and that is why I am so excited for this new chapter. I am confident that we have created a solid brand that is the foundation to our success in the future.

——

CEO, Qualio

Our brand must be aligned with our vision and goals — and that is why I am so excited for this new chapter. I am confident that we have created a solid brand that is the foundation to our success in the future.

——

CEO, Qualio

Our brand must be aligned with our vision and goals — and that is why I am so excited for this new chapter. I am confident that we have created a solid brand that is the foundation to our success in the future.

——

CEO, Qualio

Website overview: The design style of Qualio’s website is clean and modern, focusing on organized sections that facilitate navigation and prioritise readability.

Website overview: The design style of Qualio’s website is clean and modern, focusing on organized sections that facilitate navigation and prioritise readability.

Primary button

Button label

Button label

Button label

Secondary button

Button label

Button label

Button label

Tertiary button

Button label

Button label

Button label

Blue tag

Tag name

Tag name

Tag name

Tag name

Tag name

Tag name

Orange tag

Tag name

Tag name

Tag name

Tag name

Tag name

Tag name

Yellow tag

Tag name

Tag name

Tag name

Tag name

Tag name

Tag name

Pink tag

Tag name

Tag name

Tag name

Tag name

Tag name

Tag name

Buttons & tags: buttons are utilised for call-to-action (CTA) purposes, while tags are effective for displaying categories or content filtering.

Buttons & tags: buttons are utilised for call-to-action (CTA) purposes, while tags are effective for displaying categories or content filtering.

Featured cards: these cards are visible throughout the entire website and can be used to summarize the content of a page or to highlight specific information.

Featured cards: these cards are visible throughout the entire website and can be used to summarize the content of a page or to highlight specific information.

Content library: the design of this page is focused on allowing users to search for and find content quickly and easily. The resource content page also allows users to preview assets before download.

Content library: the design of this page is focused on allowing users to search for and find content quickly and easily. The resource content page also allows users to preview assets before download.

Would you like to learn more about this project?

Would you like to learn more about this project?

© 2025 Laura Ungrad

Find me on

© 2025 Laura Ungrad

Find me on

© 2025 Laura Ungrad

Find me on