Design Package — Style Guide

Brand & Design System

Colors, typography, components, and patterns for a premium luxury safari brand

01 — Color System
Three-pillar palette: Prestige Gold, Safari Green, and Sleek Black. Every tint and shade is purposeful.
Primary: Prestige Gold
Gold Dark
#A07830
Hover, text on light
Gold Primary
#C9A84C
CTAs, accents, borders
Gold Light
#E8C96A
Hover states, highlights
Gold Pale
#F5E9C8
Backgrounds, cards
Secondary: Safari Green
Green Dark
#1A3A2A
Header, hero, primary bg
Green Mid
#2D5A3D
Buttons, nav, accents
Green Light
#4A8C5C
Icons, tags, badges
Green Pale
#EAF5EE
Success states, chips
Neutral: Charcoal & Cream
Black
#0A0A0A
Overlays, deep contrast
Charcoal
#1A1A1A
Body text, dark UI
Gray Mid
#555555
Secondary text
Gray Light
#AAAAAA
Placeholders, disabled
Cream Mid
#F0EAD6
Card borders, dividers
Cream
#FAF7F0
Page background
White
#FFFFFF
Cards, inputs, panels
Semantic: Status Colors
Success
#27AE60
Confirmations, stock
Error
#C0392B
Errors, alerts, danger
Warning
#F39C12
Low stock, caution
Info
#2980B9
Info states, links
02 — Typography
Three typeface families: Playfair Display (prestige), Cormorant Garamond (editorial), Inter (functional).
Display Playfair Display 700 / 64px / lh 1.1
Wild Luxury. Untamed Beauty.
Heading 1 Playfair Display 600 / 48px / lh 1.15
Discover the Serengeti
Heading 2 Playfair Display 600 / 36px / lh 1.2
Signature Safari Packages
Heading 3 Playfair Display 600 / 28px / lh 1.25
Kenya — The Great Migration
Subheading / Editorial Cormorant Garamond Italic 400 / 22px
Where the savanna meets the sky, adventure begins
Body LargeInter 400 / 18px / lh 1.7
Experience the raw beauty of East Africa through the eyes of an expert guide. Our curated packages offer the perfect blend of adventure and luxury.
BodyInter 400 / 15px / lh 1.65
Each safari is thoughtfully crafted to ensure you experience the very best of wildlife, culture, and landscape. From the Masai Mara to the Ngorongoro Crater.
Price DisplayPlayfair Display 700 / 36px
$4,850 per person
Quote / TestimonialCormorant Garamond Italic 400 / 26px
"The most extraordinary experience of our lives."
Overline / CaptionInter 600 / 11px / Uppercase / Letter-spacing 2px
Premium Safari Experiences · Est. 2008 · Kenya · Tanzania · Rwanda
03 — Buttons & CTAs
All states: default, hover (transform -1px), active, disabled. Icon variants available.
Primary Actions (on light backgrounds)
Size Variants
On Dark Backgrounds
Icon Buttons & State Indicators
04 — Form Elements
Clean, accessible inputs with clear focus states and validation feedback.
As it appears on your passport
Focused state — gold border
⚠ Please enter a valid entry
✓ Email verified successfully
05 — Card Components
Destination, package, and product cards. Hover elevation + consistent structure.
🦁
Kenya · Masai Mara
Destination
Masai Mara National Reserve
Home of the Great Migration — witness one million wildebeest crossing the Mara River in dramatic fashion.
From $3,200
per person · 7 nights
🦒
Tanzania · Serengeti
Luxury Package · 10 Days
Serengeti Grand Safari
Private game drives, luxury tented camp, hot air balloon at sunrise, and expert Swahili naturalist guides.
Private Guide All Inclusive
$7,400
per person · all inclusive
🎒
Safari Gear
Safari Essential
Premium Safari Field Jacket
Lightweight, UPF 50+, moisture-wicking. Multiple pockets. Available in khaki, olive, and sand.
★★★★★ (47 reviews)
$189
Free shipping · In stock
06 — Badges & Tags
Used for status indicators, filters, product labels, and role identifiers.
Product & Package Badges
✦ Luxury Private Guide Available Last 2 Spots Bestseller New Season Sold Out
Admin Role Badges
👑 Super Admin ⚙️ Sub-Admin 👤 User 🌍 Visitor
Booking Status
✓ Confirmed ⏳ Pending ✈ In Progress ✗ Cancelled ◷ Completed
Inventory Status
In Stock (48) Low Stock (5) Out of Stock Pre-Order
07 — Alerts & Notifications
Inline feedback messages for system states, validation, and user actions.
✅
Booking Confirmed! Your Kenya safari package has been reserved for 15 Aug 2026. Confirmation sent to your email.
❌
Payment Failed: Your card was declined. Please check your details or try a different payment method.
⚠️
Low Stock Alert: Only 3 units of "Safari Field Jacket (Size M)" remaining. Restock recommended.
ℹ️
Seasonal Note: The Great Migration peaks in July–October. Book early to secure prime viewing spots.
08 — Navigation Components
Main nav, admin sidebar, and breadcrumb patterns.
Primary Navigation (Customer-Facing)
Home Destinations Packages Shop Booking About Contact
USD $
👤 Sign In
Breadcrumb
Home › Destinations › Kenya › Masai Mara — 7-Day Luxury Safari
09 — Data Tables
Admin tables for bookings, orders, products, and users. Sortable columns, row actions.
Booking ID Guest Name Package Departure Guests Total (USD) Status Actions
#SS-2026-0417 James & Sarah Wilson Kenya — Masai Mara 7D 15 Aug 2026 2 $9,700 ✓ Confirmed
#SS-2026-0418 Marie Dubois Tanzania — Serengeti 10D 22 Aug 2026 1 $7,400 ⏳ Pending
#SS-2026-0419 Chen Family Rwanda — Gorilla Trek 5D 01 Sep 2026 4 $24,800 ✈ In Progress
10 — Icons & Visual Language
Safari-inspired icon set for navigation, categories, and features.
Destinations & Nature
🦁
Big Cats
🦒
Plains
🐘
Savanna
🦏
Rhino
🦍
Gorillas
🐆
Leopard
🌅
Sunrise
🏔
Mountains
Services & Features
✈️
Flights
🏕
Tented Camp
🚁
Helicopter
🎈
Balloon
📸
Photo Pack
🍽
Fine Dining
💆
Spa
🔭
Stargazing
Shop & E-commerce
🎒
Backpack
👕
Clothing
🧢
Headwear
🥾
Footwear
🔭
Binoculars
🛒
Cart
💳
Payment
📦
Delivery
11 — Spacing & Grid
8px base unit. Consistent rhythm across all components.
4
8
12
16
24
32
48
64
Grid System: 12-column grid · 24px gutters · 48px horizontal page padding (desktop) · 20px (mobile)
Max Width: 1300px content · 1440px full bleed sections
Breakpoints: Mobile ≤ 767px · Tablet 768–1023px · Desktop ≥ 1024px
12 — Elevation & Shadow
Layered depth system. Shadows use brand colors for warm, premium feel.
Level 1 — Subtle
0 1px 4px rgba(0,0,0,0.06)
Cards, form inputs
Level 2 — Medium
0 4px 20px rgba(0,0,0,0.08)
Hover cards, dropdowns
Level 3 — High
0 12px 48px rgba(0,0,0,0.14)
Modals, side panels