Mission
Créer un oasis de fraternité authentique où chacun peut entendre l'appel du Christ, libérer sa parole et rencontrer l'autre dans le respect et la joie.
Design Authority & Support Com'
Les fondations visuelles, pastorales et de communication d'Effata
Vision Pastorale
Au cœur d'Effata, une mission claire et fédératrice.
Valeurs Fondamentales
- Écoute : Sortir de nos surdités intérieures
- Parole : Libérer son témoignage
- Rencontre : Vivre l'authentique fraternité
Effata = « Ouvre-toi ! »
Tiré de Marc 7:34, ce mot araméen résume notre vocation : ouvrir nos oreilles, nos cœurs et nos mains à la grâce du Christ et à la fraternité véritable.
Trois Piliers de la Fraternité
Prière & Louange
Un temps de reconnexion avec le Seigneur, dynamique et authentique.
Enseignement & Partage
Nourrir la foi par la Parole de Dieu et les témoignages des frères.
Communauté & Service
Vivre la fraternité concrète et mettre nos talents au service du groupe.
Stratégie de Com' & Objectifs
Pourquoi et comment nous communiquons la vision d'Effata.
La dynamique Missionnaire
« Le GP nous nourrit et nous rapproche du Christ => À notre tour de proclamer la Bonne Nouvelle ! »
Une jolie présentation c'est plus accueillant, et on a plus envie de venir. L'objectif est de structurer la communication pour les événements organisés (raclette, soirées témoins...).
Les mots de la Team Com'
« On nous a dit qu'il fallait qu'on parte en mission pour répandre la bonne nouvelle. Et elle se répand aussi bien avec un appareil photo, un super logo et une com d'enfer ! L'intérêt c'est de faire de la com' sur Jesus le goat. »
Notre Identité Visuelle
Notre communication doit refléter notre appartenance à la Communauté de l'Emmanuel (charismes, louange), notre ancrage local (Saint Marc), et notre cible (étudiants & jeunes pros), dans un esprit de fraternité et d'accueil radical.
L'Inspiration Fondatrice
"Nous ne devons pas rester en disant « Seigneur, Seigneur ! », mais nous devons agir, en aimant en acte, mais aussi en vérité; c'est cela l'essentiel ! Il faut annoncer le Seigneur parce que nous avons reçu un Esprit de Pentecôte, un Esprit de puissance et de hardiesse [...]. Parce que si nous restons bien au chaud, gentiment dans nos communautés, on pourrira dans nos communautés."
— Pierre Goursat (Enseignement à Paray le Monial, août 1979)
Nos Livrables et Canaux
Identité & DA : Logo, Charte Graphique, Photos de profil des groupes WhatsApp.
Visibilité : Planning mensuel, posters et flyers de présentation/pub.
Réseaux Sociaux : Stories et posts ponctuels (à discerner pour un compte Instagram dédié).
Goodies : Vêtements (pulls) avec logo et surnoms pour la cohésion.
Ancrage Paroissial : Pitch du GP, annonces sur le site de la paroisse, FIP.
Palette de Couleurs
Chaque couleur a une intention et une utilisation définie.
Chargement de la palette...
Codage des Sections & Événements
Rouge (Bordeaux) : Identité, actions principales, appels à l'action.
Bleu (Ciel) : Information, horaires, détails pratiques, liens doc.
Ambre (Soleil) : Ambiance, vie communautaire, moments conviviaux.
Violet (Royal) : Responsables, accès sécurisé, administration.
Menthe (Fraîcheur) : Succès, confirmations, validation, feedback positif.
Crème (Sable) : Fond chaud, sections alternées, confort visuel.
Hiérarchie de Texte
Poppins pour une modernité accueillante et lisible.
Titre H1 - Hero Title
Poppins 800 • Clamp(2.2rem, 5vw, 3.5rem) • Interlettrage -0.02em
Titre H2 - Section Header
Poppins 800 • Clamp(1.8rem, 3.5vw, 2.6rem) • Line-height 1.1
Titre H3 - Sous-titre
Poppins 700 • 1.3rem • Conteneurs de contenu (Cards/Panels)
Texte en gras pour l'emphase (Poppins 600 ou 700)
Paragraphe régulier pour le contenu corps.
Poppins 400 • 16px (1rem) • Line-height 1.6 • Couleur #2a1a1a
Poppins 700 • 0.65rem • Uppercase • Letter-spacing 0.14em
Système de Composants
Éléments réutilisables pour construire l'expérience Effata.
Boutons (CTA)
Le vecteur principal d'action. Cliquez sur le code pour copier le sélecteur CSS.
.btn.btn-red
.btn.btn-purple
.btn.btn-blue
.btn.btn-outline
.btn.btn-sm
.btn.btn-mint
Tags (Catégories)
Identification rapide des sections. Contrastes optimisés pour l'accessibilité.
Identité
.tag-red
Horaires
.tag-blue
Ambiance
.tag-amber
Contact
.tag-purple
Cards (Conteneurs)
Regroupement logique d'informations.
En fraternité avec le Christ !Devise d'Effata
.about-quote-card
Card Vision
Idéal pour les piliers et valeurs.
.vision-card
Layouts & Sections
Organisation spatiale et rythme visuel des contenus.
Alternance des Fonds (Zebra-striping ++)
Pour séparer visuellement les thématiques, nous alternons les couleurs de fond des sections.
Utilisez les classes section--[couleur] pour un rythme riche.
section--white
section--cream
section--blue
section--amber
section--mint
section--purple
Asymétrique : Texte + Visuel (Grid 60/40)
Utilisé sur la page Accueil (About). Inversion possible sur mobile.
Card / Quote / Image
espace-responsable : Sidebar + Main Shell
Structure pour l'Espace Responsable. Menu fixe à gauche sur desktop.
Contenu Admin
Cas d'Utilisation
Application concrète du système sur chaque page du site.
Génération des pages de référence...
Accessibilité & Bonnes Pratiques
Effata est inclusif : tout le monde doit pouvoir accéder à la fraternité.
Contraste Couleur
Ratio ≥ 4.5:1 pour le texte. Les tags Ambre et Menthe utilisent du texte sombre (#1a0808) pour garantir une lisibilité parfaite sur fond clair.
Navigation au Clavier
Support complet du Tab, Enter et Space. États de focus visibles. Les éléments interactifs (boutons, liens, codes) sont clairement identifiés.
Responsive Design
Fluidité de 320px à 1100px. Utilisation de clamp() pour la typographie
et de grilles auto-adaptatives.
Sémantique HTML
Usage strict de header, main, section, article.
Rôles ARIA pour les éléments iconographiques.
Assemblage Type
Comment les composants collaborent pour créer une page cohérente.
Évolution & Maintenabilité
Comment ce système peut croître avec Effata.
Phase 1
Présentation & Inscription
Site de présentation, calendrier public, formulaire d'inscription.
Phase 2
Espace Responsable
espace-responsable de gestion, ajout/modification d'événements, accès securisé.
Phase 3
Ressources & Partage
Drive numérique, documents partagés, bibliothèque de prières.
Phase 4
Communauté Avancée
Forum privé, chat, annonces, galeries d'événements passés.
Principes de Maintenabilité
- CSS Centralisé : Toutes les couleurs dans :root, faciles à ajuster.
- Composants Réutilisables : Classes génériques (btn, card, tag) utilisables partout.
- HTML Sémantique : Structure logique, pas de divs inutiles.
- TypeScript : Typage fort pour éviter les bugs lors d'évolutions.
- Pas de Framework Lourd : HTML + CSS + TS vanille = rapid iteration.
Logos & Concepts
Les assets visuels et concepts de logos extraits de la présentation.
Logo Principal du Site
La proposition retenue comme logo principal (Variation 1).
Concepts de Logo (Présentation)
Les véritables propositions de logo issues de la réflexion de la Team Com'.
Chargement des concepts...
Règles d'Usage des Logos
- Couleur principale : Toujours utiliser
#AF0606(rouge bordeaux) comme couleur signature. - Zone de protection : Laisser au minimum 1× la hauteur du logo de marge autour.
- Formats : Privilégier les SVG vectoriels en prod, utiliser les PNG pour maquettes.
- Fond : Privilégier un fond blanc, crème ou sombre selon le contexte.
- Accessibilité : Toujours fournir un
altdescriptif sur les<img>.