Discover pinia.vuejs.org design foundations

Learn how pinia.vuejs.org uses colors and fonts to enhance user experience and design coherence.

Last update: 07/20/2024

ICONS


Favicon 180x180
Favicon

TYPOGRAPHIES


Aa

Inter - 400 - normal

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

Aa

Inter - 500 - normal

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

Aa

Inter - 600 - normal

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

Aa

Inter - 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

#ffffff

100

100

#ffffff

200

200

#fffbf0

300

300

#fff0bd

400

400

#ffe48a

500

500

#ffd857

600

600

#ffcc24

700

700

#f0b800

800

800

#bd9100

900

900

#8a6a00

950

950

#574200

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

#758dc2

100

100

#5170b3

200

200

#405a91

300

300

#30446e

400

400

#212e4a

500

500

#111827

600

600

#020204

700

700

#000000

800

800

#000000

900

900

#000000

950

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.

50

50

#758dc2

100

100

#5170b3

200

200

#405a91

300

300

#30446e

400

400

#212e4a

500

500

#111827

600

600

#020204

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

#758dc2

100

100

#5170b3

200

200

#405a91

300

300

#30446e

400

400

#212e4a

500

500

#111827

600

600

#020204

700

700

#000000

800

800

#000000

900

900

#000000

950

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.

50

50

#758dc2

100

100

#5170b3

200

200

#405a91

300

300

#30446e

400

400

#212e4a

500

500

#111827

600

600

#020204

700

700

#000000

800

800

#000000

900

900

#000000

950

950

#000000