Logos
SVG
The preferred format to be used for all our logos. Use the light logo (the first one) whenever possible.
PNG
An alternative image format for our logos, only for when SVG cannot be used.
Icons
SVG
The preferred format to be used for all our icons. Use the light icon (the first one) whenever possible.
PNG
An alternative image format for our icons, only for when SVG cannot be used.
Avatar
JPEG
Our brand avatar, used on social media and other places that require a profile picture.
Colors
Fonts
Figtree
We use the "Figtree" font for body copy, excluding headings and block content.
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
(,.;:?!$&*)
abcdefghijklmnopqrstuvwxyz
1234567890
(,.;:?!$&*)
Weight: 400 (Normal)
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
(,.;:?!$&*)
abcdefghijklmnopqrstuvwxyz
1234567890
(,.;:?!$&*)
Weight: 700 (Bold)
Web Fonts
Usage
Import
Insert this right before closing the <head> element in your HTML.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
CSS
Use this font family whenever referencing fonts in your CSS.
font-family: "Figtree", sans-serif;
Sizes
Scale
We use the Perfect Fourth scale when calculating all our sizing proportions.
Base: 16px (1rem)
Ratio: 1.333
Smaller Values
Here are some of the most used smaller scale values:
0.75
0.563
0.422
0.317
0.238
Larger Values
Here are some of the most used larger scale values:
1.333
1.777
2.369
3.157
4.209
5.61
7.478
9.969
Typography
All headings and copy must be sized accordingly to the scale we use. For structural purposes, a heading can use another heading's size, as long as it's using one of the following sizes:
Heading 1
4.209rem
Heading 2
2.369rem
Heading 3
1.777rem
Heading 4
1.333rem
Heading 5
1rem
Heading 6
0.75rem
Article Body
1rem
Default Body
1rem
Elements
Rules
Border Radius: 0.422rem
Letter Spacing: Normal
