🎨 CAB CONNECT - BRAND KIT

Visual Identity & Brand Guidelines

Version: 1.1
Date: January 2, 2026
Status: Approved for Development

---

📋 BRAND OVERVIEW

Company Name: Cab Connect
Legal Entity: Cab Connect
Domain: fijicabconnect.com
Tagline Options:

1. "Ride Anywhere in Fiji" ⭐ (Recommended)
2. "Your Island, Your Ride"
3. "Fast, Safe Rides Across Fiji"

Industry: Transportation Technology / Ride-Hailing
Target Market: Fiji Islands (Tourists + Local Residents)
Brand Personality: Reliable, Friendly, Local, Modern, Trustworthy

---

🧭 BRAND GUIDELINES

Brand Name

Cab Connect

Logo

Text-based logo only: Cab Connect

Usage Rules

✔ Cab Connect
✖ Fiji Cab Connect
✖ FIJICAB
✖ CabConnect

“Fiji” is used only as regional context, never as brand.

---

🎨 COLOR PALETTE

Primary Colors:

Emerald Green (#10b981)

• Usage: Primary brand color, CTAs, active states
• Meaning: Movement, "Go", Trust, Island vibes, Growth
• Implementation:
  • Primary buttons
  • Active navigation items
  • Success messages
  • Logo accent
  • Map markers

/* CSS Variable */
--primary: #10b981;
--primary-hover: #059669;
--primary-light: #d1fae5;
--primary-dark: #047857;

Ocean Blue (#0891b2)

• Usage: Secondary brand color, info elements
• Meaning: Ocean, Fiji waters, Reliability, Calm
• Implementation:
  • Secondary buttons
  • Links
  • Info messages
  • Icons
  • Accents

/* CSS Variable */
--secondary: #0891b2;
--secondary-hover: #0e7490;
--secondary-light: #cffafe;
--secondary-dark: #155e75;

Amber Gold (#f59e0b)

• Usage: Accent color, CTAs, highlights
• Meaning: Sun, Energy, Action, Urgency
• Implementation:
  • "Book Now" buttons
  • Pricing highlights
  • Warning messages
  • Special offers

/* CSS Variable */
--accent: #f59e0b;
--accent-hover: #d97706;
--accent-light: #fef3c7;
--accent-dark: #b45309;

Neutral Colors:

/* Text Colors */
--text-primary: #1f2937;      /* Headings, primary text */
--text-secondary: #6b7280;    /* Body text, descriptions */
--text-tertiary: #9ca3af;     /* Muted text, placeholders */

/* Background Colors */
--bg-white: #ffffff;          /* Cards, modals */
--bg-light: #f9fafb;          /* Page background */
--bg-dark: #111827;           /* Dark mode, footer */

/* Border Colors */
--border-light: #e5e7eb;      /* Light borders */
--border-medium: #d1d5db;     /* Input borders */
--border-dark: #9ca3af;       /* Strong dividers */

Semantic Colors:

/* Status Colors */
--success: #10b981;           /* Success messages */
--error: #ef4444;             /* Error messages */
--warning: #f59e0b;           /* Warning messages */
--info: #3b82f6;              /* Info messages */

/* Ride Status Colors */
--status-pending: #6b7280;    /* Ride pending */
--status-accepted: #3b82f6;   /* Driver accepted */
--status-arrived: #f59e0b;    /* Driver arrived */
--status-active: #10b981;     /* Ride in progress */
--status-completed: #059669;  /* Ride completed */
--status-cancelled: #ef4444;  /* Ride cancelled */

---

📝 TYPOGRAPHY

Primary Font: Plus Jakarta Sans

Source: Google Fonts (Free)
License: Open Font License
Link: https://fonts.google.com/specimen/Plus+Jakarta+Sans

Why This Font:

• Modern and clean appearance
• Excellent readability on mobile devices
• Wide range of weights (200-800)
• Professional yet friendly
• Popular in modern app designs

Font Weights to Use:

• 400 (Regular) - Body text
• 500 (Medium) - Buttons, labels
• 600 (Semibold) - Subheadings, emphasis
• 700 (Bold) - Headings, hero text
• 800 (Extrabold) - Logo, major headings (sparingly)

Typography Scale:

/* Headings */
--font-h1-mobile: 36px;       /* Hero titles */
--font-h1-desktop: 56px;

--font-h2-mobile: 28px;       /* Section titles */
--font-h2-desktop: 40px;

--font-h3-mobile: 24px;       /* Card titles */
--font-h3-desktop: 32px;

--font-h4-mobile: 20px;       /* Subsections */
--font-h4-desktop: 24px;

/* Body Text */
--font-body-large: 18px;      /* Lead paragraphs */
--font-body-regular: 16px;    /* Standard text */
--font-body-small: 14px;      /* Captions, fine print */
--font-body-tiny: 12px;       /* Labels, metadata */

/* Line Heights */
--line-height-tight: 1.2;     /* Headings */
--line-height-normal: 1.5;    /* Body text */
--line-height-relaxed: 1.7;   /* Long-form content */

Font Implementation:

<!-- Google Fonts Import -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

/* CSS */
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 
               'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1f2937;
}

---

🎯 LOGO SPECIFICATIONS

Logo Variations Needed:

Primary Logo (Full Color)

• Text-based logo only: "Cab Connect"
• Use on white/light backgrounds
• File formats: SVG, PNG (transparent), JPG
• Project Path: assets/images/logo-horizontal.svg

Logo White Version

• Text-based logo only: "Cab Connect" in white
• Use on dark backgrounds (green, blue, black)
• File formats: SVG, PNG (transparent)
• Project Path: assets/images/logo-horizontal-white.svg

Logo Icon / Favicon

• Green rounded square with "FC" monogram (Fiji Cab / Connect)
• Use for: App icon, Browser tab (favicon), Social profile picture
• File formats: SVG, PNG, ICO
• Project Path: assets/images/favicon.svg

Logo Horizontal Layout

• Text-only wordmark: "Cab Connect"
• Use in headers, navigation

Logo Stacked Layout

• Text-only wordmark: "Cab Connect"
• Use on mobile, square spaces

Logo Usage Rules:

✅ DO:

• Maintain clear space (minimum 20px around logo)
• Use approved color versions only
• Scale proportionally
• Place on contrasting backgrounds

❌ DON'T:

• Stretch or distort logo
• Change colors arbitrarily
• Add effects (shadows, gradients not in original)
• Place on busy backgrounds without backdrop

Logo Clear Space:

Minimum clear space = Height of the letter "C" in logo

---

🎨 DESIGN ELEMENTS

Border Radius:

--radius-sm: 4px;       /* Small elements, inputs */
--radius-md: 8px;       /* Cards, buttons */
--radius-lg: 12px;      /* Large cards, modals */
--radius-xl: 16px;      /* Hero sections */
--radius-full: 9999px;  /* Pills, badges, avatars */

Shadows:

/* Elevation System */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

Spacing Scale:

--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;

---

🖼️ IMAGERY GUIDELINES

Photography Style:

✅ Use:

• Real Fiji locations (beaches, cities, landmarks)
• Happy passengers and drivers
• Clean, modern vehicles
• Bright, natural lighting
• Authentic moments
• Diverse representation

❌ Avoid:

• Stock photos that look fake
• Dark or gloomy images
• Generic city backgrounds
• Cluttered or messy scenes

Image Treatment:

• Maintain vibrant colors (Fiji is colorful!)
• Use subtle overlays for text readability
• Minimum resolution: 1920x1080 for hero images
• Compress for web (WebP format preferred)

Icons:

• Icon Set: Heroicons (https://heroicons.com)
• Style: Outline (2px stroke) for general use
• Style: Solid for active states
• Size: 24x24px standard, 16x16px small, 32x32px large
• Color: Inherit from parent or use brand colors

---

💬 BRAND VOICE & TONE

Personality Traits:

1. Reliable - We're always there when you need us
2. Friendly - Warm, approachable, never corporate
3. Local - We understand Fiji and its people
4. Modern - Tech-savvy but accessible
5. Safe - Security and trust are paramount

Writing Style:

✅ DO:

• Use simple, clear language
• Be warm and conversational
• Focus on benefits, not features
• Address users directly ("you", "your")
• Use active voice
• Be concise

❌ DON'T:

• Use jargon or technical terms
• Make exaggerated claims ("world's best", "#1")
• Include specific numbers without proof
• Use emojis excessively (1-2 per section max)
• Make promises you can't keep

Example Copy:

Good: "Book your ride in seconds. Safe, affordable, and always on time."

Bad: "We're the #1 world-class cab service with 99.9% customer satisfaction serving 10,000+ happy customers!"

---

🔤 MESSAGING FRAMEWORK

Tagline:

"Ride Anywhere in Fiji"

Value Propositions:

1. For Tourists: "Explore Fiji worry-free. Book rides from the airport to your hotel and everywhere in between."

2. For Locals: "Your daily commute, made easy. Reliable rides across Viti Levu and beyond."

3. For Drivers: "Drive on your schedule. Earn more with Fiji's fastest-growing ride-hailing platform."

Key Messages:

• First cab-hailing platform in Fiji
• Safe and verified drivers
• Transparent pricing, no hidden fees
• Available across major Fiji destinations
• Easy to use for everyone
• Supporting local drivers and economy

---

📱 UI COMPONENT STYLES

Buttons:

Primary Button (Call to Action):

background: #10b981;
color: #ffffff;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
hover: #059669;

Secondary Button:

background: transparent;
color: #10b981;
border: 2px solid #10b981;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
hover: background #d1fae5;

Accent Button (Urgent CTAs):

background: #f59e0b;
color: #ffffff;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
hover: #d97706;

Input Fields:

border: 1px solid #d1d5db;
border-radius: 8px;
padding: 12px 16px;
font-size: 16px;
focus: border-color #10b981, box-shadow 0 0 0 3px #d1fae5;

Cards:

background: #ffffff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
hover: box-shadow 0 10px 15px -3px rgba(0, 0, 0, 0.1);

---

🌐 BRAND APPLICATIONS

Website:

• Clean, modern design
• Mobile-first approach
• Fast loading (<3 seconds)
• Prominent "Book Ride" CTA
• Clear navigation
• Trust indicators (safety, verification)

Mobile Apps:

• Bottom navigation for easy thumb access
• Large touch targets (min 44x44px)
• Smooth animations
• Clear ride status indicators
• Map-centric design

Marketing Materials:

• Flyers for drivers
• Social media graphics
• Email templates
• Business cards
• Vehicle decals (optional)

---

✅ BRAND CHECKLIST

Before any design goes live, verify:

• Colors match brand palette exactly
• Typography uses Plus Jakarta Sans
• Logo has proper clear space
• Copy follows brand voice guidelines
• Images match photography style
• Buttons use correct styles
• Mobile responsive (test on actual devices)
• Accessible (WCAG AA contrast ratios)
• Loading performance optimized

---

📊 ACCESSIBILITY STANDARDS

Color Contrast:

All text must meet WCAG AA standards:

• Normal text: 4.5:1 contrast ratio minimum
• Large text (18px+): 3:1 contrast ratio minimum

Tested Combinations:

• ✅ Green (#10b981) on White (#ffffff) = 2.69:1 (Large text only)
• ✅ Text Primary (#1f2937) on White (#ffffff) = 15.93:1 (Excellent)
• ✅ White (#ffffff) on Green (#10b981) = 2.69:1 (Large text only)
• ✅ White (#ffffff) on Dark (#111827) = 17.99:1 (Excellent)

Recommendation: Use green for large buttons and headings. Use dark text (#1f2937) for body content.

---

🎯 COMPETITOR DIFFERENTIATION

How We Stand Out:

Aspect	Uber/Ola	Cab Connect
Market	Global	Fiji-specific
Drivers	Gig workers	Local partners
Colors	Black/Yellow/Green	Emerald/Ocean Blue/Gold
Vibe	Corporate	Island-friendly
Focus	Scale	Community

---

📁 BRAND ASSET ORGANIZATION

01-BRANDING/
├── logo/
│   ├── full-color/
│   │   ├── logo-horizontal.svg
│   │   ├── logo-horizontal.png
│   │   ├── logo-stacked.svg
│   │   └── logo-stacked.png
│   ├── white/
│   │   ├── logo-horizontal-white.svg
│   │   └── logo-horizontal-white.png
│   ├── icon/
│   │   ├── icon.svg
│   │   ├── icon.png
│   │   └── favicon.ico
│   └── guidelines.pdf
├── colors/
│   └── palette.pdf
├── fonts/
│   └── Plus-Jakarta-Sans/
└── templates/
    ├── social-media/
    ├── email/
    └── print/

---

🚀 IMPLEMENTATION NOTES

For Developers:

1. Design Tokens File:

   • Use design-tokens-template.ts from starter kit
   • Fill in all color values from this brand kit
   • Export for use in Tailwind config

2. Font Loading:

   • Preload Plus Jakarta Sans
   • Include weights: 400, 500, 600, 700, 800
   • Use font-display: swap for better performance

3. Logo Implementation:

   • Use SVG for scalability
   • Implement lazy loading for images

• Provide alt text: "Cab Connect logo"

4. Color Usage:
   • Primary green for all CTAs
   • Ocean blue for links and secondary actions
   • Amber for urgent actions only
   • Never use colors outside this palette

---

✅ APPROVAL & VERSION CONTROL

Brand Kit Version: 1.1
Created By: System Architect
Created Date: January 2, 2026
Status: ✅ Approved for Development
Next Review: After Phase 0 completion

---

Fiji's cab-hailing platform deserves a brand that reflects the islands' beauty, reliability, and warmth. This brand kit ensures consistency across all touchpoints. 🚖🌴

---

END OF BRAND KIT