# El Captain Brand Guidelines v1.0

## Quick Reference
- **Primary Color:** #1E3A5F (Deep Navy)
- **Secondary Color:** #0EA5E9 (Electric Sky)
- **Accent:** #10B981 (Success Green)
- **Primary Font (Arabic):** Cairo
- **Primary Font (Latin):** Inter
- **Voice:** Authoritative, Clear, Empowering

---

## 1. Brand Identity

### Mission Statement
We build the command center for sports organizations — giving academy owners total operational control so they can focus on what matters: developing athletes.

### Vision Statement
A world where every sports academy in the Arab region operates with the precision and intelligence of a professional club.

### Value Proposition
For sports academy owners who struggle with scattered operations, manual tracking, and financial uncertainty —
**El Captain** is the all-in-one management platform
that puts every player, every pound, and every session under one command center.
Unlike generic ERPs or spreadsheets,
we're purpose-built for the sports business model — from enrollment to graduation.

### Positioning Statement
El Captain is the sports operations platform for academy directors who want complete visibility and control over their business, because it was designed by people who understand how sports academies actually work.

### Tagline Options
- **Primary (AR):** كل شيء تحت إدارتك — "Everything under your command"
- **Secondary (AR):** منصة واحدة. تحكم كامل. — "One platform. Complete control."
- **English:** "Your Command Center for Sports Operations"

---

## 2. Color Palette

### Primary Colors
| Name | Hex | RGB | Tailwind | Usage |
|------|-----|-----|----------|-------|
| Deep Navy | #1E3A5F | rgb(30,58,95) | `navy-900` | Headers, primary text, authority |
| Electric Sky | #0EA5E9 | rgb(14,165,233) | `sky-500` | CTAs, interactive elements, links |

### Secondary Colors
| Name | Hex | RGB | Tailwind | Usage |
|------|-----|-----|----------|-------|
| Success Green | #10B981 | rgb(16,185,129) | `emerald-500` | Positive metrics, confirmations |
| Warm Amber | #F59E0B | rgb(245,158,11) | `amber-500` | Highlights, attention, badges |
| Soft Violet | #8B5CF6 | rgb(139,92,246) | `violet-500` | Charts, secondary data viz |

### Neutral Palette
| Name | Hex | RGB | Tailwind | Usage |
|------|-----|-----|----------|-------|
| Background | #FAFBFC | rgb(250,251,252) | `slate-50` | Page background |
| Surface | #FFFFFF | rgb(255,255,255) | `white` | Cards, modals |
| Text Primary | #0F172A | rgb(15,23,42) | `slate-900` | Headings, primary text |
| Text Secondary | #64748B | rgb(100,116,139) | `slate-500` | Descriptions, muted text |
| Text Tertiary | #94A3B8 | rgb(148,163,184) | `slate-400` | Placeholders, disabled |
| Border | #E2E8F0 | rgb(226,232,240) | `slate-200` | Dividers, card borders |
| Border Subtle | #F1F5F9 | rgb(241,245,249) | `slate-100` | Section separators |

### Gradient System
```css
/* Hero gradient — subtle authority */
--gradient-hero: linear-gradient(135deg, #FAFBFC 0%, #EFF6FF 50%, #F0F9FF 100%);

/* CTA gradient — action energy */
--gradient-cta: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);

/* Feature card hover */
--gradient-card: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);

/* Data visualization glow */
--gradient-glow: radial-gradient(circle, rgba(14,165,233,0.08) 0%, transparent 70%);
```

### Accessibility
- Text Primary on Background: 15.3:1 (WCAG AAA)
- Electric Sky on White: 3.2:1 (Large text / UI components AA)
- Electric Sky on Navy: 5.8:1 (WCAG AA)
- All interactive elements meet WCAG 2.1 AA minimum

---

## 3. Typography

### Font Stack
```css
/* Arabic (primary) */
--font-heading-ar: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
--font-body-ar: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;

/* Latin (secondary) */
--font-heading-en: 'Inter', system-ui, sans-serif;
--font-body-en: 'Inter', system-ui, sans-serif;

/* Monospace (data/code) */
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

/* Numbers (always LTR) */
--font-numbers: 'Inter', 'Tabular Nums', monospace;
```

### Type Scale (Arabic)
| Element | Font | Weight | Size Desktop | Size Mobile | Line Height | Letter Spacing |
|---------|------|--------|-------------|-------------|-------------|----------------|
| Display | Cairo | 800 | 64px | 40px | 1.1 | -0.02em |
| H1 | Cairo | 700 | 48px | 32px | 1.2 | -0.01em |
| H2 | Cairo | 700 | 36px | 28px | 1.25 | 0 |
| H3 | Cairo | 600 | 28px | 24px | 1.3 | 0 |
| H4 | Cairo | 600 | 24px | 20px | 1.35 | 0 |
| Body Large | Cairo | 400 | 18px | 16px | 1.6 | 0 |
| Body | Cairo | 400 | 16px | 16px | 1.6 | 0 |
| Small | Cairo | 400 | 14px | 14px | 1.5 | 0 |
| Caption | Cairo | 500 | 12px | 12px | 1.4 | 0.01em |

### Type Rules
- Arabic body text: minimum 16px (never smaller for readability)
- Numbers in data displays: always use Inter with tabular figures
- Headings: Cairo Bold/ExtraBold for commanding presence
- Maximum line length: 65 characters (Arabic) / 75 characters (English)

---

## 4. Voice & Tone

### Brand Personality Traits
1. **Authoritative, not arrogant** — We know this space. We speak with confidence but never talk down.
2. **Clear, not simplistic** — Complex features explained simply. Jargon-free but not dumbed down.
3. **Empowering, not pushy** — We give you power. We never pressure or create false urgency.

### Voice Chart
| Trait | We Are | We Are Not |
|-------|--------|------------|
| Authoritative | Confident, knowledgeable, direct | Boastful, condescending, rigid |
| Clear | Precise, structured, scannable | Oversimplified, vague, verbose |
| Empowering | Enabling, supportive, practical | Pushy, manipulative, salesy |

### Tone by Context
| Context | Tone | Example (AR) | Example (EN) |
|---------|------|-------------|-------------|
| Hero/Headlines | Commanding | "كل شيء تحت إدارتك" | "Everything under your command" |
| Features | Confident | "تتبع كل جنيه من لحظة الدفع حتى التقرير" | "Track every pound from payment to report" |
| Social Proof | Grounded | "٤٧ أكاديمية تدير عملياتها عبر المنصة" | "47 academies run their operations through the platform" |
| Support/Help | Helpful | "فريقنا جاهز لمساعدتك في الإعداد" | "Our team is ready to help you get set up" |
| CTA | Direct | "ابدأ الآن" / "احجز عرض تجريبي" | "Start now" / "Book a demo" |
| Error/Empty | Reassuring | "لا مشكلة، نقدر نساعدك" | "No problem, we can help" |

### Prohibited Terms & Patterns
- "Revolutionary" / "ثوري" — overused, meaningless
- "Best in class" — unprovable
- "Easy" without showing why — claim without evidence
- Exclamation marks in headlines — reduces authority
- "Just" / "Simply" — minimizes real challenges
- Tech jargon without context — "SaaS", "cloud-native", "AI-powered" alone
- Fear-based copy — "Don't lose your data!" / "You're falling behind!"

### Arabic Copy Standards
- Use Modern Standard Arabic (فصحى مبسطة) — not colloquial, not overly formal
- Short sentences: 10-15 words maximum per sentence in marketing copy
- Active voice always: "تدير" not "يتم إدارة"
- Address the reader directly: "أنت" / "أكاديميتك"
- Numbers: Arabic-Indic numerals (٤٧) in headlines, Western (47) in data

---

## 5. Imagery Guidelines

### Photography Style
- **NO stock photos** — ever. Use product screenshots, custom illustrations, or abstract visuals.
- If people appear: real sports settings (training halls, pitches), never staged office shots
- Lighting: bright, clean, natural
- Color treatment: desaturated slightly, brand tint overlay acceptable

### Product Screenshots
- Always show Arabic interface (RTL)
- Real-looking data (never "Lorem ipsum" or obviously fake)
- Clean, populated state (not empty states)
- Subtle shadow/float effect to lift off page
- Device mockup: MacBook Pro or iPad, minimal chrome

### Illustrations & Graphics
- Style: Geometric, structured, grid-based (reflects "command center" metaphor)
- Colors: Brand palette only — primary navy + sky accents
- No cartoon/playful illustrations — too casual for target audience
- Data visualization style: clean charts with brand colors, subtle gradients
- Module icons: outlined, consistent 2px stroke, rounded corners

### Icons
- Style: Outlined with 1.5px stroke (Lucide or Heroicons aesthetic)
- Size: 24px base grid
- Corner radius: 2px
- Color: Single tone (slate-500 default, sky-500 on hover/active)
- Never filled icons in navigation — filled only for active/selected states

---

## 6. Logo Usage

### Variants
- **Primary:** Arabic wordmark "الكابتن" + icon mark (horizontal)
- **English:** "El Captain" wordmark + icon mark (horizontal)
- **Stacked:** Icon above wordmark (for square formats)
- **Icon Only:** Shield/command mark (favicons, app icons, small spaces)
- **Monochrome:** Single color versions (navy on light, white on dark)

### Icon Concept
The icon should evoke: command/authority + sports + technology. 
Direction: Abstract shield shape with data-grid pattern inside — combines protection/authority with structured information.

### Clear Space
Minimum clear space = 1.5x height of the icon mark on all sides

### Minimum Size
- Digital: 100px width (full logo), 32px (icon only)
- Print: 30mm width (full logo), 10mm (icon only)

### Don'ts
- Don't rotate, skew, or add perspective effects
- Don't use colors outside the approved palette
- Don't add drop shadows, glows, or 3D effects
- Don't place on busy/patterned backgrounds
- Don't stretch or modify proportions
- Don't use the English logo in Arabic contexts (and vice versa)

---

## 7. Motion & Animation Principles

### Core Philosophy
Motion serves comprehension. Every animation must answer: "Does this help the user understand something?"

### Timing
| Type | Duration | Easing | Use |
|------|----------|--------|-----|
| Micro | 150-200ms | ease-out | Button hover, toggle |
| Standard | 300-400ms | ease-in-out | Card reveal, panel transition |
| Emphasis | 500-700ms | spring(0.6) | Hero elements, feature reveals |
| Cinematic | 800-1200ms | custom bezier | Scroll-triggered sequences |

### Scroll Animations
- Elements enter from below with subtle fade (not from sides — RTL makes lateral motion ambiguous)
- Stagger delay: 50-100ms between items in a list
- Parallax: maximum 20% offset (subtle, not nauseating)
- Dashboard mockups: 3-5 degree tilt on scroll, with depth shadow

### Interaction Animations
- Buttons: scale(1.02) on hover, scale(0.98) on press
- Cards: translateY(-4px) + shadow increase on hover
- Numbers: count-up animation when scrolling into view
- Charts: draw-in animation (lines/bars grow from zero)

### Don'ts
- No bounce effects (too playful)
- No spin/rotate animations (disorienting in RTL)
- No animation on every element (cluttered)
- No animation that blocks reading (user should never wait)
- No autoplay video in hero (distracting, bandwidth-heavy in Egypt)

---

## 8. Component & Layout Principles

### Grid System
- 12-column grid, 1280px max width
- Gutters: 24px (mobile), 32px (tablet), 40px (desktop)
- Section padding: 80px vertical (desktop), 48px (mobile)
- Cards: 16px-24px internal padding, 1px border, 8px radius

### Card Hierarchy
1. **Primary Card:** White bg, 1px slate-200 border, 12px radius, subtle shadow
2. **Feature Card:** White bg, on hover: border-sky-200, shadow-lg, slight lift
3. **Stat Card:** Slate-50 bg, no border, internal padding, bold number
4. **CTA Card:** Gradient bg (navy → darker), white text, rounded-2xl

### Button Styles
| Variant | Background | Text | Border | Use |
|---------|-----------|------|--------|-----|
| Primary | sky-500 → sky-600 gradient | white | none | Main CTA |
| Secondary | white | navy-900 | slate-200 | Secondary actions |
| Ghost | transparent | sky-600 | none | Tertiary, in-nav |
| Dark | navy-900 | white | none | On light sections |

### Spacing Scale (Tailwind)
- Section gaps: `space-y-20` (80px) or `space-y-16` (64px)
- Component gaps: `gap-6` (24px) or `gap-8` (32px)
- Text gaps: `space-y-4` (16px) between paragraphs
- Element gaps: `gap-2` (8px) or `gap-3` (12px) within components

---

## 9. Data Visualization Style

Since the product IS data and dashboards, the marketing site's visual language borrows from data viz:

### Chart Colors (ordered)
1. Electric Sky (#0EA5E9) — primary data series
2. Soft Violet (#8B5CF6) — secondary series
3. Success Green (#10B981) — positive trends
4. Warm Amber (#F59E0B) — highlights/alerts
5. Slate (#64748B) — neutral/comparison

### Data Display Rules
- Numbers are heroes — display large, bold, with unit labels
- Show real-ish metrics: "٢,٤٥٠ لاعب" / "١.٢ مليون ج.م إيرادات شهرية"
- Growth indicators: green arrow + percentage for positive
- Dashboard mockups: 3-4 widgets visible, not cluttered

---

## 10. Responsive Breakpoints

| Name | Min Width | Target |
|------|-----------|--------|
| Mobile | 0px | Phone (portrait) |
| Tablet | 768px | iPad/tablet |
| Desktop | 1024px | Laptop |
| Wide | 1280px | Desktop monitor |
| Ultra | 1536px | Large displays |

### Mobile-Specific Rules
- Hero: single column, headline + CTA above fold
- Navigation: hamburger menu (Arabic text remains RTL)
- Cards: full width, stacked
- Mockup images: reduce to 80% width, remove tilt effects
- Font sizes follow mobile column in type scale
