Style Guide: Visual design language

The visual design language establishes a cohesive and consistent framework for all design elements. It defines the use of color, typography, layout, and imagery to create a unified look and feel across all platforms. By adhering to this guide, designers ensure brand recognition and effective communication. Key elements include a balanced color palette with primary and secondary tones, consistent typographic hierarchies, and structured layouts that prioritize readability and user engagement. This language is the foundation of visual storytelling, blending aesthetics with functionality to enhance the user experience.

Colours

Primary colors and grays are carefully selected to form the foundation of the palette.

NAVY

#082d4d

Blue

#1c85e8

Text Gray

#7A7A7A

Yellow

#ffc259

Accent Green

#2cc8a7

Gray 90

#526475

Blue

#1c85e8

Gray 50

#d8e3e7

Gray 30

#d8e3e7

Gray 10

#f6f9fc

White

#ffffff

Colours ramps

Color ramps progress in incremental steps, both lighter and darker, originating from the primary and secondary hues.

90

70

50

30

10

Typography

A modular type scale provides a structured, harmonious approach to typography, ensuring consistency and readability across all design elements.

Headers

H1 32px/48px

Displaying H1 tag

H2 24px/40px

Displaying H2 tag

H3 18px/32px

Displaying H3 tag

Body

p.1 16px/24px

Displaying a paragraph text

S 12px/20px

@ copyright 2025

Icons

Streamlined icons are designed at 24px by 24px with a 1px stroke weight, ensuring clarity and visual consistency.