Discover piquelife.com design foundations

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

ICONS


Favicon 180x180
Favicon

TYPOGRAPHIES


Aa

Proxima Nova - 400 - normal

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

Aa

Proxima Nova - 600 - normal

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

Aa

Proxima Nova - 700 - normal

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

Aa

noto serif - 400 - italic

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

Aa

noto 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

#3b90f7

100

100

#0a74f5

200

200

#085dc4

300

300

#064593

400

400

#042e62

500

500

#021731

600

600

#000000

700

700

#000000

800

800

#000000

900

900

#000000

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

#e6b294

100

100

#dc946a

200

200

#d27641

300

300

#b65e2b

400

400

#8c4821

500

500

#633317

600

600

#3a1e0e

700

700

#110904

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

#ffffff

100

100

#ffffff

200

200

#f7f7f7

300

300

#dedede

400

400

#c4c4c4

500

500

#ababab

600

600

#919191

700

700

#787878

800

800

#5e5e5e

900

900

#454545

950

950

#2b2b2b

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

#e7f3f3

600

600

#c4e3e3

700

700

#a2d2d2

800

800

#80c2c2

900

900

#5db1b1

950

950

#479494

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

#3b90f7

100

100

#0a74f5

200

200

#085dc4

300

300

#064593

400

400

#042e62

500

500

#021731

600

600

#000000

700

700

#000000

800

800

#000000

900

900

#000000

950

950

#000000