Color System

The Flourish Collective Brand Colors

Primary Color Palette

Our brand uses four primary colors that work harmoniously across light and dark themes. Each color serves a specific purpose in creating a cohesive visual identity.

Floral White

Light mode background, Dark mode text

Color Values

HEX: #F9FBEC

RGB: 249, 251, 236

Usage

• Light mode background

• Dark mode text/foreground

• Button text on dark backgrounds

Tailwind Classes: bg-background, text-foreground (in dark mode)

Dark Purple

Light mode text, Dark mode background

Color Values

HEX: #422230

RGB: 66, 34, 48

Usage

• Light mode text/foreground

• Dark mode background

• Primary content color

Tailwind Classes: bg-background, text-foreground (in light mode)

Delft Blue

Primary accent color

Color Values

HEX: #3E3763

RGB: 62, 55, 99

Usage

• Primary CTA buttons

• Accent elements

• Interactive components

Tailwind Classes: bg-delft-blue, text-delft-blue, border-delft-blue

Periwinkle Blue

Secondary accent color

Color Values

HEX: #BFB9DF

RGB: 191, 185, 223

Usage

• Borders and dividers

• Secondary buttons (dark mode)

• Subtle highlights

Tailwind Classes: bg-periwinkle-blue, text-periwinkle-blue, border-periwinkle-blue

Light & Dark Mode System

Light Mode

Background: Floral White (#F9FBEC)

Clean, light foundation

Text: Dark Purple (#422230)

High contrast for readability

Dark Mode

Background: Dark Purple (#422230)

Rich, deep foundation

Text: Floral White (#F9FBEC)

Soft, readable contrast

Practical Usage Examples

Buttons

Cards & Containers

Bordered Card

Using Periwinkle Blue borders

Highlighted Card

Using Periwinkle Blue with opacity

Text Hierarchy

Primary Heading (100% opacity)

Secondary Text (80% opacity)

Body Text (70% opacity)

Muted Text (50% opacity)

Tailwind CSS Classes

Theme-Aware Colors

bg-background - Background color (changes with theme)

text-foreground - Text color (changes with theme)

Accent Colors

bg-delft-blue, text-delft-blue, border-delft-blue

bg-periwinkle-blue, text-periwinkle-blue, border-periwinkle-blue

Opacity Variants

bg-delft-blue/50 - 50% opacity background

text-foreground/70 - 70% opacity text