Background Colors
These are the main colors that should be used as the main background throughout the entire design.
White
HEX #FFFFFF
RGB 255 255 255 100%
Black
HEX #101010
RGB 16 16 16 100%
Primary Font Colors
These are the main colors that should be used for the text.
White
HEX #FFFFFF
RGB 255 255 255 100%
Black
HEX #101010
RGB 16 16 16 100%
Supplemental Colors
Supplemental colors should be used on small details only.
Brown (OX Blood)
HEX #5D0000
Black
HEX #181818
White
HEX #FEFEFE
Grey
HEX #484848
Typography
Typography is a crucial component of our identity and serves as an influential instrument for maintaining uniformity in our communication.
We use one typeface: Inter.
For our typography, we employ the Regular weight for titles and the Light weight for the rest of the text.
Note: We are finally only using Inter—Regular.
Inter
Aa
A a B b C c D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z
0 1 2 3 4 5 6 7 8 9 —@ ! ? {}():;/”
Font Sizes
Here are the font sizes to be used through the entire design.
Desktop:
Titles: 100px/120
CTA Text: 40px/120
Large Text: 30px/120
Medium Text: 24px/120
Paragraph: 20px/120
Small Text: 18px/120
Tablet (scaled down ~20-25%):
Titles: 80px/120
CTA Text: 32px/120
Large Text: 24px/120
Medium Text: 20px/120
Paragraph: 18px/120
Small Text: 16px/120
Mobile (scaled down further ~20-25%):
Titles: 56px/120
CTA Text: 24px/120
Large Text: 20px/120
Medium Text: 18px/120
Paragraph: 16px/120
Small Text: 14px/120
Font Sizes
Here are the font sizes to be used through the entire design.
Desktop:
Titles: 100px/120
CTA Text: 40px/120
Large Text: 30px/120
Medium Text: 24px/120
Paragraph: 20px/120
Small Text: 18px/120
Tablet (scaled down ~20-25%):
Titles: 80px/120
CTA Text: 32px/120
Large Text: 24px/120
Medium Text: 20px/120
Paragraph: 18px/120
Small Text: 16px/120
Mobile (scaled down further ~20-25%):
Titles: 56px/120
CTA Text: 24px/120
Large Text: 20px/120
Medium Text: 18px/120
Paragraph: 16px/120
Small Text: 14px/120
Grid System:
8-Point Grid
We are using the 8-point grid system for the entire design.
96px
88px
80px
72px
64px
56px
48px
40px
32px
24px
16px
8px
Grid System:
Columns
We are using a 12-column grid system for desktop design. Each column is separated by a 32-pixel gutter, and there is a 40-pixel margin on the sides.
This grid system ensures consistent alignment and spacing across the design, enhancing the overall structure and visual coherence.
Desktop
12 Columns
32px Gutter
40px Margin
Grid System:
Columns
We are using different grid systems for tablet and mobile designs to ensure optimal layout and spacing.
For tablets, we are using an 8-column grid system with a 24-pixel gutter and a 40-pixel margin on the sides.
For mobile devices, we are using a 4-column grid system with a 16-pixel gutter and a 16-pixel margin on the sides.
Tablet
8 Columns
24px Gutter
40px Margin
Mobile
4 Columns
16px Gutter
16px Margin