Discover internationalliving.com design foundations

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

Last update: 07/08/2024

ICONS


Favicon 180x180
Favicon

TYPOGRAPHIES


Aa

Pt Sans Pro - 300 - normal

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

Aa

Pt Sans Pro - 400 - normal

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

Aa

Pt Sans Pro - 400 - italic

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

Aa

Pt Sans Pro - 600 - normal

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

Aa

Pt Sans Pro - 700 - normal

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

Aa

Pt Sans Pro - 800 - normal

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

Aa

Pt Serif Pro - 400 - normal

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

Aa

Pt Serif Pro - 600 - normal

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

Aa

Pt Serif Pro - 800 - 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

#ffffff

100

100

#fffefa

200

200

#fef8c8

300

300

#fdf196

400

400

#fcea64

500

500

#fbe332

600

600

#f5d905

700

700

#c3ad04

800

800

#918003

900

900

#5f5402

950

950

#2d2801

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

#eff0f0

200

200

#d5d6d7

300

300

#bbbdbe

400

400

#a1a4a5

500

500

#878a8c

600

600

#6e7172

700

700

#555758

800

800

#3c3d3e

900

900

#232424

950

950

#0a0a0a

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

#4db2ff

100

100

#1a9cff

200

200

#0082e6

300

300

#0065b3

400

400

#004880

500

500

#002b4d

600

600

#000e1a

700

700

#000000

800

800

#000000

900

900

#000000

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

#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