Branded Colors

See branded typography

Use branded colors to create design hierarchy and to guide users into each brand story, whether it's the shared Birdy Grey brand, core (bridesmaid) or suits (groomsmen).

Brand 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

Brand Alert 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 (Bridesmaid) Color Palette

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

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 (Groomsmen) Palette 2025

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

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

Birdy Grey Color Palette (Sunset)

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

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

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