Name: Train Trace Algeria Slogan: "تتبع قطارات الجزائر في الوقت الحقيقي"
Train Trace Algeria is a modern, real-time train tracking web application designed for travelers in Algeria. It offers a clear, interactive interface with a focus on live train statuses, schedules, station details, and ticketing — all accessible in both Arabic and French.
🌟 2. Logo Design
Main Logo:
• Modern train silhouette with dynamic flash-style font
• Arabic + English bilingual logo version available
• Scalable vector format for all applications
Logo Usage:
• Always maintain clear space around the logo
• Use only approved versions (light/dark/background)
• Minimum size: 120px width for digital use
🎨 3. Color Palette
#2563EB
Primary Blue
#2563EB
Main buttons, primary actions, navigation highlights
#3B82F6
Primary Light
#3B82F6
Secondary buttons, card backgrounds, hover states
#10B981
Secondary Green
#10B981
Success states, track status, confirmations
#F59E0B
Accent Orange
#F59E0B
Warnings, delays, important highlights
#FFFFFF
Background White
#FFFFFF
Main background, card surfaces
#F8FAFC
Surface Gray
#F8FAFC
Container backgrounds, sections
#1E293B
Text Primary
#1E293B
Main text, headings, high contrast
#94A3B8
Text Muted
#94A3B8
Secondary text, descriptions, metadata
Note: Dark Mode variants are defined in CSS and auto-adjust with the theme toggle.
✏️ 4. Typography
Main Fonts:
Inter (Latin), Amiri (Arabic)
Headings:
Poppins Bold or Cairo Bold
Body Text:
Inter Regular or Amiri Regular
Usage:
Bold weights for section headers and high contrast readability
🖊️ 5. Iconography
Icons are clean, rounded, and consistent. Common icons include:
Station
Map pin for locations
Time
Schedule timing
Train
Train vehicles
Speed
Fast tracking
All icons follow the line-based Lucide/Feather style for consistency.
🏗️ 6. UI Components
Key Elements:
• Hero with animated train or 3D GLTF model
• Live status cards with real-time updates
• Search + booking forms with clear CTAs
• Interactive maps and route visualization
Features:
• RTL and LTR support for multilingual use
• Theme toggling (light/dark modes)
• Responsive design for all devices
• Accessibility-first approach
🎓 7. Layout System
Uses a 12-column responsive layout:
Desktop:
Full grid with sidebar/sections, maximum content visibility
Tablet:
Two-column layout, optimized for touch interaction
Padding and spacing follow utility-first scale from TailwindCSS.
🌐 8. Language & Accessibility
Language Support:
• Arabic-first UI with RTL layout
• French/English support optional
• Dynamic text direction switching
Accessibility:
• All elements accessible with screen readers
• Color contrast meets WCAG standards
• Keyboard navigation support
✅ 9. Final Notes
Train Trace Algeria is designed to reflect the dynamic nature of rail travel while remaining accessible, fast, and local-user friendly.
This Visual Identity Guide should be used by all team members, designers, and developers to maintain consistency throughout the development process and beyond.