Direction
Artistique
BeYourself doit "faire sentir" quelque chose de précis : l'intelligence bienveillante d'un miroir honnête. Pas un magazine. Pas une app de productivité. Un espace intime et précis.
Si BeYourself était un objet physique, ce serait un carnet Moleskine avec une couverture en cuir souple — pas un magazine de mode, pas un agenda corporate. Intime. Utile. Un peu précieux sans être ostentatoire. Quand l'utilisateur ouvre l'app, il doit ressentir : "Cet espace est fait pour moi, pas pour que je me compare aux autres."
Les trois mots-clés de la direction artistique : Intimité · Précision · Chaleur. Chaque décision visuelle — couleur, espacement, typographie, animation — est évaluée à l'aune de ces trois qualités.
Éditorial mais accessible : une typographie display à empattement (Cormorant Garamond) ancre le produit dans un registre éditorial — il y a de l'intelligence dans l'interface. Mais la typographie UI (Syne) et le corps de texte (DM Sans) restent lisibles et neutres. Ce n'est pas Vogue — c'est un journal personnel intelligent.
Sombre mais chaud : le fond est near-black mais avec une dominante chaude (#0E0C0B, pas #000000 ni #111111). Cette nuance est fondamentale : un fond froid est technique, un fond chaud est intime. BeYourself vit dans les moments intimes (le matin, le soir) — son UI doit être à l'aise dans ces moments.
Gold comme seul accent : la couleur d'accent principale est le gold (#C9A96E), pas un bleu vif ni un orange startup. Le gold signale intelligence, premium et bienveillance sans agressivité. Il est utilisé parcimonieusement — seulement sur les éléments qui méritent l'attention.
Gradients néon (violet-rose-bleu) : signalent une app B2C générique, pas un outil d'identité premium
Fond blanc avec accents colorés vifs : lecture "startup mode/lifestyle" — perd le positionnement intimité
Images stock de mannequins parfaits : signal immédiat d'exclusion pour 60% des utilisateurs
Animations excessives (parallax, particules, morphing de logos) : distraction, pas de valeur, épuise la batterie
Illustrations cartoonesques ou icônes "emoji-style" : trop décontractées pour un produit d'identité sérieux
Police sans-serif générique (Inter, Roboto) comme police principale : dilue l'identité dans la masse
Photos brutes et imparfaites des vrais vêtements des vrais utilisateurs — l'authenticité est la DA
Espaces blancs (ici noirs) généreux — la respiration est un signal de premium
Hiérarchie typographique contrastée : display italic pour l'émotion, mono pour les données, sans-serif pour l'action
Micro-animations purposeful : chaque animation répond à une action ou prépare une information
Ratio signal/bruit élevé : chaque élément à l'écran a une raison d'être
Consistance émotionnelle : le produit doit "sentir pareil" sur tous les écrans
La direction artistique de BeYourself est un positionnement, pas une esthétique. Elle dit : "Ce produit vous respecte." Chaque choix visuel — la chaleur du fond, la précision de la typo, l'économie des couleurs — est une déclaration sur les valeurs du produit envers ses utilisateurs.
Branding
En 3 secondes, l'utilisateur doit percevoir : intelligent, intime, pas une app de mode ordinaire.
Le nom BeYourself est à la fois la promesse et le positionnement. L'UI doit la rendre crédible visuellement dès le premier écran. Une app qui prétend "être soi-même" et affiche une interface générique avec des stocks photos filtrés perd immédiatement sa crédibilité.
La typographie en logo est en Cormorant Garamond — "Be" en romain, "Yourself" en italique. Cet usage de l'italique pour "Yourself" n'est pas décoratif : il signifie que "Yourself" est en mouvement, en processus, pas figé. L'identité n'est pas une destination, c'est une direction.
Le branding doit être cohérent entre l'app, les push notifications, les style cards partageables, et les écrans Pro des stylistes. Une notification BeYourself doit être reconnaissable sans voir le nom de l'app. Un utilisateur doit "sentir" BeYourself sur une screenshot TikTok parmi 20 autres.
Les éléments distinctifs reconnaissables : la palette warm-dark, les accents gold sparingly utilisés, la typographie display en italique pour les insights émotionnels, et les photos de vêtements sur fond sombre sans retouche excessive.
Un branding perçu comme premium augmente directement la willingness to pay. Les utilisateurs qui perçoivent BeYourself comme un outil sérieux et intelligent (et non comme une "app de mode sympa") convertissent à des taux 2× supérieurs. La direction artistique n'est pas cosmétique — c'est une décision business.
Le branding warm-dark différencie BeYourself de 95% des apps de mode qui utilisent des fonds blancs ou des pastels. Cette différenciation est immédiate et mémorable — un avantage lors des recommandations de bouche-à-oreille ("tu sais, l'app avec le fond sombre qui ressemble à un journal").
Design
System
Un design system n'est pas un Figma figé. C'est un contrat entre le design et le développement sur ce qui ne change jamais.
1 — Fonctionnel d'abord. Chaque composant est conçu pour résoudre un problème utilisateur précis. La beauté est une conséquence de la clarté, pas l'objectif. Si un composant est beau mais confus, il échoue.
2 — Token-based. Toutes les valeurs visuelles (couleurs, espacement, typographie, radius) existent comme des tokens nommés — jamais de valeurs hard-codées dans les composants. Changer --gold change tous les boutons primaires simultanément. Ce système permet de s'adapter au dark mode, aux états d'accessibilité, et aux futures itérations sans refactoriser.
3 — Composable, pas monolithique. Les composants sont des atomes assemblables — une Card n'est pas un écran, c'est un container. Le design system ne dicte pas les écrans, il fournit les briques.
4 — Documenté au niveau du comportement, pas juste du style. Chaque composant a une documentation qui inclut ses états, ses règles d'usage, et ses anti-patterns. Un développeur peut implémenter correctement un composant sans designer à côté.
| Niveau | Exemples | Usage |
|---|---|---|
| Primitive tokens | --gold: #C9A96E, --space-4: 16px | Valeurs brutes. Jamais utilisées directement dans les composants. |
| Semantic tokens | --color-action: var(--gold), --space-component: var(--space-4) | Signification fonctionnelle. Utilisés dans les composants. |
| Component tokens | --btn-bg: var(--color-action), --btn-padding: var(--space-component) | Spécifiques à un composant. Overridables. |
La fragmentation UI — quand chaque développeur ou designer crée ses propres variantes de composants — est le cancer silencieux d'un produit en croissance. Pour BeYourself, elle est particulièrement dangereuse car le produit repose sur une cohérence émotionnelle précise.
Règles anti-fragmentation : aucun composant sans token (pas de couleurs hex dans le code), revue design pour toute nouvelle variante, documentation "quand utiliser ce composant" obligatoire, et une règle d'or : si un composant similaire existe, l'étendre plutôt que d'en créer un nouveau.
Palette
Couleurs
Chaque couleur a une fonction. Aucune n'est là pour décorer.
Règle absolue : le Gold (#C9A96E) ne doit jamais dépasser 3 éléments visibles simultanément sur un même écran. Sa rareté est sa force. Un écran "tout or" perd instantanément la hiérarchie et l'effet premium. L'or vaut parce qu'il est rare dans le tableau.
Typographie
Trois polices, trois rôles distincts. Mélanger ces rôles crée la confusion. Les respecter crée la hiérarchie.
Cormorant Garamond (display) — Les moments émotionnels et les titres. Les insights du profil ("Voici qui tu es à travers ce que tu portes"), les headers de section, les citations du journal. L'italique de Cormorant signale l'identité en mouvement — utilisé sur les mots clés des messages d'identité.
Syne (UI) — La navigation, les labels, les badges, les méta-informations. Uppercase avec letter-spacing élevé pour les éléments fonctionnels. Ne jamais utiliser Syne en corps de texte — elle est faite pour guider, pas pour lire.
DM Sans (body) — Tout le contenu long : descriptions, explications, messages. Weight 300 par défaut, 400 pour les passages importants. Jamais bold dans le corps — bold est réservé à Syne ou Cormorant pour les points de force.
Règle anti-conflit : Cormorant Garamond et Syne ne doivent jamais apparaître sur la même ligne. L'une est émotionnelle, l'autre est fonctionnelle — les mélanger visuellement sur une même ligne crée une dissonance que l'utilisateur ressent sans pouvoir la nommer. Toujours séparer par au moins 8px de blanc vertical.
Composants
UI
Chaque composant est une décision produit encodée dans du code. Les composants critiques sont ceux vus chaque jour — ils méritent plus de soin que ceux vus une fois par mois.
| Composant | Rôle dans le système | Criticité |
|---|---|---|
| Journal Entry Card | Archive une tenue loggée avec photo, date, contexte et humeur. Doit permettre le scroll rapide — information lisible à l'œil sans devoir "lire". Photos au premier plan, texte en support. | Haute — rétention émotionnelle |
| Color Palette Strip | Affiche les couleurs dominantes du Visual DNA. Pas un graphique — des swatches de couleurs réelles extraites des items. Dimension émotionnelle forte : voir sa propre palette est souvent un moment de reconnaissance. | Haute — aha moment profil |
| Purchase Check Result | Score d'alignement + 2-3 insights texte. La présentation du score doit être neutre (pas de vert/rouge binaire) — un chiffre avec explication descriptive. | Haute — rétention premium |
| Context Input Sheet | Bottom sheet avec 3 boutons d'humeur + 3 boutons contexte. Doit prendre moins de 2 secondes à compléter. Les labels sont uniquement iconiques + un mot — pas de phrases. | Moyenne — qualité suggestion |
| Memory Trigger Card | Notification expandée ou vue in-app montrant une tenue passée. Photo en plein-bleed, date et contexte en overlay. Ton mémoriel — pas une notification fonctionnelle. | Moyenne — réengagement |
| Item Analysis Skeleton | État de chargement progressif d'un item. Pas un spinner — un skeleton qui se remplit avec les données extraites (couleur d'abord, type ensuite, silhouette ensuite). | Moyenne — perception vitesse |
| Paywall Modal | Bottom sheet avec proposition de valeur précise (pas "passez à Premium") + pricing + CTA principal. Design confiant, pas agressif. Le scroll vers le bas révèle les features — jamais de liste dense visible immédiatement. | Haute — conversion revenue |
États
Composants
Chaque état correspond à un moment utilisateur réel. Sur-designer les états invisibles est une dette produit, pas une amélioration.
| État | Token visuel | Contexte |
|---|---|---|
| default | Surface 1 + border 14% gold + text Ivory | L'état neutre. La majorité des éléments au repos. Ni actif, ni passif. |
| hover (web/desktop) | Surface 2 + border 30% gold · transition 150ms ease | Signale l'interactivité. Sur mobile : pas de hover — l'état pressed le remplace. Sur desktop, délai 100ms avant affichage pour éviter les hover accidentels. |
| pressed (mobile) | Scale 0.97 + opacity 0.85 · durée 80ms · ease-out | Feedback tactile immédiat. Durée <100ms. Si plus long → sensation de lag. Pas de couleur sur le pressed — le scale est suffisant. |
| active / selected | Border gold 100% + Gold background 8% · bold label | Élément choisi (tab actif, item sélectionné). Distinct du hover. L'utilisateur doit savoir en un coup d'œil où il se trouve. |
| disabled | Opacity 0.35 · cursor not-allowed (web) | Non-interactif. Ne jamais utiliser disabled sans expliquer pourquoi (tooltip ou helper text). Un utilisateur devant un bouton grisé sans explication est un utilisateur frustré. |
| loading | Skeleton pulse animation · durée 1.5s · ease-in-out infinite | Le skeleton pulse doit être subtil (2 stops de luminosité proches, pas blanc/gris fort). L'objectif est de signaler l'activité, pas d'attirer l'attention. |
| error | Border Rose 40% + Rose background 6% + message textuel | Jamais de rouge vif — BeYourself n'est pas agressif. Le Rose (#C47A7A) est doux mais clairement différent. L'erreur est toujours accompagnée d'une action corrective. |
| success | Border Sage 40% + Sage background 6% + check icon | Transitoire — disparaît après 2 secondes pour ne pas encombrer l'interface avec des confirmations inutiles. Exception : les actions irréversibles gardent le success visible plus longtemps. |
Le piège du sur-design d'états : créer des états hover élaborés sur mobile où ils ne seront jamais vus, ou des animations de disabled state complexes pour des éléments que l'utilisateur voit 0.5 seconde. Prioriser le soin des états les plus vus : default, pressed sur mobile, loading sur les items en analyse, error sur les uploads.
Stratégie
Iconographique
Les icônes de BeYourself sont des instruments de navigation, pas des ornements. Leur style doit être cohérent avec le positionnement : précis, chaleureux, non-générique.
Style : outlined avec arrondis subtils. Pas de filled flat (trop générique), pas de two-tone (trop complexe pour les petites tailles). Les icônes outlined s'accordent mieux avec la typographie fine (poids 300) du produit. Stroke weight : 1.5px à 24px, 1px à 16px.
Tailles normalisées : 16px (inline dans le texte), 20px (navigation), 24px (actions principales), 32px (features icons). Ne jamais utiliser des tailles intermédiaires — elles créent de la fragmentation perceptuelle.
Remplacer des labels sur des actions critiques : le bouton "Porter ça" de la suggestion matinale a un label texte — pas uniquement un coche. Une icône seule sur une action critique crée de l'incertitude. Sur les actions que l'utilisateur effectue pour la première fois, toujours label + icône.
Décorations inutiles : une icône à côté d'un titre de section n'aide pas la navigation — elle crée du bruit visuel. Réserver les icônes aux actions interactives et aux indicateurs d'état, pas à la décoration.
Icônes génériques sur les features core : l'icône de "profil" ne doit pas être un silhouette humaine générique (utilisée par 95% des apps). BeYourself est une identité visuelle — l'icône de profil est un cercle concentriqe (○●) qui évoque le miroir et la réflexion. Ce niveau de soin différencie le produit dans la mémoire iconique des utilisateurs.
Animations
Chaque animation doit répondre à "pourquoi ?" Si la réponse est "parce que c'est joli", supprimer l'animation.
Animations interdites : parallax sur le scroll (épuise la batterie, mal de tête sur mobile), morphing d'éléments complexes (désoriente), animations en boucle infinie visibles (distrait de l'usage). Règle d'or : toute animation qui peut être "réduite" dans les paramètres d'accessibilité mobile DOIT être annulée quand `prefers-reduced-motion` est activé.
Micro-Interactions
Les micro-interactions que l'utilisateur ne remarque pas sont les meilleures. Il remarque leur absence, pas leur présence.
La card de suggestion pulse (scale spring) + le bouton "Porter ça" se remplace par un checkmark Sage pendant 1.5 secondes, puis disparaît. L'utilisateur a une confirmation claire sans modale.
Le nouvel item "rejoint" le grid depuis le bas de l'écran avec une légère animation. Visuellement, l'item s'intègre dans la collection existante — pas juste un ajout statique. Signal émotionnel : "tu as construit quelque chose."
Quand le Score passe un palier (25, 50, 75), une micro-animation sur le chiffre (scale léger) + un message contextuel ("Tu es plus cohérent que 73% des utilisateurs"). Jamais de confettis — trop régressif pour le positionnement.
Le score du purchase check ne s'affiche pas instantanément — il s'anime de 0 au résultat final (600ms counter). Ce délai crée la perception d'un calcul réel et précis. Un score qui apparaît immédiatement sans animation perd en crédibilité.
En swipant une suggestion pour voir les alternatives, la card résiste légèrement (haptic feedback iOS/Android + rubber-band effect) avant de céder. Cette résistance physique signale que l'action a un coût — la suggestion précédente était bonne, on "force" pour voir d'autres.
Long-press sur un item du dressing → context menu en bottom sheet avec : "Voir les combos", "Logger porté aujourd'hui", "Vérifier si vendre" (vers Vinted check). Accessible en 1 geste, sans naviguer vers l'item detail.
Dark
Mode
BeYourself est dark-first — pas dark-option. Le dark mode n'est pas un thème alternatif, c'est le thème principal.
BeYourself est utilisé à deux moments émotionnellement chargés : le matin au réveil (yeux pas encore ouverts) et le soir (journal, rétrospective). Dans ces deux contextes, un fond blanc agressif est une friction physique réelle. Le dark mode réduit la fatigue oculaire et améliore l'expérience des moments d'usage les plus fréquents.
Par ailleurs, le fond sombre renforce le positionnement premium-intime. Les vêtements photographiés ressortent mieux sur fond sombre que sur fond blanc — les couleurs réelles sont plus fidèles, les textures plus visibles. C'est un argument product-photography autant qu'un argument UX.
Usage matin et soir · Réduction fatigue oculaire · Couleurs vêtements plus fidèles · Positionnement premium
Disponible en option système · Cohérence émotionnelle maintenue · Mêmes tokens, inversés · Jamais blanc pur
Le light mode n'est jamais blanc pur. Le fond est #F5F2EB (warm cream) — la même chaleur que l'Ivory du dark mode, inversée. Un fond blanc pur (#FFFFFF) est froid et clinique — incompatible avec le positionnement.
Les accents gold restent identiques — ils fonctionnent sur fond sombre comme sur fond clair. Le texte principal passe à #1A1714 (warm near-black). Les surfaces utilisent des beiges chauds. Le système de tokens garantit que ce changement de thème est atomique et cohérent.
Guidelines
UI
Les guidelines qui empêchent la dérive. Une équipe qui grandit a besoin de règles partagées, pas de jugements subjectifs.