# TabataGo — Brand Design Specification Document (BDSD) v1.0

> Ce document définit l'identité visuelle, le positionnement premium, et les principes esthétiques de TabataGo. Il guide toutes les décisions de design UI.

---

## 1. Vision de Marque

### 1.1 Essence

**TabataGo = Énergie pure, designé pour performer.**

Si TabataGo était une marque existante, ce serait **Gymshark** : jeune, audacieux, communauté, et visuellement impactant. Mais avec une touche **premium exclusive** qui élève l'expérience.

### 1.2 Positionnement

| Attribut | Définition |
|-----------|------------|
| **Émotion primaire** | Énergie / Vitalité — l'utilisateur doit se sentir vivant et motivé au premier regard |
| **Positionnement** | Premium exclusif — haut de gamme, design soigné, pas une app "gratuite générique" |
| **Adjectifs clés** | Dynamic • Vibrant • Energetic |
| **Mood global** | Action Sports — comme être dans une salle de sport high-end, la nuit, avec des néons |

### 1.3 Personnalité de Marque

TabataGo est :
- **Audacieux** — pas peur d'être vibrant et lumineux
- **Énergique** — chaque élément respire le mouvement
- **Premium** — jamais cheap, toujours soigné
- **Motivant** — l'UI pousse l'utilisateur à se dépasser

---

## 2. Direction Visuelle

### 2.1 Palette de Couleurs

#### Couleur Primaire : Orange Energy

L'orange est le cœur de l'identité — il représente l'énergie, la chaleur, l'action.

| Token | Hex | Usage |
|-------|-----|-------|
| `ENERGY_500` | `#F97316` | Brand primary, CTA, accents principaux |
| `ENERGY_400` | `#FB923C` | Glow effects, hover states |
| `ENERGY_600` | `#EA580C` | Phase WORK, intensity |

#### Fond : Soft Dark

Un dark mode doux et riche, pas un noir pur agressif.

| Token | Hex | Usage |
|-------|-----|-------|
| `DARK_BASE` | `#1A1A1E` | Background principal |
| `DARK_RAISED` | `#222226` | Cards level 1 |
| `DARK_ELEVATED` | `#2A2A2E` | Cards level 2, modals |
| `DARK_SURFACE` | `#0A0A0E` | Zones de focus, timer |

#### Accents & Phases

| Token | Hex | Usage |
|-------|-----|-------|
| `GLOW_NEON` | `#F97316` + glow | Flamme streak, highlights |
| `PHASE_WORK` | `#F97316` | Gradient work |
| `PHASE_REST` | `#3B82F6` | Gradient rest (bleu calme) |
| `PHASE_READY` | `#EAB308` | Gradient préparation |
| `SUCCESS` | `#22C55E` | Complétion, streak maintenu |

#### Textes

| Token | Valeur | Usage |
|-------|--------|-------|
| `TEXT_PRIMARY` | `#FFFFFF` | Titres, éléments principaux |
| `TEXT_SECONDARY` | `rgba(255,255,255,0.85)` | Body text |
| `TEXT_MUTED` | `rgba(255,255,255,0.60)` | Labels secondaires |
| `TEXT_HINT` | `rgba(255,255,255,0.45)` | Placeholders, hints |

### 2.2 Gradients

**Philosophie : Subtils mais présents.** Les gradients ajoutent de la profondeur sans être agressifs.

#### Gradients de Phase

```css
/* GET_READY - Ambre chaleureux */
--gradient-ready: linear-gradient(135deg, #451A03, #92400E, #D97706);

/* WORK - Orange intense avec touche rouge */
--gradient-work: linear-gradient(135deg, #450A0A, #991B1B, #EA580C);

/* REST - Bleu calme, récupération */
--gradient-rest: linear-gradient(135deg, #0C1929, #1E3A5F, #2563EB);

/* COMPLETE - Vert succès */
--gradient-complete: linear-gradient(135deg, #052E16, #166534, #16A34A);
```

#### Gradients UI

```css
/* Hero backgrounds - subtle */
--gradient-dark: linear-gradient(135deg, #0A0A14, #1A0E28, #2D1810);

/* Card hover - très subtil */
--gradient-card-hover: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(249,115,22,0.02));

/* Button CTA - dimension */
--gradient-cta: linear-gradient(135deg, #F97316, #FB923C);
```

### 2.3 Glow & Neon Effects

L'identité TabataGo repose sur des **effets lumineux** qui donnent vie à l'interface.

#### Glow Colors

```css
/* Glow orange - principal */
--glow-energy: 0 0 40px rgba(249, 115, 22, 0.5);
--glow-energy-intense: 0 0 80px rgba(249, 115, 22, 0.7);

/* Glow blanc - éléments actifs */
--glow-white: 0 0 20px rgba(255, 255, 255, 0.3);

/* Neon flame effect */
--neon-flame:
  0 0 10px rgba(249, 115, 22, 0.8),
  0 0 20px rgba(249, 115, 22, 0.6),
  0 0 40px rgba(249, 115, 22, 0.4);
```

#### Applications du Glow

| Élément | Effet |
|---------|-------|
| Bouton START | Glow breathing animé (pulse) |
| Flamme streak | Neon flame effect |
| Card sélectionnée | Subtle glow border |
| Phase WORK active | Ambient glow en fond |
| Countdown ≤3s | Glow rouge qui pulse |

---

## 3. Typographie

### 3.1 Police : Inter

**Pourquoi Inter ?**
- Excellent rendu sur écran
- Large gamme de weights pour le contrast mix
- Tabular nums pour le timer (pas de jitter)
- Google Fonts — gratuit et performant

### 3.2 Contrast Mix Philosophy

**Heavy pour les titres, light pour le body.** Ce contraste crée de l'impact et de l'élégance.

| Usage | Weight | Size | Exemple |
|-------|--------|------|---------|
| Timer countdown | 900 (Black) | 140px | **20** |
| Brand title | 900 (Black) | 56px | **TABATA** |
| Headlines | 800 (ExtraBold) | 32px | **Terminé !** |
| Body text | 400 (Regular) | 16px | Description du programme |
| Captions | 500 (Medium) | 14px | Labels, hints |

### 3.3 Scale Typographique

```css
/* Display - Impact maximal */
--font-countdown: 900 140px/1 Inter;
--font-display: 900 42px/1.1 Inter;
--font-headline: 800 28px/1.2 Inter;

/* Interactive */
--font-button-hero: 900 30px/1 Inter;
--font-button: 700 18px/1 Inter;

/* Body */
--font-body: 400 16px/1.5 Inter;
--font-caption: 500 14px/1.4 Inter;
--font-overline: 600 11px/1.2 Inter;
```

### 3.4 Règles Typographiques

1. **Toujours tabular-nums** pour les chiffres du timer
2. **Letter-spacing généreux** sur les all-caps (+2px minimum)
3. **Jamais de italic** sauf pour les citations
4. **Line-height serré** sur les grands titres (1.1)

---

## 4. Iconographie

### 4.1 Style : iOS Native

Utiliser des icônes qui s'intègrent naturellement à l'écosystème iOS, avec le style SF Symbols.

**Caractéristiques :**
- Lignes medium (ni trop fines ni trop épaisses)
- Coins arrondis
- Consistance visuelle
- Reconnaissance instantanée

### 4.2 Icônes Système

| Action | Icône | Style |
|--------|-------|-------|
| Play | ▶️ | SF Symbol `play.fill` |
| Pause | ⏸️ | SF Symbol `pause.fill` |
| Stop | ⏹️ | SF Symbol `stop.fill` |
| Skip | ⏭️ | SF Symbol `forward.fill` |
| Settings | ⚙️ | SF Symbol `gearshape.fill` |
| Home | 🏠 | SF Symbol `house.fill` |
| History | 📊 | SF Symbol `clock.fill` |

### 4.3 Tailles d'Icônes

| Contexte | Taille |
|----------|--------|
| Navigation tabs | 24×24px |
| Boutons controls | 28×28px |
| Cards (badges) | 16×16px |
| Headers | 20×20px |

---

## 5. Imagerie & Illustrations

### 5.1 Style : Realistic Photos

**Pas de cartoon, pas d'abstrait.** Des vraies personnes qui font du sport.

**Caractéristiques des photos :**
- Athlètes en action, pas poses statiques
- Éclairage dynamique, contrasté
- Background flou/sombre
- Diversité de corps et d'origines
- Qualité haute résolution

### 5.2 Traitement des Photos

```css
/* Overlay pour intégration dark mode */
.photo-overlay {
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
}

/* Warm tint pour cohérence brand */
.photo-tint {
  filter: saturate(1.1) sepia(0.1);
}
```

### 5.3 GIFs d'Exercices

- Durée : 1-2 secondes, loop seamless
- Format : 200×200px minimum
- Fond transparent ou sombre
- Modèle en tenue fitness neutre

---

## 6. Composants UI

### 6.1 Boutons

#### Primary CTA (Pill Filled)

```css
.cta-primary {
  background: linear-gradient(135deg, #F97316, #FB923C);
  border-radius: 9999px; /* Full pill */
  padding: 16px 40px;
  box-shadow: 0 0 40px rgba(249, 115, 22, 0.4);
}

.cta-primary:active {
  transform: scale(0.95);
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.6);
}
```

#### Secondary Button

```css
.cta-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px 24px;
}
```

### 6.2 Cards

#### Soft Elevated Cards

```css
.card {
  background: rgba(34, 34, 38, 0.8); /* DARK_RAISED */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.card-selected {
  border-color: rgba(249, 115, 22, 0.3);
  background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(249,115,22,0.02));
  box-shadow: 0 0 30px rgba(249, 115, 22, 0.2);
}
```

### 6.3 Progress Indicators

#### Progress Bar

```css
.progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
}

.progress-fill {
  background: linear-gradient(90deg, #F97316, #FB923C);
  border-radius: 9999px;
  transition: width 0.3s ease-out;
}
```

#### Creative Loading

Style : barre de progression stylisée avec glow.

```css
.loading-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  overflow: hidden;
}

.loading-fill {
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, #F97316, #FB923C);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.8);
  animation: loading-slide 1.5s ease-in-out infinite;
}
```

---

## 7. Motion & Animation

### 7.1 Philosophie : Bouncy & Playful

**Les animations doivent sentir vivantes, pas robotiques.**

| Type | Durée | Easing |
|------|-------|--------|
| Micro-interactions | 100-200ms | Ease-out |
| Transitions standard | 300-400ms | Ease-in-out |
| Animations bouncy | 400-600ms | Spring (damping: 12, stiffness: 180) |
| Breathing loops | 2000-4000ms | Ease-in-out (loop) |

### 7.2 Animations Clés

#### Glow Breathing (Bouton START)

```css
@keyframes glow-breathe {
  0%, 100% {
    box-shadow: 0 0 30px rgba(249, 115, 22, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 60px rgba(249, 115, 22, 0.5);
    transform: scale(1.02);
  }
}
```

#### Pulse (Countdown)

```css
@keyframes countdown-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
/* 200ms per tick */
```

#### Bouncy Pop (Victory)

```css
@keyframes victory-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
/* 500ms total */
```

#### Pulsing Circles (Hero)

```css
@keyframes hero-pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
/* 2000ms, staggered */
```

### 7.3 Micro-interactions Premium

| Interaction | Feedback |
|-------------|----------|
| Tap bouton | `scale(0.95)` + haptic light |
| Tap card | `scale(0.98)` + border glow fade |
| Focus input | Border glow animation |
| Swipe | Resistance elastique |
| Phase change | Cross-fade 400ms + haptic medium |

---

## 8. Effets Décoratifs

### 8.1 Flamme Neon (Streak)

La flamme représente le streak — elle doit être **lumineuse, dynamic, motivante**.

**Spécifications :**
- Style : Neon glow flame
- Animation : Scale pulse + opacity flicker
- Couleurs : Orange avec halo lumineux
- Taille : 48-80px selon contexte

```css
.neon-flame {
  filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.8))
          drop-shadow(0 0 20px rgba(249, 115, 22, 0.6))
          drop-shadow(0 0 40px rgba(249, 115, 22, 0.4));
  animation: flame-flicker 800ms ease-in-out infinite;
}

@keyframes flame-flicker {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
```

### 8.2 Pulsing Circles (Background Hero)

Utilisés pour les moments de victoire et les écrans hero.

```css
.hero-circles::before,
.hero-circles::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,115,22,0.3), transparent 70%);
  animation: hero-pulse 2000ms ease-out infinite;
}

.hero-circles::after {
  animation-delay: 1000ms;
}
```

### 8.3 Floating Particles

Particules subtiles qui flottent en arrière-plan pour ajouter de la vie.

**Spécifications :**
- Nombre : 20-50 particules
- Taille : 2-6px
- Couleur : `rgba(255,255,255,0.1)` à `rgba(249,115,22,0.2)`
- Mouvement : Slow drift, random
- Opacité : 0.1-0.3

---

## 9. Spacing & Layout

### 9.1 Whitespace Généreux

Le premium respire. **Plus d'espace = plus d'impact.**

| Token | Valeur | Usage |
|-------|--------|-------|
| `space-xs` | 4px | Inline gaps |
| `space-sm` | 8px | Between related items |
| `space-md` | 16px | Section padding |
| `space-lg` | 24px | Between sections |
| `space-xl` | 40px | Major sections |
| `space-2xl` | 64px | Hero spacing |

### 9.2 Rounded Corners

| Token | Valeur | Usage |
|-------|--------|-------|
| `radius-sm` | 8px | Tags, small elements |
| `radius-md` | 12px | Buttons medium |
| `radius-lg` | 16px | Cards |
| `radius-xl` | 20px | Large cards, bottom sheets |
| `radius-full` | 9999px | Pills, circles |

---

## 10. Son Design

### 10.1 Philosophie

Les sons doivent être **subtils mais mémorables**. Ils renforcent le feedback sans être intrusifs.

### 10.2 Sons Clés

| Événement | Son | Caractéristiques |
|-----------|-----|------------------|
| Bip phase start | Court, percutant | 200ms, fréquence montante |
| Countdown tick | Click subtil | 100ms, tone medium |
| Phase WORK start | "Go!" ou bip fort | 300ms, énergique |
| Victoire complète | Fanfare courte | 1000ms, célébration |
| Haptic sync | Synchronisé au son | Feedback tactile |

### 10.3 Intégration

- Volume par défaut : 80% pour sons, 60% pour musique
- Ducking : Sons de phase prioritaire sur musique
- Respect silent mode (option override)

---

## 11. Inspirations & Références

### 11.1 Apple Fitness+

**Ce qu'on en reprend :**
- Dark mode élégant avec accents colorés
- Gradients subtils de phase
- Typography bold et impactante
- Animations fluides et premium
- Rings de progression stylisés

### 11.2 Gymshark

**Ce qu'on en reprend :**
- Énergie et dynamisme
- Communauté et motivation
- Photography realistic fitness
- Brand bold et young

### 11.3 Gaming UI (référence secondaire)

**Ce qu'on en reprend :**
- Effets neon/glow
- Animations bouncy
- Feedback immédiat et satisfaisant
- Progress bars créatives

---

## 12. Checklist Brand Consistency

Avant chaque release, vérifier :

- [ ] **Orange utilisé comme accent dominant** (pas dilué)
- [ ] **Glow effects présents** sur les éléments interactifs clés
- [ ] **Animations bouncy** et non robotiques
- [ ] **Whitespace généreux** — pas de surcharge visuelle
- [ ] **Rounded corners** partout (pas de corners carrés)
- [ ] **Photos realistic** et non illustrées
- [ ] **Haptics synchronisés** avec les interactions
- [ ] **Dark mode soft grey** et non true black
- [ ] **Contrast typo** (heavy titles, light body)
- [ ] **Feedback sonore subtil** mais présent

---

## 13. Versions

| Version | Date | Changements |
|---------|------|-------------|
| 1.0 | 18 février 2026 | Création initiale |

---

*Document créé le 18 février 2026 — TabataGo BDSD v1.0*
