← Spec Nocturne v1.0 (actuelle)

Archive · Brief v0.8 → v1.0

Document de cadrage passe a Claude Design pour la refonte du DS. Conserve pour la tracabilite des decisions.

Télécharger (.md)

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. 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

  • 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
  • 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
  • Patterns d'écran
  • Layouts types (feed, profil, détail, formulaire, édition)
  • Navigation (tab bar, headers, back)
  • États transverses (loading, empty, error, success)
  • 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

    ContrainteDétail
    PlateformeReact Native 0.79 + Expo SDK 53 (iOS + Android)
    Mode sombreFirst-class — noir pur #000000 pour OLED
    Grille8-point strict (multiples de 4, idéalement 8)
    AccessibilitéWCAG 2.2 AA (contraste 4.5:1 texte normal, 3:1 gros texte)
    Touch targets44×44 points minimum (Apple HIG)
    Polices4 familles maximum (Google Fonts via expo-font)
    PerformancesScroll feed à 60 fps sur iPhone 12
    BibliothèquesCode 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 :

  • Handoff vers l'équipe de développement (Claude Code) pour traduction en React Native
  • Migration progressive écran par écran, jamais en batch — chaque écran testé dans les deux modes avant merge
  • 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
  • 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