Typography

Our typography system ensures readability, hierarchy, and brand consistency across all digital products.

Font Family

Our primary typeface is Inter, a highly readable and versatile font designed for user interfaces. It ensures optimal legibility across various screen sizes and resolutions.

You can find more information about Inter and download it from Inter Font on Google Fonts.

Inter
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789

Headings

Headings establish a clear hierarchy, guiding users through content and improving readability.

H1 - Page Title

Font Size: 3.75rem (60px), Line Height: 1.2, Font Weight: Extra Bold

H2 - Section Title

Font Size: 3rem (48px), Line Height: 1.25, Font Weight: Bold

H3 - Sub-section Title

Font Size: 2.25rem (36px), Line Height: 1.3, Font Weight: Bold

H4 - Card Title

Font Size: 1.875rem (30px), Line Height: 1.35, Font Weight: Semi-bold

H5 - Component Title

Font Size: 1.5rem (24px), Line Height: 1.4, Font Weight: Semi-bold

H6 - Small Title

Font Size: 1.25rem (20px), Line Height: 1.5, Font Weight: Semi-bold

Body Text

Body text is designed for optimal readability, ensuring a comfortable reading experience for users.

Large Body Text

This is an example of large body text. It is used for prominent paragraphs or sections where readability is paramount. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font Size: 1.125rem (18px), Line Height: 1.75, Font Weight: Medium

Regular Body Text

This is an example of regular body text. It is the standard text size for most content, providing a balanced reading experience. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font Size: 1rem (16px), Line Height: 1.6, Font Weight: Normal

Small Body Text

This is an example of small body text. It is used for less prominent information, such as captions, footnotes, or secondary details. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Font Size: 0.875rem (14px), Line Height: 1.5, Font Weight: Normal

Links

Links are styled to be clearly distinguishable and indicate interactivity.

Primary Link
This is a primary link example.

Color: Primary-600, Hover: Underline

Secondary Link
This is a secondary link example.

Color: Secondary-600, Hover: Underline

Built with v0