# Brief — Design System Collabz > Brief professionnel pour **concevoir un design system complet et cohérent** pour l'app mobile Collabz. L'objectif principal de cette session n'est pas un rebranding rapide, mais bien la **fondation d'un langage visuel** réutilisable dans toute l'application. --- ## 1. Collabz Collabz est une application mobile **pour les créateurs** — photographes, vidéastes, artistes visuels, voyageurs. L'app existe sur iOS et Android (React Native Expo) et propose quatre formats de contenu principaux : - **Post** — photo ou texte, permanent, feed quotidien - **Memory** — story photo/vidéo éphémère (24 h), templates créatifs - **Moment** — vidéo courte verticale, permanente - **Événement** — rencontres IRL avec date, lieu, participants, chat groupe Les créateurs publient, se suivent, échangent, organisent des rencontres. L'app doit être **belle par défaut** : le contenu (photos, vidéos) est ce qui doit primer, l'interface doit s'effacer. --- ## 2. Objectif de cette session **Concevoir un design system complet, propre et cohérent** pour l'app mobile Collabz. Le livrable attendu est une **fondation** réutilisable partout dans l'application : - Un **système de tokens** exhaustif (couleurs, typographie, espacements, rayons, ombres, animations, icônes) - Une **bibliothèque de composants** (atoms et molecules) couvrant tous les cas d'usage de l'app - Des **patterns d'écran** récurrents codifiés (layouts, navigation, modals, empty states, etc.) - Une **cohérence light/dark** parfaite (les deux modes au même niveau) - Une **identité visuelle forte et reconnaissable** Une fois le design system posé, une étape ultérieure permettra de retravailler les templates et écrans spécifiques dans le nouveau langage. **Le design system est la priorité, pas les redesigns d'écrans.** --- ## 3. État actuel Un design system existe déjà (version 0.8.0). Il est documenté dans le repository et consultable sur la vitrine publique [ds.collabz.link](https://ds.collabz.link). Il comprend : ### Tokens déjà définis - **Couleurs** : palette `light` + `dark` complète, sémantiques (primary, danger, success, warning, info, accent), muted (backgrounds pastel), states interactifs - **Brand** : couleurs identitaires persistantes entre light/dark (premium, pro) - **Espacements** : grille 8 points (none → giga) - **Rayons** : huit valeurs (none, sm, md, lg, xl, xxl, modal, pill) - **Typographie** : 4 familles (Poppins, Playfair, Oswald, Dancing) × 10 presets - **Ombres** : trois niveaux (subtle, default, prominent) - **Motion** : durées + easings + spring configs - **Taille d'icônes** : scale xs → xxl - **Opacité, z-index, hit slop, haptiques, breakpoints** ### Composants existants (20) Button, Card, AnimatedTouchable, Toast, DiscreteToast, GradientOverlay, Typography, TextInput, Modal, Badge, Avatar, Skeleton, Divider, Switch, Chip, ListItem, EmptyState, Banner, ThemedIcon, BottomSheet, et trois molecules (UserRow, NotificationRow, PostCard). ### Ce que le DS actuel ne couvre pas encore - Patterns structurels répétés dans toute l'app : Floating Action Button, BackButton, HeaderBar, StickyBottom, ScreenLayout - Modals globales (maintenance, mise à jour requise, erreur réseau) — existent en code mais pas dans le DS - Composants spécialisés aux flux créateur : éditeur de media, gallery, media picker - Identité visuelle forte : le DS actuel est fonctionnel mais neutre --- ## 4. Ce qu'on attend de la session ### Livrables prioritaires 1. **Système de tokens enrichi ou retravaillé** - Palette de couleurs complète, accessible, distinctive (light + dark alignés) - Échelle typographique cohérente (2 à 3 familles maximum) - Système d'espacement, de rayons, d'ombres - Motion et micro-interactions 2. **Bibliothèque de composants** - Revue et harmonisation des 20 composants existants - Ajout des composants structurels manquants (FAB, HeaderBar, ScreenLayout, etc.) - Composants spécialisés si nécessaires au contexte créateur 3. **Patterns d'écran** - Layouts types (feed, profil, détail, formulaire, édition) - Navigation (tab bar, headers, back) - États transverses (loading, empty, error, success) 4. **Identité visuelle** - Direction artistique claire et cohérente - Reconnaissable en quelques pixels ### Livrables secondaires (si le temps permet) - Icônes custom (jeu complet ou pictogrammes signatures) - Illustrations d'états vides - Logo ou logotype --- ## 5. Contraintes techniques | Contrainte | Détail | |---|---| | Plateforme | React Native 0.79 + Expo SDK 53 (iOS + Android) | | Mode sombre | First-class — noir pur `#000000` pour OLED | | Grille | 8-point strict (multiples de 4, idéalement 8) | | Accessibilité | WCAG 2.2 AA (contraste 4.5:1 texte normal, 3:1 gros texte) | | Touch targets | 44×44 points minimum (Apple HIG) | | Polices | 4 familles maximum (Google Fonts via `expo-font`) | | Performances | Scroll feed à 60 fps sur iPhone 12 | | Bibliothèques | Code maison privilégié — pas de Tamagui, Gluestack, NativeWind, Unistyles, UI Kitten | --- ## 6. Zones à ne pas inclure dans le design system Ces zones de l'app sont **personnalisables par l'utilisateur** (templates créatifs, thèmes de profil) et doivent rester neutres vis-à-vis du design system central : - Templates de Memories et de profil (l'utilisateur choisit couleurs et fonts) - Canvas Memories (éditeur créatif) - Écran de détail d'événement (template-driven) Le design system doit cibler **la structure de l'app** : navigation, feed, settings, création, messages, headers, modals, composants de base — c'est-à-dire les zones où la cohérence entre écrans compte plus que l'expression personnelle. --- ## 7. Personnalité visuelle recherchée - **Moderne sans être daté** : viser une durée de vie de trois à cinq ans, pas la tendance du mois - **Créateur-first** : le contenu (photo, vidéo) doit dominer visuellement - **Dense mais aéré** : beaucoup d'information possible, mais aucun écran surchargé - **Mobile-first** : pensé pour le pouce, les gestes, les formats portrait - **Dark mode premium** : le dark doit être le mode par défaut mental — pas un dérivé - **Distinctif** : reconnaissable en quelques pixels, pas "une autre app sociale" --- ## 8. Étapes ultérieures (hors session) Une fois le design system livré, les étapes suivantes seront : 1. **Handoff vers l'équipe de développement** (Claude Code) pour traduction en React Native 2. **Migration progressive écran par écran**, jamais en batch — chaque écran testé dans les deux modes avant merge 3. **Retravail des templates** (profil, memory, événement) dans le nouveau langage, si et quand pertinent Ces étapes ne font pas partie de cette session. --- ## 9. Ressources - **Vitrine publique du DS actuel** : [https://ds.collabz.link](https://ds.collabz.link) - **Documentation complète** (règles d'or, principes, changelog) : `docs/architecture/design-system.md` dans le repo - **Repo GitHub** : `quentingit/projectcollabz` — privé, accès via connexion OAuth GitHub. Scope recommandé : `app/src/design/` (tokens + composants) et `app/src/features/design-system/screens/DesignSystemSandbox.tsx` (référence visuelle live). - **Brief raw markdown** (téléchargeable) : [ds.collabz.link/rebranding-brief.md](https://ds.collabz.link/rebranding-brief.md)