Color
We use a range of colors through our applications and collateral. Adhering to the current standard is important to drive recognition and confidence in the company.
Primary Color
The most widely used color in our palette is “Item Blue”, a variant of our original Webalo Blue that is optimized for accessibility standards, usability, and readability. The calm and balanced blue hues, applied across various contexts and design elements, align our brand identity with reliability and trust.
We strive to avoid using pure black in our design, as it can create a visually heavy or harsh appearance. Instead we use dark shades of blue that is easier on the eye, and creates a more refined visual expression that adds depth and keeps ties with the branding.
On digital platforms Text blue is a great replacement for black text, while Background Grey offers a softer backdrop compared to pure white backgrounds.
Item Blue
HEX #0B6995
RGB 12, 157, 224
Webalo Blue
HEX #0C9DE0
RGB 12, 157, 224
Text Blue
HEX #143D51
RGB 20, 61, 81
Background Grey
HEX #f7f7f7
RGB 245, 245, 245
Secondary Color
An expanded palette support the cohesiveness and consistency of our visual identity while allowing us to create more complex visual scenes.
Presentation Blue
HEX #095072
RGB 9, 80, 114
Light Blue
HEX #3D85A6
RGB 61, 133, 166
Alert Orange
HEX #E04F0C
RGB 224, 79, 12
Contrast
Having sufficient contrast between text and background is crucial for readability. Using the colors from our design system we can achieve good contrast when these colors are used correctly. Below we have examples of text on light and dark backgrounds using colors from the design system, both of which provide excellent readability.
With a light background we use “Item Blue” to draw attention to the heading, with “Text Blue” for the paragraph text to subtly match the heading.
About Webalo
Webalo, the Platform for the Frontline Workforce, is a software platform that digitizes tasks and activities for frontline workers, providing real-time operational visibility and driving process optimization and improvement, across all areas of business operations.
With a dark background like “Presentation Blue” , we have all text set in pure white to make text vibrant and clear.
About Webalo
Webalo, the Platform for the Frontline Workforce, is a software platform that digitizes tasks and activities for frontline workers, providing real-time operational visibility and driving process optimization and improvement, across all areas of business operations.
For further usage about contrast, please read more about
Accessibility.
Do’s and Don’ts
We have compiled a series of comparisons for using color in the hopes that we collectively avoid mistakes and properly use color in all collateral.
Don’t
use light text on light backgrounds. Ensure high contrast between text and background.
Do
use Item Blue for headers and Text Blue for body text.
Don’t
use dark text on dark backgrounds. Ensure high contrast between text and background.
Do
use light text on dark backgrounds to ensure and high contrast for readability.
Don’t
use colors that contradict the message or intent of the design to avoid confusion.
Do
use colors that have the proper meaning for the contents.
Don’t
use color that are not from the design system.
Do
use colors found in the design system.
Don’t
use different colors for headers and body.
Do
use different variants of the same color to differentiate between header and body.
Don’t
use generic highlight colors.
Do
increase the font weight to highlight text.
Don’t
use pure black for icons or graphics.
Do
use colors from the design system.
Don’t
use an outline color on shapes that already has a fill.
Do
use either fill or stroke, but not at the same time.
