Brand Color System
Every color, every element, every UI state — documented for your travel agency website. Share with developers, designers, or reference whenever you need.
#282878
Primary hover: #1a1a5a
Accent bg: #dc6e96
Accent hover: #c45a80
Disabled: #d3d1c7
#edf8f2 text: #286040
Error bg: #fdeaea text: #8c1030
Warning bg: #fef8ec text: #80580a
Info bg: #e8f5f5 text: #2a6060
Toast bg: #282878 Navy
Modal overlay: rgba(40,40,120,0.5)
#78c896
Active: #645aaa
Future: #d3d1c7
The entire experience was flawless from start to finish. Our travel consultant knew exactly what we needed.
| Element | Color | Hex | Notes | |
|---|---|---|---|---|
| Typography | ||||
| H1 Hero heading | Navy | #282878 | Playfair Display, 48–52px, bold | |
| H2 Section heading | Navy | #282878 | Playfair Display, 32–36px | |
| H3 Card heading | Violet | #645aaa | Playfair Display, 20–22px | |
| Body text | Near-black | #2c2c2c | DM Sans, 15–16px, regular | |
| Muted / caption text | Gray 400 | #888780 | 13px, dates, metadata | |
| Placeholder text | Gray 200 | #d3d1c7 | Inside empty inputs | |
| Inline link default | Rose | #dc6e96 | Underlined | |
| Inline link hover | Navy | #282878 | On mouse-over | |
| Inline link visited | Violet | #645aaa | After clicking | |
| Buttons | ||||
| Primary button bg | Navy | #282878 | "Book Now", "Get Quote" | |
| Primary button hover | Dark navy | #1a1a5a | On mouse-over | |
| Accent button bg | Rose | #dc6e96 | Promo CTAs, "Special Offer" | |
| Accent button hover | Deep rose | #c45a80 | On mouse-over | |
| Disabled button | Gray 200 | #d3d1c7 | Unavailable state | |
| Navigation | ||||
| Navbar background | Navy | #282878 | Main top bar | |
| Nav link hover | Amber | #fad278 | Warm highlight | |
| Active page indicator | Rose | #dc6e96 | Underline on current page | |
| Dropdown background | Dark navy | #1e1e60 | Sub-menu panel | |
| Dropdown item hover | Violet | #645aaa | Row highlight | |
| Backgrounds | ||||
| Page background | White | #ffffff | Base page surface | |
| Alternate section bg | Cool lavender | #f5f5fb | Alternating section strips | |
| Hero background | Navy | #282878 | Main headline section | |
| Footer background | Deep navy | #1a1a5a | Site footer surface | |
| Footer text | Muted lavender | #a0a0c8 | Links and body in footer | |
| Footer link hover | Rose | #dc6e96 | Footer links on hover | |
| Forms | ||||
| Input border default | Gray 200 | #d3d1c7 | Resting state | |
| Input border focus | Violet | #645aaa | Active / selected field | |
| Input border error | Red | #dc3050 | Validation failure | |
| Input border success | Mint | #78c896 | Valid / confirmed | |
| Badges & Status | ||||
| Promo / sale badge | Rose | #dc6e96 | "20% Off", "Limited Deal" | |
| Star ratings | Amber | #fad278 | Tour and hotel ratings | |
| Available badge | Mint | #78c896 | "Spots open", "Available" | |
| Sold out badge | Gray | #d3d1c7 | Fully booked | |
| Wishlist heart (saved) | Rose | #dc6e96 | Filled when saved | |
| Alerts | ||||
| Success alert bg | Mint tint | #edf8f2 | Text: #286040 | |
| Error alert bg | Red tint | #fdeaea | Text: #8c1030 | |
| Warning alert bg | Amber tint | #fef8ec | Text: #80580a | |
| Info alert bg | Teal tint | #e8f5f5 | Text: #2a6060 | |
| Toast notification | Navy | #282878 | White text, rose left border | |
| Travel-Specific | ||||
| Price callout | Navy | #282878 | "From $499" display | |
| Discounted price | Rose | #dc6e96 | Sale / reduced price | |
| Crossed-out price | Gray | #888780 | Original price struck through | |
| Map pin / marker | Rose | #dc6e96 | Destination pins on maps | |
| Booking step — active | Violet | #645aaa | Current booking step | |
| Booking step — done | Mint | #78c896 | Completed steps | |
| Itinerary timeline | Amber | #fad278 | Day-by-day connector | |
| Testimonial block bg | Lavender tint | #f5f5fb | Customer review area | |
| Quote mark accent | Violet | #645aaa | Large decorative " marks | |
| Feature icon accent | Teal | #6eb4b4 | Plane, hotel, luggage icons | |
| Divider line | Gray 200 | #d3d1c7 | Horizontal section separators | |