The following document lays out the basic web design specifications of the CFDE Workbench. The website is built using Next.js, Material UI, and Tailwind CSS. You can access the template of this website here.
font: Hanken Grotesk
size: 40px
font weight: 500
Text Transform: Uppercase
font: Hanken Grotesk
size: 24px
font weight: 500
Text Transform: Uppercase
font: Hanken Grotesk
size: 40px
font weight: 500
font: Hanken Grotesk
size: 32px
font weight: 500
font: Hanken Grotesk
size: 24px
font weight: 500
font: Hanken Grotesk
size: 22px
font weight: 500
font: Hanken Grotesk
size: 20px
font weight: 500
font: Hanken Grotesk
size: 16px
font weight: 500
font: Hanken Grotesk
size: 15px
font weight: 500
body1
font: DM Sans
size: 16px
font weight: 500
body2
font: DM Sans
size: 15px
font weight: 500
font: Hanken Grotesk
size: 14px
font weight: 500
font: Hanken Grotesk
size: 16px
font weight: 600
text transform: uppecase
color: #2D5986
font: DM Sans
size: 16px
font weight: 400
font: Hanken Grotesk
size: 24px
font weight: 500
color: #9E9E9E
font: Hanken Grotesk
size: 16px
font weight: 500
color: #9E9E9E
font: Hanken Grotesk
size: 14px
font weight: 500
color: #9E9E9E
Primary Main (#C3E1E6)
Primary Light (#DBEDF0)
Primary Dark (#84A9AE)
Secondary Main (#2D5986)
Secondary Light (#9cbcde)
Secondary Dark (#122436)