Pacific Muse Brand Colors
A comprehensive guide to our color system and its usage across the platform.
Base Colors
Pacific Blue
Primary brand color, used for navigation and key UI elements
CSS: var(--color-pacific-blue)
Tailwind: bg-pacific-blue
Coastal Teal
Secondary accent color, represents water and coastal elements
CSS: var(--color-coastal-teal)
Tailwind: bg-coastal-teal
Emerald Green
Success states and environmental elements
CSS: var(--color-emerald-green)
Tailwind: bg-emerald-green
Fire Orange
Call-to-action buttons and warning states
CSS: var(--color-fire-orange)
Tailwind: bg-fire-orange
Poppy Red
Error states and important alerts
CSS: var(--color-poppy-red)
Tailwind: bg-poppy-red
Seasalt White
Background color for light surfaces
CSS: var(--color-seasalt-white)
Tailwind: bg-seasalt-white
Olive Black
Dark text and UI elements
CSS: var(--color-olive-black)
Tailwind: bg-olive-black
Isabelline White
Primary background color
CSS: var(--color-isabelline-white)
Tailwind: bg-isabelline-white
Isabelline Black
Primary text color
CSS: var(--color-isabelline-black)
Tailwind: bg-isabelline-black
Theme Colors
Brand Canvas
Main background color for the application
CSS: var(--color-isabelline-white)
Tailwind: bg-brand-canvas
Brand Text
Primary text color throughout the application.
CSS: var(--color-isabelline-black)
Tailwind: bg-brand-text
Brand Heading
Color used for headings and titles
CSS: var(--color-olive-black)
Tailwind: bg-brand-heading
Brand Navbar
Navigation bar background color (Pacific Blue). Use text-seasalt-white for navbar text.
CSS: var(--color-pacific-blue)
Tailwind: bg-brand-navbar
Brand Footer
Footer background color
CSS: var(--color-seasalt-white)
Tailwind: bg-brand-footer
Brand Accent
Accent color for highlighting important elements
CSS: var(--color-poppy-red)
Tailwind: bg-brand-accent
Brand Highlight
Used for highlighting and call-to-action elements
CSS: var(--color-fire-orange)
Tailwind: bg-brand-highlight
Brand Secondary
Secondary color for UI elements
CSS: var(--color-emerald-green)
Tailwind: bg-brand-secondary
Brand Tertiary
Tertiary color for additional UI elements
CSS: var(--color-coastal-teal)
Tailwind: bg-brand-tertiary
Supporting Tailwind Colors
These utility colors are used throughout the application for various UI elements and states.
Stone 600
Used for body text content
CSS: #57534E
Tailwind: bg-stone-600
Stone 700
Used for stronger text emphasis
CSS: #44403C
Tailwind: bg-stone-700
Stone 800
Used for high contrast text
CSS: #292524
Tailwind: bg-stone-800
Slate 200
Used for hover states in light contexts
CSS: #E2E8F0
Tailwind: bg-slate-200
Slate 300
Used for borders and dividers
CSS: #CBD5E1
Tailwind: bg-slate-300
Gray 300
Used for disabled states
CSS: #D1D5DB
Tailwind: bg-gray-300
Gray 500
Used for placeholder text
CSS: #6B7280
Tailwind: bg-gray-500
Color Usage Guidelines
Primary Colors
Pacific Blue serves as our primary brand color, prominently featured in our navigation and key UI elements. It represents trust, professionalism, and the vast Pacific Ocean that inspires our journey.
Accent Colors
Fire Orange and Poppy Red are our accent colors, used strategically for call-to-action buttons, important notifications, and elements that require immediate attention.
Background and Text
Isabelline White and Black provide our base background and text colors, ensuring optimal readability while maintaining a warm, inviting atmosphere throughout the platform.
Supporting Colors
Emerald Green and Coastal Teal serve as supporting colors, used for success states, environmental elements, and secondary UI components that complement our primary color scheme.