palette
Cette page recense les styles du site beegin : titres, textes, blocs de couleur, appels à action et boutons. Pour réutiliser un style, recopiez la classe indiquée sous l’exemple dans le champ « Classe(s) CSS additionnelle(s) » du bloc, onglet Avancé. Les classes se combinent, séparées par un espace.
couleurs
Les couleurs sont déclarées dans theme.json : elles apparaissent dans le panneau Couleur de chaque bloc. Les couleurs d’accent servent aux pictos, pilules et données.
Noir
#1D1D1B
has-noir-background-color
Sarcelle
#008C84
has-sarcelle-background-color
Turquoise
#6EC3BF
has-turquoise-background-color
Turquoise pâle
#E4F4F3
has-turquoise-pale-background-color
Fond clair
#F6F7F7
has-fond-clair-background-color
Blanc
#FFFFFF
has-blanc-background-color
Gris texte
#5B5B58
has-gris-texte-background-color
Accent vert
#7DC18A
has-vert-background-color
Accent ocre
#B68E40
has-ocre-background-color
Accent bleu
#6B7AB9
has-bleu-background-color
Accent orange
#E95F1C
has-orange-background-color
Accent jaune
#FFEB33
has-jaune-background-color
Accent rose
#F29AC3
has-rose-background-color
Accent prune
#541A41
has-prune-background-color
Accent rouge
#D80D33
has-rouge-background-color
mise en forme du texte
La mise en forme rend le texte plus lisible et aide les moteurs de recherche à comprendre la structure de la page. Ce paragraphe d’introduction utilise le style « chapô ».
Classe : intro
les titres
Il existe six niveaux de titres. Le titre 1 est unique : c’est le titre de la page. Les niveaux suivants doivent se suivre logiquement, sans en sauter.
titre de niveau 1
Classe : h1
titre de niveau 2
Classe : h2
titre de niveau 3
Classe : h3
titre de niveau 4
Classe : h4
titre de niveau 5
Classe : h5
titre de niveau 6
Classe : h6
Pour qu’un titre en garde l’apparence sans en avoir le niveau, choisissez la taille « Titre XL / L / M / S / XS » dans Typographie → Taille.
les paragraphes
Chaque territoire est un écosystème vivant, fait de ressources, de pratiques, de récits et de cultures. Un mot peut être mis en gras pour insister, ou en italique pour nuancer. Les liens sont soulignés et en sarcelle, comme ce lien vers le manifeste.
Un réacteur doux : il ne force pas le changement, il crée les conditions de son émergence.
Classe : accent
1,73 Terres
Classe : chiffre
Sources : Planetary Health Check 2025 (PIK) · Global Footprint Network, 2026
Classe : petit
le constat
Style de bloc : Surtitre (pilule)
les listes
Une liste à puces énumère des éléments sans ordre. Une liste numérotée suit un ordre : des étapes, un classement.
liste à puces
- les rencontres entre acteurs
- les expérimentations collectives
- la formation des Agents Régénérateurs
- la mise en récit des transformations
Classe : liste-pilule
liste numérotée
- comprendre son territoire
- relier les acteurs
- expérimenter
- passer à l’échelle
Classe : liste-numerotee
liste « + »
- traverse les crises sans rompre
- privilégie la résilience
- vise l’utilité réelle
- se mesure à la justesse
Classe : liste-plus
la performance fragile
- optimise à court terme
- réduit les marges de sécurité
- se fragilise face aux chocs
- déplace les problèmes plutôt que de les résoudre
Style de bloc : Puces « – »
- agilité
- cultures locales
- autonomie
- meilleure résilience
Style de bloc : Pastilles à point
les citations
Pour mettre en avant les propos d’une personne ou une phrase clé.
La question n’est plus seulement écologique. Elle est civilisationnelle : comment continuer à développer les activités humaines sans détruire les conditions qui les rendent possibles ?
beegin, manifeste
Classe : citation-pilule
« Faire émerger la juste innovation et faciliter son appropriation par les citoyens et les organisations pour régénérer les écosystèmes et notre économie, et redonner enfin espoir aux jeunes générations. »
notre mission
Style de bloc : Citation carte
beegin s’inscrit dans cet espace : favoriser le passage à l’échelle des initiatives à visée régénérative, en recomposant des systèmes locaux.
Classe : accent beegin-accent-pilule
donner du style et des couleurs
Des styles prédéfinis, conformes à la charte beegin, s’appliquent aux groupes et aux colonnes. Les classes se combinent : par exemple « bloc couleur sarcelle rayon ».
bloc avec fond sarcelle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Un lien dans le texte reste lisible sur ce fond.
Classe : bloc couleur sarcelle
bloc avec fond turquoise
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Un lien dans le texte reste lisible sur ce fond.
Classe : bloc couleur turquoise
bloc avec fond turquoise pâle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Un lien dans le texte reste lisible sur ce fond.
Classe : bloc couleur pale
bloc avec fond clair
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Un lien dans le texte reste lisible sur ce fond.
Classe : bloc clair
bloc avec fond sombre
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Un lien dans le texte reste lisible sur ce fond.
Classe : bloc sombre
bloc avec grand arrondi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Un lien dans le texte reste lisible sur ce fond.
Classe : bloc couleur sarcelle rayon
bloc avec contour solide
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Un lien dans le texte reste lisible sur ce fond.
Classe : bloc contour
bloc avec contour en tirets
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Un lien dans le texte reste lisible sur ce fond.
Classe : bloc contour tirets
bloc avec contour en pointillés
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Un lien dans le texte reste lisible sur ce fond.
Classe : bloc contour pointilles
bloc avec double contour
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Un lien dans le texte reste lisible sur ce fond.
Classe : bloc double contour
bloc avec une ombre
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Un lien dans le texte reste lisible sur ce fond.
Classe : bloc ombre
bloc avec fond transparent
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Un lien dans le texte reste lisible sur ce fond.
Classe : bloc transparent
cartes
Six modèles de cartes, tous des blocs Groupe avec un style de bloc (panneau Styles) ou une classe.
7 sur 9
limites planétaires franchies
La 7e, l’acidification des océans, l’a été en 2025.
Style de bloc : Carte chiffre clé
l’alimentation
30 %
des terres agricoles produisent une nourriture perdue ou gaspillée.
Style Carte + classe beegin-accent--vert
01
limiter
réduire les impacts négatifs
Classe : beegin-etape
studio de design régénératif
Explorer les potentialités de votre écosystème, éco-concevoir systèmes, produits et services.
Style de bloc : Carte contour
PME et ETI
entreprises
Vous voulez transformer vos obligations et la pression de vos donneurs d’ordre en trajectoire robuste.
- une lecture systémique de votre chaîne de valeur
- des offres régénératives co-conçues
- une trajectoire mesurée, sans greenwashing
Style de bloc : Carte turquoise pâle
ecodomeo × ehotil : un assainissement circulaire
Des toilettes à séparation, sans eau ni infrastructure lourde : 100 % des urines valorisées.
~9,75 M€
de valeur créée par an pour une ville de 100 000 habitants
Style Carte + classe beegin-carte--cas
fonds de section
Chaque section de page est un Groupe pleine largeur avec la classe beegin-section (marges 120/96 px sur ordinateur, 64/24 px sur mobile) et une couleur de fond choisie dans le panneau Couleur. Règle : jamais deux fonds identiques côte à côte.
titre de section
hero, vision, sections de fin
Classe : beegin-section + fond sarcelle
titre de section
constat, agir ensemble, footer
Classe : beegin-section + fond noir
titre de section
transition, ancrage territorial
Classe : beegin-section + fond turquoise
titre de section
contenus denses, grilles de cartes
Classe : beegin-section + fond fond-clair
titre de section
sections neutres, pour qui
Classe : beegin-section + fond blanc
titre de section
présentation, fiches
Classe : beegin-section + fond turquoise-pale
blocs & boutons call to action
Un appel à action est un groupe qui réunit un titre, un sous-titre optionnel, un court texte et un bouton. Le texte est à gauche, le bouton à droite, avec 30 px d’écart.
titre de l’appel à action
sous-titre optionnel
Le problème n’est pas un maillon défaillant, c’est la conception d’ensemble. Une phrase courte suffit pour donner envie de cliquer.
Classe : appel-a-action sombre + bouton coul-2
titre de l’appel à action
sous-titre optionnel
Le problème n’est pas un maillon défaillant, c’est la conception d’ensemble. Une phrase courte suffit pour donner envie de cliquer.
Classe : appel-a-action couleur sarcelle + bouton coul-3
titre de l’appel à action
sous-titre optionnel
Le problème n’est pas un maillon défaillant, c’est la conception d’ensemble. Une phrase courte suffit pour donner envie de cliquer.
Classe : appel-a-action clair + bouton coul-1
premiers pas
écrivons ensemble votre première partition
Un premier échange suffit pour lire vos enjeux et identifier une première étape.
Classe : beegin-cta-section
boutons
Les boutons sont des blocs Bouton. Un seul bouton principal par écran ; les autres sont secondaires. La classe se met sur le bloc Bouton.
Classe : bouton coul-1
Classe : bouton petit coul-1
Classe : bouton coul-2
Classe : bouton coul-4
Classe : bouton coul-3
Classe : bouton coul-5
Classe : bouton lien
images et contenus divers
Les illustrations sont des gravures botaniques de la charte, insérées dans un bloc Image. Elles ne sont jamais déformées.
Légende de l’image : gravure « branche ».
Classe : illustration
Légende de l’image : gravure « fleurs », version blanche.
Classe : illustration
Le logo beegin, version noire.
Classe : logo
Le blason beegin, pour les signatures et le footer.
Classe : beegin-blason
étiquettes
Pour classer un contenu par domaine, format ou rubrique. Ce sont des blocs Bouton.
Classe : etiquette
Classe : etiquette sarcelle
Classe : etiquette sombre
Groupe beegin-etiquettes + style de bloc Étiquette pleine
espacements & rayons
Gouttière unique entre colonnes et blocs : 30 px. Les espacements sont proposés dans les réglages Dimensions de chaque bloc : 8, 16, 24, 30, 32, 48, 64, 96 et 120 px (les trois derniers s’adaptent à l’écran).
rayon carte — 24 px
Classe : bloc
rayon grand — 40 px
Classe : bloc rayon
Boutons et étiquettes