Nocturne Bloom & Eclipse Haze: Dark and Light Theme Palettes for Brand UI/UX Design
Nocturne Bloom and Eclipse Haze, rooted in the brand’s deep blue (#003897) and vibrant pink (#E55078), offer versatile 10-color palettes for both dark and light theme UIs. Each palette balances elegance and clarity, adapting to different design needs. Let me guide you through their harmonious designs.
Dark Theme
Nocturne Bloom
Brand Color
#003897
Primary logo
Hero background
Footer branding
Accent Color
#E55078
“Add to Cart” button
Notification badges
Social media icons
Base Dark
#0F1A3C
Homepage bg.
Checkout page bg.
Modal bg.
Base Mid
#1A2A5B
Product card bg.
Top navigation bar
Sidebar for filters
Base Light
#3E4F8A
Search modal overlay.
Dropdown menu bg.
Light theme section highlight.
Text Primary
#FFFFFF
Product titles.
Paragraph text.
Menu links.
Text Secondary
#E8ECF5
Search input placeholders.
Disabled bttn. text.
“Out of Stock” labels.
Interactive Base
#4C5DA0
“View Details” buttons.
Filter tab bg.
Pagination buttons.
Interactive Hover
#F295AD
“Add to Cart” hover
Selected filter tab state.
Pagination link hover.
Utility
#6B7280
Product card borders.
Footer section dividers.
Disabled button bg.
Light Theme
Nocturne Bloom
Brand Color
#003897
Primary logo
Hero background
Footer branding
Accent Color
#E55078
“Add to Cart” button
Notification badges
Social media icons
Base Dark
#A3BFFA
Card shadows.
Hover section background.
Modal overlay.
Base Mid
#E0E7FF
Secondary section background.
Dropdown menu background.
Card backgrounds.
Base Light
#F8FAFF
Homepage background.
Main content background.
Footer background.
Text Primary
#1F2A44
Product titles.
Paragraph text.
Menu links.
Text Secondary
#64748B
Search input placeholders.
Disabled bttn. text.
“Out of Stock” labels.
Interactive Base
#7F9CF5
“View Details” buttons.
Filter tab backgrounds.
Pagination buttons.
Interactive Hover
#F9A8D4
“Add to Cart” hover state.
Selected filter tab state.
Pagination link hover.
Utility
#D1D5DB
Card borders.
Section dividers.
Disabled button background.
Dark Theme
Eclipse Haze
Brand Color
#003897
Primary logo
Hero background
Footer branding
Accent Color
#E55078
“Add to Cart” button
Notification badges
Social media icons
Base Dark
#0E141A
Homepage bg.
Checkout page bg.
Modal bg.
Base Mid
#1F252E
Product card bg.
Top navigation bar
Sidebar for filters
Base Light
#333C47
Search modal overlay.
Dropdown menu bg.
Light theme section highlight.
Text Primary
#F0F2F5
Product titles.
Paragraph text.
Menu links.
Text Secondary
#C0C5CC
Search input placeholders.
Disabled bttn. text.
“Out of Stock” labels.
Interactive Base
#4A5566
“View Details” buttons.
Filter tab bg.
Pagination buttons.
Interactive Hover
#9A6070
“Add to Cart” hover
Selected filter tab state.
Pagination link hover.
Utility
#3D454F
Product card borders.
Footer section dividers.
Disabled button bg.
Light Theme
Eclipse Haze
Brand Color
#003897
Primary logo
Hero background
Footer branding
Accent Color
#E55078
“Add to Cart” button
Notification badges
Social media icons
Base Dark
#B0B8C1
Card shadows.
Hover section background.
Modal overlay.
Base Mid
#E5E9EE
Secondary section background.
Dropdown menu background.
Card backgrounds.
Base Light
#F9FAFB
Homepage background.
Main content background.
Footer background.
Text Primary
#1F2937
Product titles.
Paragraph text.
Menu links.
Text Secondary
#6B7280
Search input placeholders.
Disabled bttn. text.
“Out of Stock” labels.
Interactive Base
#94A3B8
“View Details” buttons.
Filter tab backgrounds.
Pagination buttons.
Interactive Hover
#F4B8C8
“Add to Cart” hover state.
Selected filter tab state.
Pagination link hover.
Utility
#D2D6DC
Card borders.
Section dividers.
Disabled button background.
