Discover anybot.me design foundations

Learn how anybot.me uses colors and fonts to enhance user experience and design coherence.

Last update: 07/11/2024

ICONS


Favicon 180x180
Favicon

TYPOGRAPHIES


Aa

Poppins - 300 - normal

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

Aa

Poppins - 400 - normal

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

Aa

Poppins - 700 - normal

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

Aa

lucida sans, lucida sans regular, lucida grande, lucida sans unicode, geneva, verdana, sans-serif - 300 - normal

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

Aa

lucida sans, lucida sans regular, lucida grande, lucida sans unicode, geneva, verdana, sans-serif - 400 - normal

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

Aa

lucida sans, lucida sans regular, lucida grande, lucida sans unicode, geneva, verdana, sans-serif - 700 - 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

#d7fffc

100

100

#a4fef8

200

200

#72fef4

300

300

#3ffdf0

400

400

#0dfded

500

500

#02d4c6

600

600

#02a297

700

700

#016f68

800

800

#013d39

900

900

#000a09

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

#ffffff

100

100

#ffffff

200

200

#f5f5ff

300

300

#c3c2ff

400

400

#918fff

500

500

#5f5cff

600

600

#2c29ff

700

700

#0400f5

800

800

#0300c2

900

900

#02008f

950

950

#02005c

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

#d1e1fa

200

200

#a3c2f5

300

300

#75a4f0

400

400

#4786eb

500

500

#1968e6

600

600

#1453b8

700

700

#0f3e8a

800

800

#0a295c

900

900

#05152e

950

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.

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

#d7fffc

100

100

#a4fef8

200

200

#72fef4

300

300

#3ffdf0

400

400

#0dfded

500

500

#02d4c6

600

600

#02a297

700

700

#016f68

800

800

#013d39

900

900

#000a09

950

950

#000000