Yext Design System

Yext Logo

There are two variations of the Yext Logo. The Default Black Logo and the white logo on dark backgrounds.

Colors

Brand Colors

Secondary - Neutral

#E4E8EC

Azure

#E7EAEC

Azrete

#DFE9E7

Emerald

#ECEFE8

Greenery

#F4EAED

HoneySuckle

#F7F3EB

Mimosa

#F0EAEE

Orchid

#F3E8E8

Poppy

#F6EEE8

Turmeric

#E3EAEC

Turquoise

#E8E7EB

Violet

Secondary

#9EB1C6

Azure

#8BBDB2

Emerald

#C1CFAD

Greenery

#E0B1BC

HoneySuckle

#EDDBB4

Mimosa

#CFB5C8

Orchid

#E0A7A7

Poppy

#EDC4A5

Turmeric

#98BEC8

Turquoise

#B1AAC0

Violet

Secondary - Highlight

#30649B

Azure

#5D7D9E

Azrete

#078D6F

Emerald

#87AB50

Greenery

#D25573

HoneySuckle

#EEC056

Mimosa

#A96297

Orchid

#D53E3C

Poppy

#F48534

Turmeric

#2186A2

Turquoise

#614F8A

Violet

Primary

#000000

Black

#FFFFFF

White

UX

#f7f7f7

Concrete-100

White

#eeeff0

Concrete-200

Light

#C5CACE

Concrete-300

Neutral

#8996A0

Concrete-400

Highlight

#5B646B

Concrete-500

Dark

#2E3235

Concrete-600

Concrete Black

#000000

Black

#C3DBFB

Blue-100

Disabled

#87B7F7

Blue-200

Link

#0F70F0

Blue-300

Button

#0B54B4

Blue-400

Hover

#073878

Blue-500

Press

Hamburger

Hamburgers are a vendor library documentation is available here. We use the squeeze version in the navigation

Toggle .is-active to change the state of the hamburger