Intro
This guide serves as a comprehensive manual for the visual and technical elements that give our websites their distinctive look and feel.
This Styleguide has two purposes: to give you instant visual feedback when you customize the global assets of this website, and to be used as a reference tool by designers, developers, and content creators. It ensures that no matter who works on the project, or when they work on it, our brand's integrity and cohesiveness are preserved.
Logo
Within this section, you'll find the parameters to adapt the logo to your brand's identity, ensuring it's displayed consistently across all platforms.
LOGO
Default
LOGO
Grayscale
LOGO
Icon
LOGO
Icon Grayscale
Color
Adjust and apply your brand's color palette using the guidelines here, setting the tone and identity of your website's visual theme.
Primary 50
#F0FEFA
Primary 100
#CEFDED
Accent 400
#213452
Accent 50
#213452
Accent 100
#213452
Accent 800
#213452
White
#FFFFFF
Black
#131313
Greyscale
Gray 50
#FAFAFA
Gray 100
#F5F5F5
Gray 200
#EEEEEE
Gray 300
#E0E0E0
Gray 500
#9E9E9E
Gray 700
#616161
Gray 900
#212121
Typography
Customize your site's typography according to these standards to match your brand's voice, ensuring readability and brand recognition.
Heading 1
Sora, 60 px, Bold
Heading 2
Sora, 40 px, Semibold
Heading 3
Sora, 30 px, Medium
Heading 4
Sora, 20 px, Medium
Heading 5
Sora, 20 px, Medium
Heading 6
Sora, 16 px, Medium
Body
Sora, 16 px, Regular
Body Small
Sora, 14 px, Light
Buttons
Use this section to tailor button styles to fit your brand's aesthetic, while keeping the user experience intuitive and familiar.