Design System / Fondations

Design system Feve

Chaque vignette rend un composant réel du site : mêmes classes, mêmes tokens. On change un token, tout le site suit.

Fondations

couleurs, typo, espacements
Tokensvariables globales

Couleurs, tailles, espacements et rayons vivent dans les variables globales. Les valeurs ci-dessous sont lues dans le CSS rendu au moment de l'affichage, elles ne peuvent pas dériver.

Couleurs

Le token primary bascule selon l'espace (Investisseur par défaut, Installation, Transmission) ; le reste de la palette est constant.

brand

#004757, espace Investisseur

primary

#004757, bascule selon l'espace

primary-hover

#276374, survol

accent

#ffeb83, espace Installation

accent-soft

#fff4bb, survol jaune

transmission

#bddfd3, espace Transmission

cream

#edebe7

muted

#f6f6f7

background

#ffffff

border

#e6e4e0

muted-foreground

#414141, texte secondaire

foreground

#1d1d1d

Typographie

Display : Mazius italique (titres, grands chiffres). Corps : Open Sauce Sans. Échelle Tailwind, valeurs mobiles automatiques.

text-sm, 14px

Fermes En Vie, foncière solidaire

text-base, 16px

Fermes En Vie, foncière solidaire

text-2xl, 24px

Fermes En Vie

text-4xl, 36px (30 en mobile)

Fermes En Vie

text-5xl, 48px (36 en mobile)

Fermes En Vie

text-6xl, 60px (40 en mobile)

Fermes En Vie

Espacements

Échelle space-1 (4px) → space-20 (80px), câblée aux gaps et aux paddings.

gap-4, 16px

gap-8, 32px

gap-12, 48px

Rayon : token unique radius = 8px, appliqué aux cartes, boutons, images et vidéos. Pills : 9999px.

Éléments

6 atomes
Boutonsui-btn

Une seule classe ui-btn, une variante par rôle. La couleur suit l'espace de la page, on ne la choisit pas au cas par cas.

Je m'installeJ'investisJe transmetsJe souscrisAction secondaire

La même is-cta sur un bandeau de marque

Son token bascule pour rester lisible quel que soit l'espace : jaune sur teal, encre sur jaune, teal sur menthe.

Variante is-link

Le lien d'action en fin de bloc. Même soulignement que le lien inline, plus un chevron.

Icônesui-icon, Lucide

16px par défaut, is-lg à 24px, trait en currentColor : l'icône prend la couleur du texte qui l'entoure. Une vingtaine d'icônes Lucide vivent dans le groupe ui/icons.

Badgeui-badge

Étiquette de statut ou de catégorie, non cliquable. Pour un filtre cliquable, prendre le chip.

Foncière solidaire

Installation

Transmission

Brand

Chips et filtresui-chip

Filtre cliquable des listes (magazine, événements). Pour une étiquette qui ne se clique pas, prendre le badge.

WebinairePodcastTransmission
Lien inlineui-link

Le lien dans le texte courant : souligné à 40 % au repos, plein au survol, la couleur ne bouge pas. Même traitement que ui-btn is-link, qui lui porte un chevron et se pose en fin de bloc.

Les chiffres proviennent de la consultation publique d'avril 2026.

Souligné éditorialui-underline

Trait manuscrit sous un titre Mazius. Réservé aux titres de section, jamais dans du texte courant.

Titre souligné accent

Titre souligné mint

Composants

vrais composants natifs
Content CardContentCard
Info CardInfoCard
Carte de texte sans image, sur fond crème, pour les grilles d'arguments.

Un modèle gagnant-gagnant

FEVE achète la ferme et la loue en bail rural de long terme à des agriculteurs sélectionnés pour leur projet agroécologique.

En savoir plus

TestimonialTestimonial, Invest + Secondary
Citation d'une personne, avec son nom, son rôle et sa photo ou son monogramme.

Grâce à FEVE, j'ai pu m'installer sur une ferme que je n'aurais jamais pu financer seule. Un vrai projet de vie.

M
Marie Dupont
Maraîchère installée en 2023

Grâce à FEVE, j'ai pu m'installer sur une ferme que je n'aurais jamais pu financer seule. Un vrai projet de vie.

M
Marie Dupont
Maraîchère installée en 2023
Process StepsProcessSteps
Suite d'étapes numérotées, jusqu'à quatre, qui prend les couleurs de l'espace de la page.
1

Déposez votre projet

Vous nous partagez votre projet d'installation agricole en quelques minutes.

2

Étude du projet

Nos équipes étudient la viabilité économique et agronomique de la ferme.

3

Financement citoyen

La ferme est financée par la communauté d'investisseurs solidaires FEVE.

4

Installation

Vous vous installez en bail rural et démarrez votre activité agroécologique.

FAQFaqItem
Question dépliable en details/summary natif, sans JavaScript, à empiler dans un conteneur ui-faq.

Comment fonctionne l'investissement chez FEVE ?

Vous investissez dans une foncière solidaire qui achète des fermes et les loue à des agriculteurs en bail rural environnemental de long terme.

Comment fonctionne l'investissement chez FEVE ?

Vous investissez dans une foncière solidaire qui achète des fermes et les loue à des agriculteurs en bail rural environnemental de long terme.

Comment fonctionne l'investissement chez FEVE ?

Vous investissez dans une foncière solidaire qui achète des fermes et les loue à des agriculteurs en bail rural environnemental de long terme.

Bullet Listui-list
Liste dont chaque item porte une icône Lucide en marqueur. Jamais d'émoji à cette place.

  • Labellisée ESUS et Finansol, agréée par l’AMF

  • Accessible dès 500 €, sans frais d’entrée

Bullet List, variante texteui-list-item is-bulleted
La même liste avec une puce ronde à la place de l'icône, quand les items sont de simples libellés.

  • Présentation de FEVE

  • Présentation de La Grange

  • Questions / réponses

Tabsui-tabs-list
Onglets et leur panneau, pour des contenus de même nature qu'on lit séparément.

Rapports d’activité

Rapports d’impact

Documents

Chaque semestre, un rapport d’activité fait le point sur les fermes financées : jalons atteints, chiffres clés et prochaines étapes.

Stats BannerStatsBanner
Bandeau de trois chiffres clés et de leurs légendes, en Mazius sur fond de marque.
+120

fermes financées

8 000

hectares en agroécologie

15 000

citoyens investisseurs

Sections

vrais composants natifs
Hero v2Hero v2, 7 variantes (+ Split/Accent), image / vidéo / slot, checklist, note, 3 actions, hooks JS
Le héros du site : huit variantes, un média image, vidéo ou libre, jusqu'à deux boutons et un lien.

Donnez vie à votre projet agricole

FEVE finance les terres et bâtiments pour vous permettre de vous installer dans de bonnes conditions.

Tester mon éligibilitéDécouvrir le financement
Ferme agroécologique financée par FEVE

Une ferme accompagnée par FEVE

Voyez concrètement l’impact de votre épargne

Découvrez en vidéo comment l’épargne citoyenne finance une nouvelle génération de fermes agroécologiques.

Investir avec FEVE

Comprendre FEVE en 1 minute

https://player.vimeo.com/video/887594080?dnt=1
Découvrez FEVE en vidéo

Rendre la terre agricole accessible à celles et ceux qui la cultivent

Un Hero éditorial peut fonctionner sans média et sans action, sans conserver de colonne vide.

Le hero complet : checklist, note et lien

<ul><li>Variante Split / Accent — fond accent-soft, CTA repassé en teal</li><li>Checklist richText à coches Lucide (marqueur en currentColor)</li><li>Trois actions indépendantes : CTA, bouton secondaire, lien</li></ul>
CTA principalBouton secondaireLien complémentaire indépendant (hook JS possible)
La note s'affiche sous les actions : mention légale, astérisque, délai…
https://player.vimeo.com/video/978202951?title=0&byline=0&portrait=0
Vidéo portrait 9:16 — toujours vérifier le ratio natif
Section HeaderSectionHeader
Titre de section en Mazius, avec un sous-titre optionnel.

Les dernières fèves installées

Découvrez les fermes financées par FEVE partout en France.

CTA BannerCtaBanner
Bande d'appel à l'action d'avant-pied de page, sur fond de marque, jusqu'à deux boutons.

Prêt à donner du sens à votre épargne ?

Rejoignez les 15 000 citoyens qui financent l'installation de la nouvelle génération agricole.

Découvrir l'investissement
Logo Stripui-logo-strip
Rangée de logos partenaires, en gris jusqu'au survol qui leur rend leur couleur.
Videoui-video
Vidéo en cadre portrait, affichée par son poster et son bouton de lecture, ouverte en lightbox.
Aperçu vidéo Feve (format vertical)
▶
Proseui-prose
La mise en forme du rich text du CMS : titres, listes, citations, liens et images d'article.

Titre de niveau 2

Le style Prose met en forme le contenu riche du CMS : titres, paragraphes, listes et citations, tous dérivés des tokens.

Une citation éditoriale en Mazius italique.

Un intertitre h3 pour structurer l'article

Un paragraphe avec du texte en gras et un lien inline vers une page, souligné à 40 % au repos et plein au survol.

  • Une liste à puces héritée du rich text CMS
  • Chaque item garde le rythme vertical de la prose
  • Et les puces reprennent la couleur du texte
  1. Les listes numérotées sont stylisées aussi
  2. Avec la même indentation
  3. Et les mêmes espacements

Un h4 de fin de hiérarchie

Sous un h4, le paragraphe garde son interlignage, et une image insérée dans l'article prend toute la largeur de la colonne avec un rayon de 8 px :

Une ferme financée par FEVE
Article Header
ArticleHeader
En-tête d'article du CMS : auteur, date de mise à jour, titre, description et image.
Nora Leon

-

Mis à jour le

28/7/2026

Partir en vacances à la ferme

Certains partent en Bretagne, d'autres en Occitanie. La nouvelle tendance voyage, c'est l'agritourisme.

Vaches au pâturage dans une ferme partenaire
Media FrameMediaFrame, lpr-media-row / lpr-media-content
Cadre image qui ne dépasse jamais la hauteur de la colonne de texte posée à côté.
Une ferme financée par FEVE

📝 Je vérifie mon éligibilité

Je remplis le formulaire et si je valide les premières conditions, j'échange avec l'équipe FEVE lors d'un rendez-vous de 30 minutes.

📤 J'envoie mon dossier à FEVE

Si mon projet répond aux critères et à la charte agroécologique de FEVE, j'envoie un dossier plus détaillé et chiffré.

🏡 Je visite la ferme

J'organise une visite avec un membre de l'équipe FEVE et la personne cédante, pour présenter la ferme et partager les infos clés.

📊 Mon dossier est étudié en comité

J'envoie mon prévisionnel économique et FEVE approfondit l'étude pour la présenter au comité d'investissement des foncières.

Financeurs BannerFinanceursBanner, 2 variantes
Bandeau des financeurs institutionnels, en deux variantes de six ou quatre logos.

La Banque des Territoires et les fonds solidaires (qui investissent dans l’ESS) de Mirova, du Crédit Mutuel et du Crédit Coopératif (Ecofi), le fonds Entrepreneurs du Vivant (France 2030) ainsi qu’Allianz ont investi ensemble plus de 10 M€.

logo Banque des Territoires

Hors catalogue

à voir sur le site
Composants non montrables icichrome + gabarit CMS

  • FloatingSessionLauncherInvest (8 instances) : lanceur flottant des sessions Invest. À voir sur /investir.

  • FloatingNewsletterLauncher (3 instances) : lanceur newsletter flottant. À voir sur /le-mag.

  • FloatingSessionLauncherInstallation (2 instances) : lanceur des sessions installation. À voir sur /installation.

  • HeroPartenaireCMS (1 instance) : hero du gabarit Partenaires, contenu et images pilotés par le CMS. À voir sur une page /partenaires/*.

Ces quatre composants existent bien au design system mais ne peuvent pas être présentés dans une vignette : les trois lanceurs sont en position fixe et embarquent leur propre script (ils se poseraient par-dessus ce catalogue, et leurs modales n'existent pas sur cette page), et le hero Partenaires tire son contenu du CMS de son gabarit.

Technique

invisibles
Composants invisiblesgroup : chrome

  • FaqEnhancer : anime l'accordéon FAQ, à poser sur toute page qui a une FAQ.

  • ProseStyles : met en forme les articles et le rich text (classe ui-prose).

  • NavbarEnhancer : animations du menu, déjà intégré à la navbar.

  • LpStylesBridge : aligne les boutons des sections LP collées sur le DS.

  • LpMetricsHook : injecte les chiffres clés en direct depuis l'API.

  • DialogDownloadGuide : la modale de téléchargement du guide investisseur.

La navbar et le footer sont déjà au design system. Cette page de catalogue n'affiche pas le chrome du site : il se vérifie sur n'importe quelle autre page.

Design System Feve, catalogue v2. Le menu, le footer et les sections de contenu spécifiques ne figurent pas : ce sont des instances, pas des composants de catalogue.

Hero Campagne

ui/HeroCampagne, ui-hero-campagne-*
ui/HeroCampagne 9 props, responsive intégré aux classes
Hero de LP campagne : photo plein cadre, voile dégradé, titre sans-serif blanc (multiligne via \n dans la prop), sous-titre cyan, badge à pastille ✓ masquable, CTA ui-btn et lien secondaire, rangée réassurance Finansol/ESUS et widget avis Google cliquable (embed statique). 9 props : Titre, Sous-titre, Description, Label/Lien CTA, Label/Lien secondaire, Badge, Afficher le badge. Depuis le 2026-08-17, le responsive (tablette et mobile) vit dans les breakpoints des classes : le composant s'instancie seul sur n'importe quelle page. L'embed « enhancer » des LP n'apporte plus que les comportements JS (lightbox, compteurs, auto-resize, ancres) et quelques règles à sélecteurs complexes. ⚠️ Les valeurs des props link se posent au Designer. Démo grandeur nature :
Des billets râpés sur une assiette de pâtes

Les billets ne se mangent pas

Alors investissez dans l'agriculture française dès 500 €.

FEVE mobilise l'épargne de milliers de citoyens pour financer des fermes partout en France et permettre à des agriculteurs de produire une alimentation bio.

Un rendement à 2 % et une réduction d'impôt de 25 %

Commencer mon investissementSimuler mon investissement →
Label Finansol Finansol
Agrément ESUS ESUS
5,0· 65 avis

Blocs LP

5 composants, 4 montrables ici
Blocs des LP campagne Billets / Conversion

Ces cinq blocs viennent des landing pages campagne. Ils sont responsives par leurs classes, sans embed. StepsGrid n'a pas de vignette ici : c'est une grille à 4 colonnes dont le contenu passe par un slot, que l'API sait créer mais pas remplir. Chaque bloc ci-dessous porte son nom et sa classe.

StepCard
ui-lp-step-card
Carte d'étape numérotée des LP. Se dépose dans le slot de StepsGrid, au Designer : l'API crée un slot mais ne sait pas le remplir.
Investir dans la foncière FEVE

1

Investir

Vous investissez dans la foncière FEVE, à partir de 500 €.

StatsBannerCampagne
ui-lp-stats
Bandeau sombre à quatre compteurs sans props, alimentés par l'API metrics. Distinct de StatsBanner, qui est statique et sur fond de marque.

0

Millions d'euros collectés auprès de 3 700 citoyens

0

Fermes financées avec l'épargne citoyenne

0

Agriculteurs et agricultrices installés

0

Hectares amenés vers une démarche bio

TemoinVideo
ui-lp-temoin
Carte témoignage dont la photo ouvre la vidéo Vimeo en lightbox.
Gilles Moncaubeig, investisseur chez FEVE

« Que vaudra le fait de pouvoir se nourrir dans dix ans ? Produire vertueusement, en local, devient essentiel. »

Gilles Moncaubeig, investisseur depuis 2021

997778006

Lire le témoignage vidéo de Gilles Moncaubeig

FarmCard
ui-lp-farm
Intérieur d'une carte ferme. Se pose dans un LinkBlock ui-lp-farm, pour que le lien reste éditable par l'API.
La ferme de la Naussannaise

📍 Dordogne (24)

🌱 47,8 ha

La ferme de la Naussannaise

Grandes cultures, ovin viande, maraîchage

Découvrir la ferme →