Reborn & Be
L’écosystème Be gagne en lisibilité.
Une charte commune pour passer d’un univers tiers-lieux à un positionnement d’opérateur urbain plus structuré.
Logos
Un signe commun, des accents par marque.
Chaque logo reprend le shape commun et le nom de marque en Barlow Condensed. La structure reste identique, seule la couleur d’accent change.
Reborn & Be
Be-Cosmo
Be-Cosmo
Be-Spaces
Be-Spaces
Be-Village
Be-Village
Be-Coworking
Be-Coworking
Be-Services
Be-Services
Be-Numerik
Be-Numerik
Be-Club
Be-Club
Be-Franchise-lab
Be-Franchise-lab
Be-Formation
Be-Formation
Campus 112 & Be-Tiers-Lieux
Ces deux marques gardent une expression logo à part. Elles restent dans l'écosystème, mais ne suivent pas la structure shape + nom des autres marques.
Campus 112
Be-Tiers-Lieux
Campus 112 assume une identité plus colorée.
Le logo Campus 112 contient déjà son système : un mot-symbole noir très lisible et une colonne de douze couleurs. Cette section propose une utilisation plus riche de cette palette, tout en gardant le noir et le blanc comme base d'interface.
#FD9D24
#0A97D9
#8E44AD
#DD1367
#26BDE2
#A21942
#4C9F38
#00689D
#FD6925
#DDA63A
#C5192D
#3F7E44
Noir, blanc, fond clair
Le noir du logo pilote les titres, la navigation, les textes importants et les CTA premium. Le blanc et le fond clair gardent la page respirante.
Doré Campus
Le doré #DDA63A devient l'accent principal : boutons secondaires, repères de section, focus éditorial, pictogrammes et liens de téléchargement.
Bande multicolore
Les douze couleurs servent aux modules de programme, aux catégories, aux repères de navigation et aux grands moments de marque.
Présenter les usages Campus 112.
Les visuels du dossier Campus peuvent être utilisés pour distinguer les grandes prises de parole : entreprises, étudiants, événementiel et living lab.
Campus entreprises
Campus étudiants
Campus événementiel
Campus living lab
- utiliser la bande complète pour signer une section Campus 112
- associer une couleur à un programme, un parcours ou une catégorie
- garder le texte long en noir sur blanc ou fond clair
- réserver les aplats colorés aux blocs courts et aux données clés
- remplacer le noir du logo par une couleur secondaire
- poser du texte long sur des couleurs saturées
- mélanger plusieurs couleurs dans un même bouton
- utiliser la palette complète comme fond de page permanent
01
Vision de système
La charte transforme l'identité Reborn&Be en un outil de production : une base claire pour concevoir, documenter et décliner l'identité.
Clarté
L'information reste lisible, hiérarchisée et facile à scanner.
Contraste
Le blanc porte les contenus utiles, le dark marque les temps forts.
Système
Chaque composant peut être réutilisé sans recréer une esthétique.
02
Fondations visuelles
Une même structure, un même fond, une même typographie et une seule variable majeure par univers : la couleur d’accent.
Barlow en priorité pour toute l’interface, Inter en alternative pour la lisibilité et le Green IT.
- heading / paragraph16px
- paragraph / CTA40px
- module spacing120px
- border radius0px
03
Usages typographiques
La hiérarchie est portée par les graisses, les tailles et les espacements. Barlow reste la référence, Inter sert d'alternative technique.
Hero, statement, section de marque.
- Font
- Barlow ExtraBold
- Size
- 72-112px
- Line-height
- 0.92-1
Passer à un opérateur urbain plus structuré.
Barlow ExtraBold · 56px / 64px · titres expressifs, hero, messages courts.
Heading medium title
Barlow ExtraBold · 32px / 34px · titres de section, modules, accroches secondaires.
Surtitre ou label de bloc
Barlow Bold · 16px / 24px · surtitres, labels et petits titres de bloc.
Barlow Regular · 18px / 26px · paragraphes, contenus longs et descriptions. Une phrase utile par idée, sans réduire la taille sous le seuil de lisibilité.
Barlow Bold · 14-16px / 20px · boutons, liens d'action, appels à l'action.
À faire
- utiliser Barlow pour toute l'interface
- limiter la largeur des grands titres
- conserver une hauteur de ligne suffisante
- garder les boutons en Barlow Bold
À éviter
- superposer les spécimens typographiques
- multiplier les tailles sans logique
- créer des titres trop grands dans des cartes étroites
- porter la hiérarchie par des effets visuels
Sources
Barlow en priorité, Inter en alternative.
04
Tokens prêts à produire
La charte formalise les valeurs réutilisables pour passer d'une base visuelle à un système maintenable.
Color
--color-background: #F7F9FA;
--color-contrast: #142B38;
--color-accent: #0A97D9;
--color-line: rgba(20,43,56,.18);
Spacing
--space-8: 8px;
--space-16: 16px;
--space-40: 40px;
--space-section: 112px;
Typography
--font-primary: Barlow;
--font-fallback: Inter;
--display-line: 0.98;
--body-line: 1.5;
Shape
--radius-base: 0px;
--border-base: 1px solid;
--shadow-opacity: 0%;
--graphic-line: 1px;
--motion-fast: 160ms;
05
Territoires de marque
Chaque univers partage le même fond, la même couleur de contraste, la même structure. Seule la couleur d’accent change.
Be-Cosmo
#F7F9FA#142B38#FD9D24#FFF3E5#FED39C#AC6B18
Reborn & Be
#F7F9FA#142B38#0A97D9#E2F3FA#91D0EE#076794
Be-Spaces
#F7F9FA#142B38#8E44AD#F1E9F5#CCABDA#612E76
Be-Village
#F7F9FA#142B38#DD1367#FBE3ED#F095BB#960D46
Be-Coworking
#F7F9FA#142B38#26BDE2#E5F7FC#9DE1F2#1A819A
Be-Services
#F7F9FA#142B38#A21942#F4E3E8#D598AA#6E112D
Be-Club
#F7F9FA#142B38#00689D#E0EDF3#8CBBD3#00476B
Be-Franchise-lab
#F7F9FA#142B38#FD6925#FFEDE5#FEBC9D#AC4719
Be-Numerik
#F7F9FA#142B38#4C9F38#EAF3E7#AED4A5#346C26
Campus 112
#F7F9FA#142B38#DDA63A#FBF4E7#F0D7A6#967127
Be-Formation
#F7F9FA#142B38#C5192D#F8E3E6#E598A1#86111F
Be-Tiers-Lieux
#F7F9FA#142B38#3F7E44#E8F0E9#A9C5AB#2B562E
06
Les fonds sombres deviennent des moments de marque, pas des effets.
Ils servent les messages clés, les CTA, les introductions de page ou les blocs de synthèse. Le texte reste clair, les accents restent courts, la structure reste lisible.
Do
Texte clair, accent court, contraste élevé, contenu réduit.
Don't
Fond sombre décoratif, surcharge de couleurs, paragraphes trop longs.
07
Composants clés
Boutons, champs, cartes et navigation sont pensés comme des primitives réutilisables.
Buttons state & hover
Barlow Bold, radius 0px, hauteur stable, focus visible.
Textfields
Hauteur 47px, icônes 16x16px, fond blanc ou soft selon l'état.
Navigation
Hauteur 86px, actif en Barlow Bold, CTA à droite, ligne graphique commune.
Button states
Input states
Default
Hover
Filled
Focus
Error
Disabled
08
Iconographie & motion
Les détails d'interface doivent soutenir la lecture, pas décorer la page.
Icones
16x16px dans les champs, 24x24px dans les actions, 80x80px pour les modules illustrés.
Motion
- transition courte : 160ms
- hover discret : 1px de déplacement maximum
- focus visible obligatoire
- respect de prefers-reduced-motion
09
Patterns de page
La charte montre comment assembler les fondations dans des blocs utilisables.
Hero de page
Un titre court, un texte descriptif, un CTA principal et un signal visuel de marque.
DÉCOUVRIRBe-Spaces
Texte + image
Une structure adaptée aux blocs narratifs, avec le contenu et l'appel à l'action alignés à gauche.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt.
10
Templates de pages
Trois modèles pour montrer comment la charte peut passer en production sans repartir de zéro.
Identité, palette, logos, composants
Offre, bénéfices, preuve, CTA
Formulaire, contact, réassurance
11
Composants business
Des modules récurrents pour les pages réelles : offres, lieux, équipe, chiffres, témoignages et contact.
Bloc offre
Titre, bénéfice, liste courte, CTA.
Bloc lieu
Image, localisation, usages, action.
Bloc chiffres
Donnée clé, contexte, source.
Bloc équipe
Portrait, rôle, lien ou contact.
Témoignage
Citation courte, personne, preuve.
Contact
Formulaire simple, aide, CTA clair.
12
Accessibilité & Do / Don’t
La charte doit rester belle, mais surtout utilisable, lisible et robuste.
Accessibilité
- contraste élevé sur dark
- texte courant minimum 16px
- focus visible sur tous les liens
- zone cliquable minimum 44px
- pas d'information portée uniquement par la couleur
Do
Fond blanc dominant, accents courts, typographie lisible, modules espacés, composants codés.
Don’t
Superposer les titres, utiliser des ombres décoratives, mélanger toutes les marques, saturer les fonds.
13
Voice & tone
La charte doit aussi cadrer la manière d'écrire les titres, les CTA et les textes d'interface.
Titres
Courts, concrets, orientés bénéfice. Éviter les slogans longs et abstraits.
CTA
Verbes directs : Découvrir, Télécharger, Contacter, Explorer.
Texte courant
Une phrase utile par idée. Ton clair, professionnel, accessible.
14
Layouts modulaires
Les compositions sont pensées pour alterner densité, respiration et preuve visuelle.
15
Handoff design & dev
La charte doit pouvoir vivre dans Figma, dans le code et dans les process d'équipe.
Naming
Préfixer les composants par famille : Button, Field, Nav, Card, Section, Template.
Versioning
Documenter chaque changement de token, composant ou règle dans un changelog.
Figma
Créer variables, styles, composants et templates de page à partir des tokens du système.
Code
Centraliser les tokens CSS et éviter les valeurs isolées dans les pages.
Une charte qui peut devenir un produit interne.
La prochaine étape logique : transformer cette charte en bibliothèque Figma, tokens CSS et templates de pages réutilisables.