Figma link
This style can be used on top of a page or view to define the title.
Copy
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-size: 96px;
line-height: 117px;
/* identical to box height */
letter-spacing: -0.015em;
Copy /* H2 */
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-size: 64px;
line-height: 78px;
/* identical to box height */
letter-spacing: -0.005em;
Copy /* H3 */
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 48px;
line-height: 59px;
/* identical to box height */ Header 4 style. Depending on the context, this can also be used to write down brief description after the title text.
Copy /* H4 */
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 44px;
/* identical to box height */
letter-spacing: 0.0025em; Header 5 style. Depending on the context, this can also be used to write down brief description after the title text.
Copy /* H5 */
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px; Header 6 style. Depending on the context, this can also be used to write down brief description after the title text.
Copy /* H6 */
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.0015em; Subtitle 1
Copy /* subtitle1 */
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
/* identical to box height */
letter-spacing: 0.0015em; Subtitle 2
Copy /* subtitle2 */
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
/* identical to box height */
letter-spacing: 0.001em; Body 1
This can be used to add description body or paragraph. This is also used to inline texts within text fields and text areas. For Bold and Italic style of the texts, simply use related weight for this font-family
Copy /* body1 */
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
/* identical to box height, or 24px */
letter-spacing: 0.005em; Body 2
Copy /* body2 */
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 150%;
/* identical to box height, or 21px */
letter-spacing: 0.0025em; Button text
This is an all-caps style. Use this to add texts on top of buttons.
Copy /* button-text */
font-family: 'Lato';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.0125em;
text-transform: uppercase; Caption
Copy /* caption */
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.004em; Overline
Copy /* caption */
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.004em; UI label text
Use this style when you are adding UI components (e.g. text fields, radio buttons, etc.) in a form and you need to name each component. This can be used either on top side or on the left side of an UI element
Copy /* UI label text */
font-family: 'Lato';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 19px; Error
Use this style to display error or alert underneath an UI element or in a popup box.
Copy //* error */
font-family: 'Lato';
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 150%;
/* identical to box height, or 18px */
letter-spacing: 0.004em;
color: #D594A8; Clicked link
Copy /* Clicked link */
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
/* identical to box height, or 24px */
letter-spacing: 0.005em;
text-decoration-line: underline;
color: 'PoT brand' 
