A. Brand Overview
Hub E-Pharma Brand Identity
A comprehensive digital platform for pharmacy transformation in West Africa, connecting pharmacies with suppliers and improving healthcare accessibility.
Mission
Digitalize pharmacy operations and improve healthcare access across West Africa
Vision
Be the leading digital platform for pharmacy transformation
Values
Innovation, Accessibility, Trust, Excellence
Brand Personality
Healthcare-Focused
Professional, trustworthy, and reliable
Innovative
Modern, forward-thinking, and tech-savvy
Collaborative
Connecting pharmacies and suppliers
Accessible
Inclusive and regionally focused
B. Logo Usage
Primary Logo
Background: #ffffff (White)
Min size: 120px width
On Dark Background
Background: #2c3e50 (Dark Blue-Gray)
Use original version
On Brand Background
Background: #27ae60 (Primary Green)
Use white version
On Black Background
Background: #000000 (Black)
Use original version
On Gradient Background
Background: #2c3e50 → #27ae60 (Gradient)
Use white version
On Light Background with Border
Background: #f8f9fa (Light Gray)
Use white text version
On Dark Orange Background
Background: #d35400 (Dark Orange)
Use original version
On Dark Blue-Gray Background
Background: #2c3e50 (Dark Blue-Gray)
Use white logo
Logo Guidelines
- Maintain minimum clear space of 20px around logo
- Never distort or alter proportions
- Use on white or light backgrounds for best visibility
- Minimum size: 120px width for web, 60px for mobile
C. Brand Colors
Primary Brand Colors
Brand Primary
Brand Primary (Green)
#27ae60
RGB(39, 174, 96)
Used in: Mobile app, Website CTA
Primary Dark
Primary Dark
#1e8449
RGB(30, 132, 73)
Used in: Hover states
Brand Secondary
Brand Secondary (Dark Blue)
#2c3e50
RGB(44, 62, 80)
Used in: Website primary
Brand Accent
Brand Accent (Blue)
#3498db
RGB(52, 152, 219)
Used in: Interactive elements
Project-Specific Themes
🌐 Website Theme
Primary: #2c3e50
Secondary: #27ae60
Accent: #3498db
Text Light: #7f8c8d
Background Light: #ecf0f1
Border: #bdc3c7
📱 Mobile App Theme
Primary: #27AE60
Primary Dark: #1E8449
Secondary: #28A745
Accent: #4CAF50
App Bar: #000000
Text Primary: #212121
💻 Web App Theme
Primary: #409eff
Primary Gradient: #4096ff
Success Green: #28a745
Light Grey: #f5f5f5
Login Background: #000000
Theme Color: #0c0f0f
Status Colors
Pending
Pending
#16a085
Teal Green
Approved
Approved/Active
#27ae60
Brand Success
Rejected
Rejected
#e67e22
Muted Orange
Processing
Processing
#3498db
Brand Info
Inactive
Inactive/Expired
#95a5a6
Brand Muted
Contrast Ratios
Brand Primary on White: 4.5:1 (AA) ✓
Brand Secondary on White: 8.2:1 (AAA) ✓
White on Brand Primary: 4.5:1 (AA) ✓
White on Brand Secondary: 8.2:1 (AAA) ✓
D. Typography
Heading 1 - Main Page Titles
Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Heading 2 - Section Titles
Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Heading 3 - Subsection Titles
Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Heading 4 - Card Titles
Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Heading 5 - Small Headings
Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Heading 6 - Labels
Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
E. Spacing & Radius
Spacing Scale
XS
4px
4px
SM
8px
8px
MD
16px
16px
LG
24px
24px
XL
32px
32px
2XL
48px
48px
Border Radius
SM
4px
4px
MD
8px
8px
LG
12px
12px
XL
16px
16px
2XL
25px
25px
Full
50px
50px
F. Components
Website Buttons
Mobile App Buttons
Web App Buttons (Element Plus)
Status Badges
Pending
Approved
Rejected
Processing
Inactive
Cards
Card Title
This is a card component with consistent styling across all projects.
Form Inputs
G. Iconography
Using Font Awesome icons with consistent sizing and flat design principles
16px
20px
24px
32px
Icon Usage Guidelines
- Use consistent sizing: 16px, 20px, 24px, 32px
- Apply brand primary color (#27ae60) for active states
- Use secondary text color (#757575) for inactive states
- Maintain 4px padding around icons for touch targets
- Prefer outline style icons over filled for better readability
H. Imagery Guidelines
Backgrounds
Hero Banner
Hero Images
20px radius, large shadows
Colors: #27ae60 → #2c3e50
App Screenshot
App Screenshots
20px radius, drop shadows
Colors: #409eff → #1677ff
Feature Image
Feature Images
12px radius, medium shadows
Colors: #f5f5f5 → #e8e8e8
Dark Gradient
Dark Gradient
Professional dark gradient for cards
Colors: #5d6d7e → #566573 → #4a5a6a
Light Gray
Light Gray
Subtle background for content areas
Login Page Gradient
Login Page Gradient
Animated dark gradient with teal accent
Colors: #000000 → #0a0a0a → rgba(64,109,112,143) → #000000
Sidebar Gradient
Sidebar Gradient
Vertical dark gradient for navigation
Colors: #000000 (0%) → #0a0a0a (75%) → rgba(64,109,112,143) (100%)
Visual Treatment
Brand Accent Background
Use brand green (#27ae60) with 30% opacity for image overlays
Hover Effects
translateY(-10px) with enhanced shadows on hover
Scale & Drop Shadow
scale(1.1) with drop-shadow for mobile overlays
Image Specifications
Hero Images
- Format: JPG, WebP
- Resolution: 1920x1080px
- Border radius: 20px
- Shadow: 0 20px 60px rgba(0,0,0,0.15)
App Screenshots
- Format: PNG, WebP
- Resolution: 600x400px
- Border radius: 20px
- Drop shadow: 0 10px 20px rgba(0,0,0,0.1)
Feature Images
- Format: PNG, JPG
- Resolution: 400x300px
- Border radius: 12px
- Shadow: 0 8px 25px rgba(0,0,0,0.1)
Image Optimization
- Responsive Images: Use different sizes for mobile, tablet, desktop
- Lazy Loading: Implement for better performance
- Alt Text: Always include descriptive alt text for accessibility
- Compression: Optimize file sizes without losing quality
- Format Selection: Use WebP for modern browsers, fallback to JPG/PNG
- External Services: Support Unsplash and Pixabay with automatic optimization
Background Templates
Interactive background templates demonstrating each gradient style. Perfect for presentations, print materials, and design mockups.
Hero Images
Hero Banner Background
Green to dark gradient for hero sections
App Screenshots
App Screenshot Background
Blue gradient for mobile app displays
Feature Images
Feature Image Background
Light gradient for content areas
Dark Gradient
Dark Gradient Background
Professional dark gradient for cards
Light Gray
Light Gray Background
Subtle background for content areas
Login Page
Login Page Background
Animated dark gradient with teal accent
Sidebar Gradient
Sidebar Background
Vertical gradient for navigation
💡 Usage Tip: Each template opens in a new tab with exact dimensions (8.5" × 11") and includes hover effects. Right-click and "Save As" to download, or use Print to PDF for high-quality exports.
J. Accessibility
Color Contrast
Primary Text: 4.5:1 ratio (AA compliant)
Secondary Text: 3:1 ratio (AA large text)
- Test all color combinations for WCAG compliance
- Provide alternative text for images
- Ensure keyboard navigation support
- Use semantic HTML elements
Focus States
- Use 3px outline with 30% opacity
- Maintain 4.5:1 contrast ratio
- Provide clear visual feedback
- Support keyboard navigation
H. AI Prompts for Visual Creation
Use these detailed prompts when creating visuals with AI tools to ensure brand consistency and proper color alignment across all platforms.
Brand Color Palette for AI Reference
Primary Green
#27ae60
#27ae60
Primary Dark
#1e8449
#1e8449
Secondary Blue
#2c3e50
#2c3e50
Accent Blue
#3498db
#3498db
Success Green
#4caf50
#4caf50
Muted Gray
#95a5a6
#95a5a6
📄 Flyers & Marketing Materials
Prompt Template:
Create a [VISUAL_TYPE] for Hub E-Pharma, a digital pharmacy platform in West Africa. Use a modern, professional healthcare design with these exact brand colors: primary green #27ae60, secondary blue #2c3e50, accent blue #3498db, and success green #4caf50. Include clean typography (Inter font family), rounded corners (8-20px radius), and subtle shadows. The design should convey trust, innovation, and healthcare accessibility. [SPECIFIC_REQUIREMENTS]
Specific Examples:
- Product Launch: "Create a product launch flyer for a new pharmacy management feature..."
- Event Promotion: "Create an event flyer for a pharmacy training workshop..."
- Service Advertisement: "Create a service advertisement for pharmacy digitalization..."
📱 Social Media Graphics
Prompt Template:
Create a [PLATFORM] social media post for Hub E-Pharma. Use a vibrant, engaging design with brand colors: #27ae60 (primary green), #2c3e50 (secondary blue), #3498db (accent blue). Include the Hub E-Pharma logo, modern healthcare icons, and clean typography. The design should be mobile-optimized with proper spacing and contrast. [PLATFORM_SPECIFICS]
Platform-Specific Requirements:
- Instagram: "1080x1080px square format, vibrant colors, story-friendly design"
- Facebook: "1200x630px landscape format, professional tone, clear call-to-action"
- LinkedIn: "1200x627px, business-focused, minimal design with data visualization"
🌐 Website Banners & Hero Images
Prompt Template:
Create a website hero banner (1920x1080px) for Hub E-Pharma. Use a professional gradient background combining #27ae60 and #2c3e50, with clean white text overlay. Include modern healthcare elements, pharmacy icons, and the Hub E-Pharma logo. Apply 20px border radius and subtle shadow effects. The design should be responsive-friendly with clear hierarchy and strong visual impact.
Banner Types:
- Homepage Hero: "Focus on platform benefits and digital transformation"
- Feature Banner: "Highlight specific platform features or updates"
- Event Banner: "Promote webinars, training sessions, or conferences"
📱 Mobile App Screenshots
Prompt Template:
Create a mobile app screenshot mockup for Hub E-Pharma pharmacy management app. Use the mobile app color scheme: #27ae60 (primary), #1e8449 (primary dark), #28a745 (secondary), #4caf50 (accent). Design a clean, modern interface with proper spacing, rounded corners (8-12px), and the app's navigation elements. Include realistic content and maintain the healthcare/pharmacy theme throughout.
Screen Types:
- Dashboard: "Main app dashboard with key metrics and navigation"
- Inventory: "Pharmacy inventory management screen"
- Orders: "Order management and tracking interface"
📊 Presentation Slides
Prompt Template:
Create a presentation slide (16:9 ratio) for Hub E-Pharma. Use a clean, professional design with brand colors: #27ae60, #2c3e50, #3498db. Include the Hub E-Pharma logo, consistent typography (Inter font), and healthcare-related icons. Use subtle gradients and proper spacing. The slide should be readable from a distance and maintain brand consistency.
Slide Types:
- Title Slide: "Company introduction with logo and tagline"
- Feature Slide: "Platform features with icons and descriptions"
- Data Slide: "Statistics and metrics with charts"
📧 Email Templates
Prompt Template:
Create an email template header/banner for Hub E-Pharma. Use brand colors #27ae60, #2c3e50, and #3498db in a professional layout. Include the Hub E-Pharma logo, clean typography, and healthcare elements. Design should be email-client compatible with proper fallbacks and mobile responsiveness. Use subtle gradients and maintain consistent spacing.
Email Types:
- Newsletter: "Monthly updates and platform news"
- Welcome Email: "New user onboarding sequence"
- Feature Update: "Product updates and new features"
General Design Guidelines for AI Prompts
Color Usage Rules
- Primary Green (#27ae60) for main CTAs and highlights
- Secondary Blue (#2c3e50) for headers and important text
- Accent Blue (#3498db) for interactive elements
- Success Green (#4caf50) for positive states
- Muted Gray (#95a5a6) for inactive/expired states
Typography & Spacing
- Use Inter font family for all text
- Maintain 8px, 16px, 24px, 32px spacing scale
- Apply 8-20px border radius consistently
- Use subtle shadows (0 2px 4px rgba(0,0,0,0.1))
Visual Elements
- Include healthcare/pharmacy related icons
- Use clean, modern design principles
- Maintain professional, trustworthy appearance
- Ensure mobile responsiveness
K. Code Tokens
| Token Name | Value | Usage |
|---|---|---|
| --brand-primary | #27ae60 | Main brand color (Green) |
| --brand-primary-dark | #1e8449 | Primary dark variant |
| --brand-secondary | #2c3e50 | Secondary brand color (Dark Blue) |
| --brand-accent | #3498db | Accent color (Blue) |
| --website-primary | #2c3e50 | Website primary color |
| --website-secondary | #27ae60 | Website secondary color |
| --mobile-primary | #27AE60 | Mobile app primary color |
| --mobile-primary-dark | #1E8449 | Mobile app primary dark |
| --mobile-secondary | #28A745 | Mobile app secondary color |
| --mobile-accent | #4CAF50 | Mobile app accent color |
| --mobile-app-bar | #000000 | Mobile app bar background |
| --mobile-text-primary | #212121 | Mobile app primary text |
| --webapp-primary | #409eff | Web app primary (Element Plus) |
| --status-pending | #ff8c00 | Pending status color |
| --status-approved | #4caf50 | Approved/Active status |
| --status-rejected | #f44336 | Rejected status color |
| --status-processing | #2196f3 | Processing status color |
| --status-inactive | #9e9e9e | Inactive/Expired status |
| --text-primary | #212121 | Primary text color |
| --text-secondary | #757575 | Secondary text color |
| --text-tertiary | #9e9e9e | Tertiary text color |
| --bg-primary | #ffffff | Primary background |
| --bg-secondary | #f8f9fa | Secondary background |
| --border-color | #e0e0e0 | Default border color |
| --spacing-xs | 4px | Extra small spacing |
| --spacing-sm | 8px | Small spacing |
| --spacing-md | 16px | Medium spacing |
| --spacing-lg | 24px | Large spacing |
| --spacing-xl | 32px | Extra large spacing |
| --radius-sm | 4px | Small border radius |
| --radius-md | 8px | Medium border radius |
| --radius-lg | 12px | Large border radius |
| --radius-xl | 16px | Extra large radius |
| --radius-2xl | 25px | 2X large radius |
| --radius-full | 50px | Fully rounded |
| --font-family-primary | Inter, -apple-system... | Primary font stack |
| --font-family-secondary | Poppins, sans-serif | Secondary font stack |
| --shadow-sm | 0 2px 4px rgba(0,0,0,0.1) | Small shadow |
| --shadow-md | 0 4px 6px rgba(0,0,0,0.1) | Medium shadow |
| --shadow-lg | 0 10px 25px rgba(0,0,0,0.15) | Large shadow |
| --transition-fast | all 0.2s ease | Fast transitions |
| --transition-normal | all 0.3s ease | Normal transitions |