Discover climatecentral.org design foundations

Learn how climatecentral.org uses colors and fonts to enhance user experience and design coherence.

Last update: 06/29/2024

ICONS


Favicon 180x180
Favicon

TYPOGRAPHIES


Aa

work sans, sans-serif - 300 - normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()

Aa

work sans, sans-serif - 400 - normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()

Aa

work sans, sans-serif - 500 - normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()

Aa

work sans, sans-serif - 600 - normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()

Aa

work sans, sans-serif - 700 - normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()

Aa

maitree, serif - 300 - normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()

Aa

maitree, serif - 400 - normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()

COLORS


CALL TO ACTION

The call to action color is specifically chosen to stand out on the page. It's used on elements that require user interaction or urgent attention, such as "submit" buttons, promotional banners, or important links.

50

50

#dce6f9

100

100

#b0c7f2

200

200

#84a8eb

300

300

#5889e4

400

400

#2c6add

500

500

#1e54b8

600

600

#17408c

700

700

#102c60

800

800

#091835

900

900

#010409

950

950

#000000

HERO

The hero color is used to draw attention to the most important content on the page. It's the main color used on content above the fold.

50

50

#d4d8d7

100

100

#b9c0bf

200

200

#9fa8a6

300

300

#84908d

400

400

#6b7673

500

500

#525b59

600

600

#3a403f

700

700

#222525

800

800

#0a0b0a

900

900

#000000

950

950

#000000

ACCENT

The accent color is used to highlight important elements on the page, such as headings, links, or buttons. It's a secondary color that complements the primary color scheme.

50

50

#ffffff

100

100

#ffffff

200

200

#ffffff

300

300

#ffffff

400

400

#ffffff

500

500

#ffffff

600

600

#e6e6e6

700

700

#cccccc

800

800

#b3b3b3

900

900

#999999

950

950

#808080

BACKGROUND

The background color is the primary color used in the background of the page. It's a neutral color that provides a backdrop for the content on the page.

50

50

#ffffff

100

100

#ffffff

200

200

#ffffff

300

300

#ffffff

400

400

#ffffff

500

500

#ffffff

600

600

#e6e6e6

700

700

#cccccc

800

800

#b3b3b3

900

900

#999999

950

950

#808080

SURFACE

The surface color is used to create depth and dimension on the page. It's a light color that's used on elements like cards, modals, and other surfaces that need to stand out from the background.

50

50

#54abf8

100

100

#2393f6

200

200

#097adc

300

300

#075fab

400

400

#05447a

500

500

#032949

600

600

#010e18

700

700

#000000

800

800

#000000

900

900

#000000

950

950

#000000