---
version: alpha
name: BoutiK V2
description: Identité visuelle de l'application BoutiK — gestion de boutique et point de vente pour le commerce africain. Chaleureuse, accessible et professionnelle.

colors:
  # ─── Brand ───────────────────────────────────────────────
  primary: "#118F9C"          # Teal — couleur principale de la marque
  primary-dark: "#0D7280"     # Teal foncé — hover, états actifs
  primary-light: "#E0F4F6"    # Teal très clair — badges, surfaces accentuées (light)

  # ─── Accent ──────────────────────────────────────────────
  accent: "#C85A4A"           # Coral — éléments émotionnels, erreurs, pin logo
  accent-light: "#FAEAE8"     # Coral clair — fonds d'alerte douce

  # ─── Functional ──────────────────────────────────────────
  warning: "#D97706"          # Ambre orangé — alertes, stocks faibles
  success: "#059669"          # Vert émeraude — confirmations, paiements réussis
  info: "#2563EB"             # Bleu — informations, liens

  # ─── Dark theme surfaces ─────────────────────────────────
  background-dark: "#0B3C49"  # Fond principal dark
  surface-dark: "#0F4B5C"     # Cards, app bar, nav bar dark
  surface-variant-dark: "#1A5F72" # Inputs, chips, états hover dark
  border-dark: "#1A5F72"      # Bordures dark
  text-primary-dark: "#F0F4F6"  # Texte principal dark
  text-secondary-dark: "#7AACB5" # Texte secondaire dark
  divider-dark: "#1AFFFFFF"   # Séparateurs dark (10% blanc)

  # ─── Light theme surfaces ────────────────────────────────
  background-light: "#E6E6E6" # Fond principal light
  surface-light: "#FFFFFF"    # Cards, app bar, nav bar light
  surface-variant-light: "#F0F4F5" # Inputs, chips, états hover light
  border-light: "#D0D8DA"     # Bordures light
  text-primary-light: "#0B2730" # Texte principal light
  text-secondary-light: "#4D7C87" # Texte secondaire light
  divider-light: "#D0D8DA"    # Séparateurs light

  # ─── Secondary (révisé) ──────────────────────────────────
  secondary: "#5FA8A0"        # Bleu-vert doux — remplace l'ambre F59E0B (peu utilisé, trop proche du warning)

typography:
  display:
    fontFamily: Inter
    fontSize: 2.25rem
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: "-0.02em"
  headline:
    fontFamily: Inter
    fontSize: 1.5rem
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: "-0.01em"
  title:
    fontFamily: Inter
    fontSize: 1.125rem
    fontWeight: 600
    lineHeight: 1.4
  body:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: Inter
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.4
  label:
    fontFamily: Inter
    fontSize: 0.875rem
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: "0.01em"

rounded:
  sm: 6px
  md: 12px
  lg: 20px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    rounded: "{rounded.md}"
    padding: 14px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "#FFFFFF"
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
  card:
    backgroundColor: "{colors.surface-light}"
    rounded: "{rounded.md}"
    padding: 16px
  input:
    backgroundColor: "{colors.surface-variant-light}"
    rounded: "{rounded.md}"
    padding: 16px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "#FFFFFF"
    rounded: "{rounded.sm}"
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "#FFFFFF"
    rounded: "{rounded.sm}"
  badge-error:
    backgroundColor: "{colors.accent}"
    textColor: "#FFFFFF"
    rounded: "{rounded.sm}"
---

## Overview

BoutiK est une application de gestion de boutique et de point de vente conçue pour les commerçants africains. L'identité visuelle combine la confiance professionnelle (teal profond) avec la chaleur humaine (coral doux, formes arrondies). L'expérience doit être rassurante, simple et accessible, y compris pour des utilisateurs peu technophiles.

Le logo actuel — carte de l'Afrique en teal avec pin de localisation coral et wordmark "BoutiK" — est conservé comme base de l'identité. Il ancre la marque dans son territoire tout en signalant la fonctionnalité de géolocalisation / point de vente.

## Colors

### Palette existante et présence mesurée

Analyse effectuée sur `lib/` (195 fichiers Dart, 899 occurrences de tokens `AppColors.*`).

| Token | Hex | Rôle | Occurrences | Présence |
|-------|-----|------|-------------|----------|
| `primary` | `#118F9C` | Teal — actions principales, focus, sélection | 357 | **39,7 %** |
| `error` | `#C85A4A` | Coral — erreurs, suppressions, accents émotionnels | 190 | **21,1 %** |
| `warning` | `#D97706` | Ambre orangé — alertes, stocks faibles | 74 | **8,2 %** |
| `success` | `#059669` | Vert — confirmations, succès | 62 | **6,9 %** |
| `textSecondaryDark` | `#7AACB5` | Texte secondaire dark | 40 | 4,5 % |
| `info` | `#2563EB` | Bleu — infos, liens | 31 | 3,5 % |
| `textPrimaryDark` | `#F0F4F6` | Texte principal dark | 30 | 3,3 % |
| `borderDark` | `#1A5F72` | Bordures dark | 30 | 3,3 % |
| `surfaceDark` | `#0F4B5C` | Surfaces dark | 24 | 2,7 % |
| `backgroundDark` | `#0B3C49` | Fond dark | 14 | 1,6 % |
| `primaryDark` | `#0D7280` | Teal foncé | 7 | 0,8 % |
| `surfaceVariantDark` | `#1A5F72` | Surfaces variantes dark | 4 | 0,4 % |
| `secondary` (ancien) | `#F59E0B` | Ambre — **remplacé** | 3 | 0,3 % |

### Palette révisée (recommandation)

**Conservé tel quel :**
- Primary teal `#118F9C` — fort taux d'usage, bien distinctif, cohérent avec le logo.
- Coral `#C85A4A` — utilisé pour les erreurs et le pin du logo ; à réserver aux moments émotionnels.
- Success / warning / info — palette fonctionnelle standard et contrastée.

**Modifié :**
- ~~`secondary` `#F59E0B`~~ → `secondary` `#5FA8A0` (bleu-vert doux). L'ancien ambre était quasi inutilisé (0,3 %) et trop proche du warning. Le nouveau bleu-vert apporte une touche chaleureuse sans concurrencer le teal.

**À utiliser avec parcimonie :**
- `primaryLight` et `errorLight` : aujourd'hui inutilisés dans le code, mais utiles pour les badges, surfaces accentuées et états désactivés.

### Règles d'usage

- **Primary** : boutons principaux, liens actifs, éléments sélectionnés, focus. Toujours avec texte blanc.
- **Coral / accent** : erreurs, actions destructrices, notifications importantes, pin logo. Ne pas l'utiliser pour des éléments décoratifs.
- **Success** : confirmations de paiement, stock réussi, opérations terminées.
- **Warning** : alertes stock faible, champs obligatoires manquants, synchronisation en attente.
- **Info** : messages informatifs, tooltips, liens externes.
- **Secondary (nouveau)** : accents secondaires, tags, illustrations, états désactivés actifs.

## Typography

### Police principale : **Inter**

**Pourquoi Inter ?**
- Police variable open source, optimisée pour les écrans et les petites tailles.
- Excellente lisibilité sur mobile (chiffres tabulaires, x-height élevée).
- Recommandée par Google et largement adoptée pour les applications de productivité / SaaS.
- Distincte de Roboto (plus moderne, moins "système") tout en restant neutre et professionnelle.
- Supporte les graisses 400 → 700, idéal pour la hiérarchie BoutiK.

**Usage dans les maquettes :**
- Titres : Inter 600–700, tailles 18–24 px.
- Corps : Inter 400, 14–16 px, line-height 1.4–1.5.
- Labels / boutons : Inter 600, 13–14 px, letter-spacing léger.

**Police du logo :** Poppins est conservée pour le wordmark "BoutiK" (cohérence avec l'existant), mais Inter devient la police d'interface.

## Iconography

**Style : Material Symbols Rounded**

- Cohérent avec l'écosystème Flutter/Material déjà en place.
- Les coins arrondis renforcent le ton chaleureux et accessible.
- Utiliser la graisse 400–500, taille 20–24 px dans les bars et 18–20 px dans les listes.

**Règles :**
- Toujours accompagner les icônes d'un label texte pour les actions critiques (vente, suppression, paiement).
- Ne pas utiliser d'icônes seules dans la navigation principale.
- Couleur : `text-primary` ou `primary` selon l'état ; jamais de couleur fonctionnelle (rouge/vert) sans label.

## Components

### Buttons
- Hauteur 52 px, radius 12 px, largeur pleine sur mobile.
- Primary : fond teal, texte blanc, Inter 600 16 px.
- Hover / pressed : `primary-dark`.
- Outline : fond transparent, bordure `border-*`, texte `primary`.

### Cards
- Radius 12 px, padding 16 px, ombre 0 (bordure 1 px à la place).
- Light : fond `surface-light`, bordure `border-light`.
- Dark : fond `surface-dark`, bordure `border-dark`.

### Inputs
- Fond `surface-variant-*`, radius 12 px, padding 16 px.
- Focus : bordure `primary` 2 px.
- Erreur : bordure `accent` + message d'erreur en `accent`.

### Badges / Chips
- Radius 6–12 px, padding 4–8 px.
- Success : fond `success`, texte blanc.
- Warning : fond `warning`, texte blanc.
- Error : fond `accent`, texte blanc.

### Navigation
- Bottom nav : fond `surface-*`, icône + label.
- Item sélectionné : icône et label `primary`, indicateur `primary` à 12–20 % d'opacité.

## Do's and Don'ts

### ✅ Do
- Utiliser le teal comme couleur dominante d'action.
- Réserver le coral aux erreurs et au logo.
- Associer chaque couleur fonctionnelle à un texte explicite (jamais de couleur seule).
- Garder les surfaces propres : bordures fines plutôt qu'ombres portées.
- Utiliser Inter partout dans l'interface.

### ❌ Don't
- Ne pas utiliser l'ancien ambre `#F59E0B` comme couleur secondaire.
- Ne pas utiliser de dégradés sur les boutons ou les surfaces principales.
- Ne pas centrer le texte de corps ni le mettre en majuscules.
- Ne pas utiliser Poppins pour l'interface (réservée au logo).
- Ne pas ajouter d'ombres sur les cards (utiliser les bordures 1 px).

## Assets

| Asset | Chemin | Usage |
|-------|--------|-------|
| Logo horizontal dark | `assets/svg/boutik_logo_dark.svg` | Fonds clairs, documents, impression |
| Logo horizontal light | `assets/svg/boutik_logo_light.svg` | Fonds sombres, app dark mode |
| Icône seule | `assets/svg/boutik_icon.svg` | Favicon, launcher, avatar |

## Prochaines étapes

1. Valider cette charte avec l'équipe.
2. Produire les maquettes HTML des écrans clés (login, dashboard, vente, stock, clients, paramètres).
3. Décliner la charte en thème Flutter (mise à jour de `lib/core/theme/app_theme.dart`).
4. Exporter les tokens vers Tailwind / DTCG si besoin pour le site vitrine.