Web Design Specifications
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.
Typography Specifications
font: Hanken Grotesk
size: 40px
font weight: 500
Text Transform: Uppercase
font: Hanken Grotesk
size: 24px
font weight: 500
Text Transform: Uppercase
h1
font: Hanken Grotesk
size: 40px
font weight: 500
h2
font: Hanken Grotesk
size: 32px
font weight: 500
h3
font: Hanken Grotesk
size: 24px
font weight: 500
h4
font: Hanken Grotesk
size: 22px
font weight: 500
h5
font: Hanken Grotesk
size: 20px
font weight: 500
subtitle1
font: Hanken Grotesk
size: 16px
font weight: 500
subtitle2
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
Data Portal Stats
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
Colors
Primary Main (#C3E1E6)
Primary Light (#DBEDF0)
Primary Dark (#84A9AE)
Secondary Main (#2D5986)
Secondary Light (#9cbcde)
Secondary Dark (#122436)
Button Examples
Icon Button
Importing Images:
