Typography

Our design system champions the power of clear and consistent typography. We've meticulously curated a set of fonts that sing our brand voice while ensuring optimal readability across all screens. Accessibility is at the heart of our choices, with all font pairings adhering to WCAG 2.1 guidelines for effortless navigation and inclusivity. Whether you're crafting bold headlines or engaging body text, our system empowers you to build a cohesive and impactful visual language that leaves a lasting impression.

Font Family :

DM Sans

Display 1

font-size: 64px | line-height: 1.08 | letter-spacing: 0%

Usage : *Add className on React Element 
$ d1

Display 2

font-size: 48px | line-height: 1.08 | letter-spacing: 0%

Usage : *Add className on React Element 
$ d2

Heading 1

font-size: 40px | line-height: 1.08 | letter-spacing: 0%

Usage : *Add className on React Element 
$ h1

Heading 2

font-size: 30px | line-height: 1.08 | letter-spacing: 0%

Usage : *Add className on React Element 
$ h2

Heading 3

font-size: 24px | line-height: 1.08 | letter-spacing: 0%

Usage : *Add className on React Element 
$ h3

Heading 4

font-size: 20px | line-height: 1.08 | letter-spacing: 0%

Usage : *Add className on React Element 
$ h4

Body 1

font-size: 16px | line-height: 1.08 | letter-spacing: 0%

Usage : *Add className on React Element 
$ b1

Body 2

font-size: 14px | line-height: 1.08 | letter-spacing: 0%

Usage : *Add className on React Element 
$ b2

Small

font-size: 12px | line-height: 1.08 | letter-spacing: 0%

Usage : *Add className on React Element 
$ s

Extra Small

font-size: 10px | line-height: 1.08 | letter-spacing: 0%

Usage : *Add className on React Element 
$ xs