Discover t-mobile.pl design foundations

Learn how t-mobile.pl uses colors and fonts to enhance user experience and design coherence.

ICONS


Favicon 180x180
Favicon

TYPOGRAPHIES


Aa

Teleneoweb - 400 - normal

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

Aa

Teleneoweb - 500 - normal

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

Aa

Teleneoweb - 700 - normal

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

Aa

Teleneoweb - 800 - normal

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

Aa

open sans, 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.

50

50

#ffe0f0

100

100

#ffadd8

200

200

#ff7abf

300

300

#ff47a6

400

400

#ff148e

500

500

#e00074

600

600

#ad005a

700

700

#7a003f

800

800

#470025

900

900

#14000b

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

#ffffff

300

300

#ffffff

400

400

#ffffff

500

500

#ffffff

600

600

#ccccff

700

700

#9999ff

800

800

#6666ff

900

900

#3333ff

950

950

#0000ff

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

#6beeff

100

100

#38e8ff

200

200

#05e2ff

300

300

#00b9d1

400

400

#008c9e

500

500

#005f6b

600

600

#003238

700

700

#000505

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

#ccccff

700

700

#9999ff

800

800

#6666ff

900

900

#3333ff

950

950

#0000ff

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

#a6a6a6

100

100

#8c8c8c

200

200

#737373

300

300

#595959

400

400

#404040

500

500

#262626

600

600

#0d0d0d

700

700

#000000

800

800

#000000

900

900

#000000

950

950

#000000