Discover vid2txt.com design foundations

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

Last update: 07/04/2024

ICONS

Favicon

TYPOGRAPHIES

meta serif ot book, serif - 400 - normal

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

meta serif ot book, serif - 700 - normal

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

meta serif ot black, serif - 400 - normal

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

chunkfive roman, serif - 400 - normal

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

meta serif ot bold, serif - 400 - normal

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

meta serif ot book italic, serif - 400 - normal

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

meta serif ot book italic, serif - 700 - normal

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

meta serif ot book, meta serif ot book placeholder, serif - 400 - normal

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

meta serif ot book, meta serif ot book placeholder, serif - 700 - normal

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

inter-bold, inter, sans-serif - 700 - normal

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

inter-mediumitalic, inter, sans-serif - 500 - italic

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

meta serif ot, serif - 500 - italic

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

meta serif ot, serif - 700 - italic

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

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

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

inter-medium, inter, sans-serif - 500 - 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.

#9491a6

100

#797490

200

#615d74

300

#494658

400

#32303b

500

#1a191f

600

#020203

700

#000000

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.

#9491a6

100

#797490

200

#615d74

300

#494658

400

#32303b

500

#1a191f

600

#020203

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.

#ffffff

100

#e7e7f9

200

#c0beef

300

#9995e4

400

#726cda

500

#4a43d0

600

#342db4

700

#28238b

800

#1c1862

900

#100e39

950

#050410

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.

#9491a6

100

#797490

200

#615d74

300

#494658

400

#32303b

500

#1a191f

600

#020203

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

#e7e7f9

200

#c0beef

300

#9995e4

400

#726cda

500

#4a43d0

600