Colors
Color distinguishes our brand and helps us create consistent experiences across products.
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.
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.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Icons
Icons are visual representations of commands, devices, directories, or common actions. We are using free commercial form Phosphor Icon.
- We're using embedded SVG code for the icon.
- Please update the SVG default color to "currentColor" so that the color of the icon will follow the current text color.
- Please update the dimensions to 100% so that the icon can fill the parent size.
- Add our custom class "SVG Icon" to the embedded code.
- 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
Form Fields
Default form field styles for all forms used on the site.
Grid
How the spacing roles relate to the hierarchy of user interface elements.
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.
Lorem ipsum dolor sit amet consectur
Lorem ipsum dolor sit amet consectetur
- 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
- 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
"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."