---
title: "Reborn&Be Design System"
version: "Version finale"
scope: "Charte graphique digitale, composants, patterns de page"
status: "Proposition de direction artistique"
---

# Reborn&Be Design System

## 1. Vision

La charte transforme Reborn&Be en design system digital utilisable par une équipe produit, marketing ou communication.

Elle suit la logique d'un écosystème Be : un logo commun, une structure commune, une ligne graphique commune, un fond commun, une typographie commune et une seule différence visible par univers : la couleur d'accent.

L'objectif n'est plus seulement de présenter des couleurs et des typographies. La charte doit montrer comment construire des interfaces cohérentes, lisibles et premium avec l'identité Reborn&Be.

Principes directeurs :

- garder la douceur et la lisibilité de Reborn&Be
- passer d'un univers tiers-lieux à un positionnement d'opérateur urbain plus structuré
- rendre le système plus structuré et plus mature
- utiliser le blanc comme base principale
- limiter chaque univers à trois couleurs : fond commun, contraste commun, accent
- réserver les fonds sombres aux moments de marque forts
- porter la hiérarchie par les graisses typographiques, pas par des effets
- supprimer les formes arrondies : le logo oiseau suffit
- introduire une ligne graphique commune pour structurer les interfaces
- rendre les composants réutilisables
- montrer des patterns de page concrets
- documenter les règles pour éviter les interprétations faibles

## 2. Positionnement graphique

La charte est pensée comme une charte digitale éditoriale et opérationnelle.

Architecture commune :

- logo commun
- mention Reborn & Be comme structure
- ligne graphique commune sous la structure
- liste des univers Be avec leur accent couleur
- même fond
- même typographie
- même structure
- seule différence : couleur d'accent

Elle doit pouvoir servir à :

- créer une page marque
- présenter une offre
- structurer une page service
- composer une landing page sobre
- documenter des composants
- préparer une déclinaison produit ou SaaS
- aligner des équipes sur les règles d'usage

La direction artistique repose sur trois idées :

- clarté : l'information doit être immédiatement lisible
- contraste : les temps forts utilisent le dark, les contenus utiles restent sur fond clair
- système : chaque élément doit pouvoir être réutilisé sans recréer une nouvelle esthétique

## 3. Typographie

### Familles

Typographie unique :

- Barlow
- Inter en alternative
- poids recommandés : 400, 600, 700, 800
- usage : titres, paragraphes, navigation, boutons, formulaires, règles, captions
- raison : lisibilité, cohérence et Green IT

### Règles typographiques

À faire :

- utiliser Barlow pour créer une personnalité forte
- limiter la largeur des grands titres
- conserver une hauteur de ligne suffisante
- utiliser Barlow pour toute l'interface
- garder les boutons en Barlow Bold
- utiliser les graisses pour créer la hiérarchie

À éviter :

- superposer les spécimens typographiques
- réduire la hauteur de ligne sous le seuil de lisibilité
- créer la hiérarchie avec des effets visuels plutôt qu'avec les graisses
- multiplier les tailles sans logique
- créer des titres trop grands dans des cartes étroites

### Échelle recommandée

Display :

- font: Barlow ExtraBold
- size: 72-112px desktop
- line-height: 0.92-1
- usage: hero, statement, section de marque

Heading large :

- font: Barlow ExtraBold
- size: 56px
- line-height: 64px
- usage: titres très expressifs, hero, messages de marque courts

Heading medium :

- font: Barlow ExtraBold
- size: 32px
- line-height: 34px
- usage: titres de section, titres de modules, accroches secondaires

Heading small :

- font: Barlow Bold
- size: 16px
- line-height: 24px
- usage: surtitres, labels, petits titres de bloc

Current text :

- font: Barlow Regular
- size: 18px
- line-height: 26px
- usage: paragraphes, contenus longs, descriptions

Buttons / CTA :

- font: Barlow Bold
- size: 14-16px
- line-height: 20px
- usage: boutons, liens d'action, appels à l'action

## 4. Couleurs

La charte simplifie les couleurs de marque et les organise en système.

Règle commune :

- 1 fond clair commun : #F7F9FA
- 1 couleur de contraste commune : #142B38
- 1 couleur d'accent par univers

La couleur d'accent peut être légèrement ajustée pour se rapprocher des codes ODD quand cela renforce la cohérence symbolique. Be-Spaces utilise un violet plus éclatant dérivé de l'identité historique `#6E4688`, ajusté en `#8E44AD`. Be-Village reprend l'ancien rose de Be-Spaces `#DD1367`.

Les logos des grilles de démonstration utilisent les SVG de référence comme masques CSS : la forme reste inchangée, seule la couleur d'accent est appliquée pour aligner l'écosystème sur la logique ODD.

## 4.1. Système de logos

La charte introduit une section logo commune pour toutes les marques de l'écosystème.

Structure :

- symbole commun : `Logo/Shape.svg`
- déclinaisons colorées : `Logo/Shape-[marque].svg`
- nom de marque composé en Barlow Condensed ExtraBold
- couleur unique : accent de la marque appliqué au symbole et au nom
- fond : blanc ou `#F7F9FA`
- aucune ombre
- aucune variante de forme par marque

Exception :

- Campus 112 et Be-Tiers-Lieux sont traités comme des logos spécifiques
- ils restent rattachés à l'écosystème, mais ne suivent pas la structure commune `shape + nom`
- ils doivent être présentés dans une zone dédiée pour éviter de les confondre avec les déclinaisons communes
- les PNG officiels sont disponibles dans `exports/logos/campus-112/` et `exports/logos/be-tiers-lieux/`

Règle :

- le shape reste identique pour toutes les marques
- la différence entre les marques passe uniquement par la couleur d'accent et le nom
- le nom doit rester lisible, en capitales, sans effet graphique supplémentaire
- Be-Village utilise le rose `#DD1367`
- Be-Spaces utilise le violet `#8E44AD`

### Reborn & Be

- background: #F7F9FA
- contrast: #142B38
- accent: #0A97D9

### Be-Spaces

- background: #F7F9FA
- contrast: #142B38
- accent: #8E44AD

### Be-Village

- background: #F7F9FA
- contrast: #142B38
- accent: #DD1367

### Be-Coworking

- background: #F7F9FA
- contrast: #142B38
- accent: #26BDE2

### Be-Services

- background: #F7F9FA
- contrast: #142B38
- accent: #A21942

### Be-Club

- background: #F7F9FA
- contrast: #142B38
- accent: #00689D

### Be-Franchise-lab

- background: #F7F9FA
- contrast: #142B38
- accent: #FD6925

### Be-Numerik

- background: #F7F9FA
- contrast: #142B38
- accent: #4C9F38

### Be-Cosmo

- background: #F7F9FA
- contrast: #142B38
- accent: #FD9D24

### Campus 112

- background: #F7F9FA
- contrast: #142B38
- accent: #DDA63A

### Be-Formation

- background: #F7F9FA
- contrast: #142B38
- accent: #C5192D

### Be-Tiers-Lieux

- background: #F7F9FA
- contrast: #142B38
- accent: #3F7E44

## 4.2. Section spécifique Campus 112

Campus 112 ne doit pas être traité comme une simple déclinaison monochrome. Son logo contient une colonne de couleurs qui peut devenir une signature graphique plus riche, à condition de garder une règle d'usage claire.

Socle recommandé :

- fond principal : #FFFFFF
- fond secondaire : #F7F9FA
- contraste texte : #142B38 ou #000000 selon le support
- accent principal : #DDA63A
- signature : bande multicolore issue du logo

Palette logo Campus 112 :

- orange : #FD9D24
- bleu : #0A97D9
- violet : #8E44AD
- rose : #DD1367
- cyan : #26BDE2
- bordeaux : #A21942
- vert : #4C9F38
- bleu profond : #00689D
- orange vif : #FD6925
- doré Campus : #DDA63A
- rouge : #C5192D
- vert feuille : #3F7E44

Rôles d'usage :

- le noir ou le contraste sombre porte le logo, les titres, la navigation et les contenus longs
- le doré `#DDA63A` sert d'accent principal pour les CTA secondaires, les repères de section, les pictogrammes et les détails de marque
- la bande multicolore sert de signature Campus 112 dans les heroes, séparateurs, pieds de section, modules événementiels ou présentations de parcours
- les couleurs secondaires peuvent être associées à des catégories, programmes, offres, niveaux ou espaces, mais une seule couleur secondaire doit dominer un module donné

À faire :

- utiliser la bande complète pour identifier immédiatement Campus 112
- construire les interfaces sur blanc ou fond clair pour préserver la lisibilité
- utiliser les couleurs saturées en aplats courts : tags, chiffres, pictogrammes, bordures, repères
- garder les CTA principaux simples : noir, blanc ou doré

Visuels Campus à présenter dans la section dédiée :

- `Campus/Campus entreprises.png`
- `Campus/Campus etudiants.png`
- `Campus/Campus evenementiel.png`
- `Campus/Campus living lab.png`

Téléchargement :

- proposer le dossier `Campus` sous forme de ZIP : `exports/Campus.zip`

À éviter :

- utiliser toutes les couleurs comme fond permanent de page
- poser du texte long sur des aplats saturés
- mélanger plusieurs couleurs dans un même bouton
- remplacer le logo officiel par une recomposition typographique
- faire de Campus 112 une déclinaison uniquement jaune

### Règles couleur

À faire :

- utiliser le blanc comme fond principal
- utiliser les couleurs de marque en accents
- utiliser le fond clair commun pour les modules secondaires
- utiliser le dark pour les sections éditoriales ou de conversion
- garder un contraste élevé sur les fonds sombres

À éviter :

- appliquer une couleur de marque en fond massif sur toute une page
- utiliser des ombres décoratives
- mélanger trop de marques dans un même module
- dépasser trois couleurs par univers

## 5. Grille, layout et spacing

La charte repose sur une grille claire, éditoriale et stable.

Conteneur :

- max-width principal : 1440px
- max-width étendu : 1440px
- grille desktop : 12 colonnes sur une base 1440px
- marges latérales : 24px mobile, 40px tablette, 64px+ desktop

Spacing :

- base : 8px
- section compacte : 72px
- section standard : 112px
- section immersive : 128px+
- module spacing : 120px

Règles :

- heading medium / paragraph spacing : 16px
- heading small / paragraph spacing : 8px
- heading medium / heading small spacing : 24px
- paragraph / call to action spacing : 40px
- icon / heading medium spacing : 40px
- alignement content : left
- alignement call to action : left

## 6. Forme, radius, bordures, ombres

Radius :

- radius global : 0px
- les composants restent nets, précis et sans arrondis

Bordures :

- 1px solide
- couleur neutre ou teintée par la marque
- utilisée pour structurer sans ajouter d'ombre

Ombres :

- opacity: 0%
- blur: 0
- x: 0
- y: 0

La séparation se fait par :

- contraste de fond
- bordure
- espacement
- hiérarchie typographique
- ligne graphique commune

## 7. Composants clés

### Navigation

Règles :

- hauteur : 86px
- logo side menu : 103x24px
- active menu font : Barlow Bold
- menu font : Barlow SemiBold
- fond principalement blanc
- état actif visible
- CTA clair

Variantes :

- navigation horizontale
- navigation dark pour hero ou section immersive
- menu latéral pour documentation

### Buttons

États :

- filled : fond couleur principale, texte blanc
- outline : fond blanc, bordure couleur principale, texte couleur principale
- ghost : fond transparent, texte couleur principale
- dark : fond blanc sur section sombre

Règles :

- font : Barlow Bold
- radius : 0px
- hauteur minimale : 44-48px
- hover : déplacement léger ou changement de contraste
- focus visible obligatoire

### Textfields

Règles :

- font : Barlow Regular
- height : 47px
- icons : 16x16px
- radius : 0px
- border : 1px

États :

- default : fond blanc, bordure neutre
- hover : bordure couleur principale
- filled : fond doux de marque, icône couleur principale
- active/focus : bordure et icône couleur principale

### Cards

Règles :

- utiliser les cartes pour des éléments répétés
- éviter les cartes imbriquées
- fond blanc commun
- bordure 1px
- radius 0px
- pas d'ombre

### Sections dark

Usage :

- hero de marque
- message éditorial
- CTA de conversion
- navigation spéciale
- bloc de synthèse stratégique

Règles :

- texte clair
- contraste vérifié
- couleurs de marque en accents courts
- pas de surdécoration

## 8. Patterns de page

### Hero brand

Structure :

- logo ou nom de marque
- titre court et fort
- texte descriptif
- CTA principal
- aperçu système ou visuel de marque

### Section identité

Structure :

- titre de section
- texte d'introduction
- grille de logos
- règles d'usage ou liens de téléchargement

### Section typographie

Structure :

- description des familles
- spécimens lisibles
- échelle d'usages : Display, Heading large, Heading medium, Heading small, Current text, Buttons / CTA
- tableau de règles
- liens de téléchargement
- aucun spécimen ne doit se superposer au texte ou au visuel

### Section couleurs

Structure :

- palettes par marque
- rôle des couleurs
- liens vers pages d'identité
- comparaison des territoires

### Section composants

Structure :

- boutons
- champs
- navigation
- cards
- états hover/focus

### Section exemples réels

Structure :

- hero de page
- texte + image
- grille de services
- bloc CTA
- section dark éditoriale
- cards sur fond clair
- navigation exemple

## 9. Améliorations intégrées

- hiérarchie visuelle forte
- composants structurés
- lecture claire des palettes
- cas d'usage concrets
- documentation exploitable pour une équipe
- séparation nette entre texte et visuel
- spécimens typographiques sans superposition
- dark sections justifiées par des temps forts
- patterns de page crédibles
- règles d'usage explicites

## 10. Incohérences corrigées

- Les textes de spécimens ne doivent jamais se superposer.
- Le hero doit garder une distance claire entre texte et visuel.
- Les fonds de page restent principalement blancs.
- Les ombres décoratives ne sont pas reprises.
- Les couleurs de marque sont utilisées comme système, pas comme décoration.
- Les boutons utilisent Barlow, pas une autre typographie.
- Les champs de saisie sont codés en HTML/CSS, pas sous forme d'image.
- La navigation est codée et utilisable.

## 11. Recommandations pour la suite

Priorité 1 :

- valider la charte avec les parties prenantes
- confirmer Barlow comme référence principale et Inter comme alternative technique
- créer une page identité dédiée pour Be-Cosmo avec la palette simplifiée

Priorité 2 :

- créer une bibliothèque de composants Figma
- documenter les états interactifs complets
- préparer des templates de pages
- établir des règles d'accessibilité couleur

Priorité 3 :

- décliner le design system dans un site ou produit réel
- créer des tokens CSS partagés
- versionner la charte comme un produit interne

## 12. Tokens CSS recommandés

La charte doit être traduite en tokens pour limiter les valeurs isolées dans les maquettes et dans le code.

### Couleurs

Tokens globaux :

- `--color-background: #F7F9FA`
- `--color-contrast: #142B38`
- `--color-text: #142B38`
- `--color-muted: #516675`
- `--color-surface: #FFFFFF`
- `--color-border: rgba(20, 43, 56, 0.18)`
- `--color-dark: #142B38`

Tokens de marque :

- `--color-accent`

### Spacing

- `--space-4: 4px`
- `--space-8: 8px`
- `--space-12: 12px`
- `--space-16: 16px`
- `--space-24: 24px`
- `--space-40: 40px`
- `--space-72: 72px`
- `--space-112: 112px`
- `--space-120: 120px`

### Typography

- `--font-heading: "Barlow"`
- `--font-body: "Barlow"`
- `--font-fallback: "Inter"`
- `--font-weight-regular: 400`
- `--font-weight-semibold: 600`
- `--font-weight-bold: 700`
- `--font-weight-display: 800`
- `--line-display: 0.92`
- `--line-body: 1.5`

### Shape et motion

- `--radius-base: 0px`
- `--border-base: 1px`
- `--shadow-opacity: 0%`
- `--graphic-line: 1px`
- `--motion-fast: 160ms`
- `--motion-standard: 220ms`

## 13. États complets des composants

Chaque composant interactif doit documenter au minimum :

- default
- hover
- active
- focus
- disabled
- loading si l'action peut être asynchrone
- error pour les champs et formulaires

### Buttons

Default :

- filled, outline, soft ou ghost selon le contexte

Hover :

- léger déplacement maximum 1px
- contraste légèrement renforcé

Active :

- couleur plus dense
- aucun changement de taille

Focus :

- outline visible
- ne pas dépendre uniquement de la couleur

Disabled :

- contraste réduit
- interaction supprimée

Loading :

- conserver la largeur du bouton
- afficher un indicateur sans déplacer le label

### Inputs

Default :

- fond blanc
- bordure neutre

Hover :

- bordure couleur principale

Filled :

- fond soft de marque
- icône ou bordure couleur principale

Focus :

- bordure couleur principale
- outline visible si nécessaire

Error :

- message d'aide textuel obligatoire
- ne pas utiliser uniquement la couleur

Disabled :

- fond neutre
- texte atténué

## 14. Accessibilité

La charte doit respecter une base d'accessibilité exploitable.

Règles :

- texte courant minimum 16px
- boutons et zones cliquables minimum 44px de hauteur
- focus visible sur liens, boutons, champs et navigation
- contraste élevé sur les sections dark
- pas d'information portée uniquement par la couleur
- textes de boutons explicites
- images importantes avec texte alternatif
- animations désactivables via `prefers-reduced-motion`

À éviter :

- texte clair sur fond soft trop pâle
- titre immense dans une carte étroite
- CTA seulement différencié par sa couleur
- placeholder utilisé comme label unique
- navigation sans état actif

## 15. Templates de pages

### Page marque

Structure recommandée :

- hero avec logo et territoire de marque
- palette appliquée
- règles typographiques
- composants dans la couleur de marque
- exemples de modules
- liens de téléchargement

### Page service

Structure recommandée :

- hero de service
- bénéfices clés
- image ou preuve visuelle
- grille de services
- témoignage ou preuve
- CTA clair

### Page conversion / contact

Structure recommandée :

- promesse courte
- formulaire simple
- coordonnées ou réassurance
- champs accessibles
- CTA principal
- message d'aide

## 16. Voice & tone

La charte doit aussi guider l'écriture.

### Titres

À faire :

- titres courts
- mots concrets
- bénéfice ou usage clair
- éviter les doubles messages

À éviter :

- slogans trop abstraits
- phrases longues en capitales
- jargon interne non expliqué

### CTA

Formulations recommandées :

- Découvrir
- Télécharger
- Explorer
- Contacter
- Voir l'identité
- Lire le design.md

À éviter :

- En savoir plus partout
- CTA trop longs
- verbes ambigus

### Texte courant

Règles :

- une idée par phrase
- paragraphes courts
- ton professionnel et accessible
- vocabulaire clair

## 17. Iconographie

Tailles :

- 16x16px : champs, petits contrôles, éléments d'interface
- 24x24px : actions principales, navigation secondaire
- 80x80px : icônes de modules

Style :

- stroke régulier
- bouts simples, sans arrondis ajoutés
- couleur liée à l'état du composant
- pas d'icône décorative si elle ne clarifie pas l'action

Règles :

- toujours aligner l'icône avec le texte
- garder un espacement stable entre icône et label
- ne pas mélanger plusieurs styles d'icônes

## 18. Motion

La motion doit clarifier l'interface, pas l'animer pour elle-même.

Règles :

- durée courte : 160ms à 220ms
- hover : déplacement maximum 1px
- transition sur couleur, bordure, transform
- pas d'animation décorative permanente
- respecter `prefers-reduced-motion`

Usages acceptés :

- hover bouton
- focus champ
- état actif navigation
- apparition légère de contenu si nécessaire

## 19. Do / Don’t visuels

Do :

- fond blanc dominant
- accents couleur courts
- contraste fort dans les sections dark
- titres Barlow lisibles
- composants codés
- bordures nettes
- espacements généreux

Don’t :

- fond coloré massif sur toute une page
- superposition de titres
- ombres décoratives
- cartes imbriquées
- mélange de toutes les couleurs de marque dans un même module
- texte trop petit
- champs ou navigation sous forme d'image

## 20. Composants business

Modules recommandés :

- bloc offre
- bloc lieu / espace
- bloc chiffres clés
- bloc témoignage
- bloc équipe
- bloc contact
- bloc téléchargement
- bloc réassurance

Chaque module doit contenir :

- un rôle clair
- un titre court
- un texte utile
- une action si nécessaire
- une couleur de marque utilisée comme accent

## 21. Handoff design & dev

### Figma

Structure recommandée :

- variables couleur
- variables spacing
- styles typographiques
- composants avec variants
- templates de pages
- exemples Do / Don’t

### Code

Structure recommandée :

- tokens CSS centralisés
- composants HTML/CSS réutilisables
- classes de variantes explicites
- documentation des états
- aucun style critique isolé dans une page

### Versioning

Chaque évolution doit indiquer :

- ce qui change
- pourquoi cela change
- quel composant est impacté
- quelles pages doivent être vérifiées
- si le changement est breaking ou non