Discover thetimes.com design foundations

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

Last update: 07/05/2024

ICONS

Favicon

TYPOGRAPHIES

timesmodern-bold, timesmodern-bold-fallback, serif - 400 - normal

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

timesmodern-bold, timesmodern-bold-fallback, serif - 700 - normal

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

timesmodern-bold, timesmodern-bold-fallback, serif - 800 - normal

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

roboto-regular, roboto-regular-fallback, sans-serif - 400 - normal

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

roboto-regular, roboto-regular-fallback, sans-serif - 500 - normal

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

timesdigitalw04-regular, timesdigitalw04-regular-fallback, serif - 400 - normal

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

timesdigitalw04-regular, timesdigitalw04-regular-fallback, serif - 700 - normal

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

roboto-medium, roboto-medium-fallback, sans-serif - 400 - normal

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

roboto-medium, roboto-medium-fallback, sans-serif - 500 - normal

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

timesdigitalw04-regularsc, timesdigitalw04-regularsc-fallback, serif - 400 - normal

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

roboto-regular, sans-serif - 400 - italic

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

roboto-regular, sans-serif - 600 - normal

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

roboto-regular, sans-serif - 700 - normal

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

roboto, roboto-fallback, sans-serif - 500 - normal

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

timesmodern-regular, timesmodern-regular-fallback, serif - 400 - normal

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

timesmodern-regular - 400 - normal

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

timesmodern-bold - 400 - normal

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

roboto-regular - 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.

#8ad8ff

100

#57c7ff

200

#24b6ff

300

#00a0f0

400

#007ebd

500

#005c8a

600

#003a57

700

#001824

800

#000000

900

#000000

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.

#230fff

100

#1200db

200

#0e00a8

300

#0a0075

400

#060042

500

#01000f

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.

#f4f9fb

100

#cee5ed

200

#a9d1e0

300

#83bdd2

400

#5ea9c5

500

#4092b0

600

#32738b

700

#245465

800

#173540

900

#09161a

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.

#ffffff

100

#ffffff

200

#ffffff

300

#ffffff

400

#ffffff

500

#f5efeb

600

#e4d4c9

700

#d3b8a7

800

#c19d85

900

#b08263

950

#95694b

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

#fdefdd

200

#fbd9ad

300

#f8c27c

400

#f6ac4c

500

#f3961b

600