Style guide & components

The style guide contains important styles and components that are used throughout the template.

Colors

Color distinguishes our brand and helps us create consistent experiences across products.

Neutral

Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.

0
#FFFFFF
10
#faf9fb
20
#e7e5eb
30
#d4d1db
40
#bbb6c6
50
#726b80
60
#534b63
70
#403751
80
#271f37
90
#35283b
100
#35283b (90%)
Typography

The main typeface is Inter Tight. Both using form Goole Font A tranquil and fresh geometric sans font family for clear text and headlines.

Open Sans
Bold
SemiBold
Medium
Regular
Aa
Heading - Desktop
Heading 1
Open Sans/ SemiBold
104px
100%

Heading 1

Heading 2
Open Sans/ SemiBold
72px
100%

Heading 2

Heading 3
Open Sans/ SemiBold
64px
100%

Heading 3

Heading 4
Open Sans/ SemiBold
56px
100%

Heading 4

Heading 5
Open Sans/ SemiBold
40px
100%
Heading 5
Heading 6
Open Sans/ SemiBold
32px
100%
Heading 6
Heading - Mobile
Heading 1
Open Sans/ Bold
64px
100%

Heading 1

Heading 2
Open Sans/ SemiBold
56px
100%

Heading 2

Heading 3
Open Sans/ SemiBold
48px
100%

Heading 3

Heading 4
Open Sans/ SemiBold
40px
100%

Heading 4

Heading 5
Open Sans/ SemiBold
32px
100%
Heading 5
Heading 6
Open Sans/ SemiBold
28px
100%
Heading 6
Body
Body Extra-Large Bold
Open Sans/ Bold
28px
28
The quick brown fox
Body Extra-Large Medium
Open Sans/ Medium
28px
28
The quick brown fox
Body Extra-Large Regular
Open Sans/ Regular
28px
28
The quick brown fox
Body Large Bold
Open Sans/ Bold
22px
26
The quick brown fox
Body Large Medium
Open Sans/ Medium
22px
26
The quick brown fox
Body Large Regular
Open Sans/ Regular
22px
26
The quick brown fox
Body Large Bold
Open Sans/ Bold
18px
26
The quick brown fox
Body Large Medium
Open Sans/ Medium
18px
26
The quick brown fox
Body Large Regular
Open Sans/ Regular
18px
26
The quick brown fox
Body Semi-Large Bold
Open Sans/ Bold
16px
24
The quick brown fox
Body Semi-Large Medium
Open Sans/ Medium
16px
24
The quick brown fox
Body Semi-Large Regular
Open Sans/ Regular
16px
24
The quick brown fox
Body Small Bold
Open Sans/ Bold
14px
22
The quick brown fox
Body Small Medium
Open Sans/ Medium
14px
22
The quick brown fox
Body Small Regular
Open Sans/ Regular
14px
22
The quick brown fox
Caption Bold
Open Sans/ Bold
12px
20
The quick brown fox
Caption Medium
Open Sans/ Medium
12px
20
The quick brown fox
Caption Regular
Open Sans/ Regular
12px
20
The quick brown fox
Icons

Icons are visual representations of commands, devices, directories, or common actions. We are using free commercial from Phosphor Icon.

Arrow Up
Arrow Down
Arrow Left
Arrow Right
Arrow Up Left
Arrow Up Right
Arrow Down Left
Arrow Down Right
Pencil Simple
Check
Menu
Trend Up
Trend Down
Caret Down
Lock
Eye
Notification
Bell Simple
Calendar Check
User Circle
Chart Bar
Sun Dim
Caret Left
Caret Right
Laptop
Lightbulp
Moon
Sun Horizon
User List
Sign Out
Nut
Image Square
Camera
Coffee
Buildings
Game Controller
Lamp
Clock
Magnifying Glass
Non-Premium
Books
Envelope Simple
Plus
Caret Up
House Simple
Premium
Basketball
How to use?
  1. We're using embedded SVG code for the icon.
  2. Please update the SVG default color to "currentColor" so that the color of the icon will follow the current text color.
  3. Please update the dimensions to 100% so that the icon can fill the parent size.
  4. Add our custom class "SVG Icon" to the embedded code.
  5. Additionally, please add a subclass for the size of the icon, such as "16x16" or "32x32".
Buttons

Button used in this website as a CTA, with various style variations

Selection Button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Fields

Default form field styles for all forms used on the site.

Text Field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Grid

How the spacing roles relate to the hierarchy of user interface elements.

2 column grid
3 column grid
4 column grid
2 : 1 column grid
1 : 2 column grid
Spacing

How the spacing roles relate to the hierarchy of user interface elements.

4px

8px

12px

16px

24px

32px

40px

48px

56px

64px

72px

80px

Rich Text

Our rich text capabilities allow you to easily format and style text, embed images and videos, and even add custom code.

Text Bold

Lorem ipsum dolor sit amet consectur

Text Italic

Lorem ipsum dolor sit amet consectetur

Bullet List
  • Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Senectus et netus et malesuada fames ac turpis egestas
Numbered List
  1. Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Senectus et netus et malesuada fames ac turpis egestas
Figure Image & Caption
Caption here
Blockquote
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."