Typography Guide Tailwind CSS typography styles used across the application
Typography H1 Big text (classname=heading-h1)
H1 Small text (classname=heading-h1-small)
H1 Medium text (classname=heading-h1-medium)
Heading H2 text (classname=heading-h2)
Heading H3 text (classname=heading-h3)
Heading H4 text (classname=heading-h4)
Heading H5 text (classname=heading-h5)
Heading H6 text (classname=heading-h6)
Sub heading text (classname=sub-heading)
Button text (classname=button-text)
Body 1 text (classname=body1)
Body 2 text (classname=body2)
Body 3 text (classname=body3)
Paragraph Text (classname=paragraph-text)
Paragraph Text (classname=paragraph-text-700)
Disclaimer text (classname=disclaimer)
Colors white: '#FFFFFF'
flare: '#FC5D3D'
'foundation-text-text2': '#434343'
slate: '#EAEFF6'
'foundation-grey-g100': '#7C7C7C'
'foundation-grey-g200': '#434343'
midnight: '#000B58'
royal: '#00139E'
gold: '#D19932'
'grey-g100': '#7C7C7C'
'light-blue': '#EAEFF6E5'
'white-60': '#FFFFFF99'
cream: '#FFF8EF'
'pastel-rose': '#FDF8FA',
'light-linen': '#F9F9F7',
'mustard-brown': '#926A20',
'cloud-gray': '#E8E8E8',
'grey-g50': '#E8E8E8',
'grey-g100': '#737373',
'grey-g400': '#141414',
'foundation-grey-g75': '#A2A2A2',
'mist-blue': '#EAEFF6',
'royal-blue': '#000B57',
'fiery-red': '#FE1413',
'mystic-blue': '#00139E1A',
'foundation-grey-g300': '#1D1D1D',
'flame-orange': '#FC5D3D1A',
Buttons Button Text (className="button flare") Button Text (className="button midnight") Backgrounds Slate background div (className="bg-slate")
Cream background div (className="bg-cream")
Gradient background section (className="gradient-primary-bg")
Pastel red gradient section (className="gradient-pastel-red")
Pastel green gradient section (className="gradient-pastel-green")
Section Heading Spacing section-heading (className="section-heading")
section-heading-cards (className="section-heading-cards")
Section Left and Right Spacing Class Section content with equal left & right margin (className="section-wrapper")
Section top and bottom Spacing classes Top & Bottom spacing (className="top-bottom-spacing") Top spacing only (className="top-spacing") Bottom spacing only (className="bottom-spacing") No spacing (className="no-spacing") Custom top spacing (className="custom-top-spacing")
Custom half top spacing (className="custom-top-half-spacing")
Background Images 'linear-gradient-primary': 'linear-gradient(78.48deg, #000B57 -1.45%, #FE1413 184.47%)'
Usage: bg-linear-gradient-primary transition-[background-color,background-image] duration-200 hover:bg-none hover:bg-flame-orange text-white hover:text-black
Font Families Santoshi Font (className="font-satoshi")
Mantri Font (className="font-mantri")
Arimo Font (className="font-arimo")
Cards Styles Schedule a strategic discussion with our team to assess where coordination friction exists in your operations and how it can be systematically reduced.
Connect Now 
