Inter is the primary font for all digital platforms. Inter is a variable font family carefully crafted & designed for computer screens. Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc. You can download the font here
Paragraph Large - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum nulla at turpis venenatis posuere. Mauris aliquam lectus urna, eget hendrerit mi facilisis ut. Aliquam accumsan nunc et luctus pellentesque.
Paragraph Regular - Donec vel lacinia leo. Morbi et enim felis. In lobortis a quam eu rhoncus. Mauris non tellus at orci malesuada sollicitudin. Quisque nec nisl et tortor finibus imperdiet vulputate ut justo. Nulla nec iaculis diam. Suspendisse finibus velit vitae leo tincidunt, eu iaculis ex venenatis. Praesent volutpat enim ut fermentum consectetur. Nulla facilisi. Etiam venenatis turpis in accumsan vulputate.
Caption - Sed porta ligula eu lacus efficitur sollicitudin. Aenean consequat id est finibus ornare. Nunc facilisis sapien elit, id ultrices nibh dictum in.
| Text Style | Weight | Font-Size | Line-Height |
|---|---|---|---|
| h1 | 900 | 64px | 76.8px |
| h2 | 600 | 48px | 57.6px |
| h3 | 600 | 40px | 48px |
| h4 | 700 | 32px | 38.4px |
| h5 | 700 | 24px | 28.8px |
| h6 | 900 | 12px | 14.4px |
| P.large | 400 | 24px | 38.4px |
| Paragraph | 400 | 18px | 28.8px |
| Caption | 400 | 14px | 22.4px |
Color can speak can be used as a language. It sets the tone, mood, connotation and conception of a brand or a product. The right choice of color can support better readability of the information. Besides, it can increase usability sharply, such as strengthen call-to-actions, enhance navigation, stimulate intuitive interactions, satisfy aesthetic needs and visual solutions. In all, to create a clear and harmonious style that meets users’ needs.
Primary-Blue
#0071EB
AA
Primary-Blue-Darker
#004fa5
Primary-Blue-Dark
#002d5e
Primary-Blue-lighter
#66aaf3
Primary-Blue-light
#e6f1fd
Primary-Yellow
#ffc115
AAA
Primary-Yellow-Darker
#b3870f
Primary-Yellow-Dark
#4c3a06
Primary-Yellow-lighter
#ffda73
Primary-Yellow-light
#fff9e8
Primary-Black
#333333
AA
Primary-Blue-Darker
#4d4d4d
Primary-Blue-Dark
#808080
Primary-Black-lighter
#b3b3b3
Primary-Black-light
#fbfbfb
Primary-Red
#e93601
AAA
Primary-Red-Darker
#a32601
Primary-Red-Dark
#461000
Primary-Red-lighter
#f28667
Primary-Red-light
#fdebe6
Buttons help users take action and communicate what action they can take. Each button state is distinguished from the other states and the surrounding layout. Below are several predefined button styles, each serving its own semantic purpose.