Discover framer.com design foundations

Learn how framer.com uses colors and fonts to enhance user experience and design coherence.

Last update: 07/09/2024

ICONS

Favicon

TYPOGRAPHIES

inter, inter placeholder, sans-serif - 400 - normal

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

inter, inter placeholder, sans-serif - 500 - normal

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

inter, inter placeholder, sans-serif - 600 - normal

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

inter, inter placeholder, sans-serif - 700 - normal

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

inter marketing regular, inter marketing regular placeholder, sans-serif - 400 - normal

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

gt walsheim framer medium, gt walsheim framer medium placeholder, sans-serif - 400 - normal

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

inter marketing semibold, inter marketing semibold placeholder, sans-serif - 400 - normal

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

inter framer medium, inter framer medium placeholder, sans-serif - 400 - normal

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

gt walsheim medium, gt walsheim medium placeholder, sans-serif - 400 - normal

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

inter framer semibold, inter framer semibold placeholder, sans-serif - 400 - normal

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

inter framer 2 semibold, inter framer 2 semibold placeholder, sans-serif - 400 - normal

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

gt walsheim bold, gt walsheim bold placeholder, sans-serif - 400 - normal

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

inter - 500 - normal

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

gt walsheim bold, serif - 400 - normal

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

inter framer regular, inter framer regular placeholder, sans-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.

#ffffff

100

#ccf2ff

200

#99e6ff

300

#66d9ff

400

#33ccff

500

#00bfff

600

#0099cc

700

#007399

800

#004d66

900

#002633

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.

#808080

100

#666666

200

#4d4d4d

300

#333333

400

#1a1a1a

500

#000000

600

#000000

700

#000000

800

#000000

900

#000000

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.

#808080

100

#666666

200

#4d4d4d

300

#333333

400

#1a1a1a

500

#000000

600

#000000

700

#000000

800

#000000

900

#000000

950

#000000

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.

#808080

100

#666666

200

#4d4d4d

300

#333333

400

#1a1a1a

500

#000000

600

#000000

700

#000000

800

#000000

900

#000000

950

#000000

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.

#ffffff

100

#ccebff

200

#99d6ff

300

#66c2ff

400

#33adff

500

#0099ff

600