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.
Cinnamon
HEX #A85600
RGB 168 86 0 100%
Sky Blue
HEX #F1FCFF
RGB 241 252 255 100%
Moonrock
HEX #F7F7F7
RGB 247 247 247 100%
Graphite
HEX #303030
RGB 48 48 48 100%
Dark Graphite
HEX #222222
RGB 34 34 34 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: 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