Information PortalData PortalKnowledge Portal

Home

CF Programs

CFDE Centers

Partnerships

Training & Outreach

Publications

Webinars

About

CFDE Workbench

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

Title

font: Hanken Grotesk

size: 40px

font weight: 500

Text Transform: Uppercase

Title (small)

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

caption

font: Hanken Grotesk

size: 14px

font weight: 500

nav

font: Hanken Grotesk

size: 16px

font weight: 600

text transform: uppecase

color: #2D5986

font: DM Sans

size: 16px

font weight: 400

Data Portal Stats

stats_h3

font: Hanken Grotesk

size: 24px

font weight: 500

color: #9E9E9E

stats_sub

font: Hanken Grotesk

size: 16px

font weight: 500

color: #9E9E9E

stats_sub_small

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:

CFDE Workbench

Consortium

Community

Resources

@CFDE Workbench 2025

The CFDE Workbench is actively being developed and maintained by the CFDE Data Resource Center (DRC).The DRC is funded by OT2OD036435 from the Common Fund at the National Institutes of Health.

Consortium

Community

Resources

CFDE Workbench

The CFDE Workbench is actively being developed and maintained by the CFDE Data Resource Center (DRC).The DRC is funded by OT2OD036435 from the Common Fund at the National Institutes of Health.

@CFDE Workbench 2025