# EL3AB Design Specification v3

## Identity

EL3AB is a **social gaming hub for Arabic speakers** wrapping 4 classic board games (Chess, Ludo, Domino, Backgammon) in a platform that feels alive, dense, and responsive. Reference: Yalla Ludo + competitive depth.

## Design Pillars

1. **One Thumb, Full Experience** — Every primary action reachable with one thumb. < 3 taps to play.
2. **Touch = Feedback** — Every interaction responds with visual + audio + haptic simultaneously.
3. **Cards, Not Pages** — One UI primitive (the card). Cards stack, scroll, expand into sheets.
4. **Color = Game** — Each game owns a color identity. You always know which game context you're in.
5. **Always Alive** — No screen is static. Minimum: floating glow, pulsing dots, breathing buttons.

## Anti-Pillars

- NOT a web app (no material design, no breadcrumbs, no "dashboard")
- NOT minimal (dense = purposeful, every pixel works)
- NOT chess-first (all 4 games equal)
- NOT dark-for-trendy (dark bg is functional — makes colors pop)

## Color System

| Context | Primary | Secondary | Gradient |
|---------|---------|-----------|----------|
| Chess | #2563EB (blue) | #F5B731 (gold) | blue → gold |
| Ludo | #8B5CF6 (purple) | #EC4899 (pink) | purple → pink |
| Domino | #10B981 (emerald) | #06B6D4 (cyan) | emerald → cyan |
| Backgammon | #F59E0B (amber) | #EF4444 (red) | amber → red |
| Platform/Brand | #F5B731 (gold) | #00D4FF (cyan) | — |
| Background | #030A12 | #081420 | — |
| Text Primary | #F8FAFC | — | — |
| Text Secondary | #94A3B8 | — | — |
| Win | #34D399 | — | — |
| Loss | #F87171 | — | — |

## Card Anatomy

```
┌─────────────────────────────────┐
│  GRADIENT HEADER (game color)    │  60-80px
│  ◉ Icon        Game Name   ● ● │
├─────────────────────────────────┤
│  CONTENT BODY (bg-1)             │  flexible
├─────────────────────────────────┤
│  ACTION FOOTER (optional)        │  CTA/chips
└─────────────────────────────────┘
```

- Radius: 20px
- Border: 1px solid rgba(255,255,255,0.08)
- Shadow: 0 8px 32px rgba(0,0,0,0.4)
- Touch: scale(0.97) + shadow compress + haptic

## Screen Map

### Home (vertical scroll)
1. Header (fixed): Brand + Level + Coins + Gems + Notifications
2. Streak card (daily reward, pulses if unclaimed)
3. Games 2x2 grid (equal, always visible above fold)
4. My ratings (horizontal scroll pills)
5. Recent matches (last 5)
6. Friends online (avatar row)
7. Nav bar (fixed): Home | Games | Rank | Social | Me

### Game Lobby (bottom sheet, 70% screen)
- Mode selection (chips)
- Time control / bot picker (per game)
- "Play" CTA (large, game-color gradient)
- Swipe down to dismiss

### In-Game (immersive)
- Header + Nav hide
- Full-screen game board
- Opponent bar (top) + Player bar (bottom)
- Action drawer (swipe up): resign/draw/settings

### Post-Game (results card, slides up)
- W/L/D icon + confetti/shake
- Rating change (animated counter)
- XP + coins earned
- Rematch + Home buttons

## Interaction Rules

- Button press: scale(0.95) + haptic(10ms) + audio(click)
- Card press: scale(0.97) + tilt-toward-finger + shadow compress
- Navigation: slide transitions (250ms, ease-out)
- Game enter: zoom + darken
- Game exit: zoom out + brighten
- Win: confetti burst + haptic([20,50,20]) + fanfare
- Lose: subtle shake + haptic([50,30,50]) + descending tone
- Coin earn: particles fly to header counter + tick animation
- Level up: full-screen overlay + confetti + badge reveal

## Typography

- Arabic: IBM Plex Sans Arabic (400, 500, 600, 700, 800)
- Numbers: system monospace, tabular-nums
- Brand: "EL3AB" — always gold, weight 800

## Spacing

- Card padding: 16px
- Card gap: 12px
- Section gap: 20px
- Touch target minimum: 44px
- Border radius: 20px (cards), 12px (buttons), 9999px (pills/badges)

## Responsive

- Mobile-first: 320px - 480px (primary)
- Tablet: 768px+ (2-column games grid becomes 4-column, sidebar appears)
- Desktop: 1024px+ (sidebar nav, wider content area)
- Game boards: always square, max-width: min(100vw - 32px, 400px)
