Birdy Grey Color Palette (Sunset)

Primary (Deprecating)

How to use: [TWCSS-prefix]-[color]
Example: text-birdyPink, bg-seaGlass-25

Birdy Pink

#E5B3AC

birdyPink

Lite Pink

#F2DCD9

litePink

Blush Pink

#F5E5E2

blushPink

Pale Blush

#FAF3F0

paleBlush

Dark Peach

#ECC8B6

darkPeach

Peach

#F4E6DC

peach

Lite Peach

#F7ECE4

litePeach

Cream

#FCF6EF

cream

Secondary (Deprecating)

How to use: [TWCSS-prefix]-[color]
Example: text-birdyPink, bg-seaGlass-25

Terracotta

#E3958A

terracotta

Mauve

#C3ADB2

mauve

Lite Mauve

#F2ECEC

liteMauve

MTO/Pre-order/Tracking (Deprecating)

How to use: [TWCSS-prefix]-[color]
Example: text-birdyPink, bg-seaGlass-25

Sea Glass (40%)

#CADADC

seaGlass/40

Sea Glass (20%)

#E4EDEE

seaGlass/20

Sea Glass (10%)

#F2F6F6

seaGlass/10

ADA Compliant (Deprecating)

How to use: [TWCSS-prefix]-[color]
Example: text-birdyPink, bg-seaGlass-25

Nav Badge

#F7D7D2

navBadge

Error BG

#ffe6e8

error_bg

Error Border

#ed0000

error_border

Error

#A64E47

error

Warning

#B36119

warning

Info

#4A6A82

info

Success

#4A6A82

success

Spice

#A64E47

spice

Dark Terracotta

#C66E67

darkTerracotta

Dark Sea Glass

#48777C

darkSeaGlass

Dark Mauve

#98808A

darkMauve

Groomsmen (Deprecating)

How to use: [TWCSS-prefix]-[color]
Example: text-birdyPink, bg-seaGlass-25

Slate Blue

#4A6A82

slateBlue

Dusty Blue

#B7BECB

dustyBlue

Light Blue

#E3EBF2

lightBlue

Sea Glass

#CADADC

seaGlass

Lite Sea Glass

#9BC3C4

liteSeaGlass

Sage

#D5E0D5

sage

NDC Party Product (Deprecating)

How to use: [TWCSS-prefix]-[color]
Example: text-birdyPink, bg-seaGlass-25

NDC Pink

#F7B4C8

ndcPink

NDC Lite Pink

#F9E3E0

ndcLitePink

NDC Peach

#F2CAA6

ndcPeach

NDC Lavender

#D7AAD5

ndcLavender

NDC Lilac

#DFCEE0

ndcLilac

NDC Sea Glass

#91C2C6

ndcSeaGlass

NDC Dusty Blue

#CEDAE0

ndcDustyBlue

Functional (Deprecating)

How to use: [TWCSS-prefix]-[color]
Example: text-birdyPink, bg-seaGlass-25

Dark Grey

#464646

darkGrey

Dark Grey-90

#595959

darkGrey-90

Dark Grey-80

#6B6B6B

darkGrey-80

Dark Grey-70

#7E7E7E

darkGrey-70

Dark Grey-60

#909090

darkGrey-60

Dark Grey-50

#A2A2A2

darkGrey-50

Dark Grey-40

#909090

darkGrey-40

Dark Grey-30

#C7C7C7

darkGrey-30

Dark Grey-20

#DADADA

darkGrey-20

Lite Grey

#ECECEC

liteGrey

White

#FFFFFF

white

Birdy Grey Shared Palette (Rebrand)

Shared Palette

How to use: [TWCSS-prefix]-brand-[color]
Example: text-brand-liteCream, bg-brand-liteGreen-25

Darker Mocha

#332A2A

brand-darkerMocha

Deep Mocha

#4F3E3A

brand-deepMocha

Deep Mocha-75

#7B6E6B

brand-deepMocha-75

Deep Mocha-50

#A79E9C

brand-deepMocha-50

Deep Mocha-25

#D3CFCE

brand-deepMocha-25

Deep Beige

#D1C6BD

brand-deepBeige

Deep Beige-75

#DDD4CE

brand-deepBeige-75

Deep Beige-50

#E8E2DE

brand-deepBeige-50

Deep Beige-25

#F3F1EE

brand-deepBeige-25

Lite Beige

#F6F1F0

brand-liteBeige

Lite Beige-75

#F8F5F4

brand-liteBeige-75

Lite Beige-50

#FAF8F7

brand-liteBeige-50

Lite Beige-25

#FDFBFB

brand-liteBeige-25

Alert Background Colors

How to use: [TWCSS-prefix]-brand-[color]
Example: text-brand-liteCream, bg-brand-liteGreen-25

Error

#F4E7F0

brand-error

Warning

#F3F1EE

brand-warning

Information

#C4D5E8

brand-info

Success

#EDEDE4

brand-success

Error Text

#A64E47

brand-errorText

Overlay (50% opacity)

#A79E9C

brand-overlay opacity-50

Core Color Palette (Rebrand)

Core (Bridesmaid) — Primary

How to use: [TWCSS-prefix]-core-[color]
Example: text-core-liteCream, bg-core-liteGreen-25

Dark Cream

#F2EBE8

core-darkCream

Lite Cream

#FAF5F1

core-liteCream

Dusty Purple

#D1C6CC

core-dustyPurple

Dusty Purple-75

#DDD4D9

core-dustyPurple-75

Dusty Purple-50

#E8E2E5

core-dustyPurple-50

Dusty Purple-25

#F3F1F2

core-dustyPurple-25

Lite Pink

#EED9D7

core-litePink

Core (Bridesmaid) — Secondary

How to use: [TWCSS-prefix]-core-[color]
Example: text-core-liteCream, bg-core-liteGreen-25

Medium Pink

#E0C0C1

core-mediumPink

Funky Pink

#D3A0C2

core-funkyPink

Funky Pink-75

#DEB8D1

core-funkyPink-75

Funky Pink-50

#E9CFE0

core-funkyPink-50

Funky Pink-25

#F4E7F0

core-funkyPink-25

Periwinkle

#A8B1D2

core-periwinkle

Periwinkle-75

#BEC5DD

core-periwinkle-75

Periwinkle-50

#D3D8E8

core-periwinkle-50

Periwinkle-25

#E9EBF4

core-periwinkle-25

Dusty Blue

#CBD1D3

core-dustyBlue

Dusty Blue-75

#D8DDDE

core-dustyBlue-75

Dusty Blue-50

#E5E8E9

core-dustyBlue-50

Dusty Blue-25

#F2F3F4

core-dustyBlue-25

Mauve

#BEA0A6

core-mauve

Mauve-75

#CEB8BC

core-mauve-75

Mauve-50

#DECFD2

core-mauve-50

Mauve-25

#EFE7E9

core-mauve-25

Darker Mauve

#6A484D

core-darkerMauve

Gold

#A38D64

core-gold

Suits Color Palette (Rebrand)

Suits (Groomsmen) — Primary

How to use: [TWCSS-prefix]-suits-[color]
Example: text-suits-liteCream, bg-suits-liteGreen-25

Olive

#626861

suits-olive

Olive-75

#898E89

suits-olive-75

Olive-50

#B0B3B0

suits-olive-50

Olive-25

#D8D9D7

suits-olive-25

Deep Green

#303637

suits-deepGreen

Deep Green-75

#646869

suits-deepGreen-75

Deep Green-50

#979A9B

suits-deepGreen-50

Deep Green-25

#CBCDCD

suits-deepGreen-25

Lite Green

#D7D9D1

suits-liteGreen

Lite Green-75

#E1E3DD

suits-liteGreen-75

Lite Green-50

#EBECE8

suits-liteGreen-50

Lite Green-25

#F5F5F3

suits-liteGreen-25

Suits (Groomsmen) — Secondary

How to use: [TWCSS-prefix]-suits-[color]
Example: text-suits-liteCream, bg-suits-liteGreen-25

Slate Blue

#778699

suits-slateBlue

Slate Blue-75

#99A4B3

suits-slateBlue-75

Slate Blue-50

#BBC2CC

suits-slateBlue-50

Slate Blue-25

#DDE1E5

suits-slateBlue-25

Sky Blue

#C4D5E8

suits-skyBlue

Sky Blue-75

#D3E0EE

suits-skyBlue-75

Sky Blue-50

#E1EAF3

suits-skyBlue-50

Sky Blue-25

#F0F4F9

suits-skyBlue-25

Dusty Sky Blue

#DFE7EB

suits-dustySkyBlue

Navy

#2F475D

suits-navy