Background Colors
These are the main colors that should be used as the main background throughout the entire design.
Main Background Color
HEX #e4e2dd
RGB 228, 226, 221 100%
Container Background Color
HEX #FFFFFF
RGB 255 255 255 100%
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: Cabinet Grotesk.
For our typography, we employ the Medium weight for titles and the body/light weight for the rest of the text.
Title
JOKER BOLD
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 —@ ! ? {}():;/”
Body
JOKER REFULAR
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 (H1):
64px / 100%Large Text (H2):
38px / 100%Medium Text (H3):
28px / 100%CTA Text:
22px / 100%Paragraph:
18px / 100%Small Text:
16px / 100%
Tablet
Titles (H1):
48px / 100%Large Text (H2):
32px / 100%Medium Text (H3):
24px / 100%CTA Text:
24px / 100%Paragraph:
16px / 100%Small Text:
14px / 100%
Mobile
Titles (H1):
36px / 100%Large Text (H2):
24px / 100%Medium Text (H3):
18px / 100%CTA Text:
18px / 100%Paragraph:
16px / 100%Small Text:
14px / 100%
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
Dark Charcoal